Webdesigner Aufgaben: Tätigkeiten im gesamten Website-Projekt

Die Aufgaben eines Webdesigners lassen sich am ehesten daran ablesen, was den Schreibtisch verlässt: ein abgestimmtes Briefing, eine Sitemap, ein Satz Wireframes, freigegebene Screens, eine Komponentenbibliothek, eine Übergabedokumentation und nach der Umsetzung eine priorisierte Mängelliste. Jede Phase eines Website-Projekts erzeugt ein Arbeitsergebnis, auf dem die nächste aufbaut. Fehlt eines davon, wird es später improvisiert, meist im Browser und unter Zeitdruck.

Wie viel davon eine Person übernimmt, hängt von Projektgröße, Teamstruktur und Website-Typ ab. Bei einer Unternehmenswebsite mit dreißig Seiten liegt der gesamte Zyklus oft in einer Hand. In größeren Vorhaben verteilen sich die Phasen auf Research, UX, UI, Redaktion und Entwicklung. Konstant bleibt die Verantwortung dafür, dass Struktur, Erscheinungsbild und Verhalten einer Seite zusammenpassen und technisch umsetzbar bleiben. Das folgende Aufgabenprofil zeigt deshalb nicht nur Tätigkeiten, sondern auch Arbeitsergebnisse, Schnittstellen und Verantwortungsgrenzen.

Briefing prüfen und Ziele überprüfbar machen

Ein Briefing beschreibt selten eine Gestaltungsaufgabe, sondern zunächst einen Wunsch. Aus „Die Website soll moderner wirken“ wird erst dann Arbeit, wenn geklärt ist, was gemeint ist: eine klarere Hierarchie auf Übersichtsseiten, eine brauchbare mobile Navigation, weniger Fließtext vor dem ersten Kontaktpunkt oder ein zeitgemäßes Schrift- und Farbbild.

In dieser Phase gehören zu den Aufgaben:

• Ziele, Anforderungen und Einschränkungen aus dem Briefing herausarbeiten
• offene Fragen und widersprüchliche Erwartungen sichtbar machen
• wichtige Seitentypen und Funktionen erfassen
• bestehende Markenrichtlinien und digitale Anwendungen prüfen
• verfügbare Texte, Bilder und technische Grundlagen sichten
• Abstimmungswege, Zuständigkeiten und Freigabeschritte klären

Das Arbeitsergebnis ist ein abgestimmtes Design-Briefing mit Zielen, Zielgruppen, Umfang und erkennbaren Risiken. Die Grenze verläuft dort, wo strategische Festlegungen fehlen. Anforderungen zu strukturieren und Folgen sichtbar zu machen gehört zur Aufgabe. Geschäftsziele, Markenpositionierung oder rechtliche Vorgaben eigenmächtig zu setzen gehört nicht dazu.

Zielgruppen und Nutzungssituationen klären

Interessant ist nur, was eine Designentscheidung verändert. Also: Welches Vorwissen bringen Besucher mit? Welche Frage soll eine Seite beantworten? Welche Angaben braucht jemand, bevor er anfragt? Welche Geräte und Eingabearten sind wahrscheinlich? An welchen Stellen entstehen Unsicherheiten? Welche Handlung steht auf diesem Seitentyp im Vordergrund?

Grundlagen liefern vorhandene Nutzungsdaten, Suchanfragen, Supportanfragen, Vertriebswissen oder Gespräche mit Beteiligten. Fehlen belastbare Daten, werden Annahmen ausdrücklich als Annahmen dokumentiert und nicht als Erkenntnis verkauft. Das klingt kleinlich, entscheidet später aber darüber, ob über ein Layout mit Argumenten oder mit Geschmack diskutiert wird.

Als Ergebnis entstehen priorisierte Bedürfnisse, knappe Nutzungsszenarien und eine Zuordnung: Welche Aufgabe erfüllt welcher Seitentyp. Die eigentliche Nutzerforschung kann bei Spezialisten liegen. Verantwortet wird, dass die Erkenntnisse im Seitenaufbau und in den Interaktionen tatsächlich wiederzufinden sind.

