Visual Hierarchy in Web Design

On a daily basis I view all sorts of websites and all kinds of designs. One thing in common with successful templates on ThemeForest or with websites around the web is strong visual hierarchy. Often times I see templates that have a great concept going but has poor visual hierarchy. I’ll cover what visual hierarchy is and some great examples in this article.

Visual Hierarchy

Visual hierarchy is the visual cues of content based on importance to help a visitor process information (most commonly used in cartography). In a way, a website is just a map, a map of information in which you need to help your visitors view and process the information you are presenting based on importance.

Human visual perception uses visual hierarchy every day in natural life to take visual cues and create a mental model or map to process information more efficiently. This is why visual hierarchy is so important in web design, especially since humans have such a short attention span!

Some visual cues in life and web design are:

  • Size
  • Color
  • Contrast
  • Shape
  • Position
  • “whitespace”

A great example of visual hierarchy that is used on just about every website is headings (h1, h2, h3, etc.) which indicate importance of information and are usually styled in such a way that they visually guide a visitor from h1 (most important) down to the least important content.

Designers that use barely distinguishable headings or other visual cues produce designs that are more difficult to process the presented information. A potential buyer of your web template, business product or even just a person looking for a bit of information will quickly disregard a design with poor visual hierarchy. You’ll loose a potential buyer, client, subscriber or viewer.

Usually visual hierarchy will create a “z eye flow” which can be broken down into smaller chunks to reveal separate visual hierarchy “maps” to navigate the smaller chunks of information. In the following examples I will explain my view of each visual hierarchy and I want you to examine each image to map the “z eye flow” path.

Examples of Visual Hierarchy in Web Design

Before we get started on examples, a really great post to read is “Common Mistakes in Web Design” which has fantastic examples of visual hierarchy using cues such as font types and sizes, colors, spacing and alignment.

Theme Forest Blog

A really great example of visual hierarchy is the very blog you’re reading. :-D So lets break this down into “maps” or define the “z eye flow” paths.

ThemeForest.net Blog Visual Hierarchy Example

As you can see, the logo “In The Woods” grabs your attention first using size, color, contrast, position and “whitespace”. Then the placement, size and contrast of “Theme Forest” in the right of the header draws brief peripheral focus while allowing your attention to quickly focus on the first blog post’s heading within he main content column.

Note: Not everyone will view a design in the same way, this is just the way I’ve viewed it. It will also depend on proportions. This example image is smaller than the full sized view and could result in a slightly different perception of hierarchy.

We can jump right into a “second level” visual hierarchy within the main content column as well.

ThemeForest.net Blog Visual Hierarchy Example

You can see that plenty of visual cues, as mentioned above, are hard at work creating a fluent visual hierarchy that makes processing the information presented here easy and enjoyable (which is another reason why you should subscribe to this blog if you haven’t already :-D ).

The hierarchy we see here guides our focus in order of importance from primary heading, introduction image, author and category, introduction paragraph, secondary heading, etc.

You can also see that the secondary heading defines a section of content which can also be broken down into yet another visual hierarchy which uses bold, highlighted and/or underlined text as visual cues to indicate importance.

Nettuts+

Another really great example is Nettuts+ and the rest of the tuts+ family of websites.

net.tutsplus.com Visual Hierarchy Example

As you can see, the logo is prominent and attracts focus using color, size, placement and “whitespace” while the header as a whole is balanced with the other elements on the right. The header as a whole section uses contrast to create a hierarchy in relation to the sidebar, main content and footer sections.

net.tutsplus.com Visual Hierarchy Example

Even the logo has visual hierarchy within itself. The “tuts+” portion has a slightly brighter border and background making it subtly more prominent to emphasize the additional meaning behind “tuts+”. Just to the right, separated by “whitespace”, is a much smaller “tuts+” logo using color (a beautiful stop color, red) and contrast to create a relationship between these two elements and in turn guiding visitors to the desired destination (to click and see what else is in the network).

net.tutsplus.com Visual Hierarchy Example

They even take it a step further to solidify the “tuts+” in the visitors mind by using a creative, colorful and large image in the sidebar with brief information and functionality to follow. This small section in the sidebar can even be broken down into its own visual hierarchy but I’ll let you examine that yourself. ;-)

net.tutsplus.com Visual Hierarchy Example

