Als Mockup bezeichnet man im Allgemeinen ein Vorführmodell. Es stellt eine Attrappe, manchmal sogar schon ein komplettes Produkt dar. Das Mockupveranschaulicht 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 mehrereMö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.
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 Elemente, welche zum Einsatz kommen (Was möchtest Du Zeigen?)
Die Struktur der Website (Wo soll was abgebildet werden?)
Eine Beschreibung und grundlegendeVisualisierung der Bedienelemente (Wie soll sich der User auf der Website bewegen?)
Mockup
Ein Mockup wird in der Regel auf der Grundlage eines Wireframeserstellt 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:
Die CI (Corporate Identity)
Typografie
Grafische Elemente
Content
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:
Klickbare Elemente (Klickdummys)
Pixelgenau
Desktop, Tablet und Mobile Darstellung
Verlinkungen und Funktionen
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.
Was ist die CTR? Die Click-Through-Rate (CTR) oder auch Klickrate ist eine bedeutende Metrik, die angibt, wie häufig eine Anzeige oder ein Link im Verhältnis zu den Impressionen angeklickt wurde. Sie ist entscheidend für die Performance und den Erfolg von Werbekampagnen oder Suchergebnissen. Die CTR wird in verschiedenen Kontexten verwendet, darunter: Wie wird die CTR ... Weiterlesen
Wie gut ist Deine Website im Internet auffindbar? Genau das sagt Dir der Sichtbarkeitsindex. Doch wie funktioniert er überhaupt? Wie berechnet er sich und welche Schwierigkeiten kann es dabei geben? Hier erfährst Du mehr! ... Weiterlesen
Unter dem Begriff Social Marketing versteht man eine Zielgruppe so zu beeinflussen, dass diese ein Verhalten akzeptiert, ablehnt oder verändert. ... Weiterlesen
Deine aktuellen Cookie-Einstellungen verhindern die Darstellung eines externen Inhalts von Google Maps. Genehmige Sie das Laden des Inhalts, um die Karte sehen zu können.
Du möchtest mehr über spannende Themen der Branche erfahren?