Informationsarchitektur entwickeln

Hier wird entschieden, was zusammengehört und wie Besucher dorthin gelangen. Inhalte werden gruppiert, Seiten hierarchisch eingeordnet, Begriffe für Navigation und Menüs geprüft und wiederkehrende Seitentypen definiert.

Typische Prüffragen sind:

• Welche Hauptbereiche benötigt die Website?
• Welche Inhalte gehören auf eine gemeinsame Seite?
• Welche Begriffe verstehen Nutzer in Navigation und Menüs?
• Wie gelangen Besucher zu den wichtigsten Informationen?
• Welche Seitentypen folgen einem wiederkehrenden Aufbau?
• Wo entstehen Sackgassen, Umwege oder doppelte Einstiege in dasselbe Thema?

Arbeitsergebnisse sind eine Sitemap, ein Navigationskonzept und eine Liste der benötigten Seitentypen. Bei mehrstufigen Abläufen kommen User Flows hinzu, die den Weg vom Einstieg bis zur Anfrage oder Registrierung abbilden.

Die Struktur entsteht gemeinsam mit Redaktion, SEO-Verantwortlichen und Fachabteilung. Welche Aussagen ein Unternehmen veröffentlicht, wird nicht im Designtool entschieden. Verantwortet wird, dass vorhandene Inhalte nachvollziehbar geordnet sind und ihre Priorität später visuell erkennbar wird.

Seitenaufbau mit Wireframes planen

Wireframes beantworten strukturelle Fragen, bevor Farbe und Bildsprache die Diskussion übernehmen: Welche Inhalte erscheinen in welcher Reihenfolge, welche Elemente bilden eine Gruppe, wo liegen Navigation, Formular und Handlungsaufforderung.

Bearbeitet werden dabei:

• Reihenfolge und Gewichtung der Inhaltsbereiche
• Position zentraler Navigationselemente
• Platzierung von Formularen und Handlungsaufforderungen
• wiederkehrende Muster für verwandte Seitentypen
• Zustände, die in Entwürfen gern fehlen: leere Listen, Suchergebnisse ohne Treffer, Fehlermeldungen, Bestätigungen
• grobe Varianten für schmale und breite Bildschirme

Skizzen dürfen zunächst grob bleiben. Entscheidend ist, dass über Struktur gesprochen werden kann, ohne dass ein scheinbar fertiges Bild die Debatte beendet. Ein abgestimmtes Wireframe dient als Grundlage für visuelle Gestaltung, Texterstellung und technische Einschätzung. Änderungen sind hier deutlich billiger als nach dem Ausarbeiten sämtlicher Screens.

Visuelles Erscheinungsbild gestalten

Auf der freigegebenen Struktur entsteht die visuelle Sprache: Typografie, Farbrollen, Raster, Abstände, Bildwirkung, Icons und die Gestaltung interaktiver Elemente. Gestaltung ist dabei kein Dekor, sondern erzeugt Hierarchie. Eine Überschrift muss als Überschrift lesbar sein, eine Schaltfläche sich von Text unterscheiden, Zusammengehöriges als Gruppe wahrnehmbar sein.

Konkret fällt an:

• Schriftgrößen, Zeilenabstände und Zeilenlängen festlegen
• Farbrollen für Fläche, Text, Hinweis und Aktion definieren
• Kontraste und Lesbarkeit prüfen
• Buttons, Formulare, Karten und Navigationselemente gestalten
• Bildformate, Zuschnitte und Darstellungsregeln festlegen
• Abstände und Raster konsistent anwenden
• Hover-, Fokus-, Aktiv- und Fehlerzustände ausarbeiten

Das Ergebnis sind ausgearbeitete Ansichten und eine Komponentenbibliothek, die verhindert, dass dieselbe Funktion auf jeder Seite anders aussieht. Bestehende Markenrichtlinien bilden den Rahmen. Reichen sie für digitale Anwendungen nicht aus, werden Ergänzungen vorgeschlagen. Eine Neupositionierung der Marke ist ein eigenes Vorhaben und wird nicht nebenbei im Website-Projekt erledigt.

