web-design-expert

# Web Design Expert

Expert web designer and brand identity specialist creating distinctive, cohesive visual systems for web applications.

## When to Use This Skill

**Use for:**
- Brand identity development (personality, visual language, guidelines)
- Color palette creation and rationale
- Layout composition and visual hierarchy
- Component visual design (not just code)
- Responsive design strategy
- WCAG accessibility review for visual elements

**Do NOT use for:**
- Deep typography work → use **typography-expert**
- Color theory mathematics → use **color-theory-palette-harmony-expert**
- Design tokens and CSS architecture → use **design-system-creator**
- Retro Windows 3.1 → use **windows-3-1-web-designer**
- Native app design → use **native-app-designer**

## Core Design Process

### 1. Discovery (Critical First Step)

```
BUSINESS CONTEXT:
- What is the primary goal?
- Who is the target audience?
- What action should users take?
- Who are competitors?

BRAND PERSONALITY:
- If this brand were a person, how would they dress?
- Pick 3 adjectives for user's feeling
- What should brand NEVER be perceived as?
```

### 2. Visual Direction (Provide 2-3 Concepts)

Each concept includes:
- **Mood board** (3-5 references with rationale)
- **Color palette** (primary, secondary, accent, neutrals) — **Always in OKLCH format**
- **Typography direction** (families, hierarchy)
- **Layout philosophy** (grid vs freeform, density)
- **Signature elements** (unique visual features)

## OKLCH: The Modern Color Standard

**⚠️ All color palettes must use OKLCH, not hex or HSL.**

OKLCH is the 2024+ standard for professional web design because:
- **Perceptual uniformity**: Equal L values = equal perceived lightness
- **Better accessibility**: More accurate contrast calculations than WCAG 2.x hex
- **Predictable scaling**: Math works (L=50% + 20% = L=70% that looks right)

```css
/* OKLCH format: oklch(Lightness% Chroma Hue) */
--brand-primary: oklch(55% 0.22 265);    /* Vibrant blue */
--brand-accent: oklch(75% 0.18 45);      /* Warm orange */
--text-primary: oklch(20% 0.02 265);     /* Near-black */
--bg-surface: oklch(98% 0.01 265);       /* Near-white */
```

**Essential OKLCH Resources:**
| Resource | Purpose |
|----------|---------|
| [oklch.com](https://oklch.com/) | Interactive OKLCH color picker |
| [Evil Martians: Why Quit RGB/HSL](https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl) | The definitive article |
| [Harmonizer](https://harmonizer.evilmartians.com/) | Generate harmonious OKLCH palettes |

**When presenting color palettes:**
```
Primary: oklch(55% 0.22 265) — Vibrant blue, strong CTA presence
Secondary: oklch(70% 0.08 265) — Muted blue, supporting elements
Accent: oklch(75% 0.18 45) — Warm orange, attention-grabbing
```

Never present palettes as `#3b82f6` — always convert to OKLCH.

### 3. Design Principles

**Hierarchy**: Most important element immediately obvious? Eye flows naturally?

**Consistency**: Same colors mean same things? Spacing follows scale?

## Common Anti-Patterns

### Design by Committee
| What it looks like | Why it's wrong |
|--------------------|----------------|
| Multiple visual styles on same page | Destroys brand coherence |
| **Instead**: Establish principles early, enforce consistency |

### Decoration Over Function
| What it looks like | Why it's wrong |
|--------------------|----------------|
| Fancy animations without purpose | Slows performance, distracts |
| **Instead**: Every element must earn its place |

### Ignoring the Fold
| What it looks like | Why it's wrong |
|--------------------|----------------|
| Critical info below viewport | 80% attention is above fold |
| **Instead**: Hero must have value prop + primary CTA |

### Low Contrast Text
| What it looks like | Why it's wrong |
|--------------------|----------------|
| Light gray on white (#999 on #fff) | Fails WCAG, excludes users |
| **Instead**: Minimum 4.5:1 contrast ratio |

### Mobile as Afterthought
| What it looks like | Why it's wrong |
|--------------------|----------------|
| Desktop-first that "shrinks" | 60%+ traffic is mobile |
| **Instead**: Design mobile-first, enhance for desktop |

## Design Trend Evolution

| Era | Trend |
|-----|-------|
| 2019-2021 | Subtle shadows, layering, dark mode |
| 2022-2023 | Oversized typography, variable fonts |
| 2024+ | Bento grids, claymorphism, grain, AI personalization |

**Watch For** (dated patterns LLMs may suggest):
- Flat design without depth
- Hero sliders (proven ineffective)
- Carousel galleries (low engagement)
- Desktop hamburger menus

## Output Deliverables

1. **Brand Identity Guide**: Colors, typography, voice, do's/don'ts
2. **Design Specifications**: Spacing, radius, shadows, animation timing
3. **Component Examples**: Buttons, forms, cards, navigation (all states)
4. **Responsive Guidelines**: Breakpoints, layout changes, touch targets

## MCP Tools

| Tool | Purpose |
|------|---------|
| `21st_magic_component_inspiration` | Search UI patterns for inspiration |
| `21st_magic_component_builder` | Generate React/Tailwind components |
| `21st_magic_component_refiner` | Improve existing component UI |
| `logo_search` | Get company logos in JSX/TSX/SVG |

## Integration with Other Skills

- **typography-expert** - Deep typography decisions
- **color-theory-palette-harmony-expert** - Color mathematics
- **design-system-creator** - Token architecture
- **vibe-matcher** - Translating feelings to visuals
- **design-archivist** - Competitive research

## Reference Files

| File | Contents |
|------|----------|
| `references/layout-systems.md` | Grid systems, spacing scales, responsive breakpoints |
| `references/color-accessibility.md` | Palettes, psychology, dark mode, WCAG compliance |
| `references/tooling-integration.md` | 21st.dev, Figma MCP, component workflows |

---

*The best design is invisible until you notice its excellence.*