Establish Visual Hierarchy

Skill: Establish Visual Hierarchy

Purpose

Determine what UI element should draw attention first, second, third. Visual hierarchy controls the order in which users process information using size, weight, color, and de-emphasis strategies.

Quick Reference

Execution Workflow

Step 1: Identify Primary Element

• What is the single most important thing on this screen?
• What action should the user take?
• What information is critical?

Step 2: Assess Current Hierarchy

Check visual weight of each element:

• Size: Larger = more attention
• Weight: Bolder = more importance
• Color: Higher contrast = more prominent
• Whitespace: More surrounding space = stands out

Step 3: Apply Multi-Factor Hierarchy

Don't rely on size alone:

1. Use weight (600-700) for emphasis
2. Use color (grey scale) to de-emphasize
3. Keep sizes reasonable

Step 4: De-emphasize Competitors

If primary element isn't standing out:

• Reduce contrast of surrounding elements
• Use softer colors for secondary content
• Remove unnecessary backgrounds

Decision Criteria

PASS

• Most important element has highest visual weight
• Hierarchy uses weight/color, not just size
• Surrounding elements are subdued
• Clear visual path: primary → secondary → tertiary

FAIL

• Relying solely on font size
• Everything equally emphasized
• Critical elements buried
• Decorative elements competing

Common Patterns

Pattern: Marketing Page Hero

H1: 48px, weight 700, dark    ← Primary
CTA: 16px, solid brand color  ← Secondary
Body: 16px, weight 400, grey  ← Tertiary

Pattern: Dashboard Card

Metric: 32px, weight 700      ← Primary
Label: 14px, weight 400, grey ← Secondary
Action: Text link, brand color ← Tertiary

Anti-Patterns

References

• references/size-isnt-everything.md
• references/emphasize-by-de-emphasizing.md
• references/ignore-document-hierarchy.md

Examples

See examples/visual-hierarchy/ for before/after cases.