Mockup.

Im Gestaltungsprozess einer Website gibt es drei Stufen, die oft verwechselt werden. Das Wireframe ist das Gerüst: grau, ohne Bilder, nur Struktur und Inhaltsblöcke. Das Mockup ist das Design: Es zeigt die Seite mit echten Farben, Schriften, Bildern und Abständen, ist aber ein statisches Bild. Der Prototyp ist klickbar: Man kann von Seite zu Seite navigieren, Menüs öffnen und Abläufe testen, auch wenn dahinter noch keine echte Technik steckt.

Mockups entstehen heute meist in Design-Werkzeugen wie Figma. Gute Mockups zeigen nicht nur die Startseite auf einem grossen Bildschirm, sondern auch die mobile Ansicht, eine typische Unterseite und Zustände wie ein ausgefülltes Formular oder eine Fehlermeldung. Je realistischer die Inhalte, desto aussagekräftiger: Ein Mockup mit Blindtext und Stockfotos sieht fast immer gut aus; eines mit dem echten Firmennamen, echten Leistungstexten und den eigenen Fotos zeigt, ob das Design auch mit der Realität funktioniert.

Im Webdesign hat das Wort noch eine zweite Bedeutung: Präsentations-Mockups sind Bilder, in denen ein Design auf einem Laptop, Smartphone oder Plakat platziert wird. Sie eignen sich für Referenzen, Pitches und Social Media, sagen aber wenig über die Qualität des Designs aus — ein Gerät mit schöner Spiegelung macht jedes Layout eindrücklicher.

Der Wert eines Mockups liegt in der frühen Entscheidung. Änderungen an Farbe, Bildsprache oder Seitenaufbau kosten im Mockup Minuten, nach der Programmierung Stunden. Deshalb sollte die Freigabe bewusst erfolgen: mit allen Entscheidungsträgern, an echten Inhalten, auf dem Smartphone angeschaut und mit der Frage, ob die wichtigsten Besucherziele auf den ersten Blick erreichbar sind.