Ein Mockup ist eine realitätsnahe visuelle Darstellung eines geplanten Designs, bevor es vollständig entwickelt oder produziert wird.
Mockups zeigen das Aussehen und die Hierarchie – sie beweisen noch nicht, dass Interaktion, Technik und Nutzerführung funktionieren.
- ✓Mockups besitzen meist höhere Detailtiefe als Wireframes.
- ✓Sie zeigen Farben, Typografie, Bilder und Abstände.
- ✓Statische Mockups sind nicht automatisch klickbar.
- ✓Sie unterstützen Feedback und Abstimmung.
- ✓Responsive Zustände müssen separat berücksichtigt werden.
Was ist Mockup?
Im Designprozess visualisiert ein Mockup eine Website, App, Verpackung oder ein Produkt in einer weitgehend ausgearbeiteten Form. Es dient als Diskussions- und Freigabegrundlage.
Wie funktioniert Mockup?
Auf Basis von Anforderungen, Struktur und Designsystem werden zentrale Ansichten gestaltet. Stakeholder prüfen Markenwirkung, visuelle Hierarchie und Inhaltsdarstellung, bevor Entwicklungskosten entstehen.
Einfache Darstellung mit Fokus auf grobe Anordnung.
Detailnahes Design mit finaler Typografie, Farben und Medien.
Präsentiert das Design im Rahmen eines Geräts oder Anwendungskontexts.
Verknüpft Ansichten zu testbaren Abläufen und geht damit über das statische Mockup hinaus.
Mockup in der Praxis
Für eine Landingpage werden Desktop- und Mobile-Mockups wichtiger Zustände erstellt. Inhalte sind realistisch, damit Textlängen und Hierarchie belastbar beurteilt werden können.
Ein schönes Mockup kann schlechte Usability verdecken. Kritische Abläufe sollten mit Prototypen und echten Nutzern geprüft werden.
Mockup sinnvoll umsetzen
Empfohlener Ablauf
-
1
Ziel definieren
Zu prüfende Fragen und benötigte Detailtiefe werden festgelegt.
-
2
Inhalte einsetzen
Reale Texte und Medien ersetzen irreführende Platzhalter.
-
3
Designsystem nutzen
Komponenten, Abstände und Zustände bleiben konsistent.
-
4
Varianten zeigen
Mobile, Desktop, Fehler- und Interaktionszustände werden berücksichtigt.
-
5
Feedback fokussieren
Rückmeldungen werden nach Ziel, Nutzerbedarf und Umsetzbarkeit bewertet.
Mockups im Designprozess sinnvoll einsetzen
Ein Mockup zeigt die visuelle Ausarbeitung einer Website, App oder eines Produkts deutlich realistischer als eine grobe Skizze. Farben, Typografie, Abstände, Bilder und Bedienelemente werden so dargestellt, dass Stakeholder das spätere Erscheinungsbild beurteilen können. Ein Mockup kann statisch sein und bildet nicht automatisch echte Funktionen oder vollständige Nutzerwege ab.
Im Projekt sollte klar zwischen Wireframe, Mockup und interaktivem Prototyp unterschieden werden. Früh abgestimmte Mockups reduzieren Missverständnisse und ermöglichen Feedback, bevor teure Entwicklung beginnt. Gleichzeitig dürfen sie nicht nur gut aussehen: Responsive Verhalten, echte Inhaltslängen, Kontraste und konsistente Komponenten müssen mitgedacht werden. Designsysteme und wiederverwendbare UI-Bausteine erleichtern später eine saubere Umsetzung.
Häufig gestellte Fragen
Häufige Fragen
Was ist ein Mockup?+
Eine visuell detaillierte Vorschau eines geplanten Designs oder Produkts.
Was ist der Unterschied zum Wireframe?+
Wireframes zeigen primär Struktur, Mockups die konkrete visuelle Gestaltung.
Was ist ein Prototyp?+
Eine testbare Simulation von Abläufen und Interaktionen.
Muss ein Mockup klickbar sein?+
Nein. Klickbarkeit gehört eher zum interaktiven Prototyp.
Warum sind reale Inhalte wichtig?+
Sie zeigen, ob Layout und Hierarchie unter echten Bedingungen funktionieren.
