This unit contains four sections. Work through the content in order.
Once you know your design’s intended purpose, how do you communicate that to the audience? It all starts with hierarchy.
Hierarchy, by definition, is the arrangement of things by order of importance. When reading a book, your eye moves from left to right and top to bottom. You may think hierarchy doesn’t exist in a piece of text, but you’d be wrong. Think of chapter header treatments in a novel, or headline text in a textbook. These few words are almost always given a different treatment than the body copy. They are bolded or a new color, or larger—sometimes all of the above. This change in style signals prominence and importance.
Picture a college student rushing to finish a reading assignment from their textbook. Instead of reading every last word, they are skimming, taking key note of subheadings as they move through the pages. Even if all they take away from the chapter is the text from these subheadlines, they’ll likely be able to summarize what the chapter was about.
Why? Purpose and hierarchy working together. In the purpose unit, we talked about identifying your design’s goal and key takeaways. Hierarchy is how you emphasize those key takeaways within a piece. It’s drawing attention to the most important pieces of information and displaying them in a manner that causes them to be read/digested easily.
You can see hierarchy in action right here, on this webpage. Large, bold, pink copy is used for headlines. Extra important pieces of information are bolded to stand out from the rest of the main text. If you were to merely skim this page, you may only read these large pink headlines and bolded body copy sentences, but you’d still manage to take in the most important content and comprehend the goal of this page (to introduce design fundamental #2, hierarchy).
Much like with reading, the audience’s eye will naturally move from left to right, top to bottom, while observing a design. However, the hierarchy of elements within the piece can also influence where the eye is drawn. Simply put, information that is largest, boldest, and/or brightest will demand attention.
When designing, hierarchy can be stressed in several ways:
When you hear someone say that a design is “busy,” what they usually mean is that they don’t know where to look first. Everything is given too much weight, meaning nothing is prioritized. The design lacks hierarchy and therefore cannot communicate it’s message (purpose!).
Before you begin designing, make a list of all the information you need to include in the design, organized by most important to least important. What is most important? Any information that communicates the key message/takeaway that you identified while determining your design’s purpose.
An example: If I were designing a graphic for social media to announce tour dates/appearances for an upcoming release, I might want the following information (in no particular order) to be included in the design:
The goal (message) of this design will be to communicate author appearances and the key takeaway would be event dates/times. Let’s reorder the above list so the design’s hierarchy (prioritized information) that reflects the design’s purpose:
Based on the above list, we’d want to make sure that the first three items are quickly and easily communicated in our design. Even if a viewer were to scan the piece, they should immediately see the book cover (to know what the events are for) and key event information (date/time and location). This match’s our purpose (goal + takeaway). Everything else is secondary to this info.
A bit of copy that says something like “Meet [Author Name] on Tour” would check the fourth item off our list. It also might eliminate the need to include item #8 altogether. Always carefully consider if all the information in your list is necessary within the design. Often times the lower level info can be omitted!
As for items 5, 6, and 7? These are mid priority items. If your design has space for them, you can included them. But you’ll want to make careful design decisions for this information so it doesn’t “outweigh” your high priority items.
Let’s take a look at some examples that show hierarchy in action…
In this video, I’ll share a few designs and discuss how hierarchy is being applied and communicated within the pieces. For the best viewing experience, I strongly suggest watching in full-screen mode.
Remember, hierarchy allows you to prioritize your content and communicate the most important information efficiently. A lack of hierarchy will create a cluttered, confusing, and/or meaningless design.
Some best practices to keep in mind when tackling hierarchy:
DO make a list of all the information your design needs to communicate and then rank it by importance.
DO consider if the lowest rank items are actually necessary to the design. (Can you omit anything? Simplicity is almost always best!)
DO make sure the purpose of your design is communicated in the first 1-3 ranked items.
DON’T make the mistake of assuming all the information is equally important. (It’s not.)
DON’T change too many design cues at once. Top priority information can often stand out with a single size change or accent color. This info rarely needs to be a unique font and a unique size and a unique color.
Now that we’ve tackled unit two, it’s time to dive into color—the design element that may be the most effective when it comes to stressing hierarchy…
Start Unit Three: Color + ContrastIf you have technical issues or need to reach me directly, please send an email.