Was ist ein Mockup?
Ein Mockup ist ein statisches, voll gestaltetes Bild deiner zukünftigen Website. Farben, Schriften, Bilder, Buttons, Spacings — alles ist auf High-End-Niveau ausgearbeitet. Wer ein Mockup sieht, weiß, wie die fertige Seite aussehen wird. Was er nicht weiß: wie sie sich anfühlt. Nichts ist klickbar, nichts reagiert. Es ist ein Foto deiner Website.
Mockups entstehen typischerweise nach dem Wireframe und vor dem Prototyp. Der Wireframe klärt das "Was steht wo", der Mockup das "Wie sieht es aus". Beide sind nötig, weil sie unterschiedliche Fragen beantworten — und beide sparen Zeit, weil sie Diskussionen vor die Codezeile verlegen.
Beispiel: Airbnb-Designer arbeiten in Figma mit komplett ausgearbeiteten Mockups, lange bevor ein Entwickler die erste Komponente baut. Headline-Schriftarten, Bild-Ratios, Button-Radien, Hover-Farben — alles wird im Mockup festgelegt. Erst wenn das Team und der Kunde nicken, geht es in die Umsetzung.
Wireframe vs. Mockup vs. Prototyp
Diese drei Begriffe werden ständig durcheinandergeworfen. Sie unterscheiden sich klar.
| Stufe | Was es zeigt | Detailgrad | Klickbar? |
|---|---|---|---|
| Wireframe | Struktur, Reihenfolge, Hierarchie | Niedrig (Schwarz-Weiß, Kästen) | Nein |
| Mockup | Finales visuelles Design | Hoch (Farben, Bilder, Schriften) | Nein |
| Prototyp | Interaktion und Bedienung | Hoch (auf Mockup-Basis) | Ja |
Manche Designer überspringen den Wireframe und springen direkt ins Mockup. Das funktioniert, wenn die Struktur sowieso klar ist — bei einer simplen Landingpage zum Beispiel. Bei komplexeren Projekten ist der Wireframe Pflicht, weil er Strukturfehler aufdeckt, die im fertigen Mockup teuer werden.
Wie entsteht ein Mockup?
Ein Mockup entsteht selten in einem Rutsch. Der typische Ablauf:
- Design-System festlegen. Welche Farben, Schriften, Spacings, Button-Stile gelten für die ganze Seite? Ohne System wirkt jedes Mockup wie ein Patchwork.
- Hauptseite designen. Meistens die Startseite. Hier wird der visuelle Ton gesetzt: Hero, Sektionen, Buttons, Footer.
- Unterseiten ableiten. Leistungsseiten, Über-uns, Kontakt. Sie folgen dem System der Startseite.
- Mobile Variante. Jedes Mockup braucht eine Smartphone-Version — ohne Responsive Design designt man am echten Nutzer vorbei.
- Feedback und Iteration. Kunde guckt, kommentiert, Designer überarbeitet. Zwei bis drei Runden sind normal.
Warum sind Mockups für deine Website wichtig?
Ein Mockup verhindert die teuersten Fehler im Webdesign-Prozess: Missverständnisse zwischen Kunde und Designer. Solange nur Worte über die Seite fallen, stellt sich jeder etwas anderes vor. Sobald ein Mockup auf dem Tisch liegt, reden alle über dasselbe.
Außerdem zwingt das Mockup zu Entscheidungen, die später keine Rolle mehr spielen sollten. Wie sieht die Hero Section aus? Welche Typografie passt zum Markenton? Wie groß sind die Abstände zwischen den Sektionen? Wenn das im Mockup sitzt, ist die Programmierung danach reine Umsetzung — kein Designjob mehr.
Konkretes Beispiel: Eine Anwaltskanzlei lässt sich eine neue Website bauen. Im Mockup sieht sie zum ersten Mal, dass das geplante Foto zu unruhig wirkt und das Logo neben einer kräftigen Akzentfarbe untergeht. Beides wird vor der Programmierung gefixt — Kosten: zwei Stunden Designarbeit. Wäre es erst im fertigen Browser aufgefallen, hätte es ein bis zwei Tage Entwickler-Zeit gekostet. Plus die Diskussion, wer das bezahlt.
Welche Tools nutzen Designer für Mockups?
Figma ist de-facto Standard geworden. Daneben gibt es ein paar Alternativen:
- Figma — Browser-basiert, kollaborativ, riesiges Komponenten-Ökosystem.
- Sketch — der frühere Standard, immer noch beliebt im Apple-Ökosystem.
- Adobe XD — fest in der Adobe-Welt verankert, integriert mit Photoshop und Illustrator.
- Penpot — Open Source, wenn man keine Cloud-Tools will.
- Photoshop — funktioniert, ist aber für Web-Mockups schwerfälliger als spezialisierte Tools.
Welches Tool du als Kunde siehst, ist egal. Wichtig ist, dass dein Designer in einem Tool arbeitet, das echte Komponenten, Auto-Layouts und mobile Varianten beherrscht.
Häufige Fehler bei Mockups
Mockup ohne Wireframe. Wenn die Struktur erst im Mockup entsteht, mischt sich Geschmacksdiskussion mit Strukturdiskussion. Beides leidet.
Lorem ipsum statt echter Texte. Ein Mockup mit Platzhaltertexten lügt. Echte Headlines sind länger oder kürzer als gedacht, echte Produkte haben Komma-Preise, echte Adressen brechen anders um. Erst mit echten Inhalten zeigt sich, ob das Design hält.
Nur eine Bildschirmgröße. Ein Mockup, das nur am Desktop existiert, ignoriert die Hälfte der Realität. Mindestens Mobile + Desktop.
Kein Design-System. Wenn jeder Mockup-Screen eigene Farben und Buttonformen hat, wirkt die fertige Seite zerfasert.