Mockup

Bei Websites und Apps meint Mockup den statischen Entwurf einer Bildschirmseite. Bei Logos, Verpackungen und Drucksachen bedeutet es etwas anderes: die Darstellung eines Entwurfs auf einem echten Gegenstand. Das Logo erscheint dann auf einer Visitenkarte, einem Firmenwagen oder einer Ladentür. Solche Mockups entstehen meist aus Fotovorlagen, in die der Entwurf per Bildbearbeitung eingesetzt wird.

Beide Varianten haben denselben Zweck. Du sollst ein Design beurteilen können, bevor es gebaut oder gedruckt wird. Ein Logo wirkt auf einem weißen Blatt anders als auf einem Lieferwagen im Regen.

• Das Wireframe klärt Aufbau und Reihenfolge der Inhalte, in Grau und ohne Gestaltung.
• Das Mockup legt das Aussehen fest. Es wirkt fertig, bleibt aber ein Bild.
• Der Klickdummy macht den Entwurf bedienbar. Man klickt sich durch die Seiten, als gäbe es die Website schon (Prototyping).

In der Praxis verschwimmen die Grenzen. In Programmen wie Figma wird aus einem Mockup mit wenigen Verknüpfungen ein einfacher Klickdummy. Kleine Projekte überspringen das Wireframe manchmal und starten direkt mit dem gestalteten Entwurf.

Am Mockup entscheidest du über Farben, Bildsprache, Schriftgrößen und Abstände. Änderungen kosten hier wenig, weil noch keine Zeile Code geschrieben ist. Dieselbe Änderung an einer programmierten Seite dauert ein Vielfaches. Viele Web-Mockups zeigen neben der Desktop-Ansicht auch eine mobile Ansicht, damit früh sichtbar wird, wie sich die Inhalte auf dem Smartphone anordnen.

Für viele Auftraggeber ist das Mockup der erste Moment, in dem die neue Website greifbar wird. Das Feedback wird dann konkreter, weil alle auf dasselbe Bild schauen und über dieselbe Stelle sprechen.

Ein Mockup sieht fertiger aus, als es ist. Blindtext und schöne Stockfotos wirken immer gut. Wenn möglich, gehören deshalb echte Texte und echte Bilder hinein, zumindest aber Platzhalter in realistischer Länge. Sonst passt die Überschrift später doch nicht in zwei Zeilen, oder das Teamfoto hat ein ganz anderes Format als der Platz, den das Layout dafür vorsieht.

Und ein Mockup verrät nichts über Ladezeit, Bedienung oder Formulare. Das zeigt erst der Klickdummy oder die gebaute Seite.

Bei Website-Projekten siehst du die Gestaltung als Screendesign, bevor programmiert wird (Screendesign). Soll der Entwurf schon vorher bedienbar sein, etwa für Tests mit Kunden, machen wir daraus einen Klickdummy (Prototyping). Für Logos zeigen wir Entwürfe auf passenden Anwendungen (Logodesign).

Verwandte Begriffe: Wireframe · Moodboard · UI-Design · Responsive Webdesign