Mockup

Ein Mockup (zu deutsch = Attrappe) ist ein digitaler Entwurf von einer Website oder App. Es dient dazu, Ideen und Konzepte zu visualisieren, indem die grundlegenden Design-Elemente wie Farben, Layout und Typographie dargestellt werden.
Eine Attrappe kann man als eine Vorlage oder Funktion nutzen. Man es aber auch schon mit speziellen Tools erstellen und mit einfachen Funktionen ausstatten.

Unterschied zwischen Mockup, Wireframe und Prototypup

Ein Wireframe ist die einfachste Form des Entwurfs. Im Gegensatz zu einem Moch werden noch keine Farben, Schriften, Bilder oder Grafiken verwendet. Es ist also ein skizzenähnlicher Entwurf, der noch keine Funktionen aufweisen kann. Dargestellt wird hauptsächlich die Seitenstruktur und die geplanten Funktionen.

Eine Attrappe ist ein auf dem Wireframe aufbauender, weiterentwickelter Entwurf. Hier wird schon das Design abgebildet indem Farben, Typographie, Bilder, Grafiken und auch Inhalte sofern vorhanden integriert werden. Man bevorzugt Mockups bei der Präsentation vor dem Kunden. Die klassische Attrappe ist statisch, während moderne Mockups schon einfache Funktionen wie Verlinkungen beinhalten und damit schon fast als Prototyp gelten. Man bevorzugt Mockups bei der Präsentation vor dem Kunden.

Ein Prototyp ist nämlich immer interaktiv und beinhaltet meist schon alle Funktionen der geplanten Website oder App.

Verwendung

Mockups erstellt man um den Kunden die geplante Website oder App zu präsentieren. Dies geschieht meist am Anfang der Entwicklung, damit man die Vorstellungen und Ideen mit dem Kunden abstimmen kann.
Dies erspart eine Menge Zeit und Kosten, denn es können früh Erkenntnisse über mögliche Probleme und die User Experience gewonnen werden. So kann man das Design rechtzeitig anpassen und muss diesen nicht mitten in der Entwicklung noch einmal überarbeiten.
Das letztendlich fertig ausgearbeitet Mockup kann als direkte Vorlage für die Programmierung dienen.

Mockup-Tools

Außerdem gibt es spezielle Tools, mit denen mann einfach vorgefertigte Elemente oder einfache Funktionen in das Mockup integrieren kann.
Für Websites kann man zum Beispiel Balsamiq, Auxure oder Pencil verwenden. Zudem kann man für Apps dagegen Progranne wie Pop, InstaMochup oder FramAPP nutzen.

Quellen

https://de.ryte.com/wiki/Mockup
http://www.produktmanagementpraxis.de/user_experience/definition-wireframe-mockup-prototype/

Ähnliche Einträge