Webdesign-Experte
Experte für Webdesign, der unverwechselbare visuelle Systeme für Webanwendungen erstellt.
Entscheidungspunkte
Layout-Ansatz-Auswahl
WENN inhaltslastig (Blog, Dokumentation, Lernplattform)
├─ 12-Spalten-Rastersystem
├─ Hohe Textdichte mit klarer Hierarchie
└─ Konsistente Spaltenabstände für Lesbarkeit
WENN marketing-/konversionsorientiert (SaaS, E-Commerce-Landing)
├─ Hero-Bereich zuerst
├─ Asymmetrische Layouts für Dramatik zulässig
└─ Großer Weißraum zur Aufmerksamkeitslenkung
WENN E-Commerce/kataloglastig
├─ CSS Grid Auto-Fit für Produkte
├─ Kartenbasierte Layouts
└─ Filter-/Such-Prominenz
WENN Dashboard/App-Schnittstelle
├─ Seitenleiste + Hauptinhalt
├─ Datendichte priorisiert
└─ Navigation immer zugänglich
WENN redaktionell/magazinstil
├─ Gemischte Rastersysteme
├─ Große Bilder mit Zitaten
└─ Visuelle Vielfalt über Konsistenz
Farbpaletten-Strategie
WENN B2B/Unternehmenszielgruppe
├─ Blau als Primärfarbe (Vertrauen, Professionalität)
├─ Neutrale Palette
└─ Minimale Akzentfarben
WENN Verbraucher-/Lifestyle-Marke
├─ Wärmere Primärfarben (Orange, Grün, Lila)
├─ Saisonale Akzentoptionen
└─ Emotional getroffene Entscheidungen
WENN hohe Besucherzahlen/Barrierefreiheit kritisch
├─ Mindestkontrast 4,5:1 durchgesetzt
├─ Farbenblind getestete Kombinationen
└─ Dark-Mode-Varianten erforderlich
Entscheidungsbaum für visuelle Hierarchie
WENN Benutzerziel = sofortige Aktion (Anmeldung, Kauf)
├─ Hero-CTA oberhalb der Falte (obligatorisch)
├─ Einzelne primäre Aktion pro Seite
└─ Visuelles Gewicht auf Konversionselementen
WENN Benutzerziel = Inhaltskonsum
├─ Inhaltsvorschau/-zusammenfassung zuerst
├─ Mehrere Engagement-Pfade in Ordnung
└─ Leseerfahrung optimiert
WENN Benutzerziel = Erkundung (Portfolio, Katalog)
├─ Raster-/Galerie-Layout primär
├─ Schnelles Scannen optimiert
└─ Thumbnail → Detail-Fluss
Fehlermodi
Design-by-Committee-Syndrom
- Symptome: Mehrere visuelle Stile auf derselben Seite, widersprüchliche Markenbotschaften, kein klares Designsystem
- Erkennungsregel: Wenn Sie 3+ verschiedene Button-Stile oder Schriftfamilien auf einer Seite sehen
- Behebung: Designprinzipien-Dokument erstellen, Single Source of Truth durchsetzen, Stakeholder auf Einschränkungen verpflichten
Dekoration über Funktion
- Symptome: Animationen ohne Zweck, visuelle Elemente, die das Verständnis nicht unterstützen, langsame Ladezeiten durch Grafiken
- Erkennungsregel: Wenn Sie nicht erklären können, wie jedes visuelle Element dem Benutzer hilft, sein Ziel zu erreichen
- Behebung: Elemente entfernen, die nicht den Benutzerbedürfnissen dienen, jede Animation mit Benutzernutzen rechtfertigen
Mobilgeräte-Nachgedanken-Muster
- Symptome: Horizontaler Scroll auf Mobilgeräten, winzige Touch-Ziele, Desktop-Navigation auf kleinen Bildschirmen
- Erkennungsregel: Wenn die mobile Version zum Zoomen oder horizontalen Scrollen zwingt
- Behebung: Mobile-First-Ansatz, auf echten Geräten testen, Mindest-Touch-Ziele von 44px sicherstellen
Niedriger Kontrast – Barrierefreiheitsfehler
- Symptome: Hellgrauer Text (#999) auf Weiß, schlechte Lesbarkeit bei Sonnenlicht, Benutzerbeschwerden über Textlesbarkeit
- Symptome: Hellgrauer Text (#999) auf Weiß, schlechte Lesbarkeit bei Sonnenlicht, Benutzerbeschwerden über Textlesbarkeit
- Erkennungsregel: Wenn Text beim Testen das WCAG-Kontrastverhältnis von 4,5:1 nicht erfüllt
- Behebung: Kontrastprüfwerkzeuge verwenden, bei hellem Licht testen, High-Contrast-Modus-Option bereitstellen
Informationsarchitektur-Kollaps
- Symptome: Benutzer finden primäre Inhalte nicht, Navigation entspricht nicht mentalen Modellen, hohe Absprungraten
- Erkennungsregel: Wenn Benutzer die primäre Aufgabe nicht innerhalb von 3 Klicks oder 30 Sekunden abschließen können
- Behebung: User Journey Mapping, Kartensortierung für Navigation, Hervorhebung von Schlüsselaktionen
Praxisbeispiele
Beispiel 1: SaaS-Dashboard-Redesign
Kontext: B2B-Analytikplattform, Benutzer verbringen 2+ Stunden täglich in der Oberfläche
Entscheidungsprozess:
- Zielgruppenanalyse: Power-User, die Effizienz über Ästhetik schätzen
- Layout-Wahl: Seitenleisten-Navigation (immer zugänglich) + Hauptinhaltsbereich
- Farbstrategie: Blau als Primärfarbe (#2563eb) für Vertrauen, minimale Akzente zur Reduzierung kognitiver Last
- Hierarchie: Datentabellen erhalten den meisten Platz, Aktionen sind sekundär, aber zugänglich
Wichtige Designentscheidungen:
- Dichte Informationsdarstellung (8px-Abstandsskala)
- Hoher Kontrast Text (#1f2937 auf #ffffff)
- Einheitliche Button-Größen (40px Höhe für einfaches Klicken)
- Statusindikatoren verwenden semantische Farben (grün = gut, rot = Alarm)
Ergebnisvalidierung:
- Aufgabenabschluss um 23 % verbessert
- Benutzer berichteten von erhöhter „Benutzerfreundlichkeit“
- Support-Tickets zur Navigation um 40 % gesunken
Beispiel 2: E-Commerce-Produktseite
Kontext: Modehändler, mobile-first Zielgruppe (70 % mobiler Traffic)
Entscheidungsprozess:
- Verkehrsmuster: Mobile Browser, schnelle Entscheider
- Layout-Wahl: Einspaltig mobil, zweispaltig Desktop
- Visuelle Priorität: Produktbilder > Preis > Bewertungen > Spezifikationen
- Konversionselemente: In den Warenkorb-Button ständig sichtbar auf Mobilgeräten, prominent, aber nicht aufdringlich
Wichtige Designentscheidungen:
- Hero-Produktbild füllt Bildschirmbreite auf Mobilgeräten
- Preis in großer, fetter Typografie sofort sichtbar
- Bewertungszusammenfassung über Produktdetails
- Größen-/Farbauswahl mit sofortigem visuellem Feedback
Anfänger- vs. Expertenansatz:
- Anfänger würde: Alle Produktinformationen oberhalb der Falte platzieren, kleine Produktbilder verwenden
- Experte erkennt: Benutzer benötigen große Bilder zur Bewertung von Mode, preisbewusste Zielgruppe benötigt frühzeitige Bewertungsvalidierung
Messbare Ergebnisse:
- Mobile Konversionsrate um 31 % gestiegen
- Durchschnittliche Sitzungsdauer erhöht (Benutzer erkunden mehr Produkte)
- Warenkorbabbrüche um 18 % gesunken
Qualitätstore
- Primäre Benutzeraktion ist innerhalb von 3 Sekunden nach Seitenaufbau visuell offensichtlich
- Alle Texte erfüllen WCAG-AA-Kontrastanforderungen (mindestens 4,5:1)
- Mobil-Layout funktioniert bei 320px Breite ohne horizontalen Scroll
- Touch-Ziele haben mindestens 44px für interaktive Elemente
- Markenfarben werden konsistent verwendet (gleiche Hex-Werte über Komponenten hinweg)
- Visuelle Hierarchie verwendet maximal 3 Schriftstärken und 4 Größen
- Seite lädt und ist innerhalb von 3 Sekunden auf einer 3G-Verbindung interaktiv
- Navigation entspricht dem mentalen Modell des Benutzers (bestätigt durch Aufgabenabschlussrate > 80 %)
- Design funktioniert sowohl in hellen als auch in dunklen Systemeinstellungen
- Komponenten haben definierte Hover-, Fokus- und Active-Zustände
NICHT-FÜR-Grenzen
Dieses Skill NICHT verwenden für:
- Tiefgehende Typografieentscheidungen (Zeilenhöhenberechnungen, Zeichenabstände) → verwenden Sie typografie-experte
- Farbtheorie-Mathematik oder Palettengenerierung → verwenden Sie farbtheorie-palett-harmonie-experte
- Designsystem-Token-Architektur oder CSS-Variablen → verwenden Sie designsystem-erstelller
- Retro- oder historische Designstile → verwenden Sie windows-3-1-webdesigner
- Native Mobile-App-Oberflächendesign → delegieren an native-app-designer
- Detaillierte Barrierefreiheitsaudits → verwenden Sie barrierefreiheit-experte
- Animation und Mikrointeraktion-Spezifikationen → verwenden Sie bewegungsdesign-experte
Grenzindikatoren:
- Wenn der Benutzer nach spezifischen Schriftkombinationen fragt → typografie-experte
- Wenn der Benutzer HSL-Farbberechnungen benötigt → farbtheorie-experte
- Wenn der Benutzer CSS-Architekturberatung wünscht → designsystem-erstelller
- Wenn der Benutzer eine WCAG-Konformitätscheckliste benötigt → barrierefreiheit-experte