Web & Entwicklung

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.

Redaktionell geprüft von Alexander SeidlertwentyonepixelsStand:

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

Häufige Fragen zu Mockup

Nur die Rechte, die der gemeinsame Vertragszweck trägt – so bestimmt es § 31 Absatz 5 UrhG, wenn die Nutzungsarten nicht einzeln bezeichnet sind. Ein gestalteter Entwurf ist nach § 2 Absatz 1 Nummer 4 UrhG als Werk geschützt, auch der verworfene. Wer einen abgelehnten Entwurf später anderswo umsetzen lassen will, braucht dafür eine eigene Abrede. Die Regel für Verträge lautet deshalb: Nutzungsarten einzeln benennen – Website, Druck, Bearbeitung, Weitergabe an Dritte.

Kontrast und Schriftgröße – beides steht im Bild und lässt sich vor der Umsetzung nachrechnen. Erfolgskriterium 1.4.3 der WCAG 2.1 setzt für normalen Text 4,5:1 an; ab 18 Punkt, rund 24 Pixel, oder ab 14 Punkt fett genügen 3:1. Nicht messbar sind an einem Bild die Reihenfolge, in der die Tastatur die Elemente erreicht, die Beschriftung für Vorleseprogramme und der sichtbare Fokus. Diese drei entstehen erst im Code.

Für 320 CSS-Pixel. So weit muss Inhalt nach Erfolgskriterium 1.4.10 zusammenlaufen, ohne dass Information oder Funktion verloren geht – das entspricht 400 Prozent Zoom in einem Fenster von 1.280 Pixeln Breite. Wer allein die Desktop-Fassung entwirft, überlässt den Umbruch der Umsetzung und damit dem Zufall. Ergänzend fordert Kriterium 1.4.4, dass Text auf 200 Prozent wächst, ohne dass Inhalt verschwindet. Beide Kriterien gehören zur Stufe AA.

Die Freigabe eines Entwurfs ist keine Abnahme. Abgenommen wird nach § 640 BGB das fertige Werk, und wegen unwesentlicher Mängel darf der Besteller die Abnahme nicht verweigern; nach Absatz 2 gilt das Werk auch als abgenommen, wenn er eine angemessene Frist verstreichen lässt, ohne mindestens einen Mangel zu benennen – bei Verbrauchern nur nach einem Hinweis in Textform. Die Freigabe wirkt anders: Sie macht den Entwurf zur vereinbarten Beschaffenheit nach § 633 Absatz 2 BGB.

Der gestaltete Entwurf eines Bildschirms und die Präsentationsvorlage, die einen fertigen Screenshot in das Foto eines Laptops oder Telefons setzt. Belegt ist das Wort um 1920 im Flugzeugbau für maßstäbliche Attrappen; über Architektur und Zahntechnik ist es in die Software gelangt. Die Verwechslung hat Folgen: Eine Präsentationsvorlage entscheidet keine Gestaltungsfrage. Sie zeigt ansprechender, was vorher entschieden wurde, und ersetzt keinen einzigen Entwurfsschritt.

Mehr zum Thema

9 Min. Lesezeit

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.

9 Min. Lesezeit

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.

Alle Fachbeiträge ansehen

Passende Leistungen

Webdesign & Redesign

Individuelle Websites in Figma entworfen und mit Tailwind CSS sauber umgesetzt — responsiv, schnell und auf Ihre Marke zugeschnitten.

Mehr dazu

UI/UX Design & Prototyping

Von der User-Journey bis zum klickbaren Prototyp: Interfaces, die Nutzer intuitiv verstehen und die Ihre Conversion-Ziele erreichen.

Mehr dazu