Visual Hierarchy
Understanding Visual Hierarchy in Web Design
1. Design = Communication
People tend to be visual thinkers, not data processors
We try to find differences between things as we perceive them, and try to classify them, processing information in the form of visual relationships
These classifications range from color, shape, size, and can also be much more complex
It is critical for web designers to understand that people “perceive” information in this manner, and need to learn how to break down information in visually relevant and appealing way.
2. The Hierarchist’s Toolbox
Size: should be correlated with importance
Color: used as a personality tool
Contrast: relative importance
Alignment: order between elements
Repetition: relative meaning to elements, helping link elements and draw attention
Proximity: creating sub-hierarchies
Density and Whitespace: this is more about spacing on the page, and helping people classify information
Style and Texture: very open-ended, more about the “feel” of the page
Principle of Hierarchy
Order of importance –
1. Where does the eye look First
2. .. Second
3. .. Third
Elements and principles that create visual hierarchy:
- Contrast, scale, proportion, textures, etc
- Elements within a composition can be ordered according to their importance
- Hierarchy may be determined by the scale, color, or placements of elements
Hierarchy by Placement – objects placed in the center will be perceived as the focal point
Hierarchy by Isolation – an object that stands out on its own when others are grouped together
Hierarchy by Contrast – emphasis created by contrast
Guide to Visual Hierarchy
1. Use size to enhance or reduce visibility: changing visibility impacts the perception of importance
2. Color and Contrast: use temperature, value (lightness), saturation, to direct someone’s attention
3. Typographic Hierarchy: create 3 levels to organize a design (most important, sections, and main text)
4. Fonts: pay attention to the personality of the font, and making sure different types don’t clash
5. Spacing: balance, flow, and focus
6. Composition: rule of thirds, odds, implied movement
Testing the effectiveness of visual hierarchy – Squint test: blur designs and see what stands out, is it aligned with what you want viewers to interact with and in the right order?
