Shape
Visual Hierarchy
Using size, weight, contrast and position to show what matters most.
What is Visual Hierarchy?
Using size, weight, contrast and position to show what matters most.
What you learn
Make the most important thing the most visible.
When it helps
people miss the most important thing, or a page feels cluttered.
Use it at work
- Decide the one thing people must see first.
- Make it the largest, boldest or highest-contrast thing.
- Make everything else quieter.
- Squint at the result and check what stands out.
Your output
Step back from your screen or squint. Note what you see first. If it isn’t the most important thing, change size, weight or contrast.
Watch for
Giving everything equal weight, or emphasizing the least important thing.
Related practices
- Content Design
- Accessibility
- Design Critique
- Typography
- Grid Systems
- Perceptual Grouping
- Color Systems
- Data Visualization
Sources
Enable JavaScript to try the interactive activity.