What Wine Goes with This Design?

A year or two ago, we received an invitation from a friend to our first wine tasting. Now, we enjoy wine, but are not in any way well-versed in the intricacies of evaluating them. We basically have two levels of evaluation: “Wine good,” or “Blech”. We know that white wine is supposed to pair with chicken or fish, and red wine should be served with red meat. However, neither of us personally care if that rule happens to be broken.

The young woman running the tasting had some training and was passionate about communicating her knowledge about the elements that resulted in a good bottle of wine. By the end of the evening we felt that, while in no way experts, our understanding and experience of each wine was enhanced. We now had a basic knowledge of what to look for.

In the same way, our purpose with this next run of posts is to share our knowledge of design to allow you to recognize, identify, and appreciate elements of good design.

Today, we focus on hierarchy. We will look at what hierarchy is and why it’s important, and then different elements that identify and communicate the hierarchy of a designed piece.

Hierarchy: What Is It Exactly and Why Should I Care?

Hierarchy is the intentional structure of elements based on their importance.

Think of hierarchy as a road map for the reader. It’s absolutely critical for good design.

Without a clear, defined hierarchy you will leave your audience confused and frustrated.

Here’s a basic example of no hierarchy vs. basic hierarchy.

Now, of these two samples, which do you find more compelling? Which sample allows you to identify, without seeing actual content, where the important information is located?

Brochures that do not have a strong hierarchy create two kinds of problems.

1. The information is confusing because the reader doesn’t know where to look.
2. The information is boring because the reader has nothing to grab their attention.

How Do I Know Where To Look?

When initially looking over your content, you need to determine the level of importance for the different elements of the piece. You can then assign them a particular level of importance (Level 1, Level 2, Level 3). In doing this, be aware that you don’t create too many levels, otherwise you will disappear down the rabbit hole never to be seen again. Usually, three or four levels is sufficient to identify at each layer of hierarchy.

Additionally, keep in mind that there are layers of hierarchy in a piece. This is sometimes referred to as Fractal Hierarchy.

For example, in this image, the overall page has a hierarchy (1, 2, 3 — This is a top to bottom, or position-based hierarchy), but then the lead article ALSO has a hierarchy (a, b, c — This is a size based hierarchy; large image, headline, body text). Like a box of Russian dolls, each level of hierarchy fits within the higher level.

So, what tools do we have to establish those levels of hierarchy? In the next section we will cover some of the different elements that can be used to create different levels of hierarchy.

Hierarchy: Building the Beast

Foundation First

There are a variety of ways to approach a grid, but regardless, they are a foundation to any design hierarchy. When creating a grid start with the number of text columns. In theory, it could be any number, but you want to keep in mind what the experience will be for the reader.

If there are too many narrow columns, it may result in more difficulty, “choppy” experience for the reader. If it’s one large column, it may be harder to track across the page. That’s not to say those options can’t work, but you always want to be aware of reader experience. Generally speaking most grids are 1, 2, or 3 column grids.

One way to think about the grid is that it’s the scaffolding that you place all of your elements on. However, don’t feel too penned in; feel free to play with the grid. If you find that you keep gravitating toward the same types of grid as a solution, be intentional about pushing yourself to try other options.

One great thing about grids is that it’s easy to start by creating a quick thumbnail (small) sketch of the grid(s) you want to use to verify how feasible it is. It doesn’t take much time to quickly draw multiple thumbnails to find your best option before you even begin to create a file on the computer.

Once you have a grid you then work with the design elements to complete your layout.

Good Design Is C.R.A.P.

We love a good acronym, and this is certainly a memorable one.

Contrast: This element can show up in a variety of ways. You can try contrast in size, color, or shape. If your layout is feeling too flat or lacking visual interest, try looking at ways to bring more contrast into the design.

Repetition: Our brains are constantly looking for patterns. Once you establish the use of certain graphics, colors or fonts, repeating them will create harmony in your layout. Of course integrating intentional changes in an established pattern is an additional way to create contrast.

Alignment: Working within the grid you created, you are able to determine where to align elements. When all elements are aligned it can create a clean look; however, be mindful that it doesn’t become too regimented, or your design will become bland and lose visual interest. Similar to repetition, if an element breaks out of the alignment, that can be another way to call attention to it.

Proximity: Keeping similar items next to each other helps the reader to see connections. For example, keeping copy close to a photo that it is referencing helps to retain the flow of the information. Alternatively, keep in mind that the inverse can also help establish hierarchy. Blank space (also referred to as white space) can help in directing focus to a particular element, as well as bringing visual balance to the layout. It’s just as important to provide your readers with a place for their eyes to rest as it is to provide information. There are many, many pieces that have been rendered useless in the attempt to cram in too much information.

As an additional bonus, the full-sized graphic for “Good Design Is CRAP” can be downloaded here.

Is This the Bonus Level?

Hopefully this has resulted in a clearer understanding of hierarchy; the importance of establishing a clear, strong hierarchy; and a simplified list of elements that can be used to create hierarchy.

As with anything, there are times to follow the rules and guidelines rigidly, and times that it makes sense to diverge from the rules when there’s good, defined reasons for doing so. The ultimate goal here is to help your readers to understand what their looking at and what they should be taking away from your content. If your designer has done their job well, what you want your readers to do/learn/ask/think should be abundantly clear.

Now, go open up your wine and pour a glass. We’d suggest a nice chianti…