# Design Excellence Guide

> **Load when:** Any design task where visual quality matters — product pages, presentations, mobile apps, creative works
> **Skip when:** Quick wireframes or low-fidelity prototypes where visual polish isn't the goal
> **Why it matters:** Technical correctness isn't enough. Great design requires understanding visual hierarchy, emotional impact, composition, and rhythm.
> **Typical failure it prevents:** Designs that are technically correct but visually bland, lack personality, or fail to guide the viewer's attention

This guide teaches the "卓越层" (excellence layer) of design — the principles that separate good design from great design.

---

## Visual Hierarchy: The 5 Core Principles

Visual hierarchy is how you control where the viewer looks first, second, third. Without hierarchy, everything competes for attention and nothing wins.

### 1. Size Contrast (大小对比)

**Principle:** The most important element should be significantly larger than supporting elements. Not 10% larger — 2-3x larger.

**Why it works:** Our eyes are drawn to the largest element first. Size = importance in visual language.

**How to apply:**
- Hero headlines: 48-72px (web) or 80-120px (slides)
- Body text: 16-18px (web) or 24-32px (slides)
- Supporting text: 12-14px (web) or 18-20px (slides)
- Ratio rule: Each level should be 1.5-2x the size below it

**Example:**
```css
h1 { font-size: 64px; font-weight: 700; }  /* Hero */
h2 { font-size: 32px; font-weight: 600; }  /* Section */
p  { font-size: 18px; font-weight: 400; }  /* Body */
```

**Common mistake:** Making everything "medium" sized. If nothing is big, nothing is important.

### 2. Color Weight (颜色权重)

**Principle:** Use color to create visual weight. Dark = heavy, light = airy. High saturation = attention, low saturation = background.

**Why it works:** Color carries emotional and hierarchical meaning. A bright accent color on a neutral background instantly draws the eye.

**How to apply:**
- Primary action: High contrast, saturated color (e.g., bright blue button on white)
- Secondary action: Medium contrast, desaturated (e.g., gray button)
- Tertiary action: Low contrast, text-only (e.g., "Cancel" link)
- Background: Neutral, low saturation (e.g., off-white, light gray)

**Color weight scale:**
```
Heaviest → Lightest
Black text on white → Dark gray on white → Medium gray → Light gray → White on white
```

**Example:**
```css
.primary-cta   { background: oklch(0.55 0.18 240); color: white; }  /* Heavy */
.secondary-cta { background: oklch(0.90 0.05 240); color: oklch(0.35 0.10 240); }  /* Medium */
.tertiary-cta  { background: transparent; color: oklch(0.50 0.08 240); }  /* Light */
```

**Common mistake:** Using multiple bright colors. Only one element should be "loud" per section.

### 3. Position Priority (位置优先级)

**Principle:** Position communicates importance. Top-left = start here. Center = most important. Bottom-right = least important (in left-to-right cultures).

**Why it works:** We read in patterns (F-pattern for text, Z-pattern for visuals). Position leverages these natural eye movements.

**How to apply:**
- Hero content: Top 50% of viewport, centered or left-aligned
- Primary CTA: Above the fold, high contrast position
- Supporting content: Below the fold, follows natural reading flow
- Navigation: Top (web) or bottom (mobile)

**Reading patterns:**
- **F-pattern** (text-heavy pages): Eyes move left-to-right at top, then down left side, then right again
- **Z-pattern** (visual pages): Top-left → top-right → diagonal → bottom-left → bottom-right
- **Center-focus** (presentations): All attention to center, minimal peripheral content

**Common mistake:** Burying the most important content below the fold or in a corner.

### 4. Whitespace Separation (留白分隔)

**Principle:** Whitespace (negative space) groups related elements and separates unrelated ones. More space = stronger separation.

**Why it works:** Our brains group things that are close together and separate things that are far apart (Gestalt proximity principle).

**How to apply:**
- Within a group: 8-16px spacing
- Between groups: 32-48px spacing
- Between sections: 64-96px spacing
- Ratio rule: Space between groups should be 2-3x space within groups

**Spacing scale:**
```
Tightest → Loosest
4px (inline) → 8px (related) → 16px (group) → 32px (section) → 64px (major break)
```

**Example:**
```css
.card-content { padding: 24px; gap: 12px; }  /* Within group */
.card { margin-bottom: 32px; }  /* Between cards */
.section { margin-bottom: 80px; }  /* Between sections */
```

**Common mistake:** Using the same spacing everywhere. Consistent spacing = no hierarchy.

