Wofür man Mockups braucht
Ein nackter Screenshot ist flach und ohne Zusammenhang. Steckt derselbe Screenshot in einem Handy, sieht man ein Produkt, das man in die Hand nehmen könnte. Klingt nach einer Kleinigkeit. Auf einer Store-Seite oder in einer Anzeige entscheidet es aber oft, ob jemand weiterscrollt oder tippt.
Mockups findest du hier:
- Screenshots im App Store und bei Google Play
- Hero-Bilder und Produktvideos auf Websites
- Posts auf Instagram, TikTok und LinkedIn
- Kundenpräsentationen und Design-Portfolios
- Pitch Decks für Investoren
Für Designer hat es noch eine praktische Seite. Wer auf ein flaches PNG schaut, fragt: "Wie sieht das auf dem Handy aus?" Ein Mockup beantwortet die Frage, bevor sie gestellt wird.
Welche Arten von Mockups es gibt
Heute begegnen einem drei Arten, und jede kann etwas anderes gut.
Flache 2D-Mockups
Der Screenshot sitzt in einem frontalen Geräterahmen. Schnell gemacht, kleine Dateien, für Store-Bilder oft genug. Weil aber alles aus demselben Winkel kommt, wirkt eine Seite voller 2D-Mockups schnell eintönig.
Foto-Mockups
Jemand fotografiert ein echtes Gerät, zum Beispiel ein Handy in der Hand oder einen Laptop auf dem Schreibtisch. Der Bildschirmbereich wird markiert und dein Design mit der richtigen Perspektive eingesetzt. Licht und Raum sind echt, deshalb wirken Foto-Mockups am natürlichsten und funktionieren auf Social Media und Websites besonders gut.
3D-Mockups und Mockup-Videos
Ein dreidimensionales Modell des Geräts. Du drehst das Handy in jeden Winkel, verschiebst das Licht und der Schatten wandert mit. Die eigentliche Stärke ist Bewegung: Das Gerät dreht sich oder der Laptop klappt auf, während deine App auf dem Bildschirm läuft. Für Launch-Videos und App-Store-Previews ist das inzwischen die beliebteste Art.
Mockup, Wireframe und Prototyp
Die drei werden ständig verwechselt. Ein Wireframe ist das Skelett eines Screens: Kästen, Linien, Platzhaltertext, keine Farbe. Damit einigt man sich darauf, was wohin kommt. Ein Prototyp ist klickbar; tippst du auf einen Button, öffnet sich der nächste Screen. Den legt man Testpersonen vor.
Ein Mockup zeigt das fertige oder fast fertige Design in einer realistischen Umgebung. Klicken kann man darauf nicht, es ist zum Anschauen da.
Wie man ein Mockup erstellt
Früher gab es zwei Wege: eine PSD-Datei mit Smartobjekten in Photoshop öffnen oder eine Szene in einem 3D-Programm wie Blender oder Cinema 4D bauen. Der erste ist schnell, aber begrenzt. Der zweite ist mächtig, braucht aber Wochen Einarbeitung.
Heute gibt es Apps, die genau dafür gemacht sind. In Mockup Center geht es so:
- Screenshot oder Bildschirmaufnahme in die App ziehen.
- Ein Gerät wählen (iPhone, Galaxy, iPad, MacBook, Apple Watch und mehr) oder eine animierte Vorlage öffnen.
- Winkel, Licht und Hintergrund einstellen und als PNG oder Video exportieren.
Die einzelnen Schritte erklärt unser Ratgeber Mockup erstellen.
Was ein gutes Mockup ausmacht
Nach sehr vielen Store-Seiten und Launch-Posts sehen wir bei den guten immer dieselben Gewohnheiten:
- Der Screenshot ist scharf. Ein verwaschener Bildschirm lässt selbst eine teure 3D-Szene billig aussehen. Nimm ihn in der echten Auflösung des Geräts auf.
- Die Statusleiste ist aufgeräumt: 9:41, voller Akku, keine Benachrichtigungen. Ein Detail, aber es fällt auf.
- Der Hintergrund konkurriert nicht mit dem Produkt.
- Jedes Bild sagt eine Sache, mit einer Funktion und einer Überschrift.
