How to Use Visual Hierarchy in Web Design

by on 17th April 2010 with 44 Comments

Sometimes you look at a site that may be attractive enough, but something is missing. It has great colors, nice graphics, perfect alignment and clever copy, but there’s just something a bit bland about it. Though everything looks nice, nothing is really coming through vividly on a greater level than anything else. This solution to this problem is visual hierarchy.

Designers are often intuitive enough to give the elements on the page a clear hierarchy without even thinking, other times the lack of intention in this area leads to a design like the one described above. This article will examine some of the basic principles of designing with a visual hierarchy of information in mind.

Principles at Work

The reason visual hierarchy is so important is because by mastering it, you can have immense control over how a visitor reads your page. In an ideal world, every viewer would read all of the information on the page thoroughly, allowing you infinite time and space to get your message across. However, the reality is you’ll likely only have a few seconds to grab someone’s attention and tell them what the site is about before they turn away and go elsewhere.

By establishing a clear hierarchy of graphics and information, readers almost can’t help but unconsciously follow the path that you’ve set out for them. Technically, no two people will read a page the exact same way but you can create strong trends towards the manner you prefer.

This plays out over a number of different areas and methods. Visual hierarchy can be established through an element’s position, size, color, and complexity in relation to the other elements on the page.

To structure your message properly, you’ll need to consider everything from the fonts you use to the whitespace around a given object. Always be conscious of what is drawing attention on your page and make sure that it’s intentional.

Position

Position is one of the most basic ways to establish hierarchy. Consider the following example:

screenshot

Odds are, upon first looking at this image, you weren’t quite sure what was going on. Your eyes probably darted around a little, looking for a distinguishable pattern. Now look at this example, using the same letters.

screenshot

Suddenly, though the message is still distorted by physical space and unnecessary shapes, it becomes much easier to decipher when we reverse the order. Though both messages caused your eyes to wander around the image, the second one made it much easier to see the letters coming together to form words than the first. This is because you are used to reading from left to right. When there is uncertain visual chaos on a page, the first way your brain wants to try to organize the information is in the order you were taught to read: left to right, top to bottom.

This is not meant to shock you, it’s obvious that we read left to right. However, becoming more consciously aware of this tendency will help you structure your content appropriately. Remember that this principle extends beyond words into graphical items on a page. If you present your users with a grid of objects, fairly similar in size, shape and color, they will have a tendency to read the grid from left to right unless otherwise prompted.

Isn’t this boring?

You might be wondering what your designs would be like if you strongly adhered to the z-reading principle above. The answer is incredibly dull and unoriginal.

The goal then is to be able to line objects up on a page in a more attractive fashion while causing the reader to disregard their subconscious tendency to read in a “z.” This is accomplished through the use of the other principles of visual hierarchy discussed below.

Size

In the design world, size definitely matters. By varying the size of items on a page, you can easily break the z-pattern tendency.

screenshot

Despite the fact that the written question is higher than the square, the sheer size and boldness of the square draws your attention before the words. Let’s take a look at this principal practically applied to web design.

screenshot

This is an extremely simple page that uses a clear visual hierarchy. The quote in the center of the page is large enough to be the first object that draws your attention. After this, the logo in the top left is not only the natural place to reset your reading tendencies, but is also the next largest item of contrast on the page. The designer has structured the site so that if you only spend a few seconds on the page, you read “Think Big. Be Nimble.” followed by “Hobson Dungog + Davis.”

This is classic manipulation of visual hierarchy at work (notice that whitespace is heavily at play as well). It would’ve been easy to setup the quote to appear in the top left followed by the logo, but the layout wouldn’t have been as interesting or flexible.

Color

Clever use of color can be one of the most visually interesting ways to differentiate elements on a page and draw attention where you want it. Your brain’s obsession with contrast will cause your eyes to focus on objects that stand out due simply to their difference in color in relation to the surrounding objects. Consider the following example:

screenshot

This designer has utilized several contrasting and complementing color tones to establish visual hierarchy in what would otherwise be a monotonous block of text. The brighter sections draw your attention and make it easy to get the gist of the paragraph without actually taking the time to read it.