### 5. Visual Flow (视觉流动)

**Principle:** Design a path for the eye to follow. Guide the viewer from most important → second most important → action.

**Why it works:** People don't read designs randomly. They follow visual cues (size, color, position, direction).

**How to apply:**
- Start with a focal point (largest, highest contrast element)
- Use directional cues (arrows, lines, gaze direction in photos)
- Create a rhythm (alternating large/small, dark/light)
- End with a clear action (CTA button, next step)

**Flow patterns:**
- **Linear flow:** Top → middle → bottom (presentations, landing pages)
- **Circular flow:** Center → outward → back to center (dashboards, data viz)
- **Grid flow:** Left-to-right, top-to-bottom (galleries, product listings)

**Example structure:**
```
1. Hero headline (largest, top-center)
   ↓
2. Supporting text (medium, below headline)
   ↓
3. Visual proof (image, below text)
   ↓
4. CTA button (high contrast, centered)
```

**Common mistake:** Creating multiple competing focal points. The eye doesn't know where to start.

---

## Emotional Design: The Decision Tree

Different contexts require different emotional tones. Choose the right tone for your audience and goal.

### Trust (信任感设计)

**When to use:** Financial services, healthcare, enterprise B2B, legal, insurance

**Visual characteristics:**
- **Colors:** Blues, grays, deep purples — calm, stable, professional
- **Typography:** Serif fonts for authority (Source Serif, Instrument Serif), clean sans-serif for clarity (DM Sans, Inter)
- **Layout:** Symmetrical, balanced, generous whitespace
- **Imagery:** Real people (not stock photos), authentic scenarios, data visualizations
- **Motion:** Subtle, smooth, purposeful — no flashy animations

**Key principle:** Reduce cognitive load. Make complex things feel simple and safe.

**Example palette:**
```css
:root {
  --trust-primary: oklch(0.50 0.15 240);  /* Deep blue */
  --trust-surface: oklch(0.98 0.01 240);  /* Off-white */
  --trust-text: oklch(0.20 0.02 240);     /* Dark blue-gray */
}
```

**Avoid:** Bright colors, playful fonts, asymmetric layouts, abstract imagery

### Excitement (兴奋感设计)

**When to use:** Entertainment, gaming, social media, events, consumer products

**Visual characteristics:**
- **Colors:** Vibrant, saturated — reds, oranges, magentas, electric blues
- **Typography:** Bold, geometric, display fonts (Space Grotesk, Bricolage Grotesque)
- **Layout:** Asymmetric, dynamic, overlapping elements, diagonal lines
- **Imagery:** High energy, motion blur, bold graphics, illustrations
- **Motion:** Fast, bouncy, playful — spring animations, parallax

**Key principle:** Create energy and momentum. Make people feel something.

**Example palette:**
```css
:root {
  --excitement-primary: oklch(0.60 0.25 25);   /* Vibrant orange */
  --excitement-accent: oklch(0.55 0.22 320);   /* Electric magenta */
  --excitement-bg: oklch(0.15 0.05 25);        /* Dark warm */
}
```

**Avoid:** Muted colors, formal typography, rigid grids, static layouts

### Professional (专业感设计)

**When to use:** B2B SaaS, productivity tools, developer tools, business platforms

**Visual characteristics:**
- **Colors:** Refined neutrals with a single accent — grays, blacks, one brand color
- **Typography:** Modern sans-serif (DM Sans, Outfit, Plus Jakarta Sans), monospace for code
- **Layout:** Grid-based, clean, functional, information-dense but organized
- **Imagery:** UI screenshots, diagrams, icons, minimal photography
- **Motion:** Functional, responsive, snappy — no decoration

**Key principle:** Respect the user's time. Clarity over cleverness.

**Example palette:**
```css
:root {
  --pro-primary: oklch(0.55 0.18 260);    /* Refined purple */
  --pro-surface: oklch(0.97 0.00 0);      /* Pure light gray */
  --pro-text: oklch(0.25 0.00 0);         /* Near-black */
  --pro-border: oklch(0.85 0.00 0);       /* Light border */
}
```

**Avoid:** Decorative elements, excessive whitespace, playful language, unnecessary animation

### Creative (创意感设计)

**When to use:** Portfolios, agencies, art/design showcases, cultural projects