Navigating slightly further down the page we see that the main content and the sidebar are separated nicely using contrast, “whitespace”, and element sizing. The main content is the primary focus followed by the sidebar content.

net.tutsplus.com Visual Hierarchy Example

Breaking down into the main content you can see that each section (post) is nicely separated creating organized and easy to process blocks of information. Each block of information breaks down into a large, colorful and visually appealing image which we focus on first.

Then we immediately focus on the heading followed by post information (author, post date, category) and the comment count. This is accomplished using contrast, size, color and positioning. The last information we focus on is the post introduction paragraph and a link to continue reading.

net.tutsplus.com Visual Hierarchy Example

Even the footer breaks down into a beautiful visual hierarchy that makes it easy to view and process extra information most people would otherwise never read. Take a minute or two and find the visual cues they’ve used to accomplish this.

Conclusion

Hopefully at this point you have a pretty good idea of what visual hierarchy is and the visual cues you can use in your own designs. I didn’t post examples of bad visual hierarchy which means you need to take a few minutes and check out the article I mentioned earlier; “Common Mistakes in Web Design“. This article has some really great examples of poorly used visual cues which fail to accomplish a visual hierarchy as well as opposite examples showing properly used visual cues.

You might also take some time to browse through Theme Forest’s templates and themes. You’ll often notice that designs with strong visual hierarchy sell much better than those with poor visual hierarchy. Your goal should generally be to design in such a way that your viewers do not need to use their brain power to navigate your information, in effect you’re doing it for them.



22

Comments
  • Meshach says:

    Nice article, thanks!

  • Brandon says:

    Great article – it’s always helpful to see reminders of just how detailed this can get (ie: increase the brightness of the stroke around a logo by 10%)… these are all things that happen subconsciously in most cases, but taking the time to down the visual ranking system on any design is generally a good practice for any designer.

  • Mohammad says:

    Very Nice,

    Your previous post of “Common Mistakes…” is even more essential.

    I like this kind of fine but critical touches, they have a great effect on the final layout.

    Excellent examples you chose, tuts sites have a great interface.

    Thanks.

  • Marko says:

    Good article. Thanks, I’ll reference this to some designers i know :)

  • Carlo says:

    Great post, this a make or brake factor in web design [and easily adopted to general design and layout]. Will most def get some friends some o’ this food for though, hope they’ll wisely swallow!

  • dadmtb says:

    Very good article ;)

  • Maicon says:

    When exist so much infos, visual hierarchy is all. Good Tut.

  • Shibi Kannan says:

    Very nice informative article. But not the stuff required to call it a full pledged tut. Longer articles please

  • Sathish says:

    Great article. I may use some of the points from here to speak to my clients :D

  • Merxhan says:

    There is not so technical information about hireachy, just some visual description the websites i visit every day.
    I think some articles are pretty much the same. I thought I would read about something more about development, like coding techniques, options, classification, comparing and stuff.

    Anyway nice article, Thanks

  • Good Stuff here. Very sharp and detail oriented.

  • Good article. Thanks..

  • anonymous says:

    Good article, but even though your blog is thaaaaaat marvellous and cool designed, you are not using any H1 tag, which is essential and basic, also for SEO purposes.

    In my opinion, an article doesn’t denote neither seriousness nor credibility when the research study is only based in 2 sites, and one of those is your own blog…

    I did expect a bit more objectivity and a less conceit…

  • this is awesome! very detailed!

  • e11world says:

    I guess many designers and developers have this concept in mind but don’t actually implement it (all the time or well enough to show). Not to mention that clients will not always agree with the designer/developer.
    Nice article. Thanks!

  • mojito says:

    Nice that hierarchy itself was mentioned and its importance, but I expected sth more “deep”… Don’t be afraid of putting more theory here, ideas, reaserches. Webdesign and design is already a science, with lots of books and stuff – we have no time to search, read, mayby fully understand. I hope all the envato tut site will move further into this direction – help us making friends with webdesign science :)

    Thanks for the post :)

  • Kate Mag says:

    Straight to the point article, enjoy read it! Thanks a lot

  • Roberto says:

    Good explanation. Thanks!

  • Monit says:

    Very Nice

    I loved it, real useful info.

    -Monit

  • Thanks for sharing this post….very nice

  • Vishu says:

    Thanks for the wonderfully useful post :) , it’ll sure help me improve & be able to make those visually appealing designs we all love ! :D

  • Ramesh says:

    Well written, thanks!