Common Mistakes - Hierarchy
Imagine that your friends have been talking about this new up and coming restaurant in your town for months. It just opened and everyone is raving about how fresh and delicious the food is. The service is impeccable and the atmosphere makes you want to move right in. So you make a reservation to go check it out for yourself. The day comes and you walk in the door and are greeted by a shining smile. You are seated to your table and handed a menu. You take one look at the menu and realize that nothing stands out. The categories, the titles of the dishes, the descriptions and the price are all jumbled together that you cant even tell what is what. You have to ask the waitress to come over to help you read the menu and figure out what is an appetizer and what is a main dish. Once you finish your meal the same thing happens with the dessert and after dinner drink menu. Now did this affect your experience at the restaurant? Maybe. Did the menu hold up to the standard of the atmosphere and service? Probably not.
Now, that’s a silly story, because hello, most restaurant menus are organized, headings stand out, the description is small under the dish titles and the prices are normally very visible. This is called hierarchy, and without it our lives would be an absolute mess.
Just like there is hierarchy with basically anything in life, it is the same way with design. Especially in layouts. Without a visible hierarchy, you don’t know what’s important, and when there is no hierarchy, it comes across that everything is important...and when everything is important, nothing is important.
There are many different ways to establish hierarchy in a layout or design. Let's keep with the restaurant theme and take a menu for example. There will be your main categories like "appetizers", "salads and soups", "main courses" and "sides". Each of these will be in a nice large font and these sections will be separated from each other with either a line or spacing.
Under each category you have the dish name, description and price, and some menus will even tell you if it's a fan favorite, gluten free, or vegetarian. The dish name needs to be the most prominent, so most designers will have it bolded or in all caps. The description will be a small thinner font and sometimes italicized. The price will normally be off to the side of the dish name and normally in the same font as the dish name. Then for the fan favorite or dietary restrictions, these will normally be little icons or emblems and sometimes they'll be a totally different color than the rest of the menu so that they stand out.
Hierarchy is all about making the important things stand out from the rest and creating a visual flow for the eye.
Tips for using hierarchy in your own business:
1. Decide what one thing is the most important
When you have a graphic, poster, piece of marketing material, heck even a business card, you must first decide what is the one thing that you want people to know above anything else.
Once you have that, then decide what will follow for the rest of your info. This can be on paper or in your head.
As an example, let's take an event graphic. Decide what is the most important. Normally it’s the name or what the event is. Then the date, location and time follow suite. Then the description or summary/instructions. Then the website url and logo of sponsors.
So the name of the event will be big and bold, maybe have some interest to it. Then the location, time and date will be next in a smaller font. Then the summary/instructions will be below in a small font or italic. Then last but not least, the sponsor logos/website url will be at the very bottom of the graphic. And Voila! Heirarchy!
2. Using your fonts to your advantage
Even if you aren't a designer, you will have a great toolbox full of fonts that are default to different programs on your computer. With the click of a button, you can head over to fontsquirrel or another font website and download or purchase more fonts. But let's stick with the default fonts. Most all fonts come in different weights, which is how bold or thin a font is. They also come italicised and you can underline any font. That is already three ways to differintiate a heading from a descrition, or a date from a location.
Of course, it's best if you don't use every single weight of font and size all on one graphic, keep it consistent. But if you are designing your own brochure or material. Pick two fonts to work with, one for the headers and one for the body text, and then take advantage of italic and bold.
3. Separate sections with lines or space
With hierarchy, our goal is to create a flow to our piece that is pleasing to our viewer's eye and allows them to grab the most important information first, and then read the rest after. So it's in everyone's best interest if every single piece of text wasn't right up against the other.
Let's go back to what we learned at high school dances and "leave room for Jesus".
Separate your sections of text with added space or lines and give your viewer's eye room to breath throughout your piece. Add margin on the top, bottom and sides, and space our your text a little more than the default. This not only creates a clean look, but also makes your piece more readable and pleasing.
4. Use Color Minimally
The use of color should be to grab attention or make sure your viewer sees something specific. If you're designing your own pieces without the help of a professional designer, stick with a color palette of no more than three colors.
The same goes for color as it does for hierarchy in general. If everything is important, nothing is. And if everything is in a bright loud color, than nothing will grab your viewer's eye. Use color sparingly and on things like the headings or icons.
Also, we'll hit more about color in the weeks to come, but it's a good rule of thumb to pick a light colored background and add darker colors on top. It's much more readable than a black background with neon yellow writing.
5. White Space
With white space you can take the exact same content and just add a little space and you take what felt messy and overcrowded to spaced out and pleasing to the eye. White space is all about margin and adding room for your eye to breathe.
Just liked we talked about with separating sections of text with spaces or lines, we are talking about the same thing but with all elements of a piece with white space. It's all about designing a piece to leave plenty of blank space so that you eye can move around the piece and be able to rest in the white space.
So a good rule of thumb is to finish your piece and take one thing off of it. I know that seems scary, but your piece doesn't need to be overcrowded with graphics or text or illustrations. What you need to do is cut everything that isn't essential. And that's where you get a professional designer. They will be able to help you pick what is essential and make a cool, inspiring and well-designed piece using only what is absolutely essential.
In conclusion, hierarchy is something that is lacking in our everyday design, but if you take a moment to think about it, you can make easy little tweaks to your marketing material that helps make it more pleasing to the eye and connect more with your viewers.
Professional designers will be able to help you the most with hierarchy, because it's something that is so natural to their work, but with these tips and tricks, you'll be able to diy your own piece using hierarchy.
I would love to hear any comments or questions or how you use hierarchy in your own marketing material!