UX-Glossar · engl. Mockup
Mockup
Ein Mockup ist ein statischer, visuell detaillierter Entwurf einer Website oder App. Es zeigt, wie das fertige Produkt aussehen soll, lässt sich aber noch nicht bedienen.
Stell dir vor, eine Bäckerei lässt ihre Website neu gestalten. Nach zwei Wochen bekommt die Inhaberin eine Datei: Die Startseite ist darauf zu sehen, mit dem echten Logo, den Hausfarben, Fotos von Brötchen und dem Schriftzug „Jetzt vorbestellen“. Sie ist begeistert und klickt auf den Button. Nichts passiert. Kein Fehler: Sie schaut auf ein Mockup.
Einfach erklärt
Ein Mockup ist ein statischer Entwurf, der zeigt, wie eine Website oder App später aussehen soll. Farben, Schriften, Bilder, Abstände und Texte sind weitgehend festgelegt. Bedienen lässt es sich aber nicht. Es ist ein Bild des Produkts, nicht das Produkt.
Ein Vergleich aus dem Alltag: Beim Küchenkauf bekommst du oft eine fotorealistische Ansicht deiner neuen Küche, mit den gewählten Fronten und Griffen. Du siehst, wie alles wirkt, kannst aber noch keine Schublade öffnen. Genau das leistet ein Mockup.
Im Fachjargon heißt es, ein Mockup hat eine hohe visuelle Fidelity, also Detailtreue. Hersteller wie Figma und Sketch beschreiben es entsprechend als ausgearbeitete, hochaufgelöste Darstellung des späteren Produkts.
Wireframe, Mockup, Prototyp: der Unterschied
Die drei Begriffe werden oft durcheinandergeworfen. Eine einfache Faustregel hilft:
- Ein Wireframe zeigt die Struktur. Wo steht was, wie hängen die Seiten zusammen? Meist in Grautönen, ohne echte Gestaltung.
- Ein Mockup zeigt das Aussehen. Wie wirkt die Seite mit Farben, Schriften und Bildern? Statisch, ohne Interaktion.
- Ein Prototyp zeigt das Verhalten. Was passiert beim Klicken, Tippen oder Wischen? Er lässt sich ausprobieren, grob oder detailliert.
In der Praxis sind die Grenzen fließend. In Tools wie Figma wird aus einem Mockup mit ein paar Verknüpfungen schnell ein klickbarer Prototyp. Wichtig ist deshalb weniger der Name als die Frage, was du mit dem Entwurf prüfen willst. Damit Mockups über viele Screens einheitlich bleiben, lohnt sich ein Design System. Mehr dazu im Artikel Design Systems für kleine Teams: Wann es sich lohnt und wie du klein anfängst.
Ein Beispiel
Zurück zur Bäckerei. Vorher: Die Agentur schickt direkt Mockups. Erst beim Durchsehen fällt auf, dass die Vorbestellung drei Seiten tief versteckt ist. Alle Entwürfe müssen neu gestaltet werden.
Nachher: Beim nächsten Projekt stimmt die Agentur zuerst ein Wireframe ab, auf dem die Vorbestellung prominent auf der Startseite liegt. Danach entsteht das Mockup, über das nur noch Farben, Fotos und Texte besprochen werden. Für den Bestellablauf baut das Team zusätzlich einen kleinen Prototyp und lässt drei Menschen aus der Stammkundschaft damit bestellen.
In der Praxis
- Erst Struktur, dann Optik. Kläre Aufbau und Abläufe im Wireframe. Sonst diskutiert das Team über Farben, obwohl die Navigation noch nicht steht.
- Sag klar, was es ist. Schreib dazu, dass ein Mockup nicht klickbar ist. So vermeidest du Verwirrung bei Kundschaft und Auftraggebenden.
- Nutze echte Inhalte. Platzhaltertexte und perfekte Stockfotos täuschen. Mit echten Texten und Bildern siehst du früh, ob Überschriften zu lang oder Fotos zu dunkel sind.
Verwandte Begriffe
Wireframe, Prototyp, Design System