Schritt 05 / Gestalten

Webdesign-Planung für Fortgeschrittene

Wenn Ziele, Inhalte und technische Anforderungen grob feststehen, hängen die nächsten Entscheidungen voneinander ab. Eine neue Seitenstruktur verändert Navigation und Verlinkungen. Ein neues Design verändert Inhalte und Bedienung. Ein Relaunch kann bestehende Zugriffe aus Suchmaschinen gefährden. Planen Sie auch die Betreuung nach dem Start: Legen Sie Entscheidungskriterien, Verantwortliche und Prüftermine fest.

Eine Website erfüllt ihren Zweck, wenn Besucherinnen und Besucher ihre Aufgaben erledigen können und die Website zugleich geschäftliche oder organisatorische Ziele unterstützt. Stimmen Sie Nutzeraufgaben, Inhalte, Gestaltung, Technik und Erfolgsmessung von Anfang an aufeinander ab.

Website-Ziele und Erfolgsmessung festlegen

Legen Sie zuerst fest, was die Website für Besucher leisten und für den Betreiber erreichen soll. Ein Unternehmensauftritt kann etwa Anfragen ermöglichen, ein Informationsangebot verlässliche Antworten bereitstellen und ein Online-Shop den Kauf unterstützen. „Moderner wirken“ beschreibt dagegen noch kein überprüfbares Ergebnis.

Legen Sie für jedes Ziel fest, woran Sie erkennen, ob Sie es erreichen. Für eine Kontaktseite zählen zum Beispiel abgeschickte Anfragen und die Frage, ob Interessierte die nötigen Informationen vor dem Kontakt finden. Für eine Serviceseite kann entscheidend sein, ob Besucher eine bestimmte Information selbstständig erreichen. Technische Kennzahlen wie Ladezeit helfen bei der Qualitätskontrolle, belegen aber allein weder Zufriedenheit noch Geschäftserfolg.

Halten Sie außerdem fest, wer Inhalte und Kennzahlen nach der Veröffentlichung überprüft. Ohne benannte Zuständigkeit bleiben veraltete Seiten und auffällige Messwerte leicht liegen.

Nutzeraufgaben in Kriterien übersetzen

Planen Sie Seiten aus konkreten Nutzeraufgaben heraus. Eine Aufgabe benennt, wer etwas tun möchte, was die Person erledigen muss und warum. „Kundinnen und Kunden wollen die Voraussetzungen für eine Rückgabe prüfen, bevor sie ein Produkt zurücksenden“ ist dafür hilfreicher als „Rückgabeseite erstellen“.

Halten Sie für jede wichtige Seite kurz fest, für wen sie gedacht ist, welches Ergebnis sie erreichen soll, welche Informationen sie enthalten muss und was Besucher als Nächstes tun sollen. Ergänzen Sie ein Akzeptanzkriterium, also eine überprüfbare Aussage darüber, wann die Seite ihre Aufgabe erfüllt. Zum Beispiel: „Besucher finden Voraussetzungen, Ablauf und Kontaktweg, ohne die Navigation erneut durchsuchen zu müssen.“ Notieren Sie auch, welches Signal später zeigt, ob die Seite funktioniert, und wer sie prüft.

Ordnen Sie Aufgaben danach, wie stark sie Besucher unterstützen und wie wichtig sie für den Webauftritt sind. So lässt sich begründen, welche Seiten zuerst entstehen und welche Inhalte entfallen oder zusammengeführt werden. Nutzerbedürfnisse sollten auf Forschung, Rückmeldungen oder beobachtbarem Verhalten beruhen. Vermutungen können Ausgangspunkte sein, müssen aber als solche erkennbar bleiben und überprüft werden.

Seitenstruktur und interne Links planen

Eine Sitemap zeigt, welche Seiten es gibt und wie sie hierarchisch geordnet sind. Sie erklärt jedoch nicht vollständig, wie Nutzer Inhalte finden oder welche Seiten miteinander zusammenhängen. Planen Sie daher drei Dinge getrennt: die Seitentypen, die Navigation und die internen Verlinkungen. Auch das URL-Schema, also der Aufbau der Adressen, muss geplant werden. Es ersetzt diese drei Punkte nicht.

Prüfen Sie für jeden Seitentyp, welche Nutzeraufgabe er unterstützt und welche anderen Inhalte Besucher als Nächstes benötigen. Ein Ratgeberartikel kann etwa auf eine passende Dienstleistung verweisen; eine Produktseite sollte zu relevanten Informationen wie Versand oder Rückgabe führen. Bei Online-Shops empfiehlt Google, wichtige Seiten über Links erreichbar zu machen, die Suchmaschinen auslesen können. Normale Links mit einem direkten Zielverweis sind dafür verlässlicher als eine Navigation, die nur auf JavaScript-Ereignisse reagiert.

Ordnen Sie Inhalte nicht allein deshalb neu, weil eine andere Ordnerstruktur oder URL-Hierarchie auf den ersten Blick besser für Suchmaschinen wirkt. Änderungen sollten ein konkretes Nutzer- oder Betriebsproblem lösen. Bei umfangreichen Websites hilft eine klare Organisation Suchmaschinen dabei, Seiten zu durchsuchen und in den Suchindex aufzunehmen. Bei kleineren Websites rechtfertigt eine allgemeine Vermutung über SEO allein keinen großen Umbau.

Inhalte und Gestaltung gemeinsam prüfen

