---
title: Visual Hierarchy and Attention Direction
impact: CRITICAL
tags: hierarchy, focus, attention, contrast, emphasis
---

## Visual Hierarchy and Attention Direction

**Impact: CRITICAL**

Visual hierarchy controls where viewers look and in what order. Every frame should have a clear primary, secondary, and tertiary focus. Without hierarchy, viewers feel lost and overwhelmed.

## The Hierarchy Triangle

Every scene should have exactly ONE of each:

1. **Primary (Hero)** — The star, what you want seen first (10-20% of frame)
2. **Secondary** — Supporting cast, contextual info (20-30% of frame)
3. **Tertiary** — Background, atmosphere (50-70% of frame)

### Good Example
```
Scene: Product Announcement

Primary (Hero):
  - "LAUNCHING SOON" headline
  - Size: 96px bold
  - Color: #FF6B35 (ember, highest contrast)
  - Position: Center, upper third
  - Animation: Spring entrance, scale 0.8 → 1.1 → 1

Secondary:
  - Product image
  - Size: 400x400px
  - Color: Full color with shadow
  - Position: Center
  - Animation: Fade in after hero (0.3s delay)

Tertiary:
  - Background gradient
  - Color: #0A0A0A → #171717 (subtle)
  - Pattern: Subtle grid
  - Animation: Slow drift
```

Clear 1-2-3 reading order.

### Bad Example
```
Scene: Cluttered Announcement

Everything competing:
  - 3 headlines at same size
  - Multiple images same prominence
  - Bright colors everywhere
  - All animations start simultaneously

Viewer doesn't know where to look first.
```

## The Five Hierarchy Tools

Use these tools to establish importance:

### 1. Size
Bigger = more important (most powerful tool)

### 2. Contrast
Higher contrast = more attention

### 3. Color
Vibrant/unique = draws eye

### 4. Motion
Movement = attention magnet (use carefully)

### 5. Position
Center and upper areas = priority

## Size-Based Hierarchy

Scale creates instant hierarchy:

### Good Example
```
Typography Hierarchy:

Hero headline: 96px (largest)
Subheadline: 48px (50% of hero)
Body text: 24px (25% of hero)
Fine print: 14px (15% of hero)

Clear 4:2:1:0.5 ratio = scannable.
```

### Bad Example
```
All text 32-40px = no hierarchy
```

## Contrast-Based Hierarchy

Contrast ratio determines visibility priority:

### Good Example
```
High Contrast Hierarchy:

Primary element:
  - White (#FFFFFF) on dark (#0A0A0A)
  - Contrast ratio: 18:1 (maximum)
  - Instantly draws attention

Secondary element:
  - Light gray (#A3A3A3) on dark (#0A0A0A)
  - Contrast ratio: 7:1 (good)
  - Readable but less prominent

Tertiary element:
  - Medium gray (#525252) on dark (#0A0A0A)
  - Contrast ratio: 3.5:1 (minimum)
  - Background presence
```

### Bad Example
```
All elements: 6:1 contrast ratio
No hierarchy, all equal prominence.
```

## Color-Based Hierarchy

Use color saturation and uniqueness:

### Good Example
```
Color Hierarchy:

Primary: Vibrant orange (#FF6B35)
  - Highest saturation
  - Unique color (only element this color)
  - Draws eye immediately

Secondary: White (#FFFFFF)
  - Neutral, readable
  - Supports primary

Tertiary: Grays (#525252, #262626)
  - Desaturated
  - Recedes to background
```

Only one vibrant color = clear focus.

### Bad Example
```
5 different vibrant colors:
Red, blue, green, yellow, purple

= Rainbow chaos, no focal point.
```

## Motion-Based Hierarchy

Motion is the strongest attention grabber—use sparingly:

### Good Example
```
Animation Hierarchy:

Primary element:
  - Spring animation entrance
  - Scale + opacity + position all change
  - Fastest, most prominent motion

Secondary element:
  - Fade in only
  - Slower, subtle
  - After primary settles

Tertiary element:
  - Very subtle drift or static
  - Barely perceptible motion
```

Only hero element gets complex animation.

### Bad Example
```
All elements:
  - Complex spring animations
  - Spinning, scaling, rotating
  - All moving simultaneously

= Motion overload, seizure-inducing.
```

## Position-Based Hierarchy

Western reading: left → right, top → bottom

### Good Example
```
Priority Quadrants (1920x1080):

Highest Priority:
  - Top-center (960, 200)
  - Seen first

High Priority:
  - Center-left (640, 540)
  - Natural reading flow

Medium Priority:
  - Center-right (1280, 540)
  - Secondary info

Lower Priority:
  - Bottom corners
  - Legal, disclaimers
```

