Skip to main content

Mockup


PDF herunterladen

Was ist ein Mockup?

Ein Mockup ist eine Visualisierungsmöglichkeit des späteren realen Produktes oder im digitalen Bereich einer Webseite, Shop oder App. Auf Messen oder in Präsentationen werden solche Mockup-Vorführmodelle gezeigt, die zwar schon einige Funktionen haben oder richtig bedienbar sind, doch es handelt sich nur um ein Modell, bzw. Prototyp nicht das Originalprodukt. Bei größeren Produkten werden Mockups gern auch in entsprechend kleinere Skalierung zur Veranschaulichung genutzt.

Im Bereich des Online-Marketings nutzt man Mockups um eine Visualisierungsmöglichkeit von Webseiten, Shops und Apps zu haben, welche das Nutzungserlebnis nachfühlbar darstellt. Für Webdesigner, Programmierung und auch den Kunden ist es eine bessere Variante als eine pure Skizze, denn die grafische Darstellung des Mockups zeigt eindrücklich auf einen Blick die anvisierte Webseite.

Wozu nutzt man ein Mockup?

Damit werden Parameter und Funktionen erlebbar, die bei einem puren Entwurf auf Papier nicht abfragbar sind. Wie wirken Farben, Buttons, Links und Bilder im Zusammenspiel? Ist Position von Bildern und Text im Sinne der Konzeption des Shops, der App oder Webseite auch praktikabel? Wie steht es um das Zusammenspiel aller Designelemente, Menüstruktur und Bild-Text-Verhältnis? Wie wird die Seite auf einem Smartphone oder Tablet angezeigt?

All diese Punkte und viele weitere können mit einem Mockup angetestet werden und angepasst, noch bevor eine komplette Realisierung der Webseite erfolgt ist. Somit ist ein Mockup auch eine gute Visualisierungsmöglichkeit, die im Prozess der Zusammenarbeit zeitlichen und programmiertechnischen Aufwand einspart.

Mockup leicht verständlich erklärt

Wireframe, Mockup & Prototyp – was ist eigentlich was? 

Befindet man sich in der Konzeptionsphase zu einer Webseite oder Onlineshop, werden zur Visualisierung Wireframes, Mockups und Prototypen genutzt. Aber wie unterscheiden diese sich? In der folgenden Tabelle stellen wir dar, wie Prototyp und Wireframe sich vom Mockup unterscheiden:  

 

Wireframe 

Mockup 

Prototyp 

Bedeutung

Wörtlich übersetzt:

Drahtrahmen”  

Eigenname, stammt von “moque”  bzw. “mock” ursprünglich “spöttisch nachahmen” Eine dem Original sehr nahekommende Darstellung mit ersten Funktionen.
Visualisierungs-möglichkeit Zeigt nur schematisch Position und Menge von Bildern, Text, Bedienungselementen  Bilder, Texte, Menü-Struktur evt. erste Funktionen werden optisch detailliert dargestellt.   Funktionen, Bilder, Texte, Menus, Farben, Animationen. Es ist fast alles wie bei der späteren Umsetzung erleb- und testbar.
Funktion Struktur und Konzeption einer Webseite wird grob dargestellt.  Nutzbarkeit, Führung des Users auf der Seite, Wirkung des Webdesigns usw. können gut dargestellt werden Darstellen und Prüfen der Funktionsweise und des Webdesigns aller Elemente. Testbarmachen eines Mockups.
Einsatz

Frühe Entwicklungsphase einer Webseite. 

Als Ausgangspunkt für weitere Schritte  

Frühe Umsetzungsphase einer Webseite. 

Gern auch als Darstellung von Varianten 

Finale Umsetzungsphase einer Webseite.
Gern als Basis zur Detailumsetzung,
insbesondere für erste Tests hinsichtlich usability. 
Varianten

1.) Statisch (auch low-fidelity-wireframe) – etwa als Skizze oder Grobentwurf 

2.) Dynamisch
Elemente sind detailreicher, aber dennoch optisch dargestellt. Kommt einem Mockup nahe. 

 

1.) Optisch 

Lediglich optische Darstellung einer Webseite, App oder Shop für eine oder mehrere Seiten der Domain. 

2.) Optisch mit einigen Funktionen
Einige aber nicht alle der Darstellungen sind interaktiv.  

Je nach eigenem Entwicklungsprozess kann die Detailgenauigkeit von Prototypen sich unterscheiden und bis hin zu einer detailgetreuen Nachbildung gehen, die fast nicht zu unterscheiden ist.  

Wann setzt man auf Wireframes, Mockups und Clickdummy? 

Je nachdem in welcher Phase der Entwicklung von zum Beispiel einer Webseite man sich befindet, sind die unterschiedlichen Visualisierungsvarianten von Wireframe, Mockup und Clickdummy  (Prototyp) sinnvoll. Mit steigendem Detailgrad kann so dem gesamten Team und auch dem Kunden dargestellt werden wie die anvisierte Webseite einmal aussehen und funktionieren kann. Eine eindrucksvolle Darstellung die ein pures Template oder Skizze nicht übernehmen kann. 

Insbesondere bei Webseiten und Onlineshops ist es gut, eine so visuelle Abstimmung zu haben, um Zeit und Aufwand auf allen Beteiligten Seiten zu sparen. Daher wird zumeist in den verschiedenen Tools diese Visualisierungsform gewählt. Zunächst ganz am Anfang, reicht das Entwerfen eines Wireframes entweder in Bildbearbeitungssoftware wie Photoshop oder konkreten Anwendungen zur Erstellung von Wireframes wie Lucidchart, Adobe XD, Cacoo und Sketch um nur einige zu nennen.  

Abfolge von Wireframe, Mockup und Clickdummy (Prototyp) im Lauf einer Webseitenentwicklung.  

