Mockup

Was ist ein Mockup?

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. Es schlägt die Brücke zwischen dem strukturellen Wireframe und der fertig programmierten Website und dient als Abstimmungsgrundlage, bevor die Umsetzung beginnt. Eine allgemeine Einordnung des Begriffs liefert der Wikipedia-Artikel zum Mockup; im Webkontext beschreibt ihn auch das Ryte-Wiki zum Mockup.

Im Gestaltungsprozess steht das Mockup zwischen zwei Nachbarn: Der Wireframe klärt Struktur und Anordnung in Graustufen, das Mockup fügt die visuelle Ebene hinzu, und ein interaktiver Prototyp macht das Ergebnis schließlich klickbar. Diese Abstufung ist bewusst — sie erlaubt es, erst über Inhalt und Struktur, dann über Optik und zuletzt über Verhalten zu entscheiden, statt alles auf einmal zu verhandeln.

Wie funktioniert die Arbeit mit Mockups?

Auf Basis der abgestimmten Struktur 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 oder ein statischer HTML-Entwurf. Kunden sehen damit erstmals realistisch, wie ihr Webauftritt wirken wird — ein großer Unterschied zu abstrakten Layoutskizzen. Der Begriff des Mockups wird auch in der Produktgestaltung und Software verwendet, wie die Übersicht der Interaction Design Foundation zu Mockups zeigt.

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. Deshalb gehört das Mockup zu den wirtschaftlich wichtigsten Zwischenschritten im Webdesign und beim Relaunch.

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. Das senkt Projektrisiko und Nacharbeit erheblich.

Gerade bei Kunden mit striktem Corporate Design — etwa Kanzleien mit etablierter Farb- und Bildwelt aus ihrer Corporate Identity — 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. Für spezialisierte Branchen wie das Webdesign für Anwälte ist dieser verbindliche Zwischenstand besonders wertvoll.

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, damit die spätere Usability nicht von einer geschönten Vorschau verdeckt wird.

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 — ein Grundprinzip des Responsive Designs. 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. Auch eine fehlende Landingpage-Version für Kampagnenziele wird oft zu spät bemerkt.

Mockup, Wireframe und Prototyp: die Abgrenzung

Die drei Begriffe werden häufig vermischt, meinen aber unterschiedliche Reifegrade. Der Wireframe ist das strukturelle Skelett ohne Gestaltung; er beantwortet die Frage, was wo steht. Das Mockup ist das gestaltete Standbild; es beantwortet, wie es aussieht. Der Prototyp ist die klickbare Simulation; er beantwortet, wie es sich anfühlt. Wer diese Ebenen sauber trennt, führt Feedback gezielt — Struktur-Feedback am Wireframe, Optik-Feedback am Mockup, Interaktions-Feedback am Prototyp.

In modernen Design-Tools verschwimmen die Grenzen, weil sich Mockups mit wenigen Klicks in klickbare Prototypen überführen lassen. Der methodische Wert der Abstufung bleibt trotzdem: Ein Kunde, der am Mockup über die Optik entscheidet, wird nicht durch halbfertige Interaktionen abgelenkt. Das Mockup ist damit weniger ein Werkzeug als eine Phase — der Moment, in dem aus einer Idee ein sichtbares, verhandelbares Bild wird, das dem Design-Thinking eine konkrete Diskussionsgrundlage gibt.

Mockups in der Praxis: Freigabe und Zusammenarbeit

In der Zusammenarbeit ist das Mockup der zentrale Abstimmungspunkt zwischen Agentur und Kunde. Gute Praxis ist es, Varianten nebeneinander zu präsentieren und Feedback strukturiert einzuholen — nicht als offene Frage „Gefällt es?“, sondern gezielt zu Farbwirkung, Lesbarkeit und Priorisierung der Inhalte. So wird aus subjektivem Geschmack eine begründbare Entscheidung, die sich später gegenüber allen Beteiligten vertreten lässt.

Nach der Freigabe dient das Mockup als verbindliche Vorlage für die Umsetzung — oft direkt im Page Builder oder in der Programmierung. Änderungswünsche, die erst nach der Freigabe kommen, sollten bewusst als neue Runde behandelt und im Aufwand transparent gemacht werden. Genau diese Klarheit macht das Mockup zu einem Instrument nicht nur der Gestaltung, sondern auch des Projektmanagements: Es definiert, wann eine Designphase abgeschlossen ist.