Mockup

TL;DR

Ein Mockup ist ein detaillierter visueller Entwurf einer Website – mit Farben, Schriften und Bildern, aber ohne Funktionalität.

Was ist ein Mockup?

Mockups zeigen, wie eine Website am Ende aussehen wird. Im Gegensatz zu Wireframes enthalten sie das vollständige visuelle Design: Farben, Typografie, Bilder, Icons und Abstände.

Ein Mockup ist wie ein Architekturfoto einer noch nicht gebauten Villa – man sieht genau, wie es aussehen wird, kann aber noch nicht hineinspazieren.

Unterschied zu Wireframe und Prototyp

• Wireframe: Struktur und Layout (schwarz-weiß, schematisch)
• Mockup: Finales Design (visuell, aber statisch)
• Prototyp: Interaktives Modell (klickbar, testbar)

Warum Mockups wichtig sind

• Realistische Vorschau: Kunden und Stakeholder sehen das finale Ergebnis
• Design-Entscheidungen: Farben, Schriften und Spacing können bewertet werden
• Feedback vor Entwicklung: Änderungen sind jetzt noch einfach
• Style-Guide-Basis: Design-Regeln werden hier definiert

Mockups und Nachhaltigkeit

Ein gründlich erstelltes Mockup verhindert späte Design-Änderungen während der Entwicklung. Weniger Iterationen = weniger Zeitaufwand = geringerer Ressourcenverbrauch.

Best Practices

• Mobile und Desktop parallel erstellen
• Realistische Inhalte verwenden (keine "Lorem ipsum"-Wüsten)
• Zustände berücksichtigen (Hover, Aktiv, Fehler)
• Barrierefreiheit schon im Mockup prüfen (Kontrast!)

Fazit

Mockups sind der letzte Schritt vor der Entwicklung. Sie geben allen Beteiligten Sicherheit, dass das Endprodukt den Erwartungen entspricht – und verhindern teure Korrekturen später.