Ein Mockup ist eine visuelle Darstellung eines Produkts, einer Website oder einer App, die das finale Design realitätsnah präsentiert. Im Gegensatz zu einem interaktiven Prototyp ist ein Mockup statisch und dient als Designvorschau in der Konzeptionsphase.
Mockups kommen in der Produktentwicklung, im Webdesign und im Marketing zum Einsatz, um Ideen anschaulich zu vermitteln. Sie reichen von einfachen Skizzen über detaillierte digitale Entwürfe bis zu fotorealistischen Darstellungen und ermöglichen es, Designentscheidungen frühzeitig zu treffen, bevor ein Produkt final umgesetzt wird.
Funktion im Design- und Entwicklungsprozess
Mockups visualisieren Designideen, ermöglichen frühzeitiges Feedback von Stakeholdern und Teams, vermeiden Missverständnisse durch klare visuelle Kommunikation und helfen, Änderungen kostengünstig vorzunehmen.
Arten von Mockups
- Low-Fidelity (Low-Fi) Mockups: Einfache Skizzen oder Wireframes zur groben Strukturierung.
- High-Fidelity (Hi-Fi) Mockups: Detaillierte digitale Designs mit Farben, Typografie und Icons.
- Interaktive Mockups: Visuelle Entwürfe mit begrenzten Interaktionsmöglichkeiten, etwa für Usability-Tests.
- Print-Mockups: Darstellung von Print-Produkten wie Visitenkarten oder Broschüren.
- Produkt-Mockups: Verpackungen, Werbeartikel oder Merchandise in realistischem Umfeld.
- Web- und App-Mockups: Benutzeroberflächen für Websites und mobile Anwendungen.
- Social-Media-Mockups: Vorschau für Werbeanzeigen oder Beiträge auf Plattformen wie Instagram oder Facebook.
Ablauf der Erstellung
Typischerweise folgt die Erstellung eines Mockups auf eine Recherche- und Analysephase (Zielgruppe, Wettbewerb), erste Entwürfe (Wireframes oder Low-Fi Mockups), die eigentliche Gestaltung (Hi-Fi Mockups), Feedback-Runden und schließlich die Finalisierung für Entwicklung oder Druck. Gängige Werkzeuge sind unter anderem Adobe XD, Sketch, Figma, InVision, Canva und Photoshop.
Einsatz im Marketing
Im Marketing dienen Mockups vor allem der Präsentation von Werbemitteln und Kampagnen – etwa bei Produktpräsentationen, der Vorschau von Social-Media-Anzeigen, der Darstellung von Verpackungen oder in der Kundenkommunikation.