Blog

What is “Visual Hierarchy” and Why is it Important for Websites?

When designing for the web, some of the most important decisions we, as designers, have to make concern visual hierarchy. What does that mean, exactly? Let’s explain:

Most people understand and expect to see certain elements in certain places on a website. For example, your logo typically resides in the same place on all pages of your site. Usually we place the logo in the header, often in the upper-left corner. It serves two functions up there:

  1. People will know that they’re on your site, which reinforces your brand.
  2. It acts as a button to get back to the homepage from anywhere on the site.

Your logo is important, so the size and placement is top-left where the eye tends to automatically go first. But other content may be equally if not more crucial to convey. On e-commerce sites, logos tend to be relatively small so that the visitor’s eye goes to product offers first.

It is also important to size your text with visual hierarchy. When writing copy, think about priority. What is the first thing you want people to read on the page? What is the second thing, third etc.? Make a list.

When everything is on the same visual level, you overload and confuse the viewer. Create a focal point.

Examples
A good example of visual hierarchy is an interior furnishings website called Aria.

Aria_650px

The focus is clearly on selling contemporary furniture. You’ll notice that there is a very clear structural hierarchy: in the main slider there is very large copy prompting the audience to explore the site further. Next, the logo is in the top left, followed by clean navigation elements. Below the slider are some featured products as well as some news items. Found in the footer is some basic company information and links to all the other sections of the site. There’s no question about where to look next. Within seconds you are able to understand what the company focuses on and what they can do for you: sell you furniture.

 


 

Another example of strong visual hierarchy is Todd & Weld, a law firm website that Clockwork recently designed.

T&W_650px

Very different in style from the Aria site, Todd & Weld has a modern, geometric approach that works nicely with the logo we created. The flow of the site is easy to understand: the slider displays large headlines paired with custom photography of the attorneys at the firm, the logo is in the obvious top left position, site-wide and attorney search fields are in the upper-right of the header, introductory copy, spotlights, and news items all have large headlines that make scanning easy. Additionally, the footer works as a second way to navigate the site.