Was ist ein Mockup? Bedeutung, Arten und Beispiele

Bevor jemand Geld für Druck, Produktion oder Programmierung ausgibt, kommt fast immer dieselbe Frage: Wie sieht das in echt aus? Ein Mockup beantwortet sie. Webdesigner zeigen damit eine Seite in voller Farbe, bevor eine Zeile Code geschrieben ist. Druckereien zeigen ein Logo auf dem Shirt, bevor Rohware bestellt wird. Etsy-Händler verkaufen Tassen, die erst nach der Bestellung bedruckt werden. Und auf dem Bau oder beim Zahnarzt bedeutet das Wort noch einmal etwas anderes.

Kurz gesagt. Ein Mockup ist eine realistische, statische Vorschau eines Entwurfs, die zeigt, wie er im fertigen Zustand aussieht, bevor das Endprodukt existiert. Im Webdesign ist es ein detailgetreuer Bildschirmentwurf ohne Klickfunktion. Im Produkt- und Druckdesign ist es ein Motiv auf dem Foto eines Gegenstands wie T-Shirt, Tasse oder Verpackung.

Was ist ein Mockup? Die Bedeutung

Das englische „to mock up“ heißt so viel wie „nachbauen, eine Attrappe anfertigen“. Ursprünglich war ein Mock-up ein maßstabsgetreues oder lebensgroßes Modell, zum Beispiel ein Cockpit aus Holz oder ein Fahrzeug aus Ton, an dem man Form und Bedienung prüfte, bevor die Serienproduktion begann. Das Design hat den Begriff für das digitale Gegenstück übernommen: ein Bild, das fertig aussieht und dazu dient, eine Idee zu prüfen und zu verkaufen.

Je nach Umfeld meint das Wort heute verschiedene Dinge:

Bereich	Was ein Mockup dort ist
Webdesign und UX	statischer, detailgetreuer Entwurf eines Bildschirms oder einer Webseite
Produkt, Druck und Merch	Motiv auf Foto oder 3D-Darstellung eines Produkts (Shirt, Tasse, Box)
Social-Media-Marketing	Vorlage, in die ein eigenes Design oder Foto eingesetzt wird
Architektur und Bau	Teilausschnitt einer Fassade oder eines Raums im Maßstab 1:1 zur Bemusterung
Zahnmedizin	provisorische Probeversion geplanter Veneers oder Kronen im Mund

Gemeinsam ist allen Bedeutungen der Zweck: Man beurteilt das Aussehen, bevor Zeit und Geld in die Umsetzung fließen. Im Rest dieses Beitrags geht es um die beiden häufigsten Bedeutungen im Design, das Website- und App-Mockup und das Produkt-Mockup.

Mockup, Wireframe und Prototyp: der Unterschied

Im Web- und App-Design ist das Mockup eine von drei Stufen, die vom groben Entwurf zum fertigen Produkt führen. Jede beantwortet eine andere Frage.

	Wireframe	Mockup	Prototyp
Detailtiefe	gering	hoch	hoch oder mittel
Zeigt	Aufteilung und Inhaltsblöcke	Farben, Schriften, Bilder, Abstände	fertige Optik plus Klicks und Übergänge
Interaktiv	statisch	statisch	klickbar
Beantwortet	„Wo steht was?“	„Wie sieht es aus?“	„Wie funktioniert es?“
Typischer Einsatz	frühe Planung, Inhaltsstruktur	Designabnahme mit Kunden	Nutzertests, Übergabe an die Entwicklung

Ein Wireframe arbeitet mit grauen Kästen und Platzhaltertext, damit sich das Gespräch um die Struktur dreht. Das Mockup bringt das echte visuelle Design hinzu, und genau hier reagieren Kunden auf Farben, Schrift und Bilder. Der Prototyp verknüpft die Mockups, sodass Testpersonen auf einen Button tippen und auf dem nächsten Screen landen. In der Praxis werden Stufen oft zusammengelegt: Eine kleine Firmenwebsite geht direkt von der Skizze zum Mockup, eine komplexe App durchläuft alle drei mehrmals. Verbreitete Werkzeuge für Website-Mockups sind Figma, Sketch und Adobe XD.

Arten von Produkt-Mockups mit Beispielen

Außerhalb des Webdesigns ist mit Mockup meist ein Produkt-Mockup gemeint. Diese Arten begegnen dir in Druck, Merch und Marketing am häufigsten:

• Textil-Mockups. T-Shirts, Hoodies, Sweatshirts, Jutebeutel und Caps, bei denen der Druck den Stofffalten folgt. Die Grundlage jedes Print-on-Demand-Shops.
• Tassen und Flaschen. Das Motiv legt sich um eine Rundung.
• Verpackungs-Mockups. Schachteln, Beutel, Etiketten, Flaschen und Dosen für Präsentationen oder Crowdfunding-Seiten vor der ersten Produktion.
• Druck- und Geschäftsausstattung. Visitenkarten, Flyer, Plakate, Briefpapier und Einladungen auf Tisch oder Wand.
• Geräte-Mockups. Eine Website oder App in einem Handy-, Laptop- oder Tablet-Rahmen für Launch-Seiten und Portfolios.
• Schilder und Werbeflächen. Ladenschild, Plakatwand, Fahrzeugbeschriftung oder Banner, um ein Logo in echter Größe zu zeigen.
• Buch- und Cover-Mockups. E-Books, Taschenbücher und Albumcover als greifbare Objekte.

