Ein Mockup ist ein statischer, detailgenauer Entwurf einer Oberfläche. Die Nielsen Norman Group beschreibt es als hochauflösende Simulation eines geplanten Designs mit Farben und Bildern. Es zeigt, wie eine Seite aussehen wird, ohne dass sich etwas anklicken lässt. Daneben heißt auch ein Vorlagenbild Mockup, in das eigene Inhalte eingesetzt werden: ein Smartphone, auf dessen Bildschirm ein Screenshot erscheint, oder ein T-Shirt mit einem Aufdruck.
- Mockup
Ein statischer, detailgenauer Entwurf einer Oberfläche mit Farben, Bildern und Schriften, der aussieht wie das fertige Produkt.
Beispiel: „Der Kunde gab das Mockup der Startseite frei, danach begann die Umsetzung im CMS.“Ein Vorlagenbild, das ein Gerät oder Produkt zeigt und in das eigene Inhalte wie Screenshots, Logos oder Aufdrucke eingesetzt werden.
Beispiel: „Für die Referenzseite setzten wir den Screenshot der neuen Website in das Mockup eines Smartphones.“Auch: Mock-up, UI-Mockup, Design Comp; als Vorlagenbild Device-Mockup oder Produkt-Mockup.
Der Duden schreibt Mock-up, vom englischen to mock up für nachbilden.
Wireframe, Mockup und Prototyp
Die drei Begriffe beschreiben verschiedene Stufen. Ein Wireframe ist laut Nielsen Norman Group ein Gerüst des Layouts, bevor es um Gestaltung geht. Das Mockup ergänzt Farben, Bilder und Schriften. Ein Prototyp schließlich ist eine frühe Version, mit der sich Abläufe und Interaktionen testen lassen.
Mockup und Fidelity
Wie nah ein Entwurf am Endprodukt ist, heißt Fidelity. Die Nielsen Norman Group unterscheidet drei Dimensionen: Interaktivität, Optik sowie Inhalte und Befehle. Ein Mockup ist optisch hoch und interaktiv niedrig. Grobe Entwürfe haben einen Vorteil: Testpersonen fühlen sich laut Nielsen Norman Group weniger unter Druck.
Mockup als Vorlagenbild
Die zweite Bedeutung kommt aus Marketing und Produktgestaltung: eine Vorlage, die ein Gerät oder Produkt zeigt und eine Fläche für eigene Inhalte frei lässt. Adobe beschreibt ein T-Shirt-Mockup als digitales Modell, das zeigt, wie ein Design auf einem echten T-Shirt aussieht; Onlineshops zeigen so ein Motiv, bevor es gedruckt ist. Für Websites typisch sind Geräte-Mockups: ein Smartphone, Tablet oder Laptop, auf dessen Bildschirm ein Screenshot sitzt.
Apple stellt solche Geräterahmen als Product Bezels in seinen Design Resources bereit, als Photoshop- und PNG-Dateien. Die Marketing-Richtlinien setzen dafür enge Grenzen: Die Gerätebilder bleiben unverändert, ohne Spiegelungen, Schatten oder Zuschnitt, Werbetext steht neben dem Gerät statt darauf, und der Bildschirm zeigt die App so, wie sie tatsächlich läuft, nie leer.
Wofür ein Mockup im Projekt dient
In unseren Projekten ist das Mockup meist der Stand, den Kunden freigeben, bevor programmiert wird. Es zeigt Farbe, Typografie und Bildsprache an echten Inhalten und deckt Lücken auf, etwa fehlende Texte oder Bilder. Gleichzeitig verleitet es zu Diskussionen über Details; deshalb lohnt es sich, die Struktur vorher im Wireframe zu klären.