Mockup.

Ein Mockup ist die Ansicht einer Seite, wie sie später aussehen soll: mit Hausfarben, Schriften, Bildern und möglichst echten Texten, aber noch ohne Funktion. Laut dem Glossar der Nielsen Norman Group ist ein Mockup eine statische Simulation mit hoher Detailtreue, die visuelle Details wie Farben und Bilder enthält. Für ein Unternehmen ist das der Moment, in dem Marketing, Geschäftsführung und Markenverantwortliche zum ersten Mal sehen, wie sich die neue Website anfühlt. Hier fallen die meisten Entscheidungen zur Gestaltung, und hier sind Änderungen noch günstig.

So funktioniert ein Mockup

Das Mockup steht zwischen Wireframe und Prototyp. Ein Wireframe legt Aufbau und Reihenfolge fest, noch ohne endgültige Gestaltung. Das Mockup kleidet diesen Bauplan ein. Ein Prototyp macht ihn anklickbar, damit sich Abläufe testen lassen. In der Praxis gehen die Stufen ineinander über, weil viele Designwerkzeuge aus einem Mockup mit wenigen Handgriffen einen klickbaren Prototyp machen.

Kara Pernice von der Nielsen Norman Group beschreibt Detailtreue als die Frage, wie nah ein Entwurf am Aussehen des fertigen Systems liegt. Entwürfe mit hoher Detailtreue eignen sich laut NN/g, um visuelle Hierarchie, Lesbarkeit und Bildqualität zu prüfen. Grobe Entwürfe haben dagegen den Vorteil, dass alle Beteiligten sie als unfertig erkennen und eher über Inhalte als über Farbtöne sprechen.

Daneben gibt es eine zweite Bedeutung: Geräte-Mockups, also Bildschirmansichten, die in die Grafik eines Laptops oder Smartphones montiert werden. Sie dienen der Präsentation, etwa bei Referenzen, und sagen nichts darüber aus, wie gut eine Seite funktioniert.

What You Should Keep in Mind at Work

Lasst euch Mockups für Handy und Desktop zeigen. Ein Entwurf, der nur in Desktopbreite abgenommen wird, verschiebt die eigentlichen Entscheidungen in die Entwicklung. Wie sich eine Seite an Bildschirmgrößen anpasst, erklärt der Eintrag zu Responsive Design.

Prüft Mockups mit echten Texten. In Projekten sehen wir oft, dass ein Entwurf mit kurzen Platzhaltern aufgeräumt wirkt und mit den tatsächlichen Leistungsbeschreibungen nicht mehr in den geplanten Platz passt. Liefert wenigstens für die Startseite und eine Leistungsseite echte Inhalte.

Bündelt eure Rückmeldungen. Wenn fünf Abteilungen getrennt kommentieren, widersprechen sich die Wünsche. Bestimmt eine Person, die Rückmeldungen sammelt und entscheidet, und haltet fest, welche Version freigegeben ist.

Verwechselt die Freigabe der Optik nicht mit der Freigabe der Funktion. Ein Mockup zeigt keine Ladezeit, keine Fehlermeldungen im Formular und keine Zustände wie den Tastaturfokus. Diese Punkte gehören in den Prototyp oder in die Abnahme auf einer Testumgebung.

Häufige Fragen zum Mockup

Was ist der Unterschied zwischen Mockup und Wireframe? Das Wireframe klärt, was wo steht, das Mockup zeigt, wie es aussieht. Fehlt ein abgestimmtes Wireframe, diskutiert ihr im Mockup über Struktur und Gestaltung gleichzeitig, und beides wird schlechter.

Womit entstehen Mockups? Meist in Designwerkzeugen wie Figma. Manche Teams gestalten direkt im späteren System, etwa in Framer. Dann wird aus dem freigegebenen Entwurf ohne Umweg die echte Seite.

Ist das Mockup verbindlich für die Umsetzung? So verbindlich, wie ihr es vereinbart. Haltet im Vertrag oder im Pflichtenheft fest, welche Version freigegeben ist und dass Abweichungen abgestimmt werden.

Wie wir vom Wireframe über das Mockup bis zur fertigen Seite vorgehen, zeigt unsere Seite zum Webdesign für Unternehmen.