### Bad Example
```
Critical CTA in bottom-right corner:
  - Last place viewers look
  - Often missed entirely
```

## Temporal Hierarchy (Timing)

Control what's seen when through timing:

### Good Example
```
Staggered Entrance (Priority Order):

Frame 0-15: Primary element enters
  - Gets viewer's full attention

Frame 15-30: Secondary element enters
  - After primary is established

Frame 30-45: Tertiary elements enter
  - Complete the scene

Sequential = guided experience.
```

### Bad Example
```
Frame 0: Everything appears at once
= Overwhelming, no guidance.
```

## Depth-Based Hierarchy

Use layering and shadows for perceived depth:

### Good Example
```
Z-Depth Layers:

Layer 1 (Foreground, z-index: 3):
  - Primary CTA button
  - Large drop shadow: 0 8px 24px rgba(0,0,0,0.3)
  - Appears closest to viewer

Layer 2 (Midground, z-index: 2):
  - Content cards
  - Medium shadow: 0 4px 12px rgba(0,0,0,0.15)
  - Middle distance

Layer 3 (Background, z-index: 1):
  - Background gradient
  - No shadow
  - Furthest from viewer
```

Shadow size indicates proximity = hierarchy.

### Bad Example
```
All elements:
  - Same z-index
  - No shadows
  - Flat appearance, no depth cues
```

## The 3-Second Rule

Within 3 seconds, viewer should understand:
1. What this is about (primary element)
2. Why it matters (secondary context)
3. What to do next (tertiary CTA or continuation)

### Good Example
```
0-1s: Hero headline visible, readable
1-2s: Supporting visual appears
2-3s: CTA or next scene hint visible

Complete hierarchy established in 3s.
```

## Typography Hierarchy Rules

### Good Example
```
Text Hierarchy:

H1 (Hero):
  - 96px, Bold (700)
  - Color: High contrast
  - Letter spacing: -2%
  - Line height: 1.1

H2 (Subhead):
  - 48px, Semi-bold (600)
  - Color: Medium contrast
  - Letter spacing: -1%
  - Line height: 1.2

Body:
  - 24px, Regular (400)
  - Color: Lower contrast
  - Letter spacing: 0%
  - Line height: 1.5

Clear size, weight, spacing hierarchy.
```

### Bad Example
```
All text:
  - 36-42px (similar)
  - Same weight
  - Same color
  - Same spacing

No visual distinction = hard to scan.
```

## Isolation Creates Hierarchy

Negative space makes elements stand out:

### Good Example
```
Hero Element with Isolation:

Element: 600px wide
Surrounding space: 660px empty on all sides
Total scene: 1920x1080

Element occupies ~19% of frame
Negative space: ~81%

Isolation creates immediate focus.
```

### Bad Example
```
Element: 600px wide
Padding: 30px
Other elements nearby

= Crowded, fights for attention.
```

## Progressive Disclosure

Reveal information in priority order:

### Good Example
```
Scene Evolution:

0-1s: Headline only (establishes topic)
1-2s: Add supporting image (context)
2-3s: Add details (depth)
3-4s: Add CTA (action)

Each layer adds hierarchy level.
```

### Bad Example
```
All information appears at 0s:
Headline, image, details, CTA together
= Information overload.
```

## The Squint Test

If you squint at the frame, the primary element should still be clearly visible.

### Good Example
```
When squinted:
  - Large headline still readable
  - High contrast maintains visibility
  - Clear focal point remains

Passes squint test.
```

### Bad Example
```
When squinted:
  - Everything blurs together
  - No clear focus
  - Can't distinguish elements

Fails squint test.
```

## Checklist

- [ ] One clear primary focal point per scene
- [ ] Secondary elements support but don't compete
- [ ] Tertiary elements recede to background
- [ ] Size hierarchy: Primary > Secondary > Tertiary
- [ ] Contrast hierarchy: Primary highest (12:1+), Secondary medium (7:1), Tertiary lower (4.5:1)
- [ ] Only one vibrant/unique color (for primary)
- [ ] Motion reserved primarily for hero elements
- [ ] Primary element in top-center or center position
- [ ] Staggered timing (primary → secondary → tertiary)
- [ ] Shadow depth indicates importance
- [ ] Negative space isolates important elements
- [ ] Passes squint test (primary still visible when squinting)
- [ ] Within 3s, viewer knows what, why, and what next
- [ ] No elements competing for attention
- [ ] Clear reading flow established
