Mockup Titelbild

Ein Mockup (Vorführmodell, Anschauungsmodell) ist ein digitaler Entwurf einer App oder Webseite, um aus einem Kundenwunsch beziehungsweise einer Idee ganz individuelle Designs zu erstellen. Mockups dienen in der frühen Konzeptionsphase der Visualisierung von Ideen und Konzepten im Rahmen des Webdesigns. Der Sinn hinter einem solchen Mockup-Konzept ist, dass verschiedene Kombinationen von Elementen sowie unterschiedliche inhaltliche Strukturen ohne großen Aufwand gestaltet und verändert werden können.

 

Ebenso kann man mit Mockups einen Überblick darüber gewinnen, wie viele und welche Elemente in dem Design überhaupt Platz finden sollen oder müssen, und so besser planen, wie viel ein jedes davon einnehmen darf. Bei gut ausgearbeiteten Mockups ist es in der Regel nur noch ein kleiner Schritt zum pixelgenauen Design, welches schließlich als Vorlage für die Programmierung dient. Umfangreiche, mehrteilige Mockups können auch als Basis für Prototypen verwendet werden. Ein Prototyp simuliert die fertige Website in vollem Umfang und verhält sich dann fast identisch, wie die fertige Website oder Webapplikation. Er ist interaktiv und enthält dabei die gesamten Funktionen. Es ist der detailgetreueste Entwurf und damit die letzte Station vor der Veröffentlichung der Website. Daher wird er auch als high-fidelity Entwurf bezeichnet.

 

Kurz zusammengefasst:

 

Ein Mockup ist ein Entwurf des fertigen Designs einer Webseite oder App, das dabei hilft, dieses ohne großen Mehraufwand zu planen. 

 

Unterschied zwischen Wireframe und Prototyp:

 

Ein Wireframe ist eine grobe Vorlage eines zukünftigen Designs. Es enthält meist noch keine Farben und Fotografien und stellt lediglich einen groben Rahmen dar. Diese Scribbles sind meist handschriftlich notiert.

 

Ein Prototyp hingegen, ist ein bereits funktionsfähiges Design. Meist laufen auch schon alle Plug-Ins und Funktionen der Webseite oder der App. Dem Kunden wird somit ein sehr realer Blick auf die technische Umsetzung gegeben.

 

Warum werden Mockups verwendet?

 mobile devices

Mockups werden in der frühen Entwicklungsphase von Apps und Webseiten zu Qualitätskontrolle und Präsentation verwendet. Sie sind essentiell, um sich ein Webdesign vorstellen zu können und sie dienen dazu, Vorstellungen und Anforderungen an die Benutzeroberfläche mit dem Kunden abzustimmen. Mit einem ansprechenden Mockup werden Entwürfe nicht nur greifbarer, sondern auch unterschiedliche Umsetzungsmöglichkeiten (oder deren Grenzen) sichtbar. Ein großer Vorteil ist, dass bereits vor der Erstellung des Prototyps, eventuell auftretende Probleme frühzeitig erkannt werden und man das Risiko verringert, dass ein Konzept mitten in der Entwicklungsphase komplett überarbeitet werden muss. Insgesamt können Mockups somit zu Zeit- und Kostenersparnis beitragen. Außerdem kann mit Mockups ein aussagekräftiges Feedback zur Visualisierung der Webseite eingeholt werden.

 

5 kostenfreie Mockup-Tools:

 

  • Balsamiq Mockups
  • Mockplus
  • Mockingbird
  • Pencil
  • Moqups

 

Haben Sie noch Fragen zu diesem Thema? Oder brauchen Sie Hilfe bei der Gestaltung Ihrer Webseite von einer professionellen Internetagentur aus München? Dann kontaktieren Sie uns gerne!