Auch wenn das selten so kommuniziert wird.
Fünf Beispiele aus der Praxis, die zeigen, wo Design und Code direkt aufeinandertreffen:
1. Schriftarten
Eine eigene Webfont-Familie kann pro Schnitt 30-100 KB wiegen. Wer drei Schnitte einbindet (Regular, Bold, Italic), sind schnell 200 KB mehr, die jeder Besucher laden muss. Auf Mobile am Land mit schwachem Netz ist das der Unterschied zwischen einer schnellen und einer trägen Seite. Lösung: Subsetting, variable Fonts, oder bewusster Rückgriff auf System-Fonts, wo es das Branding zulässt.
2. Bildformate und -größen
Ein Hero-Bild als 4 MB-JPEG sieht am Designer-Bildschirm super aus. Auf der Live-Seite kostet es Sekunden Ladezeit, Google-Ranking-Punkte und Nerven. Moderne Formate wie WebP oder AVIF sind oft 50-70 % kleiner bei gleicher Qualität. Aber: Das muss bei der Bildplanung mitgedacht werden, nicht erst beim Upload.
3. Animationen
Ein elegantes Hover-Detail wirkt am Desktop hochwertig. Auf einem mittelmäßigen Smartphone lässt es das Layout ruckeln und den Akku schmelzen. Plus: Manche Nutzer:innen haben “Reduced Motion” aktiviert, aus medizinischen Gründen. Wer das nicht berücksichtigt, schließt sie aus.
4. Farbkontraste
Ein zarter hellgrauer Text auf weißem Hintergrund ist ein typischer ästhetischer Reflex. Er erfüllt oft nicht die WCAG-Mindestkontraste und ist für Menschen mit Sehschwäche kaum lesbar. Für viele digitale Angebote wie Online-Shops oder Buchungen ist Barrierefreiheit seit Juni 2025 außerdem Pflicht (in Österreich das BaFG, in Deutschland das BFSG). Ausgenommen sind nur Kleinstunternehmen.
5. Layout-Entscheidungen
Eine Design-Vorlage mit fünf verschiedenen Button-Stilen sieht in Figma vielfältig aus. In WordPress wird daraus ein CSS-Wartungs-Albtraum, weil jede Änderung an fünf Stellen nachgezogen werden muss. Klare Design-Tokens am Anfang sparen Stunden in der Pflege.
Keines dieser Probleme entsteht durch schlechtes Design oder schlechten Code. Sie entstehen, wenn Branding und Technik nicht von Anfang an im selben Raum gedacht werden.
Deshalb arbeite ich eng mit ausgewählten Designern und Agenturen zusammen. Branding, Konzept und Design, das sich sehen lassen kann. Ich übernehme die technische Umsetzung und langfristige Wartung. Grundsatz-Entscheidungen werden gemeinsam getroffen, bevor irgendetwas gebaut wird. Das spart auf Kund:innen-Seite Schleifen, Folgekosten und spätere Kompromisse.
Wenn du gerade eine neue Seite planst, eine bestehende übernehmen oder grundlegend überarbeiten willst: Achte darauf, dass die Menschen, die das machen, miteinander reden können, bevor das Design steht. Das ist häufig der größere Hebel als die Wahl des Tools.
Typische Fragen
Wie viele Schriftschnitte sind sinnvoll?
So wenige wie möglich. Oft reichen zwei, oder eine variable Schrift, die alle Stärken in einer Datei mitbringt.
Welches Bildformat ist das beste fürs Web?
WebP ist heute der sichere Standard. AVIF ist oft noch kleiner. Entscheidend ist, dass Bilder in der Größe ausgeliefert werden, in der sie angezeigt werden.
Muss meine Website barrierefrei sein?
Für Online-Shops und Buchungsangebote meist ja, seit 28. Juni 2025. Ausgenommen sind Kleinstunternehmen mit weniger als zehn Beschäftigten und höchstens zwei Millionen Euro Jahresumsatz oder Bilanzsumme. Aber auch ohne Pflicht lohnt es sich: Gute Kontraste und klare Struktur helfen allen Besuchern.