1) Start der Entwicklung, Konzeption einer Webseite > Wireframe 
2) Fortgeschrittene Zusammenarbeit, erste Entwürfe sollen erfolgen > Mockup
3) Finalisierung und Detailumsetzung steht bevor > Prototyp bzw. Clickdummy  

 

Was sind die wichtigsten Funktionen bei einem Mockup-Tool? 

Da das Mockup je nach gewünschter Visualisierungsvariante auch einzelne Funktionen zeigen soll, ist zunächst eine modulare Umsetzung des Konzepts nötig. Sollte beim Kunden eine pure Visualisierung reichen, kann man auch ein Mockup ausschließlich in Photoshop oder anderer Grafiksoftware erstellen. Wichtig ist hierbei auch auf die verschiedenen Darstellungsgrößen zu achten, welche später zu erwarten sind. Insbesondere die Reaktion der Webseite auf Skalierung, das sogenannte responsive Design muss hierbei beachtet werden.  

In einem Mockup-Tool kann man zumeist in einem einfachen Editor die verschiedenen Elemente auf ein angelegtem Raster platzieren. Wichtig bei einem Mockup-Tool ist, neben der einfachen Bedienbarkeit auch die Möglichkeit verschiedene Varianten zu erstellen und zu speichern so wie diese dann unkompliziert dem Entwicklungsteam und Kunden präsentieren zu können. 

Wie erstelle ich ein Mockup? 

Nachdem im Wireframe Struktur und grober Aufbau der Seite festgelegt wurde, kann entweder in einem Mockup-Tool oder einer Grafiksoftware nach Wahl das Mockup visuell angelegt werden. Dabei sind verschiedene Anzeigeszenarios wie etwa Mobil, Tablet usw. zu beachten. Es empfiehlt sich dann z.B. bei einem Mockup für eine Webseite die unterschiedlichen fixen Elemente zu definieren. Welche Farbe haben Buttons? Schrift? Das Menu? 

Auch Größe und Platzierung von Bildern und Texten muss nun klar vergeben werden. Nach diesem Mockup-Konzept können dann erste Prototypen entwickelt werden.  

Für Abstimmungen mit dem Kunden sollten also mehrere Mockups angelegt werden. So ist es ratsam Varianten für Haupt- und Unterseiten aber auch Formulare und Pop-ups bereitzuhalten. 
Schon beim Erstellen des Mockups werden mögliche Fehlerquellen im Bereich der künftigen Realisierung sichtbar. Sobald das der Fall ist, sollte man etwaige Funktionen, Größe und Positionen entsprechend anpassen.  

Bild: © Julien Eichinger / stock.adobe.com

Jetzt den SEO-Küche-Newsletter abonnieren

Ähnliche Artikel

Google Groups

Was ist Google Groups? Google Groups ist ein kostenloser Dienst von „Google Inc.“, welcher einen kombinierten Zugang zu Usenet, Diskussionsforen und Social Communitys ermöglicht. Durch den Online-Dienst können Internetforen durchsucht sowie eigene „Groups“ (deutsch = Gruppen) erstellt werden. Geschichte von Google Groups Google Groups wurde 2001 im Rahmen einer Übernahme […]

Entitäten

Was ist eine Entität? Der von dem lateinischen Wort “ens” (deutsch: “Ding” oder “Seiendes”) abgeleitete Begriff Entität findet sich in der Philosophie, Informatik und Semantik. Er beschreibt ein Objekt, das sich eindeutig identifizieren lässt und Informationen beinhaltet. Entitäten können sowohl in der realen Welt existierende Dinge (auch “Benannte Entitäten” genannt) […]

Datenbank

Was ist eine Datenbank? Eine Datenbank ist ein elektronisches System, in dem sich größere Datenmengen zentral speichern lassen. Ein Datenbanksystem (DBS) setzt sich aus zwei Teilen zusammen: einem Datenbankmanagementsystem (DMBS) und der Datenbank (DB) im eigentlichen Sinne, in der die Menge der zu verwaltenden Daten (auch Datenbasis genannt) gespeichert ist. Heute verwenden nahezu alle IT-Anwendungen wie ERP-, CRM- und Warenwirtschafts-Systeme, aber auch Suchmaschinen […]

Google Alerts

Was ist Google Alerts? Google Alerts ist ein seit 2014 existierender kostenloser Dienst der Suchmaschine Google. Jeder Nutzer kann Benachrichtigungen für beliebige Keywords oder Begriffe einrichten und Google benachrichtigt per E-Mail oder über seinen RSS-Feed, wenn die Suchmaschine einen passenden neuen Eintrag in ihrer Ergebnisliste findet. Alerts informieren Benutzer automatisch, […]

Release Management

Release Management einfach und verständlich erklärt Der Begriff Release Management beschreibt die Planung, Umsetzung und das Controlling von Softwareentwicklungsprozessen und der angewendeten IT-Infrastruktur. Release Management – Definition Durch das Release Management wird es möglich, einen Überblick über den gesamten Entwicklungsprozess von Softwares, Web-Anwendungen und deren Updates sicherzustellen. Das Release Management […]

Google Doodle

Was ist Google Doodle? Als Google Doodle (deutsch: Kritzelei, Gekritzel ) bezeichnet der US-amerikanische Suchmaschinenbetreiber Google die unterschiedliche Darstellung seines Firmenlogos auf der Startseite und in den Suchergebnisseiten (kurz: [a href=https://www.seo-kueche.de/lexikon/serp-search-engine-result-page/]SERP[/a]). Seit 1998 ist es bei dem Tech-Unternehmen Tradition, zu besonderen Anlässen wie Geburtstagen wichtiger Persönlichkeiten aus Kunst und Wissenschaft, […]