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."

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

1. Emotional Positioning — Maps brand positioning to the correct emotional quadrant
2. Reference Selection — Surfaces 3-5 annotated public websites that match the target feeling
3. Pattern Extraction — Identifies the specific design mechanics that create each emotional effect
4. Direction Document — Generates a design brief with palette, typography, spacing, motion, and layout decisions
5. Mismatch Detection — Flags when design choices contradict brand positioning
6. 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:

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