Definition Redesign

Ein Redesign (dt. Neugestaltung) bezeichnet die gestalterische und technische Überarbeitung einer bestehenden Website, ohne dass zwingend Inhalte, Strategie oder Informationsarchitektur grundlegend verändert werden. Der Fokus liegt auf der Modernisierung von visuellem Design, technischer Infrastruktur und Benutzerfreundlichkeit – die Website bleibt in ihrer Kernstruktur erkennbar, erhält aber ein zeitgemäßes Erscheinungsbild und verbesserte technische Grundlagen.

Der Unterschied zum Relaunch liegt im Ausmaß der Veränderung: Ein Relaunch bezeichnet die grundlegende Neuveröffentlichung einer Website – häufig mit neuer Informationsarchitektur, neuem inhaltlichem Konzept, neuer Technologieplattform (CMS-Wechsel) oder neuer Markenpositionierung. Ein Redesign kann Teil eines Relaunches sein, ist aber in der Regel weniger tiefgreifend: Es verändert das „Wie es aussieht und funktioniert", während ein Relaunch auch das „Was und warum" neu definiert. In der Praxis werden die Begriffe oft synonym verwendet; entscheidend ist die inhaltliche Abgrenzung der jeweiligen Projektdefinition.

Ein Redesign ist keine spontane Designentscheidung, sondern sollte datenbasiert begründet werden. Die wichtigsten Indikatoren, die auf Handlungsbedarf hinweisen:

• Schlechte mobile Nutzererfahrung: Seit Googles Mobile-First-Indexierung (vollständig ab 2021) rankt eine nicht mobiloptimierte Website schlechter in den Suchergebnissen. Wenn die mobile Absprungrate deutlich über der Desktop-Rate liegt (Richtwert: mehr als 10–15 Prozentpunkte Differenz), ist das ein klares Signal für UX-Probleme auf Mobilgeräten.
• Schlechte Core Web Vitals: Die Google-Metriken LCP (Ladezeit des Hauptinhalts, Ziel: unter 2,5 Sekunden), CLS (visuelle Stabilität, Ziel: unter 0,1) und INP (Reaktionsfähigkeit, Ziel: unter 200 ms) sind direkte Rankingfaktoren. Rote Werte in der Google Search Console sind ein konkreter SEO-Handlungsauftrag.
• Veraltete Technologiebasis: Websites, die noch auf Flash, nicht responsivem Fixed Layout oder veralteten CMS-Versionen ohne Sicherheitsupdates basieren, haben dringenden technischen Nachholbedarf – unabhängig vom visuellen Erscheinungsbild.
• Sinkende Conversion Rates und hohe Absprungraten: Analytics-Daten, die zeigen, dass Nutzer zentrale Zielseiten verlassen ohne zu konvertieren oder wichtige Navigationsschritte abbrechen, deuten auf strukturelle Usability-Probleme hin, die ein Redesign adressieren kann.
• Veraltetes visuelles Design: Wenn das Design erkennbar dem Stand vor 5–10 Jahren entspricht und gegenüber Wettbewerbern veraltet wirkt, beeinträchtigt das die wahrgenommene Vertrauenswürdigkeit – besonders bei E-Commerce- und Finanzseiten, wo Vertrauen eine direkte Kaufbarriere ist.
• Fehlende Barrierefreiheit: Gesetzliche Anforderungen (Barrierefreiheitsstärkungsgesetz, ab 2025 für private Anbieter digitaler Dienste in Deutschland wirksam) und WCAG-Konformität können ein Redesign aus rechtlichen Gründen erforderlich machen.

Ein Redesign ist mehr als ein gestalterisches Projekt – es erfordert grundlegende technische Entscheidungen, die langfristige Auswirkungen auf Performance, Wartbarkeit und Skalierbarkeit haben:

