Mockup

Ein Mockup ist eine pixelgenaue, statische Darstellung des finalen Designs einer Website oder App - inklusive Farben, Typografie, Bildern und Branding. Im Gegensatz zu Wireframes (strukturell) oder Prototypen (interaktiv) zeigt ein Mockup genau, wie die fertige Anwendung visuell aussehen wird. Mockups sind das Endergebnis der Design-Phase und dienen als Vorlage für die Entwicklung.

Mockups werden in Design-Tools wie Figma, Sketch oder Adobe XD erstellt und beinhalten alle visuellen Details: Farbpalette, Schriftarten, Spacing, Iconografie und Bildmaterial. Sie ermöglichen es Stakeholdern, das finale Erscheinungsbild zu beurteilen und Feedback zu geben, bevor die Entwicklung beginnt. Oft werden Mockups in verschiedenen Ansichten erstellt (Desktop, Tablet, Mobile), um Responsive Design zu demonstrieren.

Der Unterschied zu Prototypen: Mockups sind statisch, während Prototypen interaktiv und klickbar sind. In der Praxis werden oft Mockups in Prototypen umgewandelt, um sowohl visuelles Design als auch User Flow zu demonstrieren. Mockups sind essenziell für die Qualitätssicherung - sie stellen sicher, dass Design und Entwicklung aligned sind.

In einem professionellen Workflow ist das Mockup mehr als ein hübsches Bild: Es liefert die konkreten Design-Specs für die Umsetzung. Über den Dev Mode in Figma (früher über Zeplin) lesen Entwickler exakte Pixelabstände, Farbwerte, Schriftgrößen und CSS-Eigenschaften direkt aus, exportieren Assets und Icons und arbeiten idealerweise gegen dieselben Design-Tokens (zentral definierte Werte für Farben, Abstände, Typografie), die auch im Code verwendet werden. Das minimiert den Interpretationsspielraum beim Handoff.

Ein guter Mockup-Satz zeigt nicht nur den Idealzustand, sondern auch die oft vergessenen Zustände einer Oberfläche: Hover- und Fokus-Zustände, leere Zustände (empty states), Lade- und Fehlerzustände sowie besonders lange und besonders kurze Inhalte. Werden diese ausgelassen, muss der Entwickler sie erfinden - eine häufige Ursache für Abweichungen zwischen Design und fertigem Produkt. In Teams mit einem Design-System entstehen Mockups zunehmend aus wiederverwendbaren Komponenten statt aus frei gezeichneten Flächen, was Konsistenz sichert und die Erstellung deutlich beschleunigt. So bleibt am Ende exakt das umgesetzt, was Kunde und Team gemeinsam freigegeben haben.