A hierarchy, simply put, ranks the members of a group according to relative importance. For instance, in the military, a private who tells his commanding officer to drop and give him 20 will most likely find that demand going unmet. And when you enter an unfamiliar situation, hierarchies can tell you where to go first. You shouldn’t approach the shoe department manager at your local Kohl’s to initiate corporate buyout discussions.
In graphic design, hierarchies also tell you what’s important and where to go first.
Creating a visual hierarchy means using visible treatments and cues to guide the eye to content in order of importance. It looks like we’ve already fulfilled the promise of this post’s title! Unfortunately for fans of really short blog posts, there’s more to discuss.
Why Is Visual Hierarchy Important?
One of the most important functions of graphic design is that of guiding the viewer through the information that’s being presented. The tools of visual hierarchy guide the viewer’s eyes to the most important information first, then to secondary information, then to tertiary information and so on.
Take this tour poster for Jimmy Buffett. Not only is Mr. Buffett one of the most influential and important artists of our time, he clearly employs only the best graphic designers in the world. Even if you think I’m overstating things a bit, this poster is still as good an example as any:
So what do we see first? “Jimmy Buffett,” right? That’s good, since that name alone will attract all lovers of songs about eating, drinking and general laziness.
Next, our eyes are drawn to “The Party of the Summer!” Well, who wouldn’t enjoy that? This tagline is a good second stop for the eyes. It explains a little more about what to expect at the concert, although perhaps “A Raucous Crowd of Drunk and/or Stoned Baby Boomers” would also work.
Our eyes go next to the date, time and location for the August 31 show. The hierarchy here tells us that this is the place to be. Details for other dates flank this one to either side, tilted askew like tipsy, geriatric beach bums. However, the visual importance placed on this centered, bolder, larger date implies that Jimmy will really give it his all on this night, at the Waikiki Shell (station?), as opposed to the half-assery he plans to turn in at those other two dumps.
Finally, we see some sponsor logos, including Corona Extra and Budget Rent-a-Car, because it’s dumb to get drunk and wreck your own car.
Creating a Visual Hierarchy
We’ve seen that visual hierarchy is used to guide the viewer through information in order of importance. But how? What weapons adorn the walls of your armory in this war for the precious attention spans of today’s busy public? How do we guide the eye where we want it to go?
Size. “Bigger” is better, or at least a larger size emphasizes the type and draws the eye much more effectively. Seems obvious, but is there more to say here? Not really.
Weight. Usually, bolder type draws attention before thinner type. Be careful not to overuse it, though. If everything’s bold, then… well, everything is. And that just looks bad.
Color. Bright colors will of course draw the eye more effectively than pastel, dull or gray tones. That’s why in the ‘80s, four out of five graphic designers preferred David Lee Roth to Ozzy Osborne.
Position. We’ve been trained to start at the top of the page and read down. This is an instinct that’s easy enough to overrule by using one or more of the other tools here, but all things being equal, people start at the top.
Treatment. We’ll use this term for anything that isn’t one of the other four. Put the text in a box, like shown here. Or make it slanted, use a different font, turn it upside down, or, hell, give it a red outline with a beach scene inside and slap a parrot on top of it.
It’s easy to use one or more of these variations to emphasize content in the order in which you want it to be read or viewed. That being said, for each of these tools above, there are exceptions to the rule of how they can be used. Using small or thin type in an unexpected way can sometimes draw attention more effectively than big, bold type. Let’s look at some examples to see how some designers followed the easy methods listed above to create visual hierarchy.
{{cta(‘020a0931-6bf3-4f13-ab71-d8ec980446a9’)}}
Example Time!
For our examples, we’re going to look exclusively at other Jimmy Buffett promotional material.
Not really. That would be stupid. Let’s look at some magazine ads to see these principles at work. First, here’s an example of an ad that lacks clear visual hierarchy.
Much of the text is about the same size, and the different techniques used to highlight various sections serve only to counteract one-another, leaving the viewer unsure of where to look first. Here’s an ad that does it better.
This simple design uses the tools we outlined above to perfection. We start with the bold, unique font at the top, followed by smaller text, then a blurb at the bottom, featuring some important text in bold, and end with a bold, colorful URL. The visual hierarchy makes the content very easy to follow and digest. Here’s another great example along the same lines:
And here’s another one that creates a hierarchy by virtue of the fact that the white text pops off the green background a little more than the black:
This next one shows how even small text can draw the viewer’s attention first:
Finally, keep in mind that sometimes you want a photo, logo, illustration or other non-typographic content to reign atop your visual hierarchy. In that case, keep your type out of the way:
Conclusion
Now that you’re aware of the ways in which web designers create visual hierarchy, you’ll start to notice these techniques in use everywhere. Whether you’re flipping through a magazine, surfing the web, or proudly wearing that Jimmy Buffett concert tee, the visual hierarchy created by the designer is telling the viewer where to look first.{{cta(‘ed20783f-7f07-47d1-9f1c-f0a4a5d7e2ef’)}}
