Today we present to you the first design tip for non-designers in an ongoing series: visual hierarchy.
My day to day consists of designing pretty much everything that you see regarding TrackMaven. The website, our blog, our promotional materials, and our app. I spend a lot of my time worrying about the little details so that the right tone is expressed, the important information comes to the forefront, and ultimately our users and visitors get what they are looking for. I write a bi-weekly email to the TrackMaven team on ways they can improve the design of the smaller things they do that I don’t touch. Then we thought, why not share those tips with our blog readers as well? Surely marketers would benefit from this knowledge — really anyone would — so I present to you the first of many: Design Tips for the Non-Designer. This week we’ll discuss Visual Hierarchy and how you can use it to your advantage.
What is Visual Hierarchy?
A word I always spell wrong on the first go —hierarchy. It aides in comprehension and reinforces a message and guides us through a story. We achieve a strong visual hierarchy when there is a clear viewing order to the elements on the screen. Setting a strong visual hierarchy allows the viewer to focus their eyes on the intended first action, and subsequent actions follow in descending order based on the hierarchy in place.
Through the use of basic design principles such as color, size, contrast, and proximity we can focus the attentions of our audience. Giving focus to the primary element through the use of one or more of these principles allows you to emphasize it over the other elements so it looks more important. Designing related elements similarly allows you to maintain this hierarchy through out a piece of work (web site, paper, presentation, etc).
Let’s go over these first, so you can see what I mean.

Color: Your eye is immediately drawn to the photo (doesn’t help that it’s a cute corgi!), followed by the purple copy. While there are other elements like size and shape (different fonts) at work here as well, the color of the photo draws your eye the most.
Size: By setting certain elements larger than other elements, we help the viewer through our composition. Consider the two examples here, where the larger type allows you to scan quicker, and the larger photo has you stopping to consider what the content is. (Still about cute corgis!)
Proximity: By aligning elements together we create a focus and a relationship. In the example above, you understand that the facts to the right are in relation to the photos on the left due to their proximity.

Contrast: While the photo here is an eye catcher, because there is more contrast on the right side our eye focuses there first. Background color and the contrast of the copy on top of it tends to have a lot to do with this.
Through these techniques, we allow our eyes to flow through a composition — making it easier to understand.
Quickly, let’s compare the following sites.


Both of these companies offer similar services — the ability to create email campaigns. Which one does it better? MailChimp gets straight to the point (another topic), but also uses hierarchy through copy, layout, and color choices like the sign up button. They also limit the amount of content. As for the other, there are too many things vying for my attention on SendGrid’s website with too many words to read.
What’s your Goal?
Everything you do has a focus, has a priority. What is the priority in the document you are working on? Consider this when adding content to any composition. Hierarchy helps give order, and by adding more elements the order is shifted. Also remember, just because you can make a piece of text stand out on the page, doesn’t mean you should.
Visual hierarchy can be applied to sales, marketing, and any other forward facing materials! Consider a slide deck with a title, image, and copy. What’s the most important thing here? Unless it’s a strong visual that sends the message home, the focus will probably be on the quippy title (short and sweet sticks in the mind) and one sentence at the bottom. By keeping the title short and large it will be focused on first, then followed by the image (because images stick quicker) and lastly the copy. So consider the next time you need to create a slide or a graphic, what is the important information and should everything really be bold?
If you want to read more on Visual Hierarchy, check out these articles from Six Revisions and Vanseo Design.
// corgi photo from http://en.wikipedia.org/wiki/File:Welchcorgipembroke.JPG