Mockup


Mockup (aus dem Engl.: Attrappe, Nachbildung) ist ein digital gestalteter Entwurf von einer Website und/oder App. Mockups dienen in der frühen Konzipierungsphase der Visualisierung von Ideen und Konzepten im Rahmen des Webdesigns. Sie beinhalten Navigationsstruktur, Site- und Design-Elemente im Detail. Mockups reichen von mit Bildbearbeitungsprogrammen erstellten Vorlagen ohne Funktionalität bis hin zu Entwürfen, die mit speziellen Mockup-Tools erstellt werden und in denen Bedienelemente bereits mit einfachen Funktionen verknüpft sind.

Vergleich: Mockup, Wireframe, Prototyp[Bearbeiten]

Die Begriffe Mockup, Wireframe und Prototyp werden in der Praxis oft gleichgesetzt, stellen jedoch drei verschiedene Arten von Entwurfsdarstellungen im Rahmen des Rapid Prototyping dar und werden in unterschiedlichen Phasen der Konzipierung vor der eigentlichen Programmierung verwendet.

Ein Wireframe stellt dabei die einfachste Form der Vorlage dar und beinhaltet in Absetzung zum Mockup noch keine Farben, Typografien, Bilder oder Grafiken. Dieser erste skizzenähnliche Entwurf kann von Hand oder am Computer erstellt sein. Funktionalität fehlt in dieser Darstellungsart gänzlich. Daher werden Wireframes zu den Low-Fidelity-Entwürfen gezählt.[1]

Mockups können auf der Struktur eines eventuell vorhandenen Wireframes aufbauen und diesen weiterentwickeln. Durch die Integration von Farben, Typographien, Bildern und Grafiken kommen sie dem endgültigen Design sehr nahe bzw. bilden dieses bereits ab. Daher werden sie bevorzugt zu Präsentationszwecken eingesetzt.

Ein klassisches Mockup ist statisch. Moderne Mockup-Tools ermöglichen jedoch die Integration einfacher Funktionen wie etwa Verlinkungen, so dass sie je nach Komplexität zu den Middel- bis High-Fidelity-Entwürfen gerechnet werden können und die Grenzen zum Prototypen fließend sind.

Komplexe, mehrteilige Mockups können als Basis für Prototypen, die je nach Ausarbeitung ebenso zu den Middel- bis High-Fidelity-Entwürfen zählen, herangezogen werden. In Absetzung zu den klassischen, statischen Mockups sind Prototypen immer interaktiv und beinhalten meist schon alle Funktionen der geplanten Website bzw. App.

Verwendung und Vorteile von Mockups[Bearbeiten]

Mockups werden in der frühen Entwicklungsphase von Websites und Apps zur Präsentation und Qualitätskontrolle eingesetzt. Sie dienen dazu, Vorstellungen und Anforderungen an die Benutzeroberfläche bezüglich Grundfunktionen, Navigation, Inhaltsarchitektur und Design mit dem Kunden abzustimmen. Nicht selten wird aufgrund der Mockups über die endgültige Auftragsvergabe entschieden.

Mockups werden für Usability Tests herangezogen, ohne dass vorher ein großer Programmieraufwand nötig wäre. Vor der Erstellung des Prototypens werden dadurch eventuell auftretende Probleme frühzeitig erkannt und man verringert das Risiko, dass ein Konzept mitten in der Entwicklungsphase komplett überarbeitet werden muss. Insgesamt können Mockups somit zu Zeit- und Kostenersparnis innerhalb eines Online-Projektes beitragen.

Beispiele[Bearbeiten]

Einfache Bildbearbeitungs- und Präsentationsprogramme wie etwa Powerpoint werden mitunter für Mockups verwenden, sind aber im Vergleich zu Mockup-Tools in der Erstellung eher aufwendig. Spezialisierte Tools bieten vorgefertigte Elemente bis hin zur Möglichkeit der Testung einfacher Interaktionsabläufe.

Beispiele Mockup-Tools für Websites:

Beispiele Mockup-Tools für Apps:

Nutzen für die Usability[Bearbeiten]

Da sich Mockups durch ihre mittlere bis hohe Detailtreue gut für einen Usability Test eignen, können sie schon in einem frühen Stadium der Konzipierungsphase wichtige Erkenntnisse über die User Experience liefern und zur Optimierung des User Experience Design beitragen, besonders in den Bereichen Ästhetik und Bedienungsfreundlichkeit.

Einzelnachweise[Bearbeiten]

  1. Wireframing, Prototyping, Mockuping - What`´'s the Difference?. designmodo.com. Abgerufen am 07.07.2014.

Weblinks[Bearbeiten]