**Visual characteristics:**
- **Colors:** Unexpected combinations, gradients, duotones, experimental
- **Typography:** Display fonts, variable fonts, mixed type styles, large scale
- **Layout:** Broken grids, overlapping layers, unconventional navigation
- **Imagery:** Original photography, custom illustrations, abstract visuals
- **Motion:** Experimental, scroll-driven, interactive, surprising

**Key principle:** Break rules intentionally. Show craft and personality.

**Example palette:**
```css
:root {
  --creative-primary: oklch(0.65 0.20 150);   /* Unexpected green */
  --creative-accent: oklch(0.50 0.25 45);     /* Bold yellow */
  --creative-bg: oklch(0.12 0.03 150);        /* Dark moody */
}
```

**Avoid:** Generic templates, stock imagery, predictable layouts, corporate tone

---

## Composition: The Golden Rules

Composition is how you arrange elements in space. Good composition feels balanced and intentional.

### Rule of Thirds (三分法)

**Principle:** Divide your canvas into a 3x3 grid. Place important elements along the lines or at intersections.

**Why it works:** Centered compositions feel static. Off-center compositions feel dynamic and natural.

**How to apply:**
- Hero images: Subject at 1/3 or 2/3 mark, not dead center
- Text + image layouts: Text on left 2/3, image on right 1/3 (or vice versa)
- Focal points: At grid intersections (4 "power points")

**When to break it:** Presentations, posters, and hero sections often benefit from centered composition for maximum impact.

### Visual Balance (视觉平衡)

**Principle:** Balance visual weight across the composition. Heavy elements (dark, large, saturated) need to be balanced by lighter elements or whitespace.

**Types of balance:**
- **Symmetrical:** Mirror image, formal, stable (trust, professional)
- **Asymmetrical:** Unequal but balanced, dynamic, modern (excitement, creative)
- **Radial:** Elements radiate from center, focused (data viz, dashboards)

**How to apply:**
- If left side is heavy (large image), right side should be lighter (text + whitespace)
- If top is dense (navigation + hero), bottom should be more spacious
- Dark elements need more whitespace around them than light elements

### Visual Flow (视觉流)

**Principle:** Create a path for the eye to follow using directional cues.

**Directional cues:**
- **Lines:** Literal lines, implied lines (edges of elements), diagonal lines (dynamic)
- **Gaze direction:** People in photos looking toward content
- **Arrows:** Explicit (icons) or implicit (shapes pointing)
- **Scale progression:** Large → medium → small creates flow
- **Color progression:** Bright → muted creates flow

**How to apply:**
- Start with the most important element (largest, highest contrast)
- Use directional cues to guide to the second element
- End with a clear action (CTA, next step)

### Focal Point (焦点设计)

**Principle:** Every composition needs one dominant focal point. Everything else supports it.

**How to create a focal point:**
- **Size:** Make it significantly larger
- **Contrast:** Make it highest contrast (dark on light or vice versa)
- **Color:** Make it the only saturated color in a neutral field
- **Position:** Place it at a power point (rule of thirds intersection)
- **Isolation:** Surround it with whitespace

**Common mistake:** Multiple focal points competing for attention. Pick one hero per section.

---

## Rhythm & Repetition

Rhythm creates visual interest and guides the eye through the design.

### Repetition (重复)

**Principle:** Repeat visual elements to create consistency and pattern recognition.

**What to repeat:**
- **Shapes:** Rounded corners, card styles, button shapes
- **Colors:** Brand colors, accent colors, neutral palette
- **Spacing:** Consistent spacing scale (8px grid)
- **Typography:** Font pairings, size scale, weights

**Why it works:** Repetition creates familiarity. Users learn the visual language quickly.

**How to apply:**
- Use the same card style for all similar content
- Use the same button style for all primary actions
- Use the same spacing between all similar elements

**When to break it:** To create emphasis. If everything is the same, nothing stands out.

### Contrast (对比)

**Principle:** Create visual interest by contrasting elements.

**Types of contrast:**
- **Size:** Large headline vs small body text
- **Weight:** Bold vs regular vs light
- **Color:** Saturated vs desaturated, warm vs cool
- **Shape:** Geometric vs organic, sharp vs rounded
- **Texture:** Smooth vs rough, flat vs gradient

**Why it works:** Contrast creates hierarchy and visual interest. It prevents monotony.

**How to apply:**
- Pair a bold headline with light body text
- Use one saturated accent color on a neutral background
- Mix large hero images with small supporting images

**Common mistake:** Not enough contrast. Everything feels "medium" and nothing stands out.

### Progression (渐进)

**Principle:** Create a sense of movement by gradually changing a property.

