{"id":34623,"date":"2026-09-29T09:45:02","date_gmt":"2026-09-29T07:45:02","guid":{"rendered":"https:\/\/www.designenlassen.de\/blog\/?p=34623"},"modified":"2026-09-29T09:45:04","modified_gmt":"2026-09-29T07:45:04","slug":"vom-entwurf-zur-fertigen-website-woran-gute-designs-in-der-umsetzung-scheitern","status":"publish","type":"post","link":"https:\/\/www.designenlassen.de\/blog\/vom-entwurf-zur-fertigen-website-woran-gute-designs-in-der-umsetzung-scheitern\/","title":{"rendered":"Vom Entwurf zur fertigen Website: Woran gute Designs in der Umsetzung scheitern"},"content":{"rendered":"\n

Der Entwurf ist ausgew\u00e4hlt, die Dateien sind \u00fcbergeben \u2013 und im Browser verliert das Design pl\u00f6tzlich seine Wirkung. F\u00fcnf typische Bruchstellen zwischen Design und Entwicklung, und was Auftraggeber tun k\u00f6nnen, damit aus einem starken Entwurf auch eine starke Website wird.<\/em><\/p>\n\n\n\n

\n
\"\"<\/figure>\n<\/figure>\n\n\n\n

Ein Design-Wettbewerb<\/a> liefert in wenigen Tagen, wof\u00fcr fr\u00fcher Wochen n\u00f6tig waren: einen Entwurf, der sitzt. Der schwierigere Teil kommt danach. Zwischen einer Designdatei und einer Website im Browser liegt eine \u00dcbersetzungsleistung, und bei jeder \u00dcbersetzung geht etwas verloren \u2013 mal die Ladezeit, mal die Lesbarkeit, mal die Pflegbarkeit.<\/p>\n\n\n\n

Die gute Nachricht: Die Verluste sind vorhersehbar. Wer die typischen Bruchstellen kennt, kann sie bereits in der Designphase entsch\u00e4rfen.<\/p>\n\n\n\n

1. Schriften sind sch\u00f6n \u2013 und teuer<\/h2>\n\n\n\n

Drei Schriftfamilien mit je vier Schnitten wirken im Entwurf gro\u00dfz\u00fcgig. Im Browser bedeuten sie zw\u00f6lf Dateien, die geladen, geparst und gerendert werden m\u00fcssen, bevor der erste Text erscheint. Zwei Schnitte pro Familie reichen in den allermeisten F\u00e4llen; Kursiv und Halbfett lassen sich oft ersetzen, ohne dass es jemandem auff\u00e4llt. Wer variable Fonts einsetzt, bekommt Zwischenstufen praktisch geschenkt.<\/p>\n\n\n\n

\u00c4hnliches gilt f\u00fcr Icons. Ein komplettes Icon-Set einzubinden, um sieben Symbole zu verwenden, ist ein Klassiker. Sieben einzelne SVGs sind kleiner, sch\u00e4rfer und flexibler einf\u00e4rbbar.<\/p>\n\n\n\n

2. Bilder entscheiden \u00fcber die Core Web Vitals<\/h2>\n\n\n\n

Das gro\u00dfformatige Headerbild ist fast immer das Element, das Google als Largest Contentful Paint misst \u2013 also als den Moment, in dem die Seite f\u00fcr Besucher \u201eda\u201c ist. Ein vier Megabyte schweres JPEG an dieser Stelle kostet Sichtbarkeit und Conversions gleicherma\u00dfen.<\/p>\n\n\n\n

Praktisch hei\u00dft das: Motive so w\u00e4hlen, dass sie auch bei starker Komprimierung funktionieren \u2013 gro\u00dfe Fl\u00e4chen verzeihen mehr als feine Texturen. F\u00fcr mobile Ansichten eigene Bildausschnitte mitdenken, statt dasselbe Panorama zu beschneiden. Und Text niemals fest ins Bild rendern: Text im Bild ist nicht durchsuchbar, nicht \u00fcbersetzbar und f\u00fcr Screenreader unsichtbar.<\/p>\n\n\n\n

3. Zwischen den Breakpoints liegt die halbe Wahrheit<\/h2>\n\n\n\n

Entw\u00fcrfe entstehen typischerweise in zwei oder drei festen Breiten: Desktop, Tablet, Smartphone. Benutzt werden Websites in jeder erdenklichen Breite dazwischen \u2013 mit vergr\u00f6\u00dferter Schrift, im geteilten Bildschirm, im Querformat.<\/p>\n\n\n\n

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\u00fcr die es kein mobiles Konzept gibt. Formulare mit Labels neben dem Feld, bis kein Platz mehr ist. Ein Satz zu jedem dieser F\u00e4lle im Entwurf spart in der Umsetzung Tage.<\/p>\n\n\n\n

4. Kontraste sind keine Geschmacksfrage mehr<\/h2>\n\n\n\n

Seit dem 28. Juni 2025 gilt in Deutschland das Barrierefreiheitsst\u00e4rkungsgesetz. Es verpflichtet Anbieter bestimmter digitaler Dienstleistungen f\u00fcr Verbraucher \u2013 darunter Onlineshops, Buchungssysteme und Bankdienste \u2013 zu barrierefreien Angeboten. Bei Dienstleistungen ausgenommen sind Kleinstunternehmen mit weniger als zehn Besch\u00e4ftigten und h\u00f6chstens zwei Millionen Euro Jahresumsatz. Das ersetzt keine Rechtsberatung, verschiebt aber die Diskussion: Kontrast ist kein Stilmittel mehr, \u00fcber das verhandelt wird.<\/p>\n\n\n\n

F\u00fcr den Entwurf hei\u00dft das konkret: mindestens 4,5:1 Kontrast f\u00fcr Flie\u00dftext, 3:1 f\u00fcr gro\u00dfe Schrift und f\u00fcr Bedienelemente. Sichtbare Fokuszust\u00e4nde f\u00fcr jedes interaktive Element, nicht nur Hover. Information nie allein \u00fcber Farbe transportieren \u2013 das rot markierte Pflichtfeld braucht zus\u00e4tzlich Symbol oder Text. Und Klickfl\u00e4chen, die auch mit dem Daumen zuverl\u00e4ssig zu treffen sind.<\/p>\n\n\n\n

Diese Anforderungen im Nachhinein einzubauen, ist teuer. Im Entwurf kosten sie fast nichts.<\/p>\n\n\n\n

5. Pflegbarkeit wird zu sp\u00e4t mitgedacht<\/h2>\n\n\n\n

Ein Entwurf zeigt den perfekten Zustand: die \u00dcberschrift mit genau der richtigen L\u00e4nge, drei Teammitglieder, vier Produkte. Der Alltag sieht anders aus \u2013 sieben Teammitglieder, eine \u00dcberschrift mit neunzig Zeichen, ein Produkt ohne Bild.<\/p>\n\n\n\n

Wer die Seite sp\u00e4ter selbst pflegen m\u00f6chte, sollte deshalb fr\u00fch kl\u00e4ren, 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.<\/p>\n\n\n\n

\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/figure>\n\n\n\n
<\/div>\n\n\n\n
\n
Jetzt Webdesign erstellen<\/a><\/div>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n

Was ins \u00dcbergabepaket geh\u00f6rt<\/h2>\n\n\n\n