Understanding visual hierarchy in poster design

workerbee

Visual hierarchy in poster design can be established in many different ways and often is the product of an analytical mind and/or a fine-tuned design instinct.

This article explores several examples from both famous and lesser known designers who possessed both of these qualities, and aims to uncover some identifiable “laws” of poster hierarchy.

1. What does the eye gravitate towards first?

Poster design by Michael Bierut
Poster design by Michael Bierut

A simple entry point into the discussion is to start at square one: what does the eye gravitate towards first?

In the Michael Bierut poster design featured above, it can be said that the massive bold, black arrows and pointers are quite simply the very first thing that grab the eye. Even more specifically, for some, it may be the single largest and boldest arrow in the center of the page. Why is that?

Perhaps one reason the biggest arrow grabs the viewer is that the larger elements in poster design have visual priority, given that posters are often viewed initially at a distance with an unfocused eye and the large elements are the most “legible”.

It can also be added that arrows are especially universal and instantly understandable. With that said there are other reasons the arrows stand out that may be understood through another example.

Poster design by Paul Rand
Poster design by Paul Rand

Poster Design: Paul Rand

In the Paul Rand poster design above, the tilted color column doesn’t necessarily read as massively as the Bierut arrow, however it is unquestionably the attention grabber.

Perhaps in this example it is, in part, more a matter of color: The colors are masterfully chosen and exist in a harmony that can is simple eye-candy. On visceral levels, they feel good to look at, and naturally the eye gravitates towards them.

2. Underlying reasoning

Both large elements and colorful elements can often grab the viewer before anything else, but perhaps there is a broader “law” at play.

Looking back at the first Beirut example, it can be said that the page is white, the fonts are relatively light, and the only existence on the poster which challenges that “norm” is the dark, bold, black arrows. What makes them jump out more than their size could actually be their relative contrast to everything else on the poster.

This underlying essence of relativity and contrast can be applied to the Paul Rand poster as well: Aside from the color column, the entire poster is desaturated. Therefore it is perhaps because of the contrast to desaturation that the color column shines forth and grabs the viewer before anything else.

Poster design by Michael Bierut
Poster design by Michael Bierut

These underlying concepts can be applied to another Michael Bierut example which is perhaps a bit more nuanced in analysis. What is the “norm” in the poster above and what challenges that? Interestingly this poster is somewhat gray, in the sense that the amount of white equals the amount of black.

The fonts span a range of sizes and densities which is balanced and does not necessarily create contrast or intrigue. Perhaps, where the relativity and contrast lies is in the abstraction of typographic characters – using characters in a way that presents them as aesthetically intriguing shapes.

With that in light, it could be said that the sideways word “THINKING” is the most abstracted out of all the typography on the page, and the closest to being seen not as a word at all. That is perhaps where the friction, contrast, and intrigue lies in this poster, and perhaps why the sideways “THINKING” is the most eye catching in relation to the rest of the elements on the poster.

3. What happens after the eye is caught?

The most eye catching element on the poster has grabbed you. What happens next? It could be said that the visual hierarchy that follows is in the hands of the initial element upon which the eye has landed.

The first Michael Bierut poster featured in this article is a perfect example: The eye catching element is an arrow and naturally the eye will go where the arrow is pointing – to the column of text vertically spanning the right edge of the poster.

Note that the text in this column is set at a smaller point size than the text on the left side of the page, which speaks to the idea that visual hierarchy is not always based around size or color!

After reaching the end of the right hand column, the viewer might return to the largest arrow, to find the smaller arrow pointing to the left – another intriguing contrast and friction! This small arrow brings the viewer to the poster title on the left, ironically being the final element in the visual hierarchy (perhaps for most viewers).

It could be said that the functionality of the hierarchy in this example is unique and that visually hierarchy often does function in very different ways. Take the following poster for example.

Out Form by Yosuke Yamauchi
Japanese Exhibition Flyer: Out Form by Yosuke Yamauchi. 2014

It could be said that the attention grabber in the example above is the “crumpled” form, it being the only element that is not simply typographic or flat color. It exists in a flat, sky like, light blue field of color that interestingly establishes a sense of gravity. It feels as if the form is falling downwards through the air.

It could be said that this sense of gravity that informs the visual hierarchy, bringing the viewer down the page from top to bottom, encountering first the left hand text block, then “falling” to the right hand text block and finally landing in the bottom block which contains the event title and additional information.

4. “Laws” of hierarchical flow

It can be said from the previous Michael Bierut poster as well as the Out Form poster that establishing any solid guidelines on the flow of visual hierarchy beyond the initial attention grabber is difficult. This flow epitomizes the subjective, improvisational, and instinctive aspects of graphic design work.

Poster design by Saul Bass
Poster design by Saul Bass

There are infinite ways to get from point A to point B. It doesn’t always have to be concrete either – the viewer might be taken through points F, C, and D first. Take the above poster design for example. There are many paths the eye can take through this design.

With that said, a designer can find ways to allow their attention grabbing elements to lead viewers to the logically succeeding elements by asking questions such as these:

  • Does the element have a directional tendency?
  • Does the element hold weight?
  • Is the element in the foreground or background?
  • Is the element focused or blurry?
  • What type of energy does the element have?

Conclusion

While the examples explored above only depict a small handful of techniques, they can be used as a doorway into exploring the infinite possibilities for which visual hierarchy can be established in poster design.

Want to learn more about visual hierarchy? Don’t miss “6 principles of visual hierarchy for designers” and “Mastering visual hierarchy for menu design“.

Related articles

31 horror movie posters so good it’s scary

31 horror movie posters so good it’s scary

Horror movies have been around for about 120 years. Things have changed since Georges Méliès’s The Haunted Castle (although maybe not that much), not just with the movies themselves, but with the way they’re advertised, too. Movie posters (usually featuring what’s known as “key art,” the singular image that is the foundation for a movie’s…

6 tips for better typographic hierarchy in web design

6 tips for better typographic hierarchy in web design

Have you ever looked at a design and thought, “Something doesn’t feel right”? If you can’t put your finger on what it is, the odds are good it’s an issue with your visual or typographic hierarchy.  When you cram content onto a page with a muddied mass of line breaks, bolded letters and italics—you’re sure…

Current Design Contests

Designers, check out these contests so you can start building your career.
0%