Was ist ein Mockup?
Ein Mockup ist eine detailgetreue, statische Darstellung dessen, wie eine Webseite am Ende aussehen wird. Anders als ein Wireframe, das nur die Struktur zeigt, enthält ein Mockup das komplette Design: Farben, Typografie, Bilder und alle gestalterischen Details. Es ist sozusagen das fertige Foto der Seite, nur noch nicht klickbar.
Mockups entstehen im Übergang von der Konzeption zur Umsetzung. Sie geben dem Kunden eine verlässliche Vorstellung vom Endergebnis und dienen den Entwicklern als präzise Vorlage für die Programmierung.
Wofür Mockups verwendet werden
Der wichtigste Zweck eines Mockups ist die Abstimmung. Statt abstrakt über Geschmack zu reden, sieht der Kunde konkret, wie seine Seite wirkt – und kann freigeben oder Änderungen anstoßen. Das schafft Verbindlichkeit, bevor die teurere Entwicklungsphase startet.
Mockups eignen sich außerdem für Präsentationen und erste Tests. Wird das Mockup mit Verlinkungen versehen und klickbar gemacht, entsteht daraus ein Prototyp, mit dem sich die Bedienung erproben lässt.
Mockup im Designprozess
Im üblichen Ablauf folgt das Mockup auf den Wireframe und baut auf den Erkenntnissen aus dem UX-Design auf. Die Struktur steht bereits fest; nun wird sie gestalterisch ausgearbeitet. Ein gutes Mockup berücksichtigt von Beginn an die Above-the-Fold-Wirkung und die Darstellung auf verschiedenen Geräten.
Je sauberer das Mockup, desto reibungsloser die Umsetzung – denn Entwickler müssen weniger raten und können Abstände, Farben und Schriftgrößen direkt übernehmen.