The Importance of Visual Hierarchy

Picture reading a book or newspaper where all the text is the same size and style. Or browsing a Web site without headers, footers, or body text. How about going to a movie where the camera never moves and the actors maintain the same distance from the lens? An orchestra of only tubas playing the same three notes? If the above scenarios leave you cold, you can appreciate how important visual hierarchy is to successful design. Visual hierarchy is a system of organizing objects on a page or screen in a way that communicates the importance of objects in relation to neighboring objects. Although this concept is easy to grasp in theory, many a designer or artist is flummoxed when it comes to effectively using the tools of visual hierarchy. Fortunately, understanding visual hierarchy is easier than you might think, since most of its conventions are already familiar.

The Elements of Visual Hierarchy

In my book, Professional Design Techniques with Adobe Creative Suite 3 (Adobe Press, 2008), I begin by encouraging designers to think like musicians. This means that to get the most from your work, it’s important to understand the harmony of balance, the rhythm of shape, the staccato of tension, and the grace notes of type. By combining balance, rhythm, proportion, dominance, and unity, you organize information into meaningful hierarchies that inform the viewer about the importance of page items. To better understand these concepts, let’s begin by looking at some simple examples. Balance. Although each is a square, the square in Figure 1 is at rest, while the square in Figure 2 displays tension. But although Figure 1 appears more balanced, is it more graphically interesting?

Rhythm. When we say that a photo or painting has rhythm, typically we’re talking about the way in which the eye flows from one area of the image to another. Rhythm can be smooth or bumpy. In Figure 3, a cover for Ben Pleasants’ play “The Hemingway/Dos Passos Wars,” I established rhythm at the upper left and led the eye downward to the author’s name at the bottom. Helping define the rhythm is the cover’s three-color palette (black, white, red) and the placement of the horizon line in the lower third of the composition. In Figure 4, I experimented with the original design by expanding the color palette and removing the foreground or horizon. Although the design is still pleasing, the simple rhythm of the original, which helped underscore the book’s theme, is now more complex and overwhelms the artwork. Proportion. Proportion is the visual relationship between objects. Like balance and rhythm, proportion is a fundamental component of visual hierarchy because of its role in telling the viewer what’s important and what’s not. In simplistic terms, things that are big are important, while things that are small are not. In Figure 5, the word “Quiz” is very large, emphasizing the nature of the book. But what about Figure 6? For this cover, I set “Rex Stout”, the author’s name, larger and more prominently than the book’s title. Does this mean the author is more important than the title? Perhaps, but not necessarily. Here we see that the “bigger is more important than smaller” concept doesn’t always apply. In fact, sometimes by making an object smaller, objects gain hierarchical importance, as in Figure 7. Dominance. Dominant objects are usually bigger or brighter. They also tend to be front-most in a composition. Figure 8 is an example of conventional design dominance. Here the word “Lotus,” red and larger than any other type on the page, and the red tinted lotus flower dominate against a black background. But as with proportion, you can also achieve a kind of reverse dominance by using a larger object (“Red Wine”) to emphasize a smaller and more important object (“white carpet”), as in Figure 9. Unity. The law of unity says that like objects attract and unlike objects repel. Good design often uses unity to establish visual hierarchy. In Figure 10, a jacket I did for a book titled American Homes, I created unity by repeating seven rows of small drawings found inside the book. By grouping the tiny thumbnails together, the illustrations form a unified message that conveys what the book is about. In Figure 11, my cover design for the first issue of InDesign Magazine, the T-square, triangle, and pencil form a unity of style based on their origin as old etchings.

Understanding the Tools of Visual Hierarchy

In general, designers must choose from two groups of tools to create visual hierarchy: type and graphics. Within these groups, variety abounds, so let’s look at some of the choices. Typographic hierarchy. Upper case. Lower case. 72 point. 12 point. Impact Bold. Nuptial Script. Get the point? Simplistic as this sounds, much about using type to create visual hierarchy is a no-brainer: for instance, headlines are big, captions are small. Yet beyond the obvious, how do we as designers know when to use what? With thousands of available fonts and lots of ways to use them, working with type brings many otherwise sturdy designers to their knees. Recently I volunteered to redesign the newsletter for my neighborhood block association. Figure 12 shows a typical issue. To be fair, the original designer was the newsletter’s editor, doing her best to produce a monthly document in Microsoft Word. Notice how the text is mostly set in 12 point Times Roman Bold, stretching across the page in one wide, hard to read, column. Clearly, such a layout is anything but clear.

