Web Design Director
Framework für visuelle Designrichtung, organisiert nach emotionaler Absicht (Warm/Kalt × Aktiv/Ruhig). Das erste Design-Referenzsystem, das Websites nach ihrem Gefühl kategorisiert, nicht nach ihrem Aussehen. Enthält 48 kommentierte öffentliche Website-Referenzen.
Wann Diese Fähigkeit Nützlich Ist
- Bei einem neuen Website-Projekt und der Entscheidung über die visuelle Richtung vor dem Coding
- Wenn ein Kunde sagt: „Es soll professionell, aber warm wirken“ und Sie dies in konkrete Designentscheidungen übersetzen müssen
- Wenn Sie eine Markenpositionierung (Dunford, StoryBrand) haben und diese in eine visuelle Sprache übersetzen müssen
- Bei der Auswahl zwischen Designansätzen (Dark Mode vs. Light, minimalistisch vs. reichhaltig, redaktionell vs. produktorientiert)
- Beim Erstellen eines Moodboards aus Referenzen, die zum emotionalen Territorium der Marke passen
- Wenn KI-generierte Designs „schablonenhaft“ wirken, weil ihnen eine bewusste Richtung fehlt
Methodische Grundlage
Quellen:
- Emotional Design (Don Norman, 2004) — viszerale, verhaltensbezogene, reflektierende Verarbeitung
- Markenpositionierungstheorie (April Dunford, „Obviously Awesome“) — Wettbewerbsalternativen definieren das visuelle Terrain
- Farbpsychologie-Forschung — warmes/kühles Spektrum und Verhaltensreaktion
- Web-Design-Musteranalyse — 48 öffentliche Websites analysiert in 4 emotionalen Quadranten
- Gap-Analyse von 12 Design-Inspirationsplattformen (Awwwards, Dribbble, Godly, Mobbin, etc.)
Kernerkenntnis: Jede bestehende Design-Inspirationsplattform (Awwwards, Dribbble, Behance, Godly, Mobbin, SiteInspire, Lapa.ninja) kategorisiert nach visuellem Stil, Branche, Plattform oder Farbe. NULL Plattformen organisieren nach emotionaler Absicht. Dies ist die Lücke. Eine „minimalistische dunkle Website“ kann luxuriös (Cartier) oder bedrohlich (CrowdStrike) wirken — der visuelle Stil ist derselbe, die emotionale Wirkung ist gegensätzlich. Stil ohne Absicht ist Dekoration. Absicht ohne Stil ist ein Wireframe.
Der Emotionale Quadrant:
WARM
(Annäherung, Vertrauen)
|
Warm+Aktiv | Warm+Ruhig
(Energie, | (Komfort,
Freude) | Sicherheit)
|
AKTIV --------+-------- RUhig
(Schwung, | (Zurückhaltung,
Unterbrechung)| Autorität)
|
Kalt+Aktiv | Kalt+Ruhig
(Innovation,| (Luxus,
Macht) | Exklusivität)
|
KALT
(Distanz, Präzision)
Warum das Wichtig Ist: Die Markenpositionierung bestimmt, in welchem Quadranten Sie entwerfen. Ein Kinderpsychologe gehört in Warm+Ruhig. Ein Entwicklertool gehört in Kalt+Aktiv. Die Website eines Kinderpsychologen mit der Ästhetik von Vercel zu gestalten, ist ein Positionierungs-Mismatch — egal wie „sauber“ es aussieht.
Was Claude Tut vs. Was Sie Entscheiden
„Claude wählt die Referenzen und Muster aus. Sie validieren die emotionale Passung.“
| Claude übernimmt | Sie liefern |
|---|---|
| Mapping der Markenpositionierung auf den emotionalen Quadranten | Markenwerte, Zielgruppe, Wettbewerbsalternativen |
| Auswahl relevanter Referenzen aus der Bibliothek | Bauchgefühl: FÜHLT sich diese Referenz wie meine Marke an? |
| Extrahieren von Designmustern (Typografie, Abstände, Farbe, Bewegung) | Budget und technische Einschränkungen |
| Erstellen eines Designrichtungsdokuments mit Begründung | Endgültige Genehmigung der Richtung vor dem Coding |
| Markieren von Positionierungs-Mismatches (warme Marke + kaltes Design) | Kundenkontext, den Claude nicht sehen kann |
Denken Sie Daran: Die Referenzbibliothek ist ein Ausgangspunkt für Gespräche, kein Rezept. Die beste Designrichtung entsteht oft durch die Kombination von Elementen aus verschiedenen Quadranten – zum Beispiel eine Warm+Ruhig-Palette mit Kalt+Aktiv-Typografie.
Was Diese Fähigkeit Tut
- Emotionale Positionierung — Kartiert die Markenpositionierung auf den korrekten emotionalen Quadranten
- Referenzauswahl — Präsentiert 3–5 kommentierte öffentliche Websites, die zum gewünschten Gefühl passen
- Musterextraktion — Identifiziert die spezifischen Designmechaniken, die jeden emotionalen Effekt erzeugen
- Richtungsdokument — Erstellt ein Design-Briefing mit Palette, Typografie, Abständen, Bewegung und Layout-Entscheidungen
- Mismatch-Erkennung — Markiert, wenn Designentscheidungen der Markenpositionierung widersprechen
- Quadrantenübergreifendes Blending — Führt zur bewussten Mischung von Elementen aus verschiedenen Quadranten
Wie Zu Verwenden
Designrichtung für eine neue Website erhalten
Ich entwerfe eine Website für [Marke/Geschäftstyp].
Zielgruppe: [wer].
Markengefühl: [2–3 emotionale Wörter].
Wettbewerbsalternativen: [was sie anstelle dieser Marke nutzen würden].
Lade die web-design-director-Fähigkeit.
Referenzen für ein bestimmtes Gefühl finden
Ich brauche Website-Referenzen, die sich wie [emotionale Beschreibung] anfühlen.
Nicht [was vermieden werden soll]. Die Marke ist in [Branche].
Zeige mir 5 kommentierte Referenzen aus der Bibliothek.
Ein bestehendes Design gegen die Markenpositionierung prüfen
Hier ist unsere aktuelle Website: [URL oder Screenshot].
Unsere Markenpositionierung ist: [Positionierungsstatement].
Entspricht das Design der emotionalen Absicht? Was ist falsch ausgerichtet?
Anweisungen
Schritt 1: Den Emotionalen Quadranten Bestimmen
Stellen Sie diese Fragen, um die Marke einzuordnen:
## Emotionales Marken-Mapping
**1. Was soll ein Besucher in den ersten 3 Sekunden fühlen?**
[ ] Sicher, willkommen, wohl (→ Warm)
[ ] Beeindruckt, neugierig, fasziniert (→ Kalt)
**2. Wie soll das Energielevel der Website sein?**
[ ] Dynamisch, vorwärtsbewegend, „Dinge passieren“ (→ Aktiv)
[ ] Zurückhaltend, geräumig, „nimm dir Zeit“ (→ Ruhig)
**3. Welche Beziehung hat die Marke zum Besucher?**
[ ] Gleichgestellter/Freund/Führer (→ Warm)
[ ] Experte/Autorität/Institution (→ Kalt)
**4. Wettbewerbsalternativen — was würden Leute stattdessen nutzen?**
(Dies bestimmt Ihr visuelles Terrain — Sie müssen sich von Alternativen UNTERSCHEIDEN)
Quadrantenbestimmung:
| Kombination | Quadrant | Charakteristisches Gefühl |
|---|---|---|
| Warm + Aktiv | Energetische Wärme | „Das ist aufregend UND freundlich“ |
| Warm + Ruhig | Nährende Geborgenheit | „Ich fühle mich hier sicher und verstanden“ |
| Kalt + Aktiv | Innovative Macht | „Das ist zukunftsweisend und ernst“ |
| Kalt + Ruhig | Raffinierte Autorität | „Das ist erhaben und exklusiv“ |
Schritt 2: Referenzen aus der Bibliothek Auswählen
Wählen Sie 3–5 Referenzen aus dem passenden Quadranten. Notieren Sie für jede:
- Welche spezifische Designmechanik den emotionalen Effekt erzeugt
- Welcher Abschnitt/Seite dies am besten zeigt
- Was übernommen vs. was zurückgelassen werden sollte
Quadrantenübergreifende Blending-Regeln:
- Entleihen Sie EIN Element aus einem benachbarten Quadranten für Kontrast (z. B. Kalt+Aktiv-Typografie auf Warm+Ruhig-Palette)
- Entleihen Sie NIEMALS aus dem gegenüberliegenden Quadranten (Kalt+Ruhig-Elemente auf einer Warm+Aktiv-Seite = Verwirrung)
- Benachbarte Quadranten teilen sich eine Achse: Warm+Ruhig und Warm+Aktiv teilen sich Wärme; Kalt+Ruhig und Kalt+Aktiv teilen sich Präzision
Schritt 3: Designentscheidungen Extrahieren
Referenzieren Sie für jede Design-Dimension die Bibliothek, um eine spezifische Wahl zu treffen:
## Designrichtungsdokument
**Quadrant**: [Warm+Ruhig / Warm+Aktiv / Kalt+Aktiv / Kalt+Ruhig]
**Primäre Referenzen**: [3 Websites aus der Bibliothek]
**Quadrantenübergreifender Akzent**: [1 Element aus benachbartem Quadranten, falls vorhanden]
### Farbpalette
- **Hintergrund**: [spezifische Farbe + Referenz-Website, die sie verwendet]
- **Primärakzent**: [spezifische Farbe + emotionale Begründung]
- **Text**: [dunkel/hell + Kontrastverhältnis-Begründung]
- **System**: [monochromatisch / komplementär / analog]
### Typografie
- **Überschriften**: [Serife/Serifenlos/Display + Schriftgewicht + spezifischer Schriftvorschlag]
- **Fließtext**: [Schriftart + Größe + Zeilenhöhe + Begründung aus Referenz]
- **Persönlichkeit**: [was die Schrift über die Marke aussagt]
### Abstände & Layout
- **Dichte**: [großzügig/mäßig/kompakt + Referenz]
- **Raster**: [Spalten + maximale Breite + Begründung]
- **Weißraum**: [aggressiv/ausgewogen/minimal]
- **Abschnittsrhythmus**: [wechselnd/konsistent/progressiv]
### Bewegung & Interaktion
- **Animationsstil**: [dezent/ausdrucksstark/keine + Referenz]
- **Scrollverhalten**: [sanft/standard/Parallax]
- **Hover-Zustände**: [Transformationsart + Timing]
- **Seitenübergänge**: [Art oder keine]
### Fotografie & Bildmaterial
- **Stil**: [Fotografie/Illustration/Abstrakt/gemischt]
- **Emotionale Richtung**: [Verweis auf Quadrant des minimalistischen Bildregisseurs]
- **Behandlung**: [Vollfarben/gedämpft/Duoton/Körnung]
### Layout-Muster
- **Hero**: [randlos/umschlossen/aufgeteilt/nur Text]
- **Karten**: [umrandet/randlos/erhoben/flach]
- **Navigation**: [oben/seitlich/minimal/versteckt]
Schritt 4: Gegen Positionierung Validieren
Führen Sie vor der Finalisierung den Mismatch-Check durch:
## Positionierungs-Mismatch-Check
- [ ] Stimmt die Farbtemperatur mit der Markenwärme überein? (warme Marke = warme Farben)
- [ ] Entspricht das Animationsniveau der Markenenergie? (ruhige Marke ≠ aggressive Animationen)
- [ ] Passt die Typografie zum Autoritätsniveau der Marke? (verspielte Marke ≠ Serifenlose in Großbuchstaben)
- [ ] Würde sich ein Besucher aus der Zielgruppe willkommen oder eingeschüchtert fühlen?
- [ ] Unterscheidet sich dies von den Wettbewerbsalternativen?
- [ ] Würde dieses Design auch am SCHLECHTESTEN Tag der Marke funktionieren? (nicht nur am Launch-Tag)
Referenzbibliothek — 48 Kommentierte Öffentliche Websites
WARM + RUhig — Nährende Geborgenheit
„Ich fühle mich hier sicher und verstanden“
Websites in diesem Quadranten verwenden: warme Farbpaletten, großzügige Abstände, sanfte Bildsprache, zugängliche Typografie, sanfte Übergänge. Sie priorisieren Lesbarkeit und emotionalen Komfort vor visueller Wirkung.
| # | Website | Branche | Wichtigste Designmechanik | Beste Seite zum Studieren | Anti-Pattern-Warnung |
|---|---|---|---|---|---|
| 1 | Headspace | Wellness/Meditation | Abgerundete Formen + warme Illustration + Pastellpalette. Fühlt sich wie eine sanfte Umarmung an. | Homepage-Hero + Onboarding-Flow | Illustrationen können bei fehlender Ausgewogenheit kindisch wirken |
| 2 | Allbirds | Nachhaltige Mode | Erdtöne-Fotografie + natürliche Texturen + klares Raster. Produktorientiert, aber warm. | Produktdetailseiten | Kann ohne Persönlichkeit zu „Öko-Konzern“ wirken |
| 3 | Wildling Shoes | Kinderfüße | Naturfotografie + warme Neutraltöne + organischer Fluss. Fühlt sich wie ein Spaziergang im Wald an. | Homepage-Scroll-Erzählung | Leicht, den Produktfokus in den Naturbildern zu verlieren |
| 4 | Kinfolk | Lifestyle-Editorial | Typografie-geführt + großzügige Weißräume + warme Fotografie. Stille Zuversicht. | Artikel-Layouts | Kann bei dünnem Inhalt zu spärlich wirken |
| 5 | Cereal Magazine | Reisen/Design | Gedämpfte warme Palette + redaktionelles Raster + kontemplative Bildsprache. Langsames Tempo. | Reiseführer | Geringer Kontrast kann die Lesbarkeit beeinträchtigen |
| 6 | Aesop | Schönheit/Hautpflege | Warm getönte Produktfotografie + Serifen-Typografie + zurückhaltendes Layout. Raffinierte Wärme. | Store-Locator + Produktseiten | Bewegt sich an der Grenze zwischen Warm+Ruhig und Kalt+Ruhig |
| 7 | Everlane | Ethische Mode | Klares Layout + warme Lifestyle-Fotografie + transparente Preisgestaltung. Ehrliche Wärme. | „Über uns“-Seite + Factory Stories | Transparenz-Botschaften können bei Übertreibung belehrend wirken |
| 8 | Patagonia | Outdoor/Zweck | Kräftige warme Fotografie + zweckorientierte Inhalte + redaktionelle Tiefe. Aktivistische Wärme. | Umweltgeschichten | Aktivismus-orientiertes Design kann Nicht-Aktivisten entfremden |
| 9 | Nurture Life | Kindermahlzeiten | Sanfte Pastelltöne + abgerundetes UI + warme Essensfotografie. Elternfreundlich. | Speiseplan-Seite | Übermäßige Pastellfarben können generisch „Baby-Marke“ wirken |
| 10 | Organic Basics | Nachhaltige Grundlagen | Neutrale Töne + Atemraum + minimale Navigation. Ruhiger Handel. | Produktkategorieseiten | Zu minimalistisch kann wie „nichts zu sehen“ wirken |
| 11 | Ritual | Wellness/Nahrungsergänzung | Warmer gelber Akzent + klares Layout + wissenschaftliche Wärme. Vertrauen durch Transparenz. | Seite zur Inhaltsstoff-Rückverfolgbarkeit | Gelber Akzent kann bei Überbetonung klinisch wirken |
| 12 | Mejuri | Accessible Schmuck | Warme Lifestyle-Fotografie + sanfte Goldakzente + klares E-Commerce-Raster. Zugänglicher Luxus. | Kollektionsseiten | Balance zwischen Luxusgefühl und zugänglicher Preisgestaltung |
Quadrantenübergreifendes Muster: Alle Warm+Ruhig-Websites teilen sich eine großzügige Zeilenhöhe (1,6–1,8), gedämpfte/erdige Paletten und Fotografie mit echten Menschen in natürlichen Umgebungen. Die Navigation ist immer einfach. Animationen sind immer dezent.
WARM + AKTIV — Energetische Wärme
„Das ist aufregend UND freundlich“
Websites in diesem Quadranten verwenden: kräftige Farben, dynamische Animationen, verspielte Illustrationen, energische Typografie, interaktive Elemente. Sie fühlen sich an wie ein begeisterter Freund, der Ihnen etwas Erstaunliches zeigt.
| # | Website | Branche | Wichtigste Designmechanik | Beste Seite zum Studieren | Anti-Pattern-Warnung |
|---|---|---|---|---|---|
| 1 | Notion | Produktivität | Warme Illustrationen + klares Produkt-UI + freundliche Mikrointeraktionen. Organisierte Begeisterung. | Vorlagen-Galerie + Homepage | Illustrationsstil wird stark kopiert — finden Sie Ihren eigenen |
| 2 | Figma | Design-Tool | Lebendige Farbverläufe + kollaborative Energie + kräftige Typografie. Designorientiert, ohne kalt zu sein. | Community/Plugins-Seite | Farbverlaufslastiges Design altert schnell |
| 3 | Mailchimp | E-Mail-Marketing | Unverwechselbare Illustration + warmes Markengelb + verspieltes UI. Persönlichkeitsgetrieben. | Homepage + Preisseite | Eigenwilliger Illustrationsstil erfordert starke Markenbindung |
| 4 | Loom | Videokommunikation | Warmes Lila + zugängliches UI + produktgeführte Animationen. Technik, die sich nicht technisch anfühlt. | Produktdemo-Abschnitte | Lila Wärme kann bei Übersättigung konzernhaft wirken |
| 5 | Intercom | Kundenkommunikation | Kräftige Farben + konversationeller Text + dynamisches Layout. Freundliche Autorität. | Produkttour-Seiten | Kräftige Palette kann bei fehlender Weißraum-Disziplin überwältigen |
| 6 | Monday.com | Projektmanagement | Lebendige Farben + Raster-Layout + verspielte Illustrationen. Motivierende Produktivität. | Homepage + Dashboard-Ansichten | Zu viel Farbe kann die Konzentration zerstreuen |
| 7 | …[truncated] |
Darüber Hinaus
Diese Fähigkeit begleitet andere Fähigkeiten zur Designrichtung:
- minimalist-image-director – Richtung für Bildwelten (Flachgrafik, Illustration, Generative KI)
- content-architecture-director – Inhaltsstruktur und -hierarchie
- motion-director – Animations- und Interaktionsdesign
Wenn Sie eine dieser Fähigkeiten geladen haben, rufen Sie Claude auf, eine Verbindung zwischen dem emotionalen Quadranten und dem spezifischen Designmuster herzustellen.