Interaktionen prototypisch absichern

Sobald Abläufe oder Zustandswechsel eine Rolle spielen, reichen statische Ansichten nicht mehr. Ein Prototyp zeigt, was passiert: Menü öffnen und schließen, mehrstufige Formulare, Filter und Suche, Dialoge und Bestätigungen, Validierung und Fehlerfälle, Wechsel zwischen Tabs oder Inhaltsansichten, Übergänge zwischen wichtigen Prozessschritten.

Der Detailgrad richtet sich nach der offenen Frage. Für die Prüfung von Navigationswegen genügt ein einfacher klickbarer Durchstich. Für eine mehrstufige Anfragestrecke lohnt eine realitätsnähere Simulation mit echten Eingaben und verschiedenen Zuständen.

Prototypen sind Abstimmungswerkzeug zwischen Auftraggebern, Design, Entwicklung und bei Bedarf echten Nutzern, aber kein Produktionsstand. Deshalb gehört dazu die Angabe, welche Teile verbindlich gestaltet und welche nur angedeutet sind. Ohne diesen Hinweis wird ein vereinfachter Platzhalter regelmäßig als Freigabe gelesen.

Querschnittsaufgaben, die in jeder Phase mitlaufen

Drei Themen lassen sich nicht ans Ende schieben, ohne teuer zu werden.

Barrierefreiheit von Anfang an

Die Web Content Accessibility Guidelines ordnen ihre Anforderungen an barrierefreie Webinhalte den vier Prinzipien wahrnehmbar, bedienbar, verständlich und robust zu. Das W3C empfiehlt, Barrierefreiheit während des gesamten Design- und Entwicklungsprozesses zu berücksichtigen und nicht erst nach Fertigstellung zu prüfen.

Im Entwurf heißt das:

• ausreichende Farbkontraste sicherstellen
• Informationen nie allein über Farbe vermitteln
• sichtbare Fokuszustände gestalten
• eine nachvollziehbare Überschriften- und Inhaltsstruktur vorsehen
• Formulare verständlich beschriften
• Fehler eindeutig benennen und Lösungshinweise anbieten
• Bedienflächen klar erkennbar und ausreichend groß gestalten
• Animationen und Bewegungen zurückhaltend einsetzen

Vieles davon entscheidet sich in der Gestaltung, der Rest in der Umsetzung: Semantisches HTML vermittelt Bedeutung und Struktur und unterstützt dadurch unter anderem Bedienbarkeit, Barrierefreiheit und Suchmaschinen. Die Auszeichnung liegt bei der Entwicklung, die dafür nötige nachvollziehbare Struktur im Design.

Verhalten über Bildschirmbreiten hinweg

Responsives Webdesign passt Layout und Darstellung an unterschiedliche Bildschirmgrößen an; flexible Layouts, flexible Medien und Media Queries gehören zu den zentralen Techniken. CSS-Media-Queries ermöglichen es, Styles abhängig von Merkmalen wie der Breite des Viewports anzuwenden, und sind damit ein wichtiges Werkzeug für responsive Layouts.

Zu spezifizieren ist, wie Raster und Spalten bei weniger Platz reagieren, was umbricht, wie Navigation auf schmalen Displays funktioniert, welche Bildausschnitte in welchem Format taugen, welche Bedienelemente ausreichend große Zielflächen brauchen und ob Inhalte ausgeblendet werden dürfen oder zugänglich bleiben müssen. Drei statische Ansichten für Smartphone, Tablet und Desktop genügen dafür nicht. Gebraucht werden Regeln für die Bereiche dazwischen: maximale Inhaltsbreiten, flexible Abstände, Umbruchverhalten, Prioritäten bei knappem Platz. Die technische Umsetzung übernimmt die Entwicklung, das gewünschte Verhalten beschreibt das Design.

Ladeverhalten und visuelle Stabilität

Die Core Web Vitals umfassen Largest Contentful Paint, Interaction to Next Paint und Cumulative Layout Shift als Kennzahlen für Ladeleistung, Reaktionsfähigkeit und visuelle Stabilität. Optimiert wird überwiegend technisch, beeinflusst wird aber im Entwurf: durch Bildgrößen und Formate, das Schriftkonzept, den Umfang an Animation und durch reservierte Flächen für nachladende Elemente, damit der Inhalt beim Laden nicht springt.

