Marketing Glossar

2.413 Fachbegriffe aus 22 Bereichen des Online Marketings

Mockup

Definition: Ein Mockup (auch: High-Fidelity-Design, Visual Mockup) ist eine statische, detaillierte und visuell fertige Darstellung eines Interface-Designs die das endgültige Erscheinungsbild einer Website, App oder Benutzeroberfläche zeigt – mit finalen Farben, Typografie, Bildern, Icons und Layout – jedoch ohne echte Interaktivität oder Klickbarkeit. Mockups positionieren sich im Design-Prozess zwischen Wireframe (strukturelle Skizze ohne visuelles Design) und Prototyp (interaktiver, klickbarer Vorläufer); die Abgrenzung ist nicht absolut und Übergänge sind fließend. Mockup-Einsatzzwecke: Stakeholder-Präsentation und -Freigabe (Kunden und Auftraggeber sehen wie das fertige Design aussehen wird); Design-Review und -Iteration (visuelles Feedback auf Farbe, Typografie, Layout); Entwickler-Handoff-Basis (Mockup dient als Referenz; CSS-Werte via Figma Dev Mode oder Zeplin extrahierbar); A/B-Test-Vorbereitung (verschiedene Mockup-Varianten visualisieren Hypothesen); Marketing-Materialien (Device-Mockups für App-Store-Screenshots, Website-Präsentationen, Pitch Decks). Mockup-Qualitätskriterien: Vollständigkeit der States (Default, Hover, Focus, Disabled, Error, Loading, Empty für jedes interaktive Element); Responsive-Varianten (Mobile/Tablet/Desktop); Edge-Cases (langer Text, fehlende Bilder, leere Zustände); Pixel-Accuracy (finales Design entspricht im fertigen Produkt möglichst dem Mockup); Design-System-Konformität (Komponenten aus Design-System-Library verwendet, keine Ad-hoc-Abweichungen).

Erläuterung

Der Begriff «Mockup» entstammt dem industriellen Produktdesign und der Architektur wo er physische Modelle im Maßstab 1:1 bezeichnete (engl. mock = nachahmen, imitieren; up = zusammensetzen); im UI/UX-Design wurde der Begriff auf digitale statische Designdarstellungen übertragen. Die Geschichte des digitalen Mockup-Prozesses ist eng mit der Evolution der Design-Tools verbunden. Adobe Photoshop (Thomas Knoll und John Knoll; Ann Arbor; MI; erste Version 1988; Akquisition durch Adobe Systems; San José; CA; 1989) war bis circa 2010–2012 das dominierende Werkzeug für UI-Mockups; die pixel-genaue Darstellung und Layer-System ermöglichten komplexe visuelle Designs; Photoshop hatte jedoch keine nativ-semantischen Designkonzepte (Symbole, Auto-Layout) weshalb Änderungen arbeitsintensiv waren. Sketch (Bohemian Coding B.V.; De Meern; Niederlande; Gründer Pieter Omvlee und Remco Verhoef; erste Version 2010; Apple Design Award 2012) revolutionierte UI-Mockups durch Vector-Primitives, Symbol-Libraries (Komponenten die synchron aktualisierbar sind) und Export-freundliche Architektur; Sketch wurde zum De-facto-Standard für macOS-UI-Design 2013–2018. InVision (Clark Valberg und Ben Nadel; New York; 2011–2024) ergänzte Sketch-Mockups durch kollaboratives Kommentar-System und Prototyping-Layer. Figma (Dylan Field und Evan Wallace; San Francisco; CA; gegründet 2012; erste öffentliche Version 2016) übernahm ab 2018 zunehmend den Markt mit browser-nativem kollaborativem Editing; Figma Multiplayer ermöglichte erstmals dass mehrere Designer gleichzeitig an einem Mockup arbeiten – ähnlich wie Google Docs für Design. Nathan Curtis (EightShapes; Washington D.C.; Component-Documentation-Experte) und andere Design-System-Vordenker etablierten Component-Library-basiertes Mockup-Design als Standard: statt Mockups von Grund auf zu bauen wird auf vordefinierte Component-Library-Komponenten zurückgegriffen; das beschleunigt Mockup-Erstellung und garantiert Design-System-Konsistenz. Alan Cooper (Interaction-Design-Pionier; San Francisco; «About Face: The Essentials of Interaction Design», IDG Books, 1995; 2003; 4th Edition Wiley, 2014; Erfinder der Personas-Methodik) beschrieb Mockups als «Deliverable» im interaction-design-Prozess das die visuelle Sprache des Produkts definiert bevor Programmierung beginnt.

Wireframe vs. Mockup vs. Prototyp und Tool-Ecosystem

Stakeholder-Präsentation, Freigabeprozess und Handoff

Praxistipp: Erstellen Sie Mockups nicht für alle hundert Seiten Ihrer Website – fokussieren Sie auf Template-Typen: Home, Kategorie, Produktdetail, Checkout, Formular, Fehlerseite. Alles andere leitet sich von diesen Templates ab. Und: Zeigen Sie Mockups in Figma nie im «Editor-Modus» dem Kunden – nutzen Sie den Präsentations-Modus (Play-Button) oder einen Share-Link im Viewer-Modus; der Figma-Editor mit all seinen Layern und Panels wirkt überwältigend und lenkt vom eigentlichen Design ab.