Das perfekte Mockup, die ernüchternde Live-Seite
Ich gestalte seit über elf Jahren — angefangen als Gestaltungstechnischer Assistent, später mit Fokus auf Web. Und eine Szene hat sich in dieser Zeit unzählige Male wiederholt: Das Mockup ist abgenommen, alle sind begeistert, die Bilder leuchten, jede Kante sitzt. Dann geht die Seite live — und plötzlich lädt sie zäh, die Titelgrafik ploppt erst nach Sekunden auf, das Logo wirkt matschig. Dasselbe Design, ein völlig anderer Eindruck. Woran liegt das? An drei Brüchen, die im Mockup schlicht unsichtbar sind.
Wo die Illusion herkommt
Ein Mockup ist eine kontrollierte Umgebung. Das Design-Tool zeigt jedes Bild in voller Auflösung, 1:1, ohne Ladezeit, auf einem scharfen Retina-Display, mit Platzhalter-Bildern, die zufällig genau passen. Nichts davon gilt live: Dort kommt das Bild über eine Leitung, wird vom CMS ausgeliefert, landet auf einem Handy im Zug und muss gegen echten, oft sperrigen Content bestehen. Das Mockup verspricht ein Ergebnis unter Idealbedingungen — die Live-Seite liefert es unter realen.
Was auf dem Weg zur Live-Seite passiert
Der typische Ablauf: Ich exportiere die Assets in bester Qualität, damit im nächsten Schritt nichts verlorengeht. Die Redaktion pflegt die Inhalte und lädt Bilder direkt aus dem Kamera- oder Stock-Export ins CMS — unbearbeitet, mehrere Megabyte schwer. Niemand skaliert, niemand konvertiert, weil im Editor ja alles gut aussieht. Genau hier entsteht die Lücke: Das Design war nie das Problem, die Auslieferung ist es.
Die drei häufigsten Brüche
1. Bildgewicht. Die Titelgrafik, die im Mockup 1 MB als PNG-Export hatte, landet als 4-MB-Datei im Slot. Auf dem Handy sind das mehrere Sekunden, bevor überhaupt etwas erscheint — der Largest Contentful Paint kippt. Wie sich das über eine ganze Website summiert, habe ich in einer eigenen Beispielrechnung durchgezogen.
2. Retina-Missverständnis. Das Logo sieht im Mockup knackscharf aus — weil das Tool es vektorbasiert oder in doppelter Auflösung rendert. Live wird eine zu kleine PNG-Fassung hochskaliert und wirkt unscharf. Die Lösung ist fast immer SVG oder eine saubere 2×-Fassung; mehr dazu unter Retina-Bilder optimieren.
3. Format. Fotos als PNG, Grafiken als JPG, nichts als WebP oder AVIF. Allein die richtige Formatwahl spart bei gleichem Aussehen oft 30–50 %. Welches Format wann gehört, klärt der Formate-Vergleich.
Wie ich heute gestalte
Der wichtigste Wandel in meiner Arbeit war ein gedanklicher: Ich entwerfe nicht mehr für das Mockup, sondern für die Leitung. Konkret heißt das:
- Mit echtem Content testen. Nicht das perfekte Stockfoto, sondern ein typisches Kundenbild in typischer Größe. Wenn das Layout damit trägt, trägt es live.
- Ein Bild-Budget setzen. Ich lege pro Seite fest, wie viel die Bilder wiegen dürfen (z. B. „unter 1 MB above the fold"), und gestalte innerhalb dieser Grenze.
- Formate früh mitdenken. Flächige Illustrationen als SVG, Fotos als WebP/AVIF — nicht als nachträgliche Optimierung, sondern als Teil des Entwurfs.
Der Übergabe-Schritt, den ich nie mehr auslasse
Zwischen „Design fertig" und „geht live" gehört ein Schritt, den viele überspringen: die Aufbereitung der Assets für die Auslieferung. Ich exportiere nicht nur in Ideal-Qualität, sondern liefere zusätzlich web-fertige Fassungen — richtig skaliert, konvertiert, komprimiert. Das dauert Minuten und entscheidet darüber, ob das Live-Ergebnis dem Mockup nahekommt. Zwei Handgriffe reichen dafür meistens: auf die Anzeigegröße skalieren und über den Konverter ins moderne Format bringen — bei JNRT Pixel lokal im Browser, ohne Upload.
Checkliste vor dem Go-live
- Sind alle Bilder auf ihre tatsächliche Anzeigegröße skaliert?
- Liegen Fotos als WebP/AVIF vor, Flächengrafiken/Logos als SVG?
- Bleibt die wichtigste Seite (Startseite) unter dem gesetzten Bild-Budget?
- Wurde mit echtem, nicht mit idealem Content getestet?
- Ist die Titelgrafik (LCP) klein und schnell — oder das Nadelöhr?
Ein Design ist erst dann gut, wenn es die Leitung überlebt. Das Mockup zeigt die Absicht; die Live-Seite zeigt das Handwerk. Und der Unterschied zwischen beiden ist fast immer eine Frage der Bild-Aufbereitung — nicht des Entwurfs.
Quellen
web.dev — Optimize Largest Contentful Paint · HTTP Archive — Web Almanac, Page Weight · web.dev — Serve images in modern formats.