Ein Mockup ist ein detailgetreuer visueller Entwurf einer Webseite oder eines Designs, der das spätere Erscheinungsbild realistisch zeigt: Farben, Schriften, Bilder, Abstände und Layout — jedoch als statische Darstellung ohne funktionierende Interaktionen. Mockups schlagen die Brücke zwischen dem strukturellen Wireframe und der programmierten Website und dienen als Abstimmungsgrundlage, bevor die Umsetzung beginnt.
Wie funktioniert die Arbeit mit Mockups?
Auf Basis der abgestimmten Struktur (Wireframe) gestaltet der Designer die Seite im Detail: Corporate-Design-Farben, Typografie, Bildwelt, Buttons, Weißraum. Das Ergebnis sieht aus wie die fertige Website, ist aber ein Bild beziehungsweise ein statischer HTML-Entwurf. Kunden sehen damit erstmals realistisch, wie ihr Webauftritt wirken wird.
In der Praxis werden oft mehrere Design-Varianten als Mockups erstellt — etwa eine zurückhaltend-klassische und eine modernere Richtung — damit die Entscheidung an konkreten Entwürfen statt an abstrakten Beschreibungen fällt. Feedback-Schleifen am Mockup sind schnell und günstig; Änderungen an der fertig programmierten Website sind es nicht.
Warum sind Mockups wichtig?
Design lässt sich nicht verbal abstimmen: Begriffe wie „modern“, „seriös“ oder „hochwertig“ bedeuten für jeden etwas anderes. Ein Mockup macht die Designrichtung konkret und verhandelbar — Farbwirkung, Bildsprache und Typografie stehen sichtbar zur Diskussion, bevor Entwicklungsaufwand entsteht. Missverständnisse werden so aufgedeckt, solange sie noch billig zu beheben sind.
Gerade bei Kunden mit striktem Corporate Design — etwa Kanzleien mit etablierter Farb- und Bildwelt — zeigt das Mockup verbindlich, wie die CI im Web umgesetzt wird. Die Freigabe des Mockups markiert einen klaren Meilenstein: Ab hier wird gebaut, nicht mehr grundsätzlich umgestaltet.
Typische Fehler bei Mockups
Ein verbreiteter Fehler sind Mockups mit Platzhaltertexten: Layout und Wirkung ändern sich erheblich, sobald echte Inhalte einfließen — lange Überschriften sprengen Zeilen, kurze Texte lassen Bereiche leer wirken. Wo immer möglich, sollten Mockups mit realen oder zumindest realistischen Texten und Bildern arbeiten.
Ebenso problematisch: nur die Desktop-Ansicht zu entwerfen. Da der Großteil der Besucher mobil kommt, gehört zu jedem ernsthaften Mockup mindestens eine mobile Variante der Schlüsselseiten. Und schließlich sollte ein Mockup nichts zeigen, was technisch nicht umsetzbar oder im Budget nicht vorgesehen ist — sonst ist Enttäuschung bei der Umsetzung programmiert.