The context comes heavily into play here as well. If this were a print design, you wouldn’t think anything of the brighter colored text beyond that it was meant to grab your attention. However, on the web, your brain will expect these obviously intentional areas of focus to signify something more significant: in this case, a link. And turning the brighter text into links is exactly what this designer has done. Despite the untraditional formatting represented by the lack of a navigation area, you can quickly figure out how the site works because of the use of, you guessed it, visual hierarchy.

Visual Complexity

The last way we’ll look at to control visual hierarchy is through visual complexity and discernible patterns. The principal here is that if you want something to stand out on your page more than the objects around it, make it considerably more or less complex. Even if the objects are a similar size and color, the greater complexity will add to the visual interest.

This principle ties in heavily with discernible patterns. As previously mentioned, your brain is constantly trying to make sense and force order upon the chaos of pixels you see on the screen. It will therefore cling to the areas that are not only the most interesting due to their complexity, but also those items it can impose a familiar schema upon.

screenshot

The basic example above can teach us a lot about how we focus our attention. There are two areas of the image that stand out the most. The first and most obvious area is the two peculiar shapes in the top row. Not only are they more visually complex than the objects around them, they are also reminiscent of something familiar: a pair of eyes. Despite the chaos around them, these shapes draw your attention because faces are among the most familiar, friendly or even threatening objects we encounter. If you want to set a given area high in the visual hierarchy no matter where it’s located on a page, you can’t go wrong with a face.

After giving up on the pair of eyes, your next likely target is the two repeated triangles in the bottom row. Here again your brain is trying to impose order. It understands this area a bit more than the others due to the repeated element. Using selective repetition in your designs is an excellent way to add visual interest, connect distant objects, and lead the viewer along the path that you want them to go. To use repetition effectively, simply implement the variables we’ve just discussed (size, color and complexity) as the basis for the repeated element.

Conclusion

The goal of this article was to make you more aware of how to use the concepts of visual hierarchy to control the prominence of objects on a page and steer your viewers in the direction you’d like them to go. I hope that I’ve succeeded in causing you to consciously apply a clear and intentional hierarchy in every element that you design.

Use the comments below to tell us what you thought of the article and whether or not you had ever given much thought to your use of visual informational hierarchies.

Comments & Discussion