**What to progress:**
- **Size:** Large → medium → small (creates depth)
- **Opacity:** 100% → 80% → 60% (creates fade)
- **Color:** Saturated → desaturated (creates focus)
- **Spacing:** Tight → loose (creates breathing room)

**Why it works:** Progression guides the eye and creates rhythm.

**Example:**
```css
h1 { font-size: 64px; opacity: 1.0; }
h2 { font-size: 40px; opacity: 0.9; }
h3 { font-size: 28px; opacity: 0.8; }
p  { font-size: 18px; opacity: 0.7; }
```

---

## Context-Specific Strategies

Different output types require different design approaches.

### Product Pages (产品页面)

**Goal:** Build trust → explain value → drive conversion

**Design strategy:**
- **Hero:** Large, clear value proposition + visual proof (screenshot, demo)
- **Social proof:** Logos, testimonials, metrics — early and prominent
- **Features:** Benefit-focused, scannable, visual hierarchy
- **CTA:** High contrast, above the fold, repeated at natural decision points

**Visual tone:** Trust + Professional (unless consumer product, then Trust + Excitement)

**Key metrics:** Conversion rate, time to CTA click, scroll depth

### Presentations (演示文稿)

**Goal:** Maintain attention → convey key points → create memorable moments

**Design strategy:**
- **One idea per slide:** No walls of text
- **Visual hierarchy:** Headline dominates, supporting text is minimal
- **Rhythm:** Vary slide types (text, image, data, quote) every 3-5 slides
- **Memorable moments:** Use full-bleed images, bold statements, surprising data

**Visual tone:** Depends on audience (Professional for business, Excitement for pitch, Creative for design)

**Key metrics:** Audience engagement, recall of key points, time per slide

### Mobile Apps (移动应用)

**Goal:** Immediate clarity → effortless interaction → delightful experience

**Design strategy:**
- **Touch targets:** Minimum 44x44px, generous spacing
- **Thumb zones:** Primary actions in bottom 1/3 of screen
- **Progressive disclosure:** Show only what's needed, hide complexity
- **Feedback:** Immediate visual response to every interaction

**Visual tone:** Professional + Excitement (balance efficiency with delight)

**Key metrics:** Task completion rate, time to complete, error rate

### Creative Works (创意作品)

**Goal:** Capture attention → evoke emotion → showcase craft

**Design strategy:**
- **Bold choices:** Unexpected layouts, experimental typography, unique color
- **Craft details:** Micro-interactions, custom illustrations, thoughtful motion
- **Personality:** Strong point of view, distinctive voice, memorable style
- **Surprise:** Break conventions intentionally, create "wow" moments

**Visual tone:** Creative (obviously) — but grounded in solid fundamentals

**Key metrics:** Time on page, scroll depth, social shares, portfolio inquiries

---

## Before You Build: The Design Checklist

Before writing any HTML, answer these questions:

1. **What's the one thing the viewer should notice first?** (Focal point)
2. **What emotion should this design evoke?** (Trust / Excitement / Professional / Creative)
3. **What's the visual flow?** (Where does the eye start, move, and end?)
4. **What's the spacing strategy?** (Tight groups, loose sections, generous breaks)
5. **What's the color strategy?** (Neutral base + one accent, or bold multi-color?)
6. **What's the typography hierarchy?** (3-4 levels maximum, clear size contrast)

If you can't answer these, you're not ready to build yet. Design decisions should be intentional, not accidental.

---

## Common Mistakes to Avoid

1. **No clear focal point** — Everything competes for attention
2. **Insufficient contrast** — Everything is "medium" weight
3. **Inconsistent spacing** — Random gaps between elements
4. **Too many colors** — More than 3-4 colors creates chaos
5. **Weak typography hierarchy** — Headlines only slightly larger than body
6. **Ignoring whitespace** — Cramming too much into too little space
7. **Generic stock imagery** — Adds no value, looks like every other site
8. **Decorative elements** — Elements that don't serve the content
9. **Inconsistent style** — Mixing multiple design languages
10. **No emotional direction** — Design feels neutral and forgettable

---

## Further Reading

- **Visual hierarchy:** "The Non-Designer's Design Book" by Robin Williams
- **Composition:** "Grid Systems in Graphic Design" by Josef Müller-Brockmann
- **Color theory:** "Interaction of Color" by Josef Albers
- **Emotional design:** "Designing for Emotion" by Aarron Walter
- **Web-specific:** "Refactoring UI" by Adam Wathan & Steve Schoger