Mockup


Mockup (aus dem Engl.: Attrappe, Nachbildung) ist ein digital gestalteter Entwurf von einer Website und / oder App. Mockups dienen in der frühen Konzeptionsphase 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

Die Begriffe Mockup, Wireframe und Prototyp werden in der Praxis oft gleichgesetzt, stellen jedoch drei verschiedene Arten von Entwurfsdarstellungen im Rahmen des Rapid Prototyping[1] 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.[2]

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 beschreibt einen statischen Entwurf. Mittlerweile müssen Mockups diese Eigenschaften nicht mehr zwingend erfüllen, sondern können durchaus eine gewisse Dynamik aufweisen. Dadurch wird eine Abgrenzung zur nächsten Konzeptionsphase, dem Prototyping, zunehmend schwieriger.[3] Moderne Mockup-Tools ermöglichen die Integration einfacher Funktionen wie etwa Verlinkungen, so dass sie je nach Komplexität zu den Middle- 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 Middle- 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.[4]


Verwendung und Vorteile von Mockups

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 Prototyps 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

Zwar werden Mockups mitunter in gängigen Bildbearbeitungs- und Präsentationsprogrammen wie Powerpoint erstellt, diese sind aber im Vergleich zu speziellen Mockup-Tools für die Erstellung eher aufwendig in der Handhabung. Spezialisierte Tools bieten vorgefertigte Elemente bis hin zur Möglichkeit, einfache Interaktionsabläufe zu testen.

Beispiele Mockup-Tools für Websites:

Beispiele Mockup-Tools für Apps:


Nutzen für die Usability

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 Konzeptionsphase wichtige Erkenntnisse über die User Experience liefern und zur Optimierung des User Experience Designs beitragen, besonders in den Bereichen Ästhetik und Bedienungsfreundlichkeit.


Einzelnachweise

  1. ↑ [1] mindtwo.de. Abgerufen am 20. November 2019.
  2. ↑ [2] designmodo.com. Abgerufen am 20. November 2019.
  3. ↑ [3] advidera.com. Abgerufen am 20. November 2019.
  4. ↑ [4] schaffrath-digital.de. Abgerufen am 20. November 2019.

Weblinks



Abgerufen von „https://de.ryte.com/wiki/index.php?title=Mockup&oldid=18933“

Kategorie