web-design-director

What this skill does

# 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

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**:

| 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