Was ist ein Mockup?
Der Grundriss steht, jetzt willst du wissen, wie das Haus aussieht. Fassade, Fenster, Farbe. Genau das ist ein Mockup für deine Website: ein Bild der fertigen Seite, bevor jemand eine Zeile programmiert.
Die Nielsen Norman Group definiert es als statische, detailgetreue Simulation einer geplanten Oberfläche mit gestalterischen Details wie Farben und Bildern. Figma beschreibt es als ausgefeilte Darstellung des Endprodukts. Kurz: Ein Mockup zeigt das Aussehen.
Was es nicht kann: Du kannst nichts anklicken, nichts ausfüllen, nirgendwohin navigieren. Ein Mockup ist ein Bild, kein Programm.
Wireframe, Mockup, Prototyp
Die drei Schritte bauen aufeinander auf. Balsamiq bringt es auf den Punkt: Das Wireframe kommt immer vor dem Mockup.
Schritt
Zeigt
Wireframe
den Aufbau, in Grau
Mockup
das Aussehen, statisch
Prototyp
die Bedienung, klickbar
Ganz scharf sind die Grenzen nicht. Manche sagen auch zu groben Skizzen Mockup — das Tool Balsamiq hieß früher selbst „Balsamiq Mockups“, obwohl es Wireframes macht. In der Regel meint Mockup aber den detailgetreuen Entwurf. Und das Moodboard? Das sammelt vorher Stimmung, Farben und Bildsprache, noch ganz ohne Seitenaufbau.
Wofür du ein Mockup brauchst
- Freigabe: Kunde oder Chef sehen, wie es aussieht, und sagen Ja, bevor gebaut wird.
- Abstimmung: Der Entwickler weiß genau, welche Farben, Abstände und Schriften gemeint sind.
- Marken-Check: Passen Farben und Bildsprache zu deinem Corporate Design?
- Marketing: Produkt-Mockups zeigen Waren, die es noch nicht gibt, etwa im Shop oder für Vorbestellungen.
Für Produkt-Mockups gibt es inzwischen Baukästen ohne Designkenntnisse. Smartmockups aus Tschechien, 2016 gegründet und 2021 von Canva gekauft, meldete für 2020 über 3 Millionen erstellte Mockups. Heute steckt das Werkzeug als App „Mockups“ in Canva.
Vorlagen und Geräte: worauf du achten musst
Ein Mockup aus einer Vorlage ist schnell gemacht. Die Fallen liegen im Kleingedruckten.
Lizenz · Adobe Stock
Logo-Tasse für den eigenen Shop
500.000
Kopien mit Standard-Lizenz
Extended
nötig für Ware zum Verkauf
Werbung ja, Merchandise nur mit erweiterter Lizenz
Laut Lizenzbedingungen von Adobe Stock, Stand November 2026. Andere Anbieter haben eigene Regeln.
Richtlinie · Apple
App im iPhone-Rahmen
25 mm
Mindesthöhe im Druck
200 px
Mindesthöhe am Bildschirm
Gerät gerade, unverändert, mit echtem App-Screen
Apples Marketing-Richtlinien verbieten schräge, gespiegelte oder gerenderte Geräte und Hüllen.
Viele kostenlose Vorlagen verlangen außerdem eine Quellenangabe. Fremde Marken und Logos im Mockup brauchen die Zustimmung des Rechteinhabers. Prüf im Einzelfall die Bedingungen der Vorlage — das hier ist keine Rechtsberatung.
Häufige Fehler
Fehler 1 · Das Mockup für fertig halten
Es sieht aus wie die echte Seite, deshalb glauben alle, es sei fast geschafft. Dabei fehlen Fehlermeldungen, Ladezeiten, Handy-Ansicht und alles, was beim Klicken passiert. Lass am Mockup nur das Aussehen freigeben. Die Bedienung testest du am Prototyp.
Fehler 2 · Ohne Wireframe loslegen
Wer gleich schön gestaltet, diskutiert über Blau oder Grün statt über die Frage, ob der Besucher findet, was er sucht. Erst Aufbau, dann Aussehen.
Fehler 3 · Nur am Desktop gestalten
Ein Mockup in 1.440 Pixeln Breite sieht großartig aus. Die meisten deiner Besucher kommen aber mit dem Handy. Mach von jeder wichtigen Seite auch eine schmale Version.
Fehler 4 · Lizenz der Vorlage ignorieren
Die Vorlage war gratis, der Ärger später nicht. Prüf vor dem Einsatz, ob kommerzielle Nutzung erlaubt ist und ob eine Quellenangabe fällig wird.
Womit du Mockups erstellst
- Für Websites und Apps: Figma, Penpot oder Sketch. Figma bietet in der Community viele Vorlagen.
- Für Produkt-Mockups: Canva Mockups, Photoshop mit Vorlagen, Bibliotheken wie Adobe Stock oder Freepik.
- Für App-Werbung: die offiziellen Geräte-Rahmen von Apple.
Häufige Fragen
Ist ein Mockup schon die fertige Website?
Nein. Es ist ein Bild davon, wie sie aussehen soll. Programmiert, getestet und befüllt wird danach.
Brauche ich als kleines Unternehmen ein Mockup?
Für die Startseite und eine wichtige Unterseite lohnt es sich fast immer. So siehst du vor dem Bau, ob Farben, Bilder und Texte zusammenpassen, und sparst teure Änderungen.
Darf ich kostenlose Mockup-Vorlagen kommerziell nutzen?
Oft ja, aber nicht immer und manchmal nur mit Quellenangabe. Für Ware zum Weiterverkauf brauchst du bei Stock-Anbietern meist eine erweiterte Lizenz. Lies die Bedingungen der jeweiligen Vorlage.
Was ist der Unterschied zwischen Mockup und Prototyp?
Das Mockup zeigt das Aussehen und ist statisch. Der Prototyp lässt sich anklicken und testet, ob die Bedienung funktioniert.
