THIS is a confusing sentence.
What a way to start a blog post off, right? But why is it confusing?
It looks like I'm trying to emphasize something, but three words are "emphasized" in different ways. I'm not actually sure which word is actually emphasized or why. The above sentence is also a poor example of emphasis, and a poor example of visual hierarchy.
More...
What is Visual Hierarchy?
Visual hierarchy influences the order in which the human eye sees elements in a composition. Typically, the common Western brain reads from left to right, and we often look at art that way too. Visual hierarchy, however, influences that habit. Visual hierarchy applies emphasis to elements in a composition so that we look first at the element which is most emphasized. The reason the above sentence is confusing is because multiple "elements" were emphasized. Because of this, we are unsure which was more important. When everything is emphasized, nothing is emphasized. That’s why the correct use of visual hierarchy is so important.
Hack Design defines visual hierarchy as "the organization and prioritization of content as a means to communicate a message." Elaborating, 52 Weeks of UX says "Strong visual hierarchies guide visual and logical progression by showing what is important".
If graphic design is visual communication, then visual hierarchy is of utmost importance. It influences how effectively a message is communicated. The relative visual importance of different elements guides a viewer through a composition.
How Do I Achieve Emphasis?
Elements draw attention to themselves using many different methods, but the chief of them is contrast. Think about it. If four elements are exactly the same, but one of them is different, which one draws your attention?
As you can see from this illustration, there are many ways to produce this contrast/emphasis. The main ways to achieve emphasis through contrast us different elements such as color, size, position, texture, shape, and orientation. This is just a brief example of how contrast can be used, but the possibilities are virtually endless.
The Importance of Contrast in Emphasis
A List Apart gives us a helpful and concise glimpse into the importance of contrast.
In a layout, contrast helps lead the reader’s eye into and through your layout. Each component of the page, graphic, textual, or interactive, has a job to do, and each of those jobs falls within a hierarchy that’s specific to the project at hand. Furthermore, each component is but a piece of the overall project message and objective. With creative uses of contrast, you can influence user choices and compel specific actions.
Humans have a natural tendency to skim through material. Right away, we like to get the big picture and/or see if we want to read more in depth. Visitors to a website may scan the page first to determine where they want to begin consuming content. Many web designers skillfully craft their page so that they compel their visitors to follow a specific path through the layout. Often, the visitor is unaware that they were subtly directed to take the path they took.
In Conclusion
When we realize we guide our audience, we begin to understand the incredible importance of emphasis and visual hierarchy. Like all of the elements and principles of design we’ve discussed so far, it is all around us. Most of the time, we don’t even realize it. So next time you visit a website, read a magazine, or see a package, think of what you have read. Notice where your gaze is drawn first, and think about why. All graphic design is strategic. Think about what message is being communicated and how it's being communicated. Is it effective? What methods does it use and how does it use them?
Comment below with the most effective (or ineffective) use of contrast you've seen.
If you haven’t already done so, please subscribe to my newsletter to receive alerts when future posts, quizzes, and products become available.
