web-design-workflow

name

web-design-workflow

description

Creative-Director-Prozess für individuelles Webdesign — Strategie → Designsystem → Layout → Inhalte → Code, statt sofort HTML zu erzeugen. Erzwingt Markenanalyse, 3–5 bewusst unterschiedliche Designkonzepte und ein fertiges Designsystem VOR dem ersten Layout. Nutzen bei neuer Website/Relaunch, wenn das Ergebnis nach Marke aussieht, nicht nach Template. NICHT für kleine Einzelseiten/Copy-only (→ landing-and-site-builder) oder reine Ästhetik-Fragen (→ frontend-design).

Web-Design-Workflow

Führe wie ein Creative Director durch den Prozess — Schritt für Schritt, nicht sofort HTML.

Kernproblem

„Entwickle ein modernes Webdesign" erzeugt fast immer das statistische Durchschnitts-Internet: Hero + Überschrift + Button + 3 Features + Testimonials + FAQ + Footer; oder Cards, viel Weißraum, leichtes Blau, Border-Radius, Schatten. Hübsch, aber keine Marke — weil der KI Strategie fehlt (Marke, Zielgruppe, Wettbewerb, Inhalt, Conversion-Ziel, Stil, spätere Contentmenge).

Reihenfolge umdrehen: nicht Design → Inhalt, sondern Strategie → Designsystem → Layout → Inhalte → Feinheiten. Code zuletzt.

Die 10 Phasen

#	Phase	Ergebnis
1	Unternehmen analysieren	Markenprofil (Branche, Premium/günstig, regional/international, emotional/sachlich, innovativ/konservativ, B2B/B2C)
2	Zielgruppe definieren	Persona + Nutzungsszenarien (Alter, Vorwissen, Entscheidungsdauer, mobil/Desktop, Vertrauen/Preis/Qualität)
3	Wettbewerb analysieren	Differenzierungsmerkmale (was gefällt/nicht, wovon abgrenzen)
4	Contentumfang bestimmen	Inhaltsarchitektur + Prioritäten (welche Seiten, wie viel Text, Bilder vorhanden?)
5	Designrichtung wählen	passender Stil → [[design-directions]]
6	Designsystem entwickeln	Farben, Typografie, Grid, Komponenten, Bildsprache
7	Wireframes erstellen	Seitenlayouts mit Platzhaltern und verschiedenen Content-Dichten
8	Design bewerten	Markenwirkung, Barrierefreiheit, Responsivität, SEO, Lesbarkeit, Skalierbarkeit
9	Inhalte generieren	Texte, Bilder, Illustrationen — passend zum System
10	Code generieren	Umsetzung des freigegebenen Designs

Kern-Erweiterung: erst Konzepte, dann Ausarbeitung

Nach Phase 5 nicht sofort ein Designsystem bauen. Zuerst 3–5 bewusst unterschiedliche Designkonzepte entwerfen, die sich in Markenwirkung, Typografie, Bildsprache und Layoutphilosophie klar unterscheiden — nicht 5× dieselbe Variante. Dann wählt der Mensch ein Konzept; erst danach Designsystem → Wireframes → Inhalte → Code. Das ist die Arbeitsweise professioneller UX-/Branding-Agenturen und verhindert das Standardlayout. Für die Konzept-Auswahl/-Bewertung → [[llm-council]] (unabhängige Perspektiven statt erster Idee).

Verzahnung

• Phase 1–2 (Marke/Stimme): [[brand-voice-dna]] extrahiert die funktionale Markenstimme aus Bestandstexten.
• Phase 5 (Stil): [[design-directions]].
• Phase 6 (Designsystem): [[ui-design]] (Hierarchie/CTA-Stufen/Micro-Details), [[tailwind-ui]] (Tokens), [[motion-design]], [[darkmode]]; ästhetische Richtung + Anti-Template-Disziplin → [[frontend-design]].
• Phase 8 (Bewertung): [[accessibility-audit]], [[seo]] (+ [[local-business-seo]] regional), [[web-performance]].
• Phase 9 (Inhalte): [[landingpage-from-briefing]], [[anti-ai-copy]], [[content-clarity-a11y-check]].
• Phase 10 (Bau): [[landing-and-site-builder]] übernimmt die Umsetzung im Vertical-Slice-Loop. Für Claude-design-Handoff dessen Modus B nutzen.

Gotchas

• Nicht mit Code/HTML starten. Wer in Phase 1 schon Markup erzeugt, hat das statistische Template schon gewählt.
• Wireframes mit Platzhaltern, nicht mit echtem Content — echter Content erst Phase 9, wenn Marke/Schrift/Bildsprache stehen.
• Konzepte müssen sich wirklich unterscheiden — sonst ist die „Auswahl" eine Scheinwahl.
• Der Mensch entscheidet Richtung und Konzept; die KI liefert begründete Optionen, keine Vorab-Festlegung.
• Jede Phase liefert ein freigegebenes Artefakt, bevor die nächste startet (Markenprofil → Persona → … → Designsystem). Kein Überspringen nach vorn.