Website-Gestaltung: 7 Learnings aus einem Relaunch

Illustration einer responsiven Website auf Monitor, Tablet und Smartphone, der Monitor zur Hälfte im hellen und dunklen Modus

Ein Website-Relaunch ist viel mehr als ein neues Design. Er ist ein Projekt mit vielen Beteiligten, vielen Meinungen und unzähligen kleinen Entscheidungen. Ich habe den Relaunch einer Unternehmenswebsite von den ersten Entwürfen bis zum Go-live begleitet – gemeinsam mit einer Agentur, einem internen Website-Team und der Geschäftsführung. Das sind meine wichtigsten Learnings.

1. Feedback strukturieren – sonst dreht man sich im Kreis

„Gefällt mir“ oder „gefällt mir nicht“ hilft niemandem weiter. Viel wirkungsvoller war es, Feedback in klare Aspekte aufzuteilen: Farben, Logo und Formsprache wurden getrennt bewertet. Für die Rückmeldungen aus dem Team und von außen haben wir mit digitalen Boards gearbeitet, auf denen jede Anmerkung direkt am jeweiligen Entwurf hängt.

2. Bestehende Markenwerte respektieren

Neue Farbwelten sind verlockend. Hat eine Marke aber bereits etablierte Farben, sind Abstufungen und Variationen oft der bessere Weg als ein kompletter Wechsel. Und: Pastellige Töne wirken schnell zu weich – etwas mehr Kontrast tut dem Gesamtbild und der Lesbarkeit gut.

3. Light- und Dark-Mode als Designidee

Eine Idee, die sofort gut ankam: die Website in einem hellen und einem dunklen Modus zu denken. Gerade der dunkle Modus hat gezeigt, wie gut Farben, Formen und Bildsprache zusammenspielen, wenn sie konsequent aufeinander abgestimmt sind.

4. Call-to-Actions am Geschäftsmodell ausrichten

Ein Button wie „Demo buchen“ klingt modern, passt aber nicht zu jedem Unternehmen. Wenn das Hauptgeschäft Beratung und Services sind, sollen Besucher:innen vor allem ins Gespräch kommen. Jede Handlungsaufforderung sollte genau das ausdrücken, was man sich vom Besuch wünscht.

5. Sprache und Bildsprache ernst nehmen

Englische Claims wirken international, erreichen eine deutschsprachige Zielgruppe aber nicht immer. Deshalb habe ich mich für einen deutschen Hauptclaim starkgemacht. Genauso wichtig ist die Bildsprache: Wer ständig von „Menschen“ spricht, sollte im Hero-Bild nicht nur eine einzelne Person zeigen.

6. Inhalte früh planen – sie sind der eigentliche Engpass

Design wartet selten auf Designer:innen, sondern fast immer auf Inhalte. Deshalb lohnt es sich, früh Formate festzulegen. Für Use Cases hat sich zum Beispiel diese Struktur bewährt: ein Problem, die gelieferte Lösung, fünf bis sechs Sätze – und die erbrachten Leistungen klar erkennbar.

Außerdem gehören auf die Liste: Bilder, Kund:innen-Logos (nur mit Freigabe!), Impressum und Datenschutzerklärung (auf aktuelle rechtliche Anforderungen prüfen) und bei mehrsprachigen Seiten die Übersetzungen. Mein Tipp: Die zweite Sprachversion erst anlegen, wenn die erste steht – das spart doppelte Pflege.

7. Logo und Formsprache aufeinander abstimmen

Eine neue Formsprache kann ein bestehendes Logo plötzlich kantig wirken lassen. Wir haben das Logo deshalb nur minimal angepasst, damit es zu den runderen Formen der Website passt – und die pixelgenaue Ausarbeitung einer Kollegin mit viel Grafik-Erfahrung übergeben. Kleine Änderung, große Wirkung.

Bonus: Barrierefreiheit, Breakpoints und Mut zum Go-live

Lesbarkeit und Barrierefreiheit sollten von Anfang an mitgedacht werden, nicht erst kurz vor dem Launch. Seit dem 28. Juni 2025 gilt in Deutschland das Barrierefreiheitsstärkungsgesetz (BFSG), das für viele digitale Produkte und Dienstleistungen Anforderungen an die Barrierefreiheit stellt. Vor dem Go-live gehört außerdem jede Seite auf den Prüfstand – auf Smartphone, Tablet und Desktop.

Und manchmal ist es klüger, mit dem Wesentlichen live zu gehen und einzelne Bausteine – etwa eine weitere Sprachversion – nachzuliefern, statt auf die perfekte Version zu warten.

Noch ein Learning zur Typografie: Schriftlizenzen früh prüfen! Eine Display-Schrift, die im Entwurf perfekt aussah, hätte für eine korrekte Lizenzierung knapp 1.000 US-Dollar gekostet. Es lohnt sich, schon bei der Auswahl nach Open-Source-Alternativen mit genügend Kontrast zur Fließtextschrift zu suchen.

Weiterlesen

Zur Blog-Übersicht