Ein Mockup ist der nächste logische Schritt nach dem Wireframe: Stell es dir vor wie ein hochauflösendes Foto davon, wie die fertige Webseite später aussehen soll – mit echten Farben, der finalen T...
Was steckt dahinter?
Ein Mockup ist der nächste logische Schritt nach dem Wireframe: Stell es dir vor wie ein hochauflösendes Foto davon, wie die fertige Webseite später aussehen soll – mit echten Farben, der finalen Typografie, Bildern und allen visuellen Details, aber noch komplett statisch. Man kann nichts anklicken, nichts ausfüllen, nichts scrollen im funktionalen Sinne; es ist reine Optik, festgehalten in einem Bild oder PDF. Mockups erfüllen in Projekten eine wichtige Kommunikationsfunktion zwischen Design und Entwicklung. Designer erstellen sie meist in Tools wie Figma, Adobe XD oder Sketch und legen damit exakt fest, wie Abstände, Farben, Schriftgrößen und Bildausschnitte aussehen sollen. Entwickler nutzen diese Vorgaben anschließend als Referenz beim Umsetzen der eigentlichen, funktionierenden Seite. Ohne ein abgestimmtes Mockup würde jede Detailfrage (“Wie groß soll der Button sein?”) erst während der Programmierung entstehen, was Zeit kostet und zu Inkonsistenzen führt. Wichtig ist: Ein Mockup zeigt in der Regel nur einen oder wenige Zustände einer Seite. Wie sich ein Formular verhält, wenn man etwas falsch ausfüllt, oder wie eine Animation beim Klicken abläuft, lässt sich daraus nicht ablesen – dafür braucht es einen Prototyp oder die fertige Umsetzung selbst.