Lunch + Learn
Design 101:
Hierarchy
January 2015
hierarchy, wat?
hi·er·ar·chy
/ˈhī(ə)ˌrärkē/
a system or organization in which people or groups are ranked one above the other according to status or authority.
but we're really talking about
visual hierarchy
/ˈviZH(əw)əl/ /ˈhī(ə)ˌrärkē/
creating organization into levels of relative importance and prioritization, visually
Paraphrased from: Visual Hierarchy: How Well Does Your Design Communicate?
but why is it important?
Everything has it.
Whether intentional or not, everything has visual hierarchy. So we might as well use it.
We can make it easier for users and customers to do what they want to do. Which is good.
how does it work?
There are a lot of design elements that create hierarchy.
Some of the big players are:
- Size
- Repetition
- Space and proximity
- Contrast
- Color
People are used to looking at things certain ways, this plays a part too.
- Top > Bottom
- Left > Right
- Common patterns
(ex: headers used for nav)
ok, go time.
what do we want
to be seen first?
1
2
3
4
1
2
3
4
no longer be afraid.
hierarchy.
you know this.
that's it.
questions? comments?
Some helpful links
thanks!!
L+L-Design 101: Hierarchy
By clearhead
