Web Design Director
Framework für visuelle Designrichtungen, geordnet nach emotionaler Absicht (Warm/Kalt x Aktiv/Ruhig). Das erste Design-Referenzsystem, das Websites danach kategorisiert, wie sie sich anfühlen, nicht wie sie aussehen. Enthält 48 kommentierte öffentliche Website-Referenzen.
Wann dieses Skill verwenden
- Ein neues Website-Projekt starten und die visuelle Richtung festlegen, bevor der Code geschrieben wird
- Ein Kunde sagt: "Ich möchte, dass es sich professionell, aber warm anfühlt" und Sie müssen das in konkrete Designentscheidungen übersetzen
- Sie haben eine Markenpositionierung (Dunford, StoryBrand) und müssen diese in eine visuelle Sprache übersetzen
- Zwischen Designansätzen wählen (Dark Mode vs. Light, Minimal vs. Reichhaltig, Redaktionell vs. Produktorientiert)
- Ein Moodboard aus Referenzen erstellen, die zum emotionalen Territorium der Marke passen
- Wenn KI-generierte Designs "schablonenhaft" wirken, weil ihnen eine klare Richtung fehlt
Methodik-Grundlage
Quellen:
- Emotional Design (Don Norman, 2004) — viszerale, verhaltensorientierte und reflexive Verarbeitung
- Brand Positioning Theory (April Dunford, "Obviously Awesome") — Wettbewerbsalternativen definieren das visuelle Territorium
- Farbpsychologie-Forschung — Warm/Kalt-Spektrum und Verhaltensreaktion
- Webdesign-Musteranalyse — 48 öffentliche Websites analysiert in 4 emotionalen Quadranten
- Gap-Analyse von 12 Design-Inspirationsplattformen (Awwwards, Dribbble, Godly, Mobbin, etc.)
Kernaussage: Jede bestehende Design-Inspirationsplattform (Awwwards, Dribbble, Behance, Godly, Mobbin, SiteInspire, Lapa.ninja) kategorisiert nach visuellem Stil, Branche, Plattform oder Farbe. KEINE Plattform organisiert nach emotionaler Absicht. Das ist die Lücke. Eine "minimale dunkle Website" kann luxuriös (Cartier) oder bedrohlich (CrowdStrike) wirken — der visuelle Stil ist derselbe, die emotionale Wirkung gegensätzlich. Stil ohne Absicht ist Dekoration. Absicht ohne Stil ist ein Wireframe.
Der emotionale Quadrant:
WARM
(Nähe, Vertrauen)
|
Warm+Aktiv | Warm+Ruhig
(Energie, | (Geborgenheit,
Freude) | Sicherheit)
|
AKTIV --------+-------- RUhig
(Schwung, | (Zurückhaltung,
Innovation) | 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 Positioning-Mismatch — egal wie "sauber" sie aussieht.
Was Claude tut vs. Was Sie entscheiden
"Claude wählt die Referenzen und Muster aus. Sie validieren die emotionale Passung."
| Claude übernimmt | Sie geben vor |
|---|---|
| Mapping der Markenpositionierung auf den emotionalen Quadranten | Markenwerte, Zielgruppe, Wettbewerbsalternativen |
| Auswahl relevanter Referenzen aus der Bibliothek | Bauchgefühl-Check: 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 | Finale Freigabe der Richtung vor dem Coding |
| Erkennen von Positionierungsfehlern (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 aus der Kombination von Elementen aus verschiedenen Quadranten — zum Beispiel eine Warm+Ruhig-Palette mit Kalt+Aktiv-Typografie.
Was dieses Skill tut
- Emotionale Positionierung — Markenpositionierung auf den richtigen emotionalen Quadranten abbilden
- Referenzauswahl — 3–5 kommentierte öffentliche Websites vorschlagen, die zum gewünschten Gefühl passen
- Musterextraktion — Die spezifischen Designmechaniken identifizieren, die jeden emotionalen Effekt erzeugen
- Richtungsdokument — Ein Design-Briefing mit Palette, Typografie, Abständen, Bewegung und Layout-Entscheidungen erstellen
- Fehlanpassungserkennung — Erkennen, wenn Designentscheidungen der Markenpositionierung widersprechen
- Quadrantenübergreifende Kombination — Gezielte Mischung von Elementen aus verschiedenen Quadranten anleiten
So verwenden Sie es
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 stattdessen nutzen würden].
Lade das web-design-director-skill.
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 der Branche [Branche].
Zeig mir 5 kommentierte Referenzen aus der Bibliothek.
Bestehendes Design auf Markenpositionierung prüfen
Hier ist unsere aktuelle Website: [URL oder Screenshot].
Unsere Markenpositionierung ist: [Positionierungsstatement].
Passt das Design zur emotionalen Absicht? Was ist fehlerhaft?
Anleitung
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, entspannt (→ Warm)
[ ] Beeindruckt, neugierig, fasziniert (→ Kalt)
**2. Wie hoch soll das Energieniveau der Website sein?**
[ ] Dynamisch, vorwärtsbewegend, "es passiert etwas" (→ Aktiv)
[ ] Zurückhaltend, großzügig, "nimm dir Zeit" (→ Ruhig)
**3. Wie ist die Beziehung der Marke zum Besucher?**
[ ] Gleichgestellt/Freund/Begleiter (→ Warm)
[ ] Experte/Autorität/Institution (→ Kalt)
**4. Wettbewerbsalternativen — was würden Leute stattdessen nutzen?**
(Dies bestimmt Ihr visuelles Territorium — Sie müssen SICH VON den 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 sicher und verstanden" |
| Kalt + Aktiv | Innovative Kraft | "Das ist hochmodern und seriös" |
| Kalt + Ruhig | Verfeinerte 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 jeweils:
- Welcher spezifische Designmechanismus den emotionalen Effekt erzeugt
- Welcher Abschnitt/Seite ihn am besten zeigt
- Was übernommen vs. was weggelassen werden sollte
Quadrantenübergreifende Kombinationsregeln:
- ÜBERNEHMEN Sie EIN Element aus einem benachbarten Quadranten für Kontraste (z. B. Kalt+Aktiv-Typografie auf Warm+Ruhig-Palette)
- ÜBERNEHMEN Sie NIEMALS aus dem gegenüberliegenden Quadranten (Kalt+Ruhig-Elemente auf einer Warm+Aktiv-Website = Verwirrung)
- Benachbarte Quadranten teilen sich eine Achse: Warm+Ruhig und Warm+Aktiv teilen Wärme; Kalt+Ruhig und Kalt+Aktiv teilen Präzision
Schritt 3: Designentscheidungen extrahieren
Ziehen Sie für jede Design-Dimension die Bibliothek zurate, um eine spezifische Entscheidung 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 + Referenzseite, die sie verwendet]
- **Primärakzent**: [spezifische Farbe + emotionale Begründung]
- **Text**: [dunkel/hell + Begründung des Kontrastverhältnisses]
- **System**: [monochromatisch / komplementär / analog]
### Typografie
- **Überschriften**: [Serife/proportional/Display + Schriftgewicht + spezifischer Schriftvorschlag]
- **Fließtext**: [Schriftart + Größe + Zeilenhöhe + Begründung aus der Referenz]
- **Persönlichkeit**: [Was die Schrift über die Marke aussagt]
### Abstände & Layout
- **Dichte**: [großzügig/mittel/kompakt + Referenz]
- **Raster**: [Spalten + maximale Breite + Begründung]
- **Weißraum**: [aggressiv/ausgewogen/minimal]
- **Abschnittsrhythmus**: [abwechselnd/konsistent/progressiv]
### Bewegung & Interaktion
- **Animationsstil**: [dezent/ausdrucksstark/keine + Referenz]
- **Scrollverhalten**: [weich/standard/parallax]
- **Hover-Zustände**: [Transformationsart + Timing]
- **Seitenübergänge**: [Art oder keine]
### Fotografie & Bilder
- **Stil**: [Fotografie/Illustration/Abstrakt/Gemischt]
- **Emotionale Richtung**: [Querverweis auf den Quadranten des Minimal-Bildregie-Skills]
- **Behandlung**: [Vollfarben/Gedämpft/Duoton/Körnig]
### Layout-Muster
- **Hero**: [Vollflächig/Eingeschränkt/Geteilt/Nur Text]
- **Karten**: [Mit Rahmen/Ohne Rahmen/Erhöht/Flach]
- **Navigation**: [Oben/Seite/Minimal/Versteckt]
Schritt 4: Gegen die Positionierung validieren
Führen Sie vor der Finalisierung die Fehlanpassungsprüfung durch:
## Positionierungs-Fehlanpassungsprüfung
- [ ] Stimmt die Farbtemperatur mit der Markenwärme überein? (warme Marke = warme Farben)
- [ ] Passt das Animationsniveau zur Markenenergie? (ruhige Marke ≠ aggressive Animationen)
- [ ] Passt die Typografie zur Autoritätsebene der Marke? (verspielte Marke ≠ Serifenlose in Großbuchstaben)
- [ ] Würde sich ein Besucher aus der Zielgruppe willkommen oder eingeschüchtert fühlen?
- [ ] Sieht das ANDERS aus als die Wettbewerbsalternativen?
- [ ] Würde dieses Design auch am SCHLECHTESTEN Tag der Marke funktionieren? (nicht nur am Starttag)
Referenzbibliothek — 48 kommentierte öffentliche Websites
WARM + RUhig — Nährende Geborgenheit
"Ich fühle mich sicher und verstanden"
Websites in diesem Quadranten verwenden: warme Farbpaletten, großzügige Abstände, weiche Bilder, einladende Typografie, sanfte Übergänge. Sie priorisieren Lesbarkeit und emotionalen Komfort über visuelle Wirkung.
| # | Website | Branche | Wichtigster Designmechanismus | Beste Seite zum Studieren | Anti-Muster-Warnung |
|---|---|---|---|---|---|
| 1 | Headspace | Wellness/Meditation | Abgerundete Formen + warme Illustration + Pastellpalette. Fühlt sich an wie eine sanfte Umarmung. | Homepage-Hero + Onboarding-Flow | Illustrationen können ins Kindische kippen, wenn sie nicht sorgfältig ausbalanciert sind |
| 2 | Allbirds | Nachhaltige Mode | Erdtönige Fotografie + natürliche Texturen + sauberes Raster. Produktorientiert, aber warm. | Produktdetailseiten | Kann ohne Persönlichkeit zu "öko-konventionell" wirken |
| 3 | Wildling Shoes | Kinderschuhe | Naturfotografie + warme Neutrals + organischer Fluss. Fühlt sich an wie ein Waldspaziergang. | Homepage-Scroll-Erzählung | Leicht, den Produktfokus in den Naturaufnahmen zu verlieren |
| 4 | Kinfolk | Lifestyle-Editorial | Typografie-getrieben + großzügiger Weißraum + warme Fotografie. Stille Zuversicht. | Artikel-Layouts | Kann zu spärlich wirken, wenn der Inhalt dünn ist |
| 5 | Cereal Magazine | Reisen/Design | Gedämpfte warme Palette + redaktionelles Raster + besinnliche Bilder. Langsames Tempo. | Reiseführer | Niedriger Kontrast kann die Lesbarkeit beeinträchtigen |
| 6 | Aesop | Beauty/Hautpflege | Warm getönte Produktfotografie + Serifen-Typografie + zurückhaltendes Layout. Raffinierte Wärme. | Store-Locator + Produktseiten | Balanciert zwischen Warm+Ruhig und Kalt+Ruhig |
| 7 | Everlane | Ethische Mode | Sauberes Layout + warme Lifestyle-Fotografie + transparente Preisgestaltung. Ehrliche Wärme. | "Über uns"-Seite + Fabrik-Geschichten | Transparenz-Botschaften können belehrend wirken, wenn sie übertrieben werden |
| 8 | Patagonia | Outdoor/Sinnvoll | Mutige warme Fotografie + sinnvolle Inhalte + redaktionelle Tiefe. Aktivisten-Wärme. | Umweltgeschichten | Aktivismus-zentriertes Design kann nicht-aktivistische Zielgruppen verprellen |
| 9 | Nurture Life | Kindermahlzeiten | Sanfte Pastellfarben + abgerundete UI + warme Essensfotografie. Elternfreundlich. | Essensplan-Seite | Pastell-Übergebrauch kann generisch "Baby-Marke" wirken |
| 10 | Organic Basics | Nachhaltige Basics | Neutrale Töne + Raum zum Atmen + minimale Navigation. Ruhiger Handel. | Produktkategorieseiten | Zu minimalistisch kann wirken wie "nichts zu sehen hier" |
| 11 | Ritual | Wellness/Ergänzungsmittel | Warmer gelber Akzent + sauberes Layout + wissenschaftliche Wärme. Vertrauen durch Transparenz. | Seite zur Inhaltsstoff-Rückverfolgbarkeit | Gelber Akzent kann bei Übergebrauch klinisch wirken |
| 12 | Mejuri | Accessible Jewelry | Warme Lifestyle-Fotografie + sanfte Goldakzente + sauberes E-Commerce-Raster. Zugänglicher Luxus. | Kollektionsseiten | Luxusgefühl mit erschwinglichen Preisen ausbalancieren |
Quadrantenübergreifendes Muster: Alle Warm+Ruhig-Websites teilen 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, energetische Typografie, interaktive Elemente. Sie fühlen sich an wie ein enthusiastischer Freund, der dir etwas Erstaunliches zeigt.
| # | Website | Branche | Wichtigster Designmechanismus | Beste Seite zum Studieren | Anti-Muster-Warnung |
|---|---|---|---|---|---|
| 1 | Notion | Produktivität | Warme Illustrationen + saubere Produkt-UI + freundliche Mikro-Interaktionen. Organisierte Begeisterung. | Vorlagengalerie + Homepage | Der Illustrationsstil wird oft kopiert — finden Sie Ihren eigenen |
| 2 | Figma | Designtool | Lebendige Verläufe + kollaborative Energie + kühne Typografie. Design-orientiert, aber nicht kalt. | Community/Plugins-Seite | Verlaufslastiges Design altert schnell |
| 3 | Mailchimp | E-Mail-Marketing | Unverwechselbare Illustration + warmes Markengelb + verspielte UI. Persönlichkeitsgetrieben. | Homepage + Preisseite | Extravaganter Illustrationsstil erfordert starkes Markencommitment |
| 4 | Loom | Videokommunikation | Warmes Lila + einladende 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 + gesprächige Texte + dynamisches Layout. Freundliche Autorität. | Produkttour-Seiten | Kräftige Palette kann ohne Weißraum-Disziplin überwältigen |
| 6 | Monday.com | Projektmanagement | Bunte UI + energetische Animationen + spielerisches Layout. Arbeit fühlt sich wie ein Spiel an. | Board-Vorlagen | Spielerisch kann kindisch wirken, wenn es nicht professionell ausbalanciert ist |
| 7 | Stripe | Zahlungen | Lebendige Verläufe + kühne Typografie + technische Klarheit + Schwung. Power-User-Wärme. | Dokumentation + API-Referenz | Verlaufsmuster können ohne Disziplin ablenkend wirken |
| 8 | Linear | Issue Tracking | Gedämpfte lebendige Palette + Keyboard-First-UI + blitzschnelle Interaktionen. Entwickler-Wärme. | Tastaturkürzel-Seite | Minimales Design kann sich für Nicht-Entwickler kalt anfühlen |
| 9 | Raycast | Entwickler-Tool | Warme blaue Akzente + Erweiterungs-Ökosystem + freundliche Befehlszeile. Mac-Enthusiasmus. | Extension Store | Blaue Wärme kann kalt wirken, wenn sie zu blau ist |
| 10 | Vercel | Deployment | Geometrische Muster + kräftige Lila-Akzente + technisches, aber einladendes Layout. Hacker-Wärme. | Template-Deployment-Flow | Geometrisches Muster ist ikonisch, aber schwer zu reproduzieren |
| 11 | Webflow | Webdesign | Warme blaue UI + visuelle Builder + ermächtigendes Layout. Kreativität trifft Struktur. | Designer-Oberfläche + Tutorials | Funktionsreiche UI kann überwältigen, wenn nicht durch gutes Onboarding geführt |
| 12 | Dribbble | Design-Community | Lebendige Vorschauen + soziale Energie + kuratierte Raster. Inspirierender Schwung. | Beliebte Schüsse | Kuratierte Inhalte können ungleiche Teilnahme fördern |
[Fortsetzung folgt mit den Quadranten Kalt+Aktiv und Kalt+Ruhig sowie der vollständigen 48-Referenz-Bibliothek]