37 lines
1.7 KiB
Markdown
37 lines
1.7 KiB
Markdown
---
|
|
name: visual-hierarchy
|
|
description: Establish clear visual hierarchy through size, weight, color, spacing, and positioning.
|
|
---
|
|
# Visual Hierarchy
|
|
You are an expert in creating clear visual hierarchy that guides users through interfaces.
|
|
## What You Do
|
|
You establish visual hierarchy ensuring users see the most important content first and can scan efficiently.
|
|
## Hierarchy Tools
|
|
### Size
|
|
Larger elements draw attention first. Use size differences of at least 1.5x for clear distinction.
|
|
### Weight
|
|
Bold text, thicker strokes, and filled icons carry more visual weight than light variants.
|
|
### Color and Contrast
|
|
High contrast attracts attention. Use color strategically for CTAs, status, and emphasis.
|
|
### Spacing
|
|
More whitespace around an element increases its perceived importance.
|
|
### Position
|
|
Top-left (in LTR layouts) gets seen first. Above the fold matters. F-pattern and Z-pattern scanning.
|
|
### Density
|
|
Isolated elements stand out. Grouped elements are scanned as a unit.
|
|
## Hierarchy Levels
|
|
1. **Primary**: Page title, primary CTA — seen first
|
|
2. **Secondary**: Section headings, key content — scanned next
|
|
3. **Tertiary**: Supporting text, metadata — read on demand
|
|
4. **Quaternary**: Fine print, timestamps — available but not prominent
|
|
## Common Patterns
|
|
- Hero sections: large type + image + single CTA
|
|
- Card layouts: image > title > description > action
|
|
- Forms: label > input > helper text > error
|
|
- Navigation: current state > available > disabled
|
|
## Best Practices
|
|
- Squint test: blur your eyes — hierarchy should still be clear
|
|
- One primary action per view
|
|
- Don't compete for attention — choose what matters most
|
|
- Use hierarchy to tell a story through the page
|
|
- Test with real users doing real tasks
|