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/abstract/mixed]
- **Emotional direction**: [reference to minimalist-image-director quadrant]
- **Treatment**: [full-color/muted/duotone/grain]

### Layout Pattern
- **Hero**: [full-bleed/contained/split/text-only]
- **Cards**: [bordered/borderless/elevated/flat]
- **Navigation**: [top/side/minimal/hidden]

Step 4: Validate Against Positioning

Before finalizing, run the mismatch check:

## Positioning Mismatch Check

- [ ] Does the color temperature match the brand warmth? (warm brand = warm colors)
- [ ] Does the animation level match the brand energy? (calm brand ≠ aggressive animations)
- [ ] Does the typography match the brand authority level? (playful brand ≠ all-caps sans-serif)
- [ ] Would a visitor from the target audience feel welcomed or intimidated?
- [ ] Does this look DIFFERENT from the competitive alternatives?
- [ ] Would this design work for the brand's WORST day? (not just launch day)

Reference Library — 48 Annotated Public Websites

WARM + CALM — Nurturing Comfort

"I feel safe and understood here"

Sites in this quadrant use: warm color palettes, generous spacing, soft imagery, approachable typography, gentle transitions. They prioritize readability and emotional comfort over visual impact.

Cross-quadrant pattern: All Warm+Calm sites share generous line-height (1.6-1.8), muted/earthy palettes, and photography featuring real humans in natural environments. Navigation is always simple. Animations are always subtle.

WARM + ACTIVE — Energetic Warmth

"This is exciting AND friendly"

Sites in this quadrant use: bold colors, dynamic animations, playful illustrations, energetic typography, interactive elements. They feel like an enthusiastic friend showing you something amazing.

Cross-quadrant pattern: All Warm+Active sites use bold primary colors (not pastels), dynamic scroll animations, product-in-action demonstrations, and copy that speaks directly to the user ("you"). Typography is sans-serif, medium-to-heavy weight. Illustrations are distinctive, not generic.

COLD + CALM — Refined Authority

"This is elevated and exclusive"

Sites in this quadrant use: restrained palettes (black/white/grey + one accent), generous negative space, serif or refined sans-serif typography, minimal animation, large-scale imagery. They communicate through what they DON'T show.

Cross-quadrant pattern: All Cold+Calm sites use serif or thin sans-serif type, monochromatic or near-monochromatic palettes, full-bleed imagery, and a high content-to-chrome ratio. Navigation is minimized. Animation is rare and subtle. Copy is sparse — the imagery carries the message.

COLD + ACTIVE — Innovative Power

"This is cutting-edge and serious"

Sites in this quadrant use: dark backgrounds, sharp typography, bold gradients, technical demonstrations, fast-paced scroll animations, code/data visualizations. They communicate speed, precision, and technical authority.