• Layout-Paradigma – Responsive Design als Standard: Responsives Webdesign (CSS Media Queries, flexible Grids, skalierbare Bilder) ist heute der unverzichtbare Ausgangspunkt. Die drei klassischen Alternativen – Fixed Layout (feste Pixelbreite, veraltet), Fluid Layout (prozentuale Breiten, flexibel aber ohne Breakpoints) und Elastic Layout (em-basierte Skalierung) – werden in modernen Projekten durch Responsive Design oder eine Kombination ersetzt. Mobile First als Entwicklungsprinzip schreibt vor, dass CSS-Breakpoints von der kleinsten Bildschirmbreite aufwärts definiert werden.
• Design-System und Atomic Design: Statt Seiten einzeln zu gestalten, strukturiert Atomic Design (Brad Frost, 2013) Interfaces in wiederverwendbare Bausteine: Atome (einzelne UI-Elemente wie Buttons, Inputs), Moleküle (Kombinationen wie Suchformular), Organismen (komplexe Sektionen), Templates und Pages. Ein konsequentes Design-System beschleunigt die Entwicklung, sichert Konsistenz und erleichtert zukünftige Iterationen.
• HTML5 und CSS3 als technische Grundlagen: HTML5 liefert semantische Elemente (<header>, <nav>, <main>, <article>, <footer>), die sowohl die Zugänglichkeit für Screenreader als auch die Crawlbarkeit für Suchmaschinen verbessern. CSS3 ermöglicht moderne Layouts (Flexbox, CSS Grid), Animationen und responsives Design ohne JavaScript-Abhängigkeit.
• Performance-Optimierung als Designentscheidung: Ladezeiten werden maßgeblich durch Designentscheidungen beeinflusst: Bildformate (WebP/AVIF statt JPEG/PNG), Lazy Loading, Font-Optimierung (variable Fonts, font-display: swap), Minimierung von CSS/JS-Bundles und kritisches CSS Inline. Diese Entscheidungen sind im Redesign-Prozess zu treffen, nicht nachträglich zu patchen.
• Graceful Degradation vs. Progressive Enhancement: Das Redesign legt fest, ob alte Browser und eingeschränkte Umgebungen durch Rückfallebenen (Graceful Degradation) oder durch schrittweise Erweiterung ab einer soliden Basis (Progressive Enhancement) berücksichtigt werden. Letzteres ist für Barrierefreiheit und SEO die empfohlene Strategie.

Ein Website-Redesign ist eines der häufigsten Auslöser für dramatische Ranking- und Traffic-Verluste – wenn SEO nicht von Anfang an in den Prozess integriert wird. Die wichtigsten Risiken und Schutzmaßnahmen:

• URL-Änderungen ohne 301-Weiterleitungen: Das häufigste und folgenschwerste Redesign-Problem. Wenn bestehende URLs geändert werden (z. B. durch eine neue Navigationsstruktur oder ein neues CMS) ohne lückenlose 301-Weiterleitungen auf die neuen URLs, verliert Google den Bezug zu den indexierten Seiten. Das Ergebnis: der aufgebaute Linkjuice und die Rankinghistorie gehen verloren. Lösung: vollständige URL-Inventur vor dem Redesign, Weiterleitungsmatrix für alle geänderten URLs, Implementierung und Test aller 301-Redirects vor dem Launch.
• Verlust von On-Page-SEO-Elementen: Bei der Migration auf ein neues Template oder CMS gehen häufig Title-Tags, Meta-Descriptions, Alt-Texte, H1-Überschriften und strukturierte Daten (Schema.org) verloren oder werden fehlerhaft übertragen. Lösung: systematischer Vor-/Nachher-Vergleich aller SEO-relevanten Elemente mit einem Crawling-Tool (Screaming Frog, Ahrefs).
• JavaScript-Rendering und Indexierbarkeit: Wenn das neue Design stärker auf clientseitiges JavaScript-Rendering setzt (React, Vue, Angular ohne SSR), kann Google Inhalte möglicherweise verzögert oder unvollständig indexieren. Lösung: Server-Side Rendering (SSR) oder Static Site Generation (SSG) für SEO-kritische Seiten.
• Crawl-Budget-Probleme durch neue Seitenarchitektur: Eine veränderte Navigationsstruktur kann dazu führen, dass wichtige Seiten tiefer in der Hierarchie vergraben werden und seltener gecrawlt werden. Lösung: flache Seitenarchitektur (wichtige Seiten maximal 3 Klicks von der Startseite), aktualisierte XML-Sitemap nach Launch.
• Staging-Umgebung versehentlich indexiert: Wenn die Entwicklungsumgebung des neuen Designs öffentlich zugänglich ist ohne noindex-Direktive, kann Google doppelte Inhalte indexieren. Lösung: Passwortschutz oder noindex-Meta-Tag auf der Staging-Umgebung.
• Post-Launch-Monitoring: In den ersten Wochen nach dem Redesign sollten Google Search Console, Analytics-Traffic und Ranking-Tracking täglich überprüft werden, um Probleme frühzeitig zu erkennen und zu beheben.

Ein Redesign ohne Nutzertests zu planen und umzusetzen bedeutet, auf Basis von Annahmen statt auf Basis von Daten zu gestalten – mit dem Risiko, bestehende Usability-Probleme durch neue zu ersetzen statt sie zu lösen. Nutzerzentrierte Methoden im Redesign-Prozess:

