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 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!
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. So lets break this down into “maps” or define the “z eye flow” paths.
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.
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 ).
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.
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.
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).
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.
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.
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.
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.
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.