/web-design-director

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 A