Mockup

Mockup: Was ist das?

Ein Mockup ist zunächst einmal nichts anderes als eine maßstäbliche Nachbildung eines Produkts. Mockups kommen bei Produkten selbst sowie deren Verpackungen als sogenannte Packaging Mockups zur Anwendung. Auch in der Softwareentwicklung und im App- und Webdesign haben sich Mockups durchgesetzt.

Mockups im App- und Webdesign

Im App- und Webdesign ist ein Mockup - analog zum Product oder Packaging Mockup -eine Demoversion einer Webseite oder einer App.

Mockup: Was ist das?

Ein Mockup kannst Du Deinem Auftraggeber präsentieren, um mit diesem das Design zu besprechen, bevor Du mit der eigentlichen Umsetzung der Website oder App beginnst. Du kannst das Design als Mid-Fidelity-Image mit Platzhalterbildern und -texten oder als High-Fidelity-Image mit vollständigem visuellem Layout Deinem Kunden zeigen.

Designer und Stakeholder verwenden Wireframes, Mockups und Prototypen häufig synonym. Aber es gibt feine Unterschiede: Sie stellen Entwurfsdarstellungen mit jeweils abweichender Detailgenauigkeit dar und werden daher in verschiedenen Konzeptionsphasen eingesetzt.

Abgrenzung Wireframe, Mockup und Prototyp

Ein Wireframe ist ein Low-Fidelity-Design, das die grundlegenden Bausteine der Benutzeroberfläche (UI) zeigt. Du kannst dieses als eine Art Blueprint der Website betrachten. Ein Mockup ist die Mid- bis High-Fidelity Darstellung eines App- bzw. Website-Designprojekts. Es bildet als statisches Bild das visuelle Erscheinungsbild ab. Ein Prototyp ist wiederum das interaktive Modell der Website oder App. Es umfasst als solches bereits alle geplanten dynamischen Funktionalitäten. Er dient der Simulation der Interaktion zwischen Benutzer und Schnittstellen sowie der Einschätzung von Funktionalität und Userfreundlichkeit. Im Gegensatz zum Wireframe und Mockup findest Du im Prototyp die klickbaren Elemente.

Kurz gesagt:

Mockup erstellen: konzeptioneller Zwischenschritt zwischen Wireframe und Prototyp

Wireframes sind der erste Schritt in der Konzeptionsphase. Als Low-Fidelity-Design sind sie die einfachste Darstellung der geplanten Website oder App. Sie beinhalten lediglich den groben Aufbau und verzichten auf Farben, Typografien, Content (Bilder, Fotos, Text) und Funktionalität. Nicht wenige Designer zeichnen Wireframes daher heute noch per Hand.

Mockups bauen häufig auf Wireframes auf. Für ein Mockup fügst Du in einem nächsten Schritt Farben, Typografien sowie Content wie Bilder, Fotos, Videos und Text hinzu. Navigationsmenüs, Links, Buttons, Sliders und andere Webseitenelemente erhalten Form und Stil. So kannst Du die zentralen visuellen Aspekte im Hinblick auf die Benutzerfreundlichkeit Deines endgültigen Designs veranschaulichen. Daher werden Mockups für die erste Präsentation beim Kunden verwendet. Um einen Prototyp zu erstellen, integrierst Du schließlich alle dynamischen Funktionalitäten.

Vorteile von Mockups

Mockups bringen eine Reihe von Vorteilen mit sich. Obwohl Du sie vergleichsweise zeit- und kostengünstig erstellen kannst, liefern Mockups visuell ein realistisches Abbild Deines finalen Produkts. Sie eignen sich daher für Usability Tests, um frühzeitig mögliche Probleme und Fehlerquellen zu identifizieren. Mockups ermöglichen eine Qualitätskontrolle in der frühen Entwicklungsphase. Mit ihrer Hilfe kannst Du die Benutzeroberfläche hinsichtlich ihres Designs sowie ihrer Grundfunktionen, ihrer Navigations- und Inhaltsarchitektur frühzeitig überprüfen und mit dem Kunden abstimmen.

Mockups erlauben das Experimentieren mit der visuellen Seite von Webseiten und Apps. Der Kunde kann sich am konkreten Beispiel besser für Farbschemata, visuelle Stile und Typografien entscheiden. Potenzielle Änderungswünsche kannst Du in Anpassungen überführen, die weniger Zeit in Anspruch nehmen und daher Dein Budget entlasten.

Mockup erstellen: heute nicht mehr rein statisch

Zunächst Aufbau und Inhalte festlegen und erst anschließend das Design erstellen, ist der klassische Ablauf. Dieser spiegelt sich im typischen Designpfad von Wireframes, über Mockups bis hin zu Prototypen wider. Mit neuen Abläufen wie Responsive Webdesign und dem schnellen Einstieg in die Frontend-Umsetzung verwischen die Übergänge zwischen diesen Konzeptionsphasen zunehmend. Mit Responsive Design ist nicht nur der traditionelle Designablauf PSD zu HTML obsolet geworden. Auch Mockups sind nicht mehr rein statisch. Sie können heute dynamische Elemente wie Verlinkungen beinhalten und Mid-Fidelity-Designs darstellen. Gefördert wird diese Entwicklung primär durch moderne Mockup-Tools, mit denen Du Mid- bis High-Fidelity-Mockup-Designs erstellen kannst.

Mockups erstellen mit Mockup-Tools

Im Gegensatz zu Wireframes können Mockups nicht per Hand gezeichnet werden. Prinzipiell kannst Du eine Grafiksoftware wie PSD zur Erstellung eines Mockups einsetzen. PSD ist allerdings im Vergleich zur speziell für Mockups entwickelte Software eher aufwendig. Insbesondere, wenn Du Mid-Fidelity-Mockups erstellen möchtest. Für diese bietet die zahlreich zur Verfügung stehende Software fertige Bausteine, die einen PSD Entwurf unnötig machen. Auch einfache Interaktionen können häufig getestet werden. Zudem kannst Du bei vielen Anbietern cloudbasiert und Deinen Entwurf damit im Rahmen eines flexiblen Workflows im Team bearbeiten. Folgende Mockup-Tools stehen Dir zur Verfügung:

Für Webseiten

Für Apps

Fazit

Mockups sind ein bedeutender Bestandteil des Webdesignprozesses. Sie verleihen Navigationsmenüs, Links, Buttons, Slidern und den verschiedenen anderen Elementen Form und Stil und legen zentrale visuelle Aspekte der Benutzerfreundlichkeit des Designs offen. Mithilfe von Mockup-Tools kannst Du einfach und schnell ein Mockup erstellen. Eine PSD Vorlage ist so nicht mehr erforderlich.