Visual hierarchy
Arrange size, weight, color and position so people see the most important thing first.
See it
- Name, price, details and CTA are all the same size
- The main action is a plain text link
- No clear first place for the eye to land
Why it matters
Size, weight and color tell the eye where to go. Name, price, details, action: in that order. When everything is the same size, nothing is important.
How to apply it
- Pick one hero element per screen and make it clearly the biggest or boldest
- Use 2 or 3 text sizes and a muted color for secondary info
- Put the primary action right after the content that motivates it
Common mistakes
- Making everything bold so nothing stands out
- Using a plain text link for your main action
Quick answers
What is Visual hierarchy?
Arrange size, weight, color and position so people see the most important thing first. Size, weight and color tell the eye where to go. Name, price, details, action: in that order. When everything is the same size, nothing is important.
How do I apply Visual hierarchy in UI design?
Pick one hero element per screen and make it clearly the biggest or boldest. Use 2 or 3 text sizes and a muted color for secondary info. Put the primary action right after the content that motivates it.
What are common mistakes with Visual hierarchy?
Making everything bold so nothing stands out. Using a plain text link for your main action.