June 19, 2017 10 Useful Design Techniques to Master Visual Hierarchy

I have been registered on Topcoder since June 2011 and started competing in 2013. With no background in design, I just tried to jump in when there was new challenge launched, regardless of the type of challenge: logo, poster, presentation, infographic, newsletter, t-shirt, idea generation, icon, web design, app design, you name it.

Looking back, I should thank the client/reviewers at Topcoder for providing feedback every time I submitted my design. I frequently got feedback from client/reviewer about my color, font, sizing, design flow, visual hierarchy, etc. Sometimes I received a harsh notes, and other times a heart melting one.

I bet all designers on Topcoder do the same thing: take the feedback seriously and try to improve ourselves. Seems perfect, isn’t it?

The truth is I just keep falling on the same mistake. While actively on Topcoder challenges, I’ve neglected to improve my skills. One topic that always haunts me: visual hierarchy.

Actually, this topic came to my mind after visiting the TCO16 Regional Event. The word visual hierarchy was mentioned countless by Adam Morehead at that time. I set virtual notes in my mind to learn it someday but I kept forgetting to do my personal research on this topic.

I suck on visual hierarchy. That’s why I decided to accept this challenge to write about it and I think it will be a good way to force myself to do the research and share this in a blog post.

WHAT IS VISUAL HIERARCHY?

Visual hierarchy is an order on how we want our viewers to see the element, from the most important one to lesser one.^[1] Visual hierarchy is essential for any design.

A successful visual hierarchy will make viewers gather information quickly and clearly. A bad one will make our viewers wander aimlessly looking for information and meaning since all elements are yelling at the same time but nothing is heard.^[2]

Dominance

As a general reference, we can use three level of dominance to start with:

• Dominant
  This level is where we should emphasize the most important information and usually contain a single element in the foreground.
• Sub-dominant
  This level is where the less important information compares to dominant level and usually gets secondary emphasis.
• Subordinate
  This level is where the least important information and usually contain our body of text as a background.

Techniques to Achieve Visual Hierarchy

With clear visual hierarchy, our design will be more appealing since we have a focal point that grabs viewers attention. In order to make one element stand out, we need to define the dominant element and make it as a focal point to attract the eye at first glance.
After defining our dominant element, we can explore different techniques to emphasize the different level of dominance. By combining several techniques at once, we benefit from the clarity of the hierarchy.
There are 10 techniques I found to be useful to know and explore it in our design.
1. Position
It is a natural thing for our eyes to view things from left to right and top to bottom. We can put the most important thing on the top left and less important on the bottom right.

2. Scale
We can use the scale to enhance or reduce the level of importance. Enlarging an object’s size is the easiest and effective way to emphasize the most important information in our design.^[3]

3. Color
Bright and warm colors are more attractive to our eyes like red, orange, and yellow. Using this color against duller color can pop the most important information and attract our viewers.

4. Image
We are most likely attracted to an image rather than an ocean of texts. If we are using the right image, it can help us to achieve visual hierarchy.

5. Isolation
By using white space around an object, we can isolate it and increase the level of dominance since the object contrasts with the white space.^[4] Another thing we can do to indicate importance: placing one object away from a group of related objects.

6. Density
By grouping objects very close together so only little white space is left we can make them dense or heavier which can attract our eyes at first glance.^[5]

7. Motion
Our eyes are extremely sensitive to any change. We can use a dynamic line to draw attention or animation to attract attention on an important element.

8. Visual Cues
An arrow or dashed lines can direct our eyes. That’s why we will follow a line while viewing a diagram.

9. Numbering
If everything else is equal, we can use numbering to achieve visual hierarchy. Also placing information on number 1 will make the element the most dominant.

10. Short and Powerful Phrases
Just a short line of text can attract attention compared to blocks of text. We can use a short and powerful phrase “Click Here” to convince viewers to take an action.

How to Test Our Hierarchy?

There is a simple way to test if our approach on visual hierarchy works as we want. First by asking others to look at our design and ask what thing they notice first. If nobody is around, we can squint our eyes to see the overall impression of our design. The most important element should be prominent.

Quote:

“Visual hierarchy is the verbal language of design and the one thing that can take an artistic sense—sometimes challenging the hierarchy with scale, color, etc shows up the designer’s style. Get it down—then challenge it, find something new.”
—ToxicPixel, South Africa
“It’s about organizing information in a way that’s usable, accessible, and logical to the user.”
—Yoki, Indonesia
References:
1. Malamed, Connie. Visual Design Solutions: Principles and Creative Inspiration for Learning Professionals. New Jersey: Wiley. 2015
2. www.smashingmagazine.com/2015/02/design-principles-dominance-focal-points-hierarchy/
3. designschool.canva.com/blog/visual-hierarchy/
4. zevendesign.com/designers-guide-to-visual-hierarchy/
5. webdesign.tutsplus.com/articles/understanding-visual-hierarchy-in-web-design–webdesign-84]]>