Inhalte bestimmen, welche Seitenelemente eine Seite braucht. Deshalb sollten Texte, Informationsarchitektur und Gestaltung gemeinsam entstehen. Seitenskizzen und Wireframes, also grobe Entwürfe für den Seitenaufbau, helfen dabei, Reihenfolge, Zusammenhänge und Handlungen zu prüfen, bevor Details der visuellen Gestaltung feststehen.

Testen Sie frühe Entwürfe mit typischen Aufgaben: Findet eine Person die wichtigsten Voraussetzungen? Erkennt sie, was als Nächstes zu tun ist? Versteht sie eine Fehlermeldung? Solche Prüfungen zeigen, ob Navigation, Text und Gestaltung zusammenarbeiten. Ein Designsystem mit wiederverwendbaren Mustern kann Konsistenz erleichtern, ersetzt aber keine Prüfung mit der konkreten Zielgruppe.

Planen Sie auch, wie Sie die Inhalte aktuell halten. Wenn mehrere Seiten dieselbe Information enthalten, benennen Sie eine maßgebliche Stelle und verlinken Sie darauf. Das senkt das Risiko widersprüchlicher Angaben. Legen Sie für wichtige Inhalte fest, wer sie fachlich verantwortet und wann eine Überprüfung nötig ist.

Qualität vor Veröffentlichung abnehmen

Barrierefreiheit gehört in Anforderungen und Entwürfe, nicht erst in die Schlussprüfung. Die Web Content Accessibility Guidelines (WCAG) enthalten überprüfbare Kriterien für zugängliche Webinhalte. Planen Sie unter anderem Tastaturbedienung, sichtbaren Fokus, verständliche Formularbeschriftungen und Fehlermeldungen sowie ausreichende Kontraste ein. Automatische Prüfungen finden einen Teil der Probleme; eine menschliche Prüfung und Tests mit Menschen mit unterschiedlichen Zugangsbedürfnissen ergänzen sie.

Für Angebote in Deutschland sollten Sie auch den Anwendungsbereich des Barrierefreiheitsstärkungsgesetzes (BFSG) prüfen. Bestimmte digitale Dienstleistungen, darunter Online-Shops und Online-Terminbuchungen, können darunter fallen. Eine reine Präsentationsseite fällt nicht allein deshalb in den Anwendungsbereich, weil sie ein Angebot bewirbt. Für bestimmte Kleinstunternehmen, die Dienstleistungen anbieten, sieht das Gesetz eine Ausnahme vor. Entscheidend sind das konkrete Angebot und die gesetzlichen Voraussetzungen; klären Sie den Einzelfall rechtlich.

Definieren Sie auch messbare Ziele für die Lade- und Bedienleistung. Google bewertet die Core Web Vitals am 75. Perzentil der Seitenaufrufe, möglichst getrennt nach Mobilgeräten und Desktop. Als Richtwerte für „gut“ gelten ein Largest Contentful Paint (LCP) von höchstens 2,5 Sekunden, ein Interaction to Next Paint (INP) von höchstens 200 Millisekunden und ein Cumulative Layout Shift (CLS) von höchstens 0,1. LCP erfasst, wann der Hauptinhalt sichtbar wird, INP die Reaktionsfähigkeit auf Eingaben und CLS unerwartete Layoutverschiebungen.

Labortests in einer kontrollierten Umgebung helfen, technische Probleme während der Entwicklung zu finden. Messdaten aus der tatsächlichen Nutzung zeigen, wie die Website im Alltag abschneidet. Ein Labortest mit Lighthouse misst INP nicht direkt, wenn niemand eine echte Eingabe macht. Die Total Blocking Time kann dort auf Verzögerungen hinweisen, ist aber eine andere Kennzahl. Die Core Web Vitals beschreiben bestimmte Nutzungserfahrungen. Sie sind kein Nachweis für Umsatz oder Leads.

URLs beim Relaunch absichern

Wenn sich beim Relaunch URLs ändern, planen Sie diesen Wechsel gesondert. Erfassen Sie vorab bestehende Seiten, wichtige Zugriffe und externe Verlinkungen. Ordnen Sie jeder relevanten alten URL ein passendes neues Ziel zu. Für Seiten ohne sinnvolle Entsprechung ist eine Weiterleitung auf die Startseite in der Regel keine gute Lösung.

Richten Sie dauerhafte serverseitige Weiterleitungen ein, aktualisieren Sie interne Links und prüfen Sie die neue Sitemap sowie die Indexierung. Vermeiden Sie Weiterleitungsketten, bei denen eine alte Adresse über mehrere Zwischenstationen zum Ziel führt. Testen Sie die neue Website vor der Veröffentlichung und beobachten Sie nach dem Wechsel den Zugriff auf alte und neue Adressen. Suchsichtbarkeit kann sich während einer Migration vorübergehend verändern.

Nach dem Start nachsteuern

Messen Sie die Nutzung ab der Veröffentlichung. Prüfen Sie, ob Besucher die vorgesehenen Aufgaben erledigen, ob wichtige Seiten erreichbar bleiben und ob Inhalte noch stimmen. Wenn eine Kennzahl auffällig ist, untersuchen Sie die betroffene Seite und den Nutzungskontext, bevor Sie Änderungen vornehmen. Ein schlechter Messwert zeigt ein Problem an, erklärt aber nicht automatisch seine Ursache.

Ändern Sie gezielt die Punkte, für die Ihre Beobachtungen einen konkreten Hinweis liefern. So bleibt nachvollziehbar, ob eine Anpassung bei Navigation, Text oder Technik geholfen hat. Halten Sie fest, wer den Messwert erneut prüft und wann die Entscheidung über weitere Änderungen fällt.