Web Design Director
Visual design direction framework organized by emotional intent (Warm/Cold x Active/Calm). The first design reference system that categorizes sites by what they make you FEEL, not how they look. Includes 48 annotated public website references.
When to Use This Skill
- Starting a new website project and deciding the visual direction before coding
- A client says "I want it to feel professional but warm" and you need to translate that into concrete design decisions
- You have a brand positioning (Dunford, StoryBrand) and need to map it to visual language
- Choosing between design approaches (dark mode vs light, minimal vs rich, editorial vs product)
- Building a mood board from references that match the brand's emotional territory
- When AI-generated designs come back looking "template-y" because they lack intentional direction
Methodology Foundation
Sources:
- Emotional Design (Don Norman, 2004) — visceral, behavioral, reflective processing
- Brand positioning theory (April Dunford, "Obviously Awesome") — competitive alternatives define visual territory
- Color psychology research — warm/cool spectrum and behavioral response
- Web design pattern analysis — 48 public sites analyzed across 4 emotional quadrants
- Gap analysis of 12 design inspiration platforms (Awwwards, Dribbble, Godly, Mobbin, etc.)
Core Insight: Every existing design inspiration platform (Awwwards, Dribbble, Behance, Godly, Mobbin, SiteInspire, Lapa.ninja) categorizes by visual style, industry, platform, or color. ZERO platforms organize by emotional intent. This is the gap. A "minimal dark site" can feel luxurious (Cartier) or threatening (CrowdStrike) — the visual style is the same, the emotional effect is opposite. Style without intent is decoration. Intent without style is a wireframe.
The Emotional Quadrant:
WARM
(approach, trust)
|
Warm+Active | Warm+Calm
(energy, | (comfort,
delight) | safety)
|
ACTIVE --------+-------- CALM
(momentum, | (restraint,
disruption) | authority)
|
Cold+Active | Cold+Calm
(innovation,| (luxury,
power) | exclusivity)
|
COLD
(distance, precision)Why This Matters: Brand positioning determines which quadrant you design in. A child psychologist belongs in Warm+Calm. A developer tool belongs in Cold+Active. Designing a child psychologist's site with Vercel's aesthetic is a positioning mismatch — no matter how "clean" it looks.
What Claude Does vs What You Decide
"Claude selects the references and patterns. You validate the emotional fit."
| Claude handles | You provide | |---------------|-------------| | Mapping brand positioning to emotional quadrant | Brand values, target audience, competitive alternatives | | Selecting relevant references from the library | Gut-check: does this reference FEEL like my brand? | | Extracting design patterns (typography, spacing, color, motion) | Budget and technical constraints | | Generating a design direction document with rationale | Final approval on direction before coding begins | | Flagging positioning mismatches (warm brand + cold design) | Client context Claude can't see |
Remember: The reference library is a starting point for conversation, not a prescription. The best design direction often comes from combining elements across quadrants — a Warm+Calm palette with Cold+Active typography, for example.
What This Skill Does
- Emotional Positioning — Maps brand positioning to the correct emotional quadrant
- Reference Selection — Surfaces 3-5 annotated public websites that match the target feeling
- Pattern Extraction — Identifies the specific design mechanics that create each emotional effect
- Direction Document — Generates a design brief with palette, typography, spacing, motion, and layout decisions
- Mismatch Detection — Flags when design choices contradict brand positioning
- Cross-Quadrant Blending — Guides intentional mixing of elements from different quadrants
How to Use
Get design direction for a new website
I'm designing a website for [brand/business type].
Target audience: [who].
Brand feeling: [2-3 emotional words].
Competitive alternatives: [what they'd use instead of this brand].
Load the web-design-director skill.Find references for a specific feeling
I need website references that feel [emotional description].
Not [what to avoid]. The brand is in [industry].
Show me 5 annotated references from the library.Audit an existing design against brand positioning
Here's our current site: [URL or screenshot].
Our brand positioning is: [positioning statement].
Does the design match the emotional intent? What's misaligned?Instructions
Step 1: Determine the Emotional Quadrant
Ask these questions to place the brand:
## Brand Emotional Mapping
**1. What should a visitor feel in the first 3 seconds?**
[ ] Safe, welcomed, at ease (→ Warm)
[ ] Impressed, curious, intrigued (→ Cold)
**2. What should the site's energy level be?**
[ ] Dynamic, forward-moving, "things are happening" (→ Active)
[ ] Restrained, spacious, "take your time" (→ Calm)
**3. What's the brand's relationship with the visitor?**
[ ] Peer/friend/guide (→ Warm)
[ ] Expert/authority/institution (→ Cold)
**4. Competitive alternatives — what would people use instead?**
(This determines your visual territory — you must look DIFFERENT from alternatives)Quadrant determination:
| Combination | Quadrant | Signature feeling | |-------------|----------|-------------------| | Warm + Active | Energetic Warmth | "This is exciting AND friendly" | | Warm + Calm | Nurturing Comfort | "I feel safe and understood here" | | Cold + Active | Innovative Power | "This is cutting-edge and serious" | | Cold + Calm | Refined Authority | "This is elevated and exclusive" |
Step 2: Select References from the Library
Choose 3-5 references from the matching quadrant. For each, note:
- What specific design mechanic creates the emotional effect
- Which section/page demonstrates it best
- What to borrow vs what to leave behind
Cross-quadrant blending rules:
- Borrow ONE element from an adjacent quadrant for contrast (e.g., Cold+Active typography on Warm+Calm palette)
- NEVER borrow from the opposite quadrant (Cold+Calm elements on a Warm+Active site = confusion)
- Adjacent quadrants share one axis: Warm+Calm and Warm+Active share warmth; Cold+Calm and Cold+Active share precision
Step 3: Extract Design Decisions
For each design dimension, reference the library to make a specific choice:
## Design Direction Document
**Quadrant**: [Warm+Calm / Warm+Active / Cold+Active / Cold+Calm]
**Primary references**: [3 sites from library]
**Cross-quadrant accent**: [1 element from adjacent quadrant, if any]
### Color Palette
- **Background**: [specific color + reference site that uses it]
- **Primary accent**: [specific color + emotional rationale]
- **Text**: [dark/light + contrast ratio reasoning]
- **System**: [monochromatic / complementary / analogous]
### Typography
- **Headings**: [serif/sans/display + weight + specific font suggestion]
- **Body**: [font + size + line-height + rationale from reference]
- **Personality**: [what the type says about the brand]
### Spacing & Layout
- **Density**: [generous/moderate/compact + reference]
- **Grid**: [columns + max-width + rationale]
- **White space**: [aggressive/balanced/minimal]
- **Section rhythm**: [alternating/consistent/progressive]
### Motion & Interaction
- **Animation style**: [subtle/expressive/none + reference]
- **Scroll behavior**: [smooth/standard/parallax]
- **Hover states**: [transform type + timing]
- **Page transitions**: [type or none]
### Photography & Imagery
- **Style**: [photography/illustration/a