Achieving Visual Hierarchy
Lise Statelman
Lesson 19
One of the key principles of design is visual hierarchy, which encompasses almost everything you’ve learned on Hack Design so far. Whether you’re dealing with screen or print media, you have content—words and images—that needs to be organized into a layout. Visual hierarchy is the organization and prioritization of content as a means to communicate a message.
Designers need to make very intentional decisions when it comes to prioritizing content. Where do you want your audience to look first? What is the call-to-action that you need to draw attention to? Hierarchy guides the user from one element to the next, ideally in a flow that corresponds to the content’s message. Also keep in mind that if you give visual importance or weight to too many elements, everything becomes flat. It's like saying you have ten ‘favorite’ flavors of ice cream. Elements should not have to compete for our attention. Let the content shine and and make sure graphic elements don’t distract.
-
On Visual Hierarchy
Read about the basics of visual hierarchy, then compare the 'poor example' with the 'better example' that the author illustrates for us. The text and images in each example are blurred out so you can focus on the layout in terms of hierarchy. You can achieve a similar effect by squinting at a layout.
-
Understanding Visual Hierarchy in Web Design
Read the article and think about the author's ‘hierarchist's toolbox,’ and add to the list of ways you can visually set things apart (scale, shape, weight, white space, texture, tone, etc). Hint: think of contrast or visual opposites.Then, visit some of the websites featured on land-book.com and consciously think about where your eyes travel across the page. What are you drawn to first, then next, and so on? You'll also probably notice a similarity between these websites, but hey, it works!
-
Hierarchy as Expressed Through Typography
If you're dealing with organizing text-focused content, this article will be especially useful. Again, think of all the ways you can achieve hierarchy using type (size, weight, style, color, uppercase vs. lowercase). Even a sole font-family can come in dozens of weights and styles, like H&FJ's Gotham.
-
How Well Does Your Design Communicate?
This is a great article that links to even more resources. Hint: the key takeaways are in the summary at the end.
-
Contrast and Meaning
Written in 2007 but still very relevant. Read this article, especially the section titled, ‘Contrast’ and look at the visual examples (about Optimizr) that took the content from having no meaning to possessing a clear hierarchy of importance.
-
Bonus: Visual Hierarchy and Weight
Revisit this article from Lesson 11, Part 2 for this so eloquently worded article on visual hierarchy. As author Joshua Porter said, "…you use hierarchy to tell a story, to provide context that culminates in the action being taken." (Check out those little illustrations too!)
