You don’t have to be a graphic designer to appreciate visual hierarchy.
Even if you’ve never studied the term before, you’ll know it when you see it. It’s all around you (it’s even in this blog!).
Visual hierarchy refers to the arrangement and presentation of elements within a composition.
In the example below, notice how the title is bigger than the copy? That’s visual hierarchy at work.
Visual hierarchy is important in design because it defines the importance and sequence of elements within a composition. It influences the order in which your audience views your content. Order can significantly impact comprehension, impact, and value.
Naturally, there are elements with a composition that are more important than others or that contextualize other elements. You can use various visual hierarchy principles to draw eyeballs to those important elements first.
Good design uses visual hierarchy strategically to attract the viewer to the “whole” composition and leads them through its “parts” by creating different levels of priority and intuitive flow.
Graphic designers understand how the human brain perceives visuals and the influence those visuals have on cognition.
A World Without Order
How important is visual hierarchy? Well, how important do you think the family tree is to the royal family?
It’s easy to fall into the illusion that everything is important (aka make my logo, headline, and call-to-action BIGGER) but, when you don’t have visual hierarchy, the following 2 scenarios usually ensue:
1) Confusion.
The viewer tries to take in the content but can’t. They bounce around all of the “parts” of the composition without ever getting the “whole.”
2) Defeat.
The viewer sees everything at the same level of importance. They pass up the “parts” because the “whole” doesn’t inform them where to start or how to get around causing them to miss your point entirely.
Our Go-To Visual Hierarchy Principals
There are a lot of different principles of visual hierarchy, but these are the ones we always want to incorporate. For all you rule-breakers, these are ones you might want to follow.
Size & Scale
The larger an element, the more attention it draws so in turn, indicates to the reader that element is important. That’s why headlines or calls-to-action you want to be read first should be the largest element within the design. Body copy and supporting content thus is next in line and should be smaller in scale.
Color + Contrast
Another no-brainer, bright colors stand out more than soft colors. Those lighter tints appear more muted and thus fall lower on the hierarchy. Using one bold color among muted colors is an effective way to reinforce the visual hierarchy even for smaller elements like buttons or links.
Leading Lines
Being aware of leading lines and using them to your advantage can help improve the flow of your designs and intuitively lead the users’ eyes exactly where you want them to look. Creating designs with linear elements is yet another way to give order to your content and guide the viewer with purpose.
Spacing
Ah, white space. The controversial design element that designers love and clients usually find frivolous. Ample white space (or empty space) is a simple but essential way to put focus and emphasis on your most important content. Without proper spatial balance the visual hierarchy can get muddled and lose impact.
Rule of Thirds
This is a pretty straightforward concept. If you put a grid on top of the design/image you are looking to put your focal areas where the grid points intersect. Creating centered or symmetrical designs have their place but splitting the layout into thirds gives a more dynamic visual hierarchy.
Want to continue the conversation? Give us a shout!