Design übergeben und die Umsetzung prüfen

Mit der Freigabe der Screens endet die Arbeit nicht. Eine gute Übergabe umfasst freigegebene Ansichten und Komponenten, Maße, Abstände, Farb- und Schriftwerte, responsive Regeln, Interaktions- und Fokuszustände, Fehler-, Lade- und Leerzustände, exportierbare Assets sowie eine erkennbare Trennung zwischen finalen und vorläufigen Inhalten. Dazu kommen Gespräche über kritische Stellen: Regelmäßig zeigt sich, dass eine Lösung im vorhandenen System nur mit hohem Aufwand umsetzbar ist. Dann werden Varianten bewertet und gemeinsam angepasst. Die Übergabe ist keine einseitige Ablage von Dateien, sondern die Schnittstelle, an der Gestaltung und technische Realität zusammengeführt werden.

Nach der Umsetzung folgt der Abgleich im Browser, auf mehreren Geräten und Breiten. Geprüft werden Abstände und Ausrichtung, Zeilenlängen und Umbrüche, Kontraste und Komponentenvarianten, interaktive Zustände, Formulare und Rückmeldungen, Bildqualität und Bildausschnitte sowie das Verhalten bei sehr langen oder fehlenden Inhalten. Die Befunde werden priorisiert: Ein blockierender Bedienfehler steht über einer Abweichung von vier Pixeln.

Nach dem Launch: pflegen statt neu bauen

Echte Inhalte und echte Nutzung legen Schwächen offen, die in Entwürfen unsichtbar bleiben. Neue Seitentypen kommen hinzu, Komponenten müssen Sonderfälle abdecken, Browser-Updates verändern Darstellungen, Redaktionen füllen Module anders als gedacht. Zur laufenden Arbeit gehören außerdem die Analyse auffälliger Nutzungsabbrüche, die Verbesserung von Formularen und Handlungsaufforderungen sowie das Aufräumen: veraltete Muster entfernen, Designsystem und Dokumentation aktuell halten, neue Inhalte auf Konsistenz prüfen.

Nicht jede Beobachtung rechtfertigt ein Redesign. Meist wirken kleine, begründete Anpassungen besser. Wichtig bleibt die Trennung von Beobachtung, Vermutung und Ergebnis: Eine geänderte Buttonfarbe ist erst dann eine Verbesserung, wenn geprüft wurde, ob die gewünschte Handlung häufiger gelingt.

Schnittstellen und Verantwortungsgrenzen

Gearbeitet wird an mehreren Übergabepunkten:

• mit Auftraggebern und Projektleitung bei Zielen, Umfang und Freigaben
• mit Redaktion und SEO bei Inhalten, Begriffen und Seitenstrukturen
• mit Markenverantwortlichen bei visuellen Vorgaben
• mit der Entwicklung bei Machbarkeit, Komponenten und responsivem Verhalten
• mit Datenschutz und Recht bei verbindlichen Anforderungen
• mit Nutzern oder Research-Verantwortlichen bei Tests und Rückmeldungen

Diese Grenzen gehören schriftlich vereinbart, weil sie im Projektverlauf sonst stillschweigend verschoben werden. Auf fehlende Inhalte, technische Risiken oder rechtlich relevante Elemente hinzuweisen gehört zur Aufgabe. Rechtsberatung, verbindliche Datenschutzprüfung, redaktionelle Freigabe und die technische Implementierung gehören nicht automatisch dazu.

Wer die Aufgaben zusammenfasst, landet deshalb nicht bei „Seiten schön machen“, sondern bei einer Kette überprüfbarer Ergebnisse: Briefing, Struktur, Wireframes, Screens, Komponenten, Prototyp, Übergabe, QA-Liste, gepflegtes Designsystem. Erst deren Zusammenspiel macht aus einer gestalterischen Idee eine Website, die sich benutzen lässt.