• Bestandsanalyse vor dem Redesign: Bevor neue Designs entstehen, sollte die bestehende Website systematisch analysiert werden: Heatmaps und Session-Recordings (Hotjar, Microsoft Clarity) zeigen, wo Nutzer klicken, scrollen und abbrechen. Analytics-Daten identifizieren Abbruchseiten und schwache Conversion-Punkte. Qualitative Nutzerbefragungen decken subjektive Schmerzpunkte auf.
• Prototypentest in frühen Phasen: Neue Designkonzepte sollten als Wireframes oder klickbare Prototypen (Figma, Adobe XD) mit repräsentativen Nutzern getestet werden – bevor die technische Implementierung beginnt. Ein Prototypentest mit 5 Testpersonen kann rund 80 % der kritischsten Usability-Probleme eines Konzepts aufdecken (nach Jakob Nielsen) – zu einem Bruchteil der Kosten einer nachträglichen Korrektur.
• Usability-Testlabor für komplexe Projekte: Bei größeren Redesign-Projekten (E-Commerce, Banken, Behörden) empfiehlt sich der Einsatz eines Usability-Testlabors mit Eye-Tracking und Bildschirmaufzeichnung, um detaillierte Erkenntnisse über Blickverlauf, Nutzungshürden und Interaktionsmuster zu gewinnen.
• A/B-Tests nach dem Launch: Das Redesign ist kein Endpunkt, sondern der Beginn eines kontinuierlichen Optimierungszyklus. Nach dem Launch sollten zentrale Elemente (Headline, CTA, Navigationsstruktur) über A/B-Tests datenbasiert weiterentwickelt werden. Das Redesign schafft die technische Grundlage für diese iterative Websiteoptimierung.
• Barrierefreiheitsprüfung: WCAG 2.2-Konformität (Web Content Accessibility Guidelines) sollte sowohl in der Konzeptionsphase (Design Reviews) als auch nach der Implementierung (automatisierte Tools wie axe, WAVE; manuelle Screenreader-Tests) überprüft werden. Barrierefreies Design verbessert gleichzeitig die SEO-Qualität durch semantisch sauberes HTML.

KI verändert den Redesign-Prozess in mehreren Phasen gleichzeitig – von der initialen Konzeption bis zur laufenden Optimierung nach dem Launch:

• KI-gestützte Design-Generierung: Tools wie Figma AI, Uizard, Galileo AI und Framer AI generieren aus Textbeschreibungen oder bestehenden Layouts erste Designentwürfe in Minuten. Das beschleunigt die frühe Konzeptionsphase erheblich und ermöglicht mehr Designvarianten für Nutzertests – bei gleichem Zeitbudget. KI-generierte Entwürfe ersetzen dabei keine strategische Designentscheidung, liefern aber wertvolle Ausgangspunkte.
• KI-gestützte UX-Analyse: Plattformen wie Microsoft Clarity und Hotjar integrieren KI-Funktionen, die Heatmap-Daten und Session-Recordings automatisch auf Anomalien, Frustrationsmuster und Abbruchpunkte analysieren – und priorisierte Optimierungsempfehlungen formulieren, ohne dass stundenlange manuelle Videoanalyse nötig ist.
• Personalisierte Websites statt statischem Design: Moderne CMS-Plattformen (Contentful, Storyblok, Sanity) und Marketing-Automation-Lösungen ermöglichen es, Seitenelemente in Echtzeit auf den Nutzerkontext anzupassen – Erstbesucher sehen andere Inhalte als Wiederkehrende, B2B-Besucher andere als B2C. Das verändert die Designaufgabe: Statt einer statischen Seite wird ein flexibles Inhaltssystem gestaltet.
• KI-Suche als neues Design-Paradigma: Da KI-Suchsysteme (Google AI Overviews, Perplexity) Seiteninhalte semantisch auswerten und als Quellen zitieren, gewinnt strukturiertes, klar hierarchisch gegliedertes HTML-Design an Bedeutung. Ein Redesign, das semantisch hochwertiges HTML5, strukturierte Daten (Schema.org) und klare Überschriftenhierarchien priorisiert, ist gleichzeitig SEO-optimiert und LLM-freundlich.
• No-Code/Low-Code-Redesigns: Plattformen wie Webflow, Framer und Squarespace ermöglichen visuell gesteuerte Redesigns ohne tiefes Entwicklungs-Know-how. Die Qualität des generierten Codes und die Flexibilität bei komplexen Anforderungen sind weiterhin Grenzen dieser Plattformen – aber für viele KMU sind No-Code-Redesigns eine wirtschaftlich attraktive Alternative zu klassischen Agenturprojekten.