Was ist ein Mockup?

Ein Mockup ist eine detaillierte, visuelle Darstellung eines Designs, die zeigt, wie das fertige Produkt, zum Beispiel eine Website oder eine App, aussehen wird. Im Gegensatz zu einem funktionierenden Prototyp ist ein Mockup statisch: es zeigt nur das Aussehen, nicht die Funktion.

Im Webdesign-Prozess steht das Mockup zwischen dem Wireframe und dem fertigen Code. Das Wireframe skizziert grob die Struktur und Anordnung von Elementen, ohne sich um Farben oder Details zu kümmern. Das Mockup setzt diese Struktur dann mit echten Farben, Schriftarten, Bildern und genauen Proportionen um. Das Ergebnis sieht aus wie eine Screenshot der fertigen Website, aber es ist noch nichts programmiert.

Warum Mockups im Designprozess wichtig sind

Mockups ermöglichen es, frühzeitig Feedback einzuholen, bevor teure Entwicklungsarbeit investiert wird. Wer erst im fertigen Code einen Designfehler bemerkt, zahlt viel mehr für die Korrektur als jemand, der das schon im Mockup abstimmt. Das ist keine Faustregel. Das ist messbar: Korrekturen im Design-Stadium kosten einen Bruchteil von Korrekturen im Code-Stadium.

Tools wie Figma, Adobe XD oder Sketch haben Mockups in den letzten Jahren deutlich zugänglicher gemacht. Früher war das Aufgabe spezialierter Designer mit teuren Software-Lizenzen. Heute arbeiten viele Teams in Figma, das kostenlos nutzbar ist und kollaboratives Arbeiten erlaubt. Kunde und Agentur können gleichzeitig in denselben Dateien Kommentare hinterlassen.

Du fragst dich vielleicht, was der Unterschied zwischen Mockup und Prototyp ist. Ein Prototyp geht einen Schritt weiter: Er ist klickbar, simuliert Interaktionen und lässt sich in gewissem Maße bedienen. Ein Mockup ist dagegen ein Bild, kein interaktives System.

Für die Zusammenarbeit zwischen Kunde und Agentur bieten Mockups einen klaren Vorteil: beide Seiten sprechen über dasselbe. Missverständnisse entstehen deutlich seltener, wenn ein konkretes Bild auf dem Tisch liegt, als wenn nur abstrakt über “ein modernes Design” diskutiert wird.

In unserem Designprozess bei Business.Digital erstellen wir für jedes Webprojekt Mockups, bevor eine Zeile Code geschrieben wird. Das spart Zeit, Geld und Nerven auf beiden Seiten. Wenn du mehr darüber erfahren möchtest, wie wir Projekte strukturieren, buche einen kostenlosen Termin.