Ein gutes Produkt-Mockup erkennst du an drei Dingen. Das Motiv folgt der Oberfläche, es biegt sich mit den Falten des Shirts oder der Rundung der Tasse. Licht und Schatten des Fotos liegen über dem Druck, sodass er gedruckt wirkt und nicht aufgeklebt. Und die Druckgröße entspricht dem, was die Druckerei tatsächlich produziert, damit Käufer das Produkt bekommen, das sie gesehen haben.

Wofür man Mockups braucht

1. Produktbilder im Shop. Print-on-Demand- und Etsy-Shops verkaufen Produkte, die erst nach der Bestellung bedruckt werden. Die Mockups sind hier die Produktfotos. Etsy empfiehlt in seinen Fotorichtlinien Bilder mit mindestens 2.000 Pixeln Breite.
2. Kundenabnahmen. Ein Logo auf dem Ladenschild oder auf der Arbeitskleidung wird schneller freigegeben als eine flache Logodatei, weil der Kunde den echten Zusammenhang sieht.
3. Farbentscheidungen. Ein Motiv auf weißen, grauen und schwarzen Shirts nebeneinander zeigt, welche Farbe passt, bevor Ware bestellt wird.
4. Pitches und Vorverkauf. Verpackungs- und Merch-Mockups testen die Nachfrage auf einer Crowdfunding-Seite oder in einem Social-Media-Post, bevor produziert wird.
5. Einheitliche Markenbilder. Launch-Seite, Katalog und Shop nutzen dieselbe Serie von Mockups.

Für Shop-Bilder gilt: Das erste Bild zeigt das Produkt klar auf ruhigem Hintergrund, danach folgen Bilder im Einsatz (das Shirt getragen, die Tasse auf dem Schreibtisch) und eine Farbübersicht. Ein echtes Foto eines bedruckten Musters neben den Mockups beantwortet die Frage „Wie sieht es wirklich aus?“ besser als jede weitere Szene. Wie man Produktfotos auf neutralem Grund aufnimmt, steht im Beitrag zum Packshot.

Was kostet ein Mockup?

Die Kosten hängen vor allem davon ab, wie individuell das Mockup sein muss:

• Kostenlose Wege. Kostenlose Mockup-Vorlagen und Online-Generatoren decken die meisten Bedürfnisse für Shirts, Tassen und Shop-Bilder ab. Beliebte Gratis-Szenen tauchen allerdings in vielen Shops auf.
• Kostenpflichtige Vorlagen und Abos. Vorlagenpakete, oft als PSD-Dateien mit Ebenen, und Generator-Abos bieten mehr Szenen, Models und Blickwinkel. Ein Paket wird meist einmal gekauft, ein Generator monatlich abgerechnet.
• Individuelle Mockups. Ein Fotostudio fotografiert ein echtes Muster oder baut eine 3D-Darstellung deiner Verpackung. Das ist der teuerste Weg und lohnt sich für Hauptbilder, Verpackungspräsentationen und Marken, die eigene Szenen brauchen.

Bei einem Website-Mockup sind die Kosten vor allem Designzeit: die Stunden, in denen aus einem Wireframe ein detailgetreuer Entwurf wird.

Ein Produkt-Mockup selbst erstellen mit Playyy

Playyy ist ein KI-Design-Agent mit eingebauter Mockup-Funktion, die dein Motiv auf Fotos von T-Shirts, Hoodies, Sweatshirts, Tassen und anderen Produkten setzt. Im Editor öffnest du unter „Elements“ die Mockups, fügst ein Kleidungsfoto ein und ziehst dein Design darauf. Ein Doppelklick platziert den Druck, du verschiebst ihn mit der Maus, ziehst an einer Ecke für die Größe und drehst ihn am oberen Griff. Das Menü für die Druckgröße bietet eine empfohlene Größe oder das Füllen der Druckfläche. Die Seite T-Shirt-Mockup führt durch denselben Ablauf ab dem Hochladen.

Wechselst du die Farbe des Kleidungsstücks, bleiben Falten, Bündchen und Schatten realistisch und der Druck genau so, wie du ihn gestaltet hast. So entstehen aus einer Platzierung Versionen in Hafer, Anthrazit und Marine, wie im Hoodie-Mockup-Generator. Du kannst den Agenten auch im Chat bitten, ein Design auf eine Tasse oder einen Beutel zu setzen, oder ein eigenes Produktfoto hochladen. Der Agent erkennt die bedruckbaren Flächen, etwa flache Seiten, aufrechte Zylinder wie Tassen und der Kamera zugewandte Vorderseiten von Kleidung, und legt das Motiv darauf, das dabei bearbeitbar bleibt.

Für eine ganze Merch-Kollektion setzt du mehrere Kleidungsstücke auf eine Seite und exportierst sie gemeinsam: Der Apparel-Mockup-Generator liefert PNG oder JPG gebündelt als ZIP für Shop-Bilder und PDF für Korrekturabzüge. Playyy ist mit täglich erneuerten Bonus-Credits kostenlos nutzbar.

Fazit

Ein Mockup ist eine realistische Vorschau, die zeigt, wie ein Entwurf fertig aussieht: im Webdesign als statischer, detailgetreuer Screen zwischen Wireframe und Prototyp, im Produktdesign als Motiv auf einem echten Gegenstand. Auf dem Bau und beim Zahnarzt erfüllt es denselben Zweck mit Material statt Pixeln. Für Shop-Bilder, Kundenabnahmen und Farbentscheidungen reicht heute ein Werkzeug, das dein Motiv auf ein Produktfoto legt, und mit der T-Shirt-Mockup-Seite von Playyy ist das erste Mockup in wenigen Minuten fertig.