Wer sich mit der Erstellung von Webseiten oder Anwendungen auskennt, weiß, wie wichtig diese Komponente ist. Dies mag wie ein weiterer beängstigender Fachbegriff erscheinen, aber dieser Artikel wird Ihnen helfen zu verstehen, was es ist und wo es in den Designprozess gehört.

Ein Mockup ist das statische Design einer Webseite oder Anwendung. Ein Mockup ist eher eine Art Skin für eine Anwendung oder Webseite. Da es sich um ein statisches Design und nicht um eine Funktion handelt, kann es zwar alle Inhalte anzeigen, aber diese Funktionen werden nicht ausgeführt, wenn man darauf klickt oder tippt. Mockups haben eine hohe bis mittlere Wiedergabetreue, wodurch sie dem Endprodukt näher kommen. Das Team kann sich damit ein Bild davon machen, wie seine Idee umgesetzt werden kann, indem es den UI-Designer mit einem Drahtmodell einsetzt.

Die Anatomie eines Mockups stellt im Allgemeinen die Seite oder Anwendung dar, die es simuliert. In dieser Phase müssen die folgenden Dinge beachtet werden:

Quelle: www.invisionapp.com

Ein Mockup ist eine Nachbildung oder Simulation dessen, wie die ursprüngliche Seite oder Anwendung aussehen wird. Da es sich um einen visuellen Entwurf handelt, kann der Designer mit verschiedenen visuellen Optionen arbeiten und herausfinden, welche am besten geeignet ist, um eine Idee oder ein Drahtmodell zum Leben zu erwecken.

Die Designer verwenden diese Methode, damit Änderungen vorgenommen werden können, um die perfekte Verkörperung ihrer Vision zu erreichen. Das bedeutet, dass Sie mit der Anatomie eines Mockups arbeiten müssen. Prüfen Sie verschiedene Schriftarten, das Layout und vieles mehr. Sie können auch ein zweites Mockup erstellen, um zu sehen, welche Variante besser aussieht und sich dann für die bessere Option entscheiden. Mockups erwecken also das von einem UI-Designer aus einem Drahtmodell erstellte Layout zum Leben.

Das Mockup steht im Mittelpunkt des Web-Design-Prozesses, wenn wir an den Prozessen rütteln wollen. Im Nachhinein betrachtet befinden sie sich noch in der Anfangsphase des Web-Designs. Ein sehr allgemeiner Web-Design-Prozess besteht aus:

Geburt der Idee >> Drahtmodell >> Mockup >> Prototyping >> Live gehen.

Der grundlegendste Schritt bei der Gestaltung einer Website ist die Entwicklung einer Idee. Sobald die Idee vorhanden ist, wird eine Blaupause oder ein Layout erstellt, das als Drahtmodell bezeichnet wird. Ein Mockup baut auf diesem Layout auf, um ihm ein realistischeres Aussehen zu verleihen. Notwendige Änderungen an der visuellen Darstellung werden in der Mockup-Phase vorgenommen. Sobald diese fertiggestellt sind, wird der Prozess zum Prototyping der Seite oder Anwendung verlagert. Nachdem das Prototyping abgeschlossen ist und alles fertiggestellt wurde, geht die Seite oder Anwendung online.

Die Mockups werden in 3 Typen eingeteilt, je nach der Art ihrer Erstellung, die auch ihre Wiedergabetreue bestimmt.

Bei der Arbeit am Webdesign werden Ihnen diese Begriffe häufig begegnen. Die meisten Menschen verwechseln diese Begriffe. Wir werden Ihnen die Unterschiede erklären, damit Sie nicht die gleiche Verwirrung erleben müssen.

Um es ganz einfach auszudrücken: Beim Entwurf einer Webseite oder Anwendung dient das Drahtmodell als Skelett, das Mockup ist die Haut dieses Skeletts und der Prototyp zeigt das Verhalten all dieser Komponenten.

Ein Drahtmodell ist wie ein einfacher Blaupause-Layout, bei dem nur Linien bestimmte Bereiche abgrenzen und keine richtige Beschriftung. Ein Mockup ist die richtige Einbindung von Schriftarten, Stilen und Layouts, um eine genaue Vorstellung davon zu haben, wie das Endprodukt aussehen wird. Der Prototyp ist die exakte Demonstration dessen, wie sich die Anwendung oder Webseite verhalten wird, wenn sie live geht.

Ein Wireframe bestimmt die Struktur, das Mockup das Design und der Prototyp die Benutzerinteraktion vor dem Start der Anwendung oder Webseite.

Wireframes helfen bei der Ableitung einer Struktur für die Anwendung oder Webseite. Ein Mockup hilft dem Team, das Endprodukt zu visualisieren und es vor der Erstellung des Prototyps zu bearbeiten. Ein Prototyp hilft dabei, Feedback einzuholen, das Produkt weiterzuentwickeln und seine Schwächen auszumerzen.

Sowohl Wireframe als auch Mockup sind nicht interaktiv, während der Prototyp interaktiv ist.

Alle drei sind miteinander verknüpft. Der Wireframe dient als Basis, das Mockup baut auf dieser Basis auf und der Prototyp testet die Benutzerfreundlichkeit.

Quelle: www.invisionapp.com

Oft müssen Sie ein Mockup für Ihr Produkt erstellen. Verwenden Sie zu diesem Zweck EdrawMax-Vorlagen. Diese Vorlagen enthalten alles, was Sie für die Erstellung eines Mockups benötigen. Ändern Sie es einfach nach Ihren Bedürfnissen und Sie sind startklar. Die oben angegebene Vorlage ist ein Karten-Mockup. Planen Sie damit, wie die Struktur Ihres Magazins aussehen wird.

Ein Mockup ist eine der wichtigsten Komponenten der Webgestaltung. Wenn Sie diesen Artikel gelesen haben, werden Sie diesen technischen Begriff besser verstehen und wissen, wo er im Prozess des Webdesigns eingesetzt wird. Also, machen Sie sich an die Arbeit!