Figure 13 shows my InDesign re-interpretation of the newsletter. The editor wouldn’t allow me to turn the original design upside down completely (as I’d wanted to do), but at least now the information is clear and easy to find, thanks in part to variations in typefaces and weights within each face. But what about less conventional designs, where levels of importance don’t necessarily reveal themselves so obviously? Timothy Samara, in his excellent book, Design Elements: A Graphic Style Manual (Rockport Publishers, 2007) shows how there are a number of ways to indicate the relative importance of information when working with type. Figure 14, which I’ve adapted from an example in Samara’s book, shows nine design variations. In each variation, the most important line or word is signaled by changes in size, weight, alignment, rhythm, and other attributes. Sometimes design objects, whether typographic or otherwise, command the most attention by where they’re not on the page. In Figure 15, notice where I placed the beginning of the body text. Typically, you’d expect to start reading in the upper left, but here I purposely put the story down and to the lower right. I used the photo illustration of the cherry blossoms to reinforce the fact that this is the spring edition of NuZeen. Doing double duty, the illustration carries your eye rhythmically from left to right across the page to the story’s opening paragraph (Figure 15a). To further punctuate the beginning of the article, I used an orange Futura drop cap to act like a road sign, directing readers where to begin. If you’re thinking, “Aren’t readers smart enough to know where to look?” you might be missing the point. Yes, it’s not too hard to figure out what’s a headline, what’s a subhead, what’s the body text, and what’s a caption, but readers shouldn’t have to think—even for a moment—about where to look or what comes next. Reading, like watching a movie, is an act of faith. Psychologists will tell you that a key ingredient of a good book, story, or movie is that it take control of the experience from the first frame, image, word, or paragraph and transport its audience methodically to the end. In case you question the importance of a clear visual hierarchy, check out Steve Krug’s best­selling book on the subject, Don’t Make Me Think (New Riders, 2005). While it’s focused on the web, the visual hierarchy advice crosses media. Take a look at Figures 16 and 17. In Figure 16, I dumped raw, unformatted text from H.G. Wells’ The War of the Worlds onto a page. Can you imagine reading a book like this? Figure 17 shows the text after I organized it into a simple system of book number, book title, chapter number, and chapter title, followed by the story itself, which identifies its beginning with a four line drop cap. To help signal the beginning of subsequent paragraphs, I used a 1 pica first line indent. Although the content is the same, which version would you rather read? Graphic hierarchy. When I talk about the hierarchy of graphics, I’m talking about photographs, borders, logos, backgrounds, and other items besides type. (Type can, of course, be a graphic element on its own, but for the sake of this article, I’ll keep them separate.) Figure 18 shows a series of ten frames from one of the classic scenes in The Godfather, directed by Francis Ford Coppolla. Through a carefully orchestrated series of images, Coppolla builds the terrifying montage, masterfully juxtaposing the innocent baptism of his newborn son, Anthony, against the brutal murder of Vegas mobster Mo Green. Coppolla uses a clear and concise vocabulary of wide, medium, and close-up shots to communicate hierarchy in this chilling sequence. One word that describes the hierarchy of the scene from The Godfather is contrast. By use of contrast, we can communicate what’s important and what’s not. In simplistic terms, dark-colored objects are heavy, and therefore important. Light-colored objects are light, and less important. Figure 19 demonstrates this principal. Notice that although the two circles are the same size, the black circle dominates the yellow circle. Size, which is a form of contrast, can also determine hierarchy. Figure 20 has the same black and yellow circles. This time, though, the yellow circle is much larger than the black circle. By virtue of its size, the yellow circle is more important than the black circle. Position is another way graphics gain importance. In Figure 21, the small black circle is more important than the larger yellow circle because it’s positioned closer to the front of the composition. Yet even though front-most objects typically are most important in a design, this isn’t always the case. Take a look at Figure 22. Here, the smaller yellow circle is more important because the larger black circle is pushed halfway outside the compositional frame. By doing so, the black circle, despite being larger and closer, forces our eye toward the distant smaller yellow circle. Now let’s see how the concepts of contrast and position can be used in a real world design. Figure 23 shows a tri-fold brochure I illustrated and designed a few years ago for The InDesign Conference in Amsterdam. If I did my job correctly, your eye should start in the upper left of the front panel and move through the type and graphics towards the back or, better yet, encourage you to open the brochure to reveal the guts of the piece inside. Helping achieve a visual flow are the dotted paths of the butterflies and the way the tulips step down in size from large on the front to smaller on the back. Figure 24, a poster I did for Athol Fugard’s anti­apartheid play “Blood Knot,” is another example of graphic hierarchy. This time position, contrast, and color all work together to draw the viewer’s attention from the upper left of the illustration, through the main text, down the arm, to the performance information at bottom. Figure 25 is an inside spread from a brochure I did for the Brandeis-Bardin Institute and Brandeis University. It has much more information than the “Blood Knot” poster, so visual hierarchy plays a large part in guiding the reader through the spread. Notice how the underlying grid helps organize the page into information chunks. Which of the principals that we’ve discussed so far do you recognize? With any luck you see rhythm, balance, unity, proportion, and contrast. There may be others, but the point here is that I didn’t start designing with a check list of concepts to cover. If you do, you’re headed for trouble. Instead, you must trust your instincts. How does your design feel? If you’re not sure, put it away. After a day or two, go back and take another look.

So That’s All There Is?

By this time you might be wondering, what’s the big deal? Start at the top left, grab the eye, weave a path down through smaller headlines, subheads, and body text to the bottom of the page, and boom, instant hierarchy! Not so fast, pardner. Although creating visual hierarchy seems formulaic, there is no formula. Ultimately it’s up to you, the designer, to make it work. As Rudolf Arnheim, the great German author, art and film theorist, and perceptual psychologist said, “The least touchable object in the world is the eye.”