Mockup
Ein Mockup ist ein gestalteter Entwurf, der zeigt, wie eine Seite aussehen soll — mit Farben, Schriften und Bildern, aber ohne Funktion. Es liegt zwischen dem groben Bauplan und der fertigen Umsetzung.
Die Abgrenzung
Der Bauplan klärt die Struktur, das Mockup die Gestaltung, der Prototyp den Ablauf. Wer diese Schritte zusammenlegt, diskutiert Farben, während die Reihenfolge noch falsch ist — und ändert beides mehrfach.
In kleinen Projekten kann man Schritte überspringen. Sinnvoll ist das, wenn die Struktur unstrittig ist; unsinnig, wenn noch nicht feststeht, was auf die Seite gehört.
Woran ein Entwurf zu beurteilen ist
Nicht daran, ob er gefällt, sondern ob ein Fremder in fünf Sekunden erkennt, worum es geht und was er tun kann. Das lässt sich prüfen, indem man jemandem den Entwurf kurz zeigt und danach fragt — die Antworten sind regelmäßig ernüchternd und immer nützlich.
Zweites Kriterium: Funktioniert es auch im ungünstigen Fall? Ein Entwurf mit drei gepflegten Beispielprodukten sagt nichts über eine Kategorie mit einem einzigen oder mit hundertzwanzig.
Der Unterschied zum fertigen Bildschirm
Ein Entwurf zeigt einen Zustand. Eine Anwendung hat viele: leer, ladend, fehlerhaft, überfüllt, ohne Berechtigung. Diese Zustände werden im Entwurf fast nie mitgezeichnet und sind später der Teil, über den am meisten gestritten wird.
Der billige Gegenzug: Für jeden Hauptbildschirm zusätzlich den leeren und den Fehlerzustand entwerfen. Das sind zwei Bilder mehr und spart im Bau die meisten Rückfragen.
Womit man es füllt
Mit echten Inhalten. Ein Entwurf mit Blindtext und Musterbildern sieht immer gut aus — und fällt zusammen, sobald der wirkliche Text doppelt so lang ist und das Produktfoto anders geschnitten.
Wir arbeiten deshalb früh mit Ihren tatsächlichen Überschriften und Bildern. Das ist unbequemer und erspart die Enttäuschung nach dem Einpflegen.
Rechtsgrundlagen
- Urheberrechtsgesetz (UrhG)(öffnet in neuem Tab)§ 29 zur Unübertragbarkeit des Urheberrechts, §§ 31 ff. zu den Nutzungsrechten
- Bürgerliches Gesetzbuch (BGB)(öffnet in neuem Tab)Anfechtung §§ 119–122, Bindung an den Antrag § 145, AGB-Recht §§ 305–310, Annahmeverzug § 615 (Ausfallgebühr), Werkvertrag §§ 631 ff., Widerruf §§ 355 ff., Zahlungsdienste §§ 675e Abs. 4, 675u, 675v
- WCAG 2.1 (W3C-Empfehlung)(öffnet in neuem Tab)Grundlage der EN 301 549
Häufige Fragen zu Mockup
Welche Rechte am Mockup erhält der Auftraggeber, wenn der Vertrag dazu nichts sagt?
Was lässt sich an einem Mockup zur Barrierefreiheit schon messen?
Für welche Bildschirmbreite muss ein Mockup mindestens vorliegen?
Was bedeutet die Freigabe eines Mockups für die Abnahme der fertigen Website?
Welche zwei verschiedenen Dinge werden Mockup genannt?
Cookie-Banner-Pflicht: wann er nötig ist und wann nicht
Ein Cookie-Banner ist keine allgemeine Website-Pflicht, sondern die Folge bestimmter Werkzeuge. Welche Einbindungen ihn auslösen, warum „Ablehnen" auf die erste Ebene gehört und wie eine Website ganz ohne Banner auskommt.
Barrierefreie Website: wen die Pflicht trifft — und wen nicht
Das Barrierefreiheitsstärkungsgesetz gilt seit Juni 2025, und seither kursieren zwei falsche Behauptungen: Es gelte für alle Websites, oder es gelte für fast niemanden. Beides stimmt nicht. Wer wirklich betroffen ist, was gefordert wird und warum sich die Umsetzung auch ohne Pflicht rechnet.
Passende Leistungen
Webdesign & Redesign
Individuelle Websites in Figma entworfen und mit Tailwind CSS sauber umgesetzt — responsiv, schnell und auf Ihre Marke zugeschnitten.
Mehr dazuUI/UX Design & Prototyping
Von der User-Journey bis zum klickbaren Prototyp: Interfaces, die Nutzer intuitiv verstehen und die Ihre Conversion-Ziele erreichen.
Mehr dazu