Ein Mockup ist ein realistisches Bild davon, wie ein Design am fertigen Objekt aussieht — das Logo auf der Dose, das Plakat an der Wand, die Website auf dem Bildschirm. Es zeigt nichts, was es nicht schon gibt; es zeigt das Vorhandene so, wie der Kunde es später sehen wird.
Genau darin liegt der Wert. Ein Logo als freigestellte Datei ist für die meisten Menschen schwer zu beurteilen. Dasselbe Logo auf einem fotografierten Becher, mit Schatten und Lichtkante, beurteilt jeder sofort. Ich schicke deshalb seit Jahren keine nackten Entwürfe mehr in Freigaberunden.
Was ein Mockup ist
Technisch ist ein Mockup eine vorbereitete Bilddatei — meist eine PSD — in der eine Fläche als Platzhalter angelegt ist. Diese Fläche ist bereits perspektivisch verzerrt, darüber liegen Ebenen für Schatten, Reflexe und Materialstruktur. Sie setzen Ihr Motiv flach ein, alles andere passiert automatisch.
Nicht zu verwechseln mit einem Foto Ihres Produkts. Ein Mockup zeigt ein Produkt, das es so noch nicht gibt. Es kommt deshalb vor der Produktion zum Einsatz, nicht danach.
Mockup, Wireframe, Prototyp — was ist was?
Die drei Begriffe werden ständig durcheinandergeworfen. Sie beschreiben aber drei verschiedene Phasen:
- Wireframe — grauer Kasten, in dem steht, was wo hinkommt. Keine Farben, keine Schriften, keine Bilder. Es geht um Struktur und Hierarchie.
- Mockup — das fertige Aussehen, statisch. Farben, Typografie, Bilder, alles an seinem Platz. Man kann es ansehen, aber nicht bedienen.
- Prototyp — das Mockup mit Verhalten. Klickbar, mit Übergängen, um Abläufe zu testen.
In Kundenprojekten laufen die drei praktisch nie sauber nacheinander ab. Bei kleinen Websites springe ich direkt vom Wireframe ins Mockup; einen klickbaren Prototypen baue ich nur, wenn es um einen Bestell- oder Buchungsablauf geht, bei dem sich Fehler später teuer rächen.
Wofür ich Mockups einsetze
- Freigaben. Ein Entwurf im Kontext wird in einer Runde freigegeben, ein Entwurf auf weißem Grund in dreien.
- Druckabnahme. Bevor eine Verpackung in Produktion geht, zeigt das Mockup, ob das Motiv an der Falzkante noch funktioniert.
- Referenzen und Portfolio. Auf meiner Seite mit den Referenzen stehen Projekte im Gerätekontext — das liest sich schneller als ein nackter Screenshot.
- Social Media. Ein Produktbild im Mockup-Look funktioniert in der Timeline besser als ein freigestelltes Objekt.
So funktioniert ein Mockup technisch
Der Platzhalter in der PSD ist ein Smartobjekt. Doppelklick auf die Ebenenminiatur öffnet ihn als flaches, unverzerrtes Dokument. Dort setzen Sie Ihr Motiv ein, speichern, schließen den Tab — und im Hauptdokument sitzt es perspektivisch korrekt, mit Schatten und Reflexen.
Wie Smartobjekte funktionieren und welche Fehler dabei am häufigsten passieren, steht in meinem Beitrag dazu. Der wichtigste in Kurzform: Ziehen Sie Ihr Motiv im Smartobjekt immer bis an alle vier Kanten, sonst bleibt außen ein Streifen der alten Vorlage stehen.
Drei kostenlose Vorlagen zum Ausprobieren
Alle drei sind PSD-Dateien mit vorbereiteten Smartobjekten. Herunterladen, öffnen, Motiv einsetzen — mehr ist nicht zu tun.
→ Tetra-Pak-Mockup herunterladen
→ Getränkedosen-Mockup herunterladen
→ Apple-Geräte-Mockup für Website- und App-Entwürfe auf iPhone, iPad, MacBook und iMac
Weitere Dateien liegen unter Downloads, die komplette Sammlung unter Mockup-Design.
Mockup oder KI-Bild?
Seit Bildgeneratoren brauchbare Produktbilder liefern, stellt sich die Frage ernsthaft. Meine Antwort nach einiger Erfahrung mit beidem:
Ein KI-Bild ist schneller, wenn es um Stimmung geht — ein Café, eine Auslage, eine Situation. Es ist unbrauchbar, sobald das Design exakt stimmen muss. Generatoren erfinden Buchstaben, verschieben Logos und verändern Farben. Für einen Entwurf, der in den Druck geht, ist das disqualifizierend.
Ein Mockup platziert genau Ihre Datei, pixelgenau und in der richtigen Farbe. Der Umweg lohnt sich überall dort, wo am Ende eine Freigabe steht und kein Stimmungsbild.
In der Praxis kombiniere ich beides: Hintergrund und Szene aus dem Generator, das Produkt selbst als Mockup darübergelegt.
Woran Sie ein brauchbares Mockup erkennen
- Getrennte Schatten- und Lichtebenen. Stecken die Schatten fest im Hintergrundbild, sieht jedes helle Motiv falsch aus.
- Ausreichende Auflösung. Für Druck mindestens 300 dpi in Endgröße. Viele Gratis-Vorlagen liefern 72 dpi — für den Bildschirm reicht das, für ein Datenblatt nicht.
- Realistische Verzerrung. Ein Etikett auf einer Dose muss sich an den Rändern wölben. Ist die Fläche flach, wirkt das Ergebnis aufgeklebt.
- Eine klar benannte Platzhalter-Ebene. Wer die erst suchen muss, verliert mehr Zeit, als die Vorlage spart.
Häufige Fragen
Welche Software brauche ich für ein Mockup?
Für PSD-Mockups Photoshop oder ein Programm, das Smartobjekte unterstützt — Affinity Photo kann das inzwischen weitgehend. Photopea öffnet PSDs im Browser und reicht für einfache Fälle. GIMP scheitert an Smartobjekten.
Darf ich kostenlose Mockups kommerziell nutzen?
Das hängt an der Lizenz der jeweiligen Vorlage, nicht am Preis. Kostenlos heißt oft „frei für private Nutzung, Namensnennung bei kommerzieller“. Vor dem Kundenprojekt lesen — nachträglich wird es teuer.
Was ist der Unterschied zwischen Mockup und Rendering?
Ein Rendering wird aus einem 3D-Modell berechnet und lässt sich frei drehen und beleuchten. Ein Mockup ist ein festes Foto mit einer austauschbaren Fläche. Das Rendering ist flexibler und deutlich aufwendiger, das Mockup in zwei Minuten fertig.
Kann ich ein Mockup für meine Website nutzen?
Ja, und es ist dort oft die bessere Wahl als ein reiner Screenshot. Achten Sie auf die Dateigröße: Mockups sind großflächige Fotos mit weichen Verläufen und werden als JPEG schnell schwer. Ich lasse solche Bilder über PicPrepper laufen, bevor sie ins Web gehen.
Fazit
Ein Mockup ersetzt keine Gestaltung. Es sorgt dafür, dass die Gestaltung richtig ankommt — und verkürzt damit den Teil eines Projekts, der am meisten Zeit frisst: die Abstimmung.
Probieren Sie es an einer der Vorlagen oben aus. Wenn Sie stattdessen jemanden brauchen, der Entwurf und Präsentation übernimmt: schreiben Sie mir kurz, worum es geht.
Gunther Schoepf