Der Entwurf ist ausgewählt, die Dateien sind übergeben – und im Browser verliert das Design plötzlich seine Wirkung. Fünf typische Bruchstellen zwischen Design und Entwicklung, und was Auftraggeber tun können, damit aus einem starken Entwurf auch eine starke Website wird.
Ein Design-Wettbewerb liefert in wenigen Tagen, wofür früher Wochen nötig waren: einen Entwurf, der sitzt. Der schwierigere Teil kommt danach. Zwischen einer Designdatei und einer Website im Browser liegt eine Übersetzungsleistung, und bei jeder Übersetzung geht etwas verloren – mal die Ladezeit, mal die Lesbarkeit, mal die Pflegbarkeit.
Die gute Nachricht: Die Verluste sind vorhersehbar. Wer die typischen Bruchstellen kennt, kann sie bereits in der Designphase entschärfen.
1. Schriften sind schön – und teuer
Drei Schriftfamilien mit je vier Schnitten wirken im Entwurf großzügig. Im Browser bedeuten sie zwölf Dateien, die geladen, geparst und gerendert werden müssen, bevor der erste Text erscheint. Zwei Schnitte pro Familie reichen in den allermeisten Fällen; Kursiv und Halbfett lassen sich oft ersetzen, ohne dass es jemandem auffällt. Wer variable Fonts einsetzt, bekommt Zwischenstufen praktisch geschenkt.
Ähnliches gilt für Icons. Ein komplettes Icon-Set einzubinden, um sieben Symbole zu verwenden, ist ein Klassiker. Sieben einzelne SVGs sind kleiner, schärfer und flexibler einfärbbar.
2. Bilder entscheiden über die Core Web Vitals
Das großformatige Headerbild ist fast immer das Element, das Google als Largest Contentful Paint misst – also als den Moment, in dem die Seite für Besucher „da“ ist. Ein vier Megabyte schweres JPEG an dieser Stelle kostet Sichtbarkeit und Conversions gleichermaßen.
Praktisch heißt das: Motive so wählen, dass sie auch bei starker Komprimierung funktionieren – große Flächen verzeihen mehr als feine Texturen. Für mobile Ansichten eigene Bildausschnitte mitdenken, statt dasselbe Panorama zu beschneiden. Und Text niemals fest ins Bild rendern: Text im Bild ist nicht durchsuchbar, nicht übersetzbar und für Screenreader unsichtbar.
3. Zwischen den Breakpoints liegt die halbe Wahrheit
Entwürfe entstehen typischerweise in zwei oder drei festen Breiten: Desktop, Tablet, Smartphone. Benutzt werden Websites in jeder erdenklichen Breite dazwischen – mit vergrößerter Schrift, im geteilten Bildschirm, im Querformat.
Die Stellen, die dabei brechen, sind fast immer dieselben: Navigationen, die genau bei 1.180 Pixeln umbrechen. Buttons, deren Beschriftung auf Englisch passt und auf Deutsch nicht. Tabellen, für die es kein mobiles Konzept gibt. Formulare mit Labels neben dem Feld, bis kein Platz mehr ist. Ein Satz zu jedem dieser Fälle im Entwurf spart in der Umsetzung Tage.
4. Kontraste sind keine Geschmacksfrage mehr
Seit dem 28. Juni 2025 gilt in Deutschland das Barrierefreiheitsstärkungsgesetz. Es verpflichtet Anbieter bestimmter digitaler Dienstleistungen für Verbraucher – darunter Onlineshops, Buchungssysteme und Bankdienste – zu barrierefreien Angeboten. Bei Dienstleistungen ausgenommen sind Kleinstunternehmen mit weniger als zehn Beschäftigten und höchstens zwei Millionen Euro Jahresumsatz. Das ersetzt keine Rechtsberatung, verschiebt aber die Diskussion: Kontrast ist kein Stilmittel mehr, über das verhandelt wird.
Für den Entwurf heißt das konkret: mindestens 4,5:1 Kontrast für Fließtext, 3:1 für große Schrift und für Bedienelemente. Sichtbare Fokuszustände für jedes interaktive Element, nicht nur Hover. Information nie allein über Farbe transportieren – das rot markierte Pflichtfeld braucht zusätzlich Symbol oder Text. Und Klickflächen, die auch mit dem Daumen zuverlässig zu treffen sind.
Diese Anforderungen im Nachhinein einzubauen, ist teuer. Im Entwurf kosten sie fast nichts.
5. Pflegbarkeit wird zu spät mitgedacht
Ein Entwurf zeigt den perfekten Zustand: die Überschrift mit genau der richtigen Länge, drei Teammitglieder, vier Produkte. Der Alltag sieht anders aus – sieben Teammitglieder, eine Überschrift mit neunzig Zeichen, ein Produkt ohne Bild.
Wer die Seite später selbst pflegen möchte, sollte deshalb früh klären, aus welchen Bausteinen sie besteht und wie sich diese kombinieren lassen. Ein Entwurf aus zehn wiederverwendbaren Sektionen wird zu einem System, das die Redaktion bedienen kann. Ein Entwurf aus drei einmaligen Seiten bleibt genau das: drei einmalige Seiten.
Was ins Übergabepaket gehört
- Alle Quelldateien, nicht nur Exporte
- Die Schriftlizenzen inklusive Webfont-Nutzung – ein häufig übersehener Punkt
- Logos als SVG, in Positiv- und Negativversion
- Farbwerte als Liste, inklusive der Abstufungen für Hover, Fokus und Deaktiviert
- Zustände für Formularfelder: leer, ausgefüllt, fehlerhaft, deaktiviert
- Die leeren Zustände: Suche ohne Treffer, Warenkorb ohne Inhalt, Liste ohne Einträge
- Ein Hinweis, welche Elemente skalieren müssen und welche fix bleiben dürfen
Wie so ein Übergabepaket in der Praxis aussieht und welche technischen Standards – Ladezeit, Barrierefreiheit, Datenschutz – dabei von Anfang an mitlaufen sollten, beschreibt Webforging, eine Webdesign-Agentur aus München, in ihrem Leistungsüberblick.
Fünf Fragen an die Umsetzung
- Welche Ladezeit-Werte sind das Ziel, und wie werden sie gemessen?
- Wird die Seite gegen WCAG 2.1 AA geprüft – und von wem?
- Welche Inhalte lassen sich später selbst ändern, welche nicht?
- Wem gehören Code, Design und Daten nach Projektende?
- Was passiert, wenn die Agentur in zwei Jahren gewechselt werden soll?
Wer auf diese fünf Fragen klare Antworten bekommt, hat die größten Risiken abgeräumt, bevor die erste Zeile Code entsteht.
Fazit
Ein guter Entwurf ist keine halbe Website – aber eben auch keine ganze. Was ihn trägt, sind Entscheidungen, die früh fast nichts kosten und später kaum noch zu korrigieren sind: wie viele Schriften, wie schwer die Bilder, wie stark die Kontraste, wie modular der Aufbau. Wer diese vier Punkte schon im Briefing klärt, bekommt am Ende das, was auf dem Entwurf zu sehen war. Nur eben im Browser.
Über den Autoren:
Dominic Spernath ist Geschäftsführer von Webforging UG und kennt sich bei dem richtigen DSGVO-konformen Design, der Entwicklung und den messbaren SEO Erfolgen einer Website aus.