Mockup

In Kürze: Mockup

Ein Mockup ist eine visuelle Darstellung eines zukünftigen Produkts, insbesondere im digitalen Bereich, wie Webseiten, Shops oder Apps. Es dient dazu, Designideen zu präsentieren und die Benutzererfahrung zu simulieren, bevor die tatsächliche Entwicklung beginnt.

Erklärung: Mockup

Ein Mockup ist eine Visualisierungsmöglichkeit des späteren realen Produktes oder im digitalen Bereich einer Webseite (Internetauftritt), eines Shops oder einer App. Auf Messen oder in Präsentationen werden Mockups gezeigt, die bereits einige Funktionen besitzen oder bedienbar sind, jedoch handelt es sich nur um Modelle, nicht um das Originalprodukt. Bei größeren Produkten werden Mockups oft in kleinerer Skalierung zur Veranschaulichung genutzt.

Wozu nutzt man ein Mockup?

Mockups ermöglichen es, Parameter und Funktionen erlebbar zu machen, die bei einem reinen Entwurf auf Papier nicht abfragbar sind. Fragen wie:

• Wie wirken Farben, Buttons, Links und Bilder im Zusammenspiel?
• Ist die Position von Bildern und Text im Sinne der Konzeption praktikabel?
• Wie steht es um das Zusammenspiel aller Designelemente, Menüstruktur und Bild-Text-Verhältnis?
• Wie wird die Seite auf einem Smartphone oder Tablet angezeigt?

All diese Punkte können mit einem Mockup getestet und angepasst werden, bevor die vollständige Realisierung der Webseite erfolgt. Somit spart ein Mockup zeitlichen und programmiertechnischen Aufwand im Prozess der Zusammenarbeit.

Wireframe, Mockup & Prototyp – Unterschiede

In der Konzeptionsphase einer Webseite oder eines Onlineshops werden Wireframes, Mockups und Prototypen zur Visualisierung genutzt. Die Unterschiede sind wie folgt:

Begriff	Bedeutung	Visualisierung	Funktion	Einsatz
Wireframe	Wörtlich übersetzt: „Drahtrahmen“	Schematische Darstellung von Position und Menge von Bildern, Text und Bedienungselementen	Grobe Struktur und Konzeption einer Webseite	Frühe Entwicklungsphase
Mockup	Stammt von „mock“, ursprünglich „spöttisch nachahmen“	Optisch detaillierte Darstellung mit ersten Funktionen	Nutzbarkeit und Wirkung des Webdesigns	Frühe Umsetzungsphase
Prototyp	Eine dem Original sehr nahekommende Darstellung	Fast alles wie bei der späteren Umsetzung erleb- und testbar	Testen der Funktionsweise und des Webdesigns	Finale Umsetzungsphase

Wann setzt man auf Wireframes, Mockups und Clickdummies?

Je nach Phase der Entwicklung einer Webseite sind die unterschiedlichen Visualisierungsvarianten sinnvoll. Mit steigendem Detailgrad können dem Team und dem Kunden die anvisierte Webseite und deren Funktionalität eindrucksvoll präsentiert werden. Insbesondere bei Webseiten und Onlineshops ist eine visuelle Abstimmung wichtig, um Zeit und Aufwand zu sparen.

Wie erstelle ich ein Mockup?

Nachdem im Wireframe die Struktur und der grobe Aufbau der Seite festgelegt wurden, kann das Mockup visuell angelegt werden. Dabei sind verschiedene Anzeigeszenarien, wie mobil oder Tablet, zu beachten. Es empfiehlt sich, die unterschiedlichen fixen Elemente zu definieren, wie:

• Farben von Buttons
• Schriftarten
• Menüstruktur
• Größe und Platzierung von Bildern und Texten

Für Abstimmungen mit dem Kunden sollten mehrere Mockups angelegt werden, um Varianten für Haupt- und Unterseiten sowie Formulare und Pop-ups bereitzuhalten. So können mögliche Fehlerquellen bereits beim Erstellen des Mockups sichtbar werden und entsprechend angepasst werden.

Bild: © Julien Eichinger / stock.adobe.com

« Back to Glossary Index