Mockup

Als Mockup bezeichnet man im Allgemeinen ein Vorführmodell. Es stellt eine Attrappe, manchmal sogar schon ein komplettes Produkt dar. Das Mockup veranschaulicht Deinem Kunden das Design, bzw. die Funktionen des Produktes.
Du kannst ein Mockup sehr gut nutzen, um Deine Ideen zu visualisieren. Daraus kannst Du Dein individuelles Design entwickeln.

Welche Arten von Mockups gibt es?

Um Dir ein Vorführmodell für Dich oder Deinen Kunden zu erstellen, stehen Dir mehrere Möglichkeiten zur Verfügung.

(Klickbares) Mockup

Ein Mockup stellt den Inhalt und die Funktionalität Deines Projektes in statischer Form dar. Du arbeitest hierfür die visuellen Elemente Deiner Webseite so weit aus, dass die Darstellung bereits dem Endprodukt gleicht. Du kannst Dein Vorführmodell jedoch erweitern, indem Du zum Beispiel die Menüleiste und den Footer bereits integrierst und klickbar machst.

3D Mockup

Ein 3D Mockup wird bei der Darstellung von Produkten verwendet. Tools wie die Creative Cloud von Adobe bieten hier in der Bibliothek bereits eine Vorauswahl an, welche lediglich individualisiert werden muss. In Agenturen werden 3D Mockups gerne verwendet, um dem Kunden zu veranschaulichen, wie seine Webseite auf den verschiedenen Endgeräten aussehen kann. Ebenfalls kennst Du 3D Mockups aus dem Bereich des Onlineshoppings.

Das Bild zeigt ein 3D Mockup der Website eology.de. Das Mockup wird auf einem Laptop dargestellt. Vor dem Laptop ist verschwommen eine Person zu erkennen. Der Laptop steht auf einem Tisch. Auf dem Tisch sind noch weitere Unterlagen im Hintergrund zu sehen.
3D Mockup der Website eology.de auf einem Laptop

Der Unterschied zwischen Wireframe, Mockup & Prototyp im Webdesign

Im Webdesign durchläuft Deine Webseite in der Regel mehrere Konzeptionsphasen. Es startet meist mit einer vereinfachten Darstellung Deines Designs und entwickelt sich zu einem klickbaren Prototypen Deines Internetauftritts.

Wireframe

Ein Wireframe ist eine vereinfachte Form des späteren Designs der Website und deshalb oft nur ein skizzenhafter Entwurf. Oftmals beinhaltet es deshalb keine Farben, Bilder, Grafiken oder Typografien. Im Rahmen dieser Darstellung werden die Basis-Informationen abgesteckt. Ein Wireframe enthält:

Die Grafik zeigt eine Darstellung eines Wirefrimes mit Browserzeile, Mustertext, Überschrift und Produktkacheln.
Beispiel eines Wireframes

Mockup

Ein Mockup wird in der Regel auf der Grundlage eines Wireframes erstellt und ist viel detaillierter. Oftmals ist ein Mockup bereits ausreichend, um Projekte für die spätere Programmierung zu visualisieren. Ein Mockup verfügt bereits über:

Das Bild zeigt das Mockup der kompletten Startseite von eology.de
Darstellung eines Mockups

Prototyp

Ein Prototyp kommt oftmals nur bei sehr komplexen Projekten zum Einsatz. Die Erstellung ist sehr aufwendig, da sie immer interaktiv sind und bereits alle Funktionen der geplanten Website oder App enthalten. In einen Prototyp sind deshalb folgende Merkmale integriert:

Dein Vorteil bei der Erstellung eines Mockups ist, dass Deine Projekte visualisiert dargestellt werden können. Für das Vorführmodell hast Du im Vorfeld oftmals keinen großen Programmieraufwand. Außerdem kann anhand des Mockups ein Usability Test durchgeführt werden. So erkennst Du frühzeitig eventuell auftretende Probleme und kannst Dein Design entsprechend anpassen. Das minimiert Dein Risiko inmitten der Entwicklungsphase Dein Konzept überarbeiten zu müssen.

Welche Tools gibt es für Wireframes, Mockups und Prototypen?

Wir haben hier für Dich einige Beispiele an kostenlosen Tools für Wireframes, Mockups und Prototypen zusammengefasst.

ToolVersionenRegistrierungPreisAnwendungs-
bereiche
 
MoqupWeb-AnwendungjakostenfreiWireframe Mockup Prototyp  
BalsamiqWeb-Anwendung Desktop-Versionjakostenfrei für 30 Tage danach Lizenz ab 9$  Mockup Prototyp  
Wireframe.ccWeb-Anwendungneinkostenfrei / Premium-Version verfügbar  Wireframe
PencilDesktop-AnwendungneinkostenfreiMockup Prototyp  
Frame BoxWeb-AnwendungjakostenfreiMockup  
MockingbirdWeb-AnwendungJaKostenfrei Premium-Version verfügbarWireframe Mockup  
Kontakt

Melde Dich
bei uns

  +49 9381 5829000