44 Comments

  • http://twitter.com/reginelambrecht Regine Lambrecht

    Nice and deep article. I do use faces to draw attention to a part of the screen, and also contrast for less important information (clearer color for last update date, for instance). Didn’t know about visual complexity though.

  • http://www.rustydogcreative.com Lee Peterson

    Nice article. This balance of colors, white space, font sizes, etc. takes years to grasp and finely tune.

    The Z formation is quite typical in LTR reading. I think it does work well, even if you say it’s boring. ;-)

    The Rule of Thirds is usually how we base most our work. http://en.wikipedia.org/wiki/Rule_of_thirds

  • http://www.hyperialguard.com Marcus Yeagley

    Impactful post here. A good set of ideas to keep in mind when just starting a new design.

  • Jacob Haip

    Great thoughts and a nice article. The web also opens up the possibility for movement which would play an important part in visual hierarchy when used effectively.

  • http://www.cricketdesign.com.br/blog Alexandre Fittipaldi

    Very nice article!!! That’s our world!

  • Shanna

    Great article. I like the reference to the eyes.

  • http://www.unuidesign.com Editha Fuentes

    Great article, very informative. Also, thanks for using one of my client’s website as an example!

    Editha @ Unuidesign

  • http://www.narendrakeshkar.com Narendra Keshkar

    Simply great article and very useful to consider. Definitely would consider this while designing.

  • http://www.paulcshirley.com/ Paul C. Shirley

    Great article, especially for developers like me who don’t have a background in art, print, graphic design, etc.
    Thanks!

  • http://www.modny73.com/ Cook

    very deep article…loved the work

  • http://www.BertrandLirette.com Bertrand

    Same thing as Paul, nice to know even if I’m a web developer. I looooove design too but I just don’t make them. Thanks!

  • http://www.reddogdesigns.ca Mike

    Nice article. Thank you!

  • Joshua Johnson

    Thanks for the feedback guys! Greatly appreciated.

  • http://www.webdesignlinks.org/ Chris Jones

    Very ‘eye opening’ article with some great tips about visual hierarchy! :)

  • http://www.mediacake.net Daniel

    Nice article, always good to remind yourself of these points..

  • Luke

    When I looked at the first figure in the Position section, I could read “Search Today”. Does that make me weird? Actually, it probably does.

  • http://www.ksnagra.com Kanwaljit Singh Nagra

    Very interesting article, I still consider myself to be a novice in the design world and articles like this really make me think. Will definitely think much more deeply upon designing my next layout :D

  • http://webylife.com Nikunj

    Very useful information

  • http://www.bernardteske.de Bernard Teske

    Really nice article. Designers who have this knowledge are prepared for even difficult projects. Poorly a lot of our collegues are not so Professional. ;)

  • http://aevumincorruptus.com Jeff Gardner

    Awesome, awesome, awesome. I am very pleased with how clearly and concisely you were able to teach these principles. I am completely new to Visual Hierarchy, and this article was very well put together. Your examples were priceless. Thank you for taking the time to write it!

  • Pingback: Chapter 3 « ITMG 340()

  • http://www.webdesignerguy.info Jarod Billingslea

    I learned something today! People read often through the z perspective, people look at things that are bold in contrast, and people also look at things with a pattern! Thanks, I knew this, but never realized this (like you said too :p). I’ll definitely make use of this advantage!

  • Pingback: Client vs. Designer: Four Lessons to Win the Battle()

  • Pingback: Client vs. Designer: Four Lessons to Win the Battle | DesignFools()

  • Pingback: Client vs. Designer: Four Lessons to Win the Battle | Tonews.us()

  • http://www.designcabi.net Bambi Corro III

    great job on the article! i’m amazed on how you read the flow of my eyes from your diagrams. thanks and will be applying this onto my upcoming projects. cheers!

  • Pingback: Client vs. Designer: Four Lessons to Win the Battle « N4MG Themes Scripts and Webmaster()

  • Pingback: Wojna: Klient vs Designer()

  • Pingback: Visual hierarchy: Lecture summary & Resources « CGT 256 Spring 2011()

  • Pingback: Web Design & Web Development - Wood Street, Inc.()

  • Chalky

    I found this article useful for a slightly different purpose. I am a teacher and am currently teaching my students about finding the main idea in a text. I want them to discern what is important in order to grasp meaning and what is less important. I am using websites as an example to get them thinking about how web designers get their important information across in, as you say, only a few seconds.
    Thank you for this article, it is a concise introduction to this concept.

  • Pingback: The Good, the Bad and the Not So Ugly of Slate | NetJourno()

  • http://inspiredkiwi.com/ Parth

    Really useful and nice article!

  • haydyn

    I’m a bit late to this article, bit just wanted to say an effective way to deal with visual hierarchy is to take the section you are working on and split it up into sections, give each one a percentage for visual weight and design accordingly. It’s a methodical tedious method but it can ensure you focus your aesthetics on elements that matter the most rather than second guessing.

  • Pingback: 45+ Free Lessons In Graphic Design Theory()

  • Pingback: Sacima鲨鳍马工作室 » Blog Archive » 45+ Free Lessons In Graphic Design Theory()

  • Pingback: 7Maximes-News For Designers & Web Developers()

  • Pingback: » CGT 512 Reading Summary and Reflection: Writing for the Web The Social Transistor()

  • Pingback: Free Lessons In Graphic Design Theory | VapvaruN | Wp Experts()

  • Pingback: Как использовать визуальную иерархию в веб-дизайне | Юзабилист()

  • Pingback: Tips de diseño web: Jerarquía()

  • Pingback: Design for Non-Designers | Choyce Design()

  • Pingback: Unit 2 Reading | Jo Jarvis()

  • Pingback: Unit 2 Reading Response | Andrea Lawrence()

Subscribe
Membership
About the Author