| name | establish-visual-hierarchy |
| description | Determine what UI element draws attention first, second, third using size, weight, color, and de-emphasis strategies |
| domain | ui-design |
| skill-type | evaluative |
| version | 1.0.0 |
| author | refactoring-ui-expert |
| prerequisites | [] |
| dependencies | [] |
| input | [{"design_description":"string"},{"element_list":"array of {element, importance}"}] |
| output | [{"assessment":"PASS | FAIL"},{"ranked_elements":"array"},{"recommendations":"array of strings"}] |
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
| Strategy | When to Use |
|---|
| Size + Weight | Primary headlines, important CTAs |
| Color Contrast | Secondary content, supporting text |
| De-emphasize | When primary isn't standing out |
| Weight/Contrast Balance | Icons next to text, borders |
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:
- Use weight (600-700) for emphasis
- Use color (grey scale) to de-emphasize
- 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