Cross-quadrant pattern: All Cold+Active sites use dark backgrounds (#000-#1a1a1a), monospace or geometric sans-serif type, gradient accents (purple/blue/green), product demos as hero elements, and performance/speed messaging. Copy is technical and precise. Motion is deliberate and fast.

Cross-Quadrant Pattern Analysis

Design Dimensions by Quadrant

The "Adjacent Quadrant" Blending Guide

Borrow ONE element from an adjacent quadrant to add tension and interest:

NEVER blend opposites: Warm+Calm + Cold+Active = confused identity. Cold+Calm + Warm+Active = schizophrenic.

Skill Boundaries (Frontier Recognition)

This skill excels for:

• New website projects where visual direction hasn't been decided
• Brand repositioning (mapping new positioning to new visual language)
• Design audits (is the current design aligned with brand intent?)
• Creative briefs for designers or AI coding tools
• Cross-functional alignment (giving non-designers vocabulary for design feedback)

This skill is NOT ideal for:

• Specific UI component design (use

  /frontend-design

  for implementation)
• Typography pairing details (this provides direction, not font selection)
• Design system creation (this is strategic, not systematic)
• Animation engineering (this defines intent, not keyframes)
• Sites that intentionally subvert expectations (anti-design, brutalism) — those require breaking these rules deliberately

Quality Checkpoints

Before accepting the design direction:

• The quadrant selection matches the brand positioning (not just personal taste)
• The reference sites match the client's ASPIRATIONAL identity, not their current state
• The cross-quadrant blend is intentional and limited (1 element max)
• The direction document is specific enough to implement without further interpretation
• A non-designer on the team could understand and validate the direction

Iteration Guide

"Direction before decoration. Feel before font."

Recommended Iteration Pattern

Useful Follow-up Prompts

• "The references feel right but the palette doesn't translate to our industry. Find references with the same energy but in [industry]."
• "We're between Warm+Calm and Cold+Calm. Show me 3 sites that straddle that border."
• "The direction is too safe. What would an adjacent-quadrant accent do to this design?"
• "Our competitor uses [X quadrant]. How do we differentiate visually while staying in the same emotional territory?"
• "Translate this design direction into a brief for the

  /frontend-design

  skill."

Integration with Other ClawFu Skills

/frontend-design

Workflow sequence:

brand-strategy → web-design-director → design-trends-2026 → minimalist-image-director → /frontend-design
(positioning)    (direction)           (trend filter)        (image generation)           (code)

Checklists & Templates

Design Direction Brief Template

## Design Direction Brief

**Brand**: ________________
**Target audience**: ________________
**Brand positioning statement**: ________________
**Competitive alternatives**: ________________

### Emotional Quadrant
**Selected**: [Warm+Calm / Warm+Active / Cold+Active / Cold+Calm]
**Rationale**: ________________
**Adjacent accent**: [element from adjacent quadrant, if any]

### Primary References (3-5 sites)
| Site | What to borrow | What to leave behind |
|------|---------------|---------------------|
| [site 1] | [specific mechanic] | [what doesn't fit] |
| [site 2] | [specific mechanic] | [what doesn't fit] |
| [site 3] | [specific mechanic] | [what doesn't fit] |

### Design Decisions
- **Background**: ________________
- **Primary color**: ________________
- **Typography headings**: ________________
- **Typography body**: ________________
- **Spacing density**: ________________
- **Animation style**: ________________
- **Photography direction**: ________________
- **Card style**: ________________
- **CTA style**: ________________
- **Hero pattern**: ________________

### Validation
- [ ] Matches brand quadrant
- [ ] Different from competitive alternatives
- [ ] Target audience would feel welcomed
- [ ] Specific enough to implement

References

Core Methodology

• Norman, Don. "Emotional Design" (2004) - Visceral, behavioral, reflective processing
• Dunford, April. "Obviously Awesome" (2019) - Competitive alternatives define positioning territory
• Kittl x Savee. "2026 Design Trends Report" - Warm minimalism as dominant trend

Design Inspiration Platforms (Gap Analysis)

• Awwwards - Categories: industry, technology, style. No emotional classification.
• Dribbble - Categories: color, media type. No emotional classification.
• Behance - Categories: field, tools. No emotional classification.
• Godly - Categories: style, type. No emotional classification.
• Mobbin - Categories: platform, flow type. No emotional classification.
• SiteInspire - Categories: style, type, subject. No emotional classification.
• Lapa.ninja - Categories: color, category. No emotional classification.
• Landbook - Categories: type, color, style. No emotional classification.

Color Psychology & Neuroscience

• Visual Environment & Thermal Perception (ScienceDirect) - Visual warmth affects perception
• Color Psychology in Photography (Skylum) - Warm/cool behavioral response
• Cold Temperatures in Photos Increase Cognitive Control (ScienceDaily) - Warm → approach, cool → alert

Web Design Analysis

• Web Design Trends 2026 (Webflow) - Industry trend survey
• The Best SaaS Websites (2025-2026) - SaaS design pattern library

Related Skills

• minimalist-image-director - AI photography within the emotional quadrant system
• design-trends-2026 - Current visual trends filtered by quadrant
• landing-page-copy - Copy structure matching quadrant voice
• landing-page-optimizer - Conversion mechanics on top of emotional direction
• brand-strategy - Brand foundation that determines the quadrant

Skill Metadata

name: web-design-director
category: ai-design
subcategory: art-direction
version: 1.0
author: GUIA
source_expert: Don Norman (Emotional Design) + April Dunford (Positioning) + Web Design Pattern Analysis (48 sites)
source_work: null
difficulty: intermediate
mode: centaur
estimated_value: Creative director engagement (~2000-5000 EUR per project)
tags: [web-design, art-direction, emotional-design, design-references, brand-positioning, UI-direction, design-system, mood-board, warm-minimalism]
created: 2026-02-12
updated: 2026-02-12

This skill is part of the GUIA Premium Marketing Skills Library — the 201 layer that bridges AI basics and technical implementation.