Advertisement
Design Theory

An Introduction to Hierarchy

by

Ensuring that your designs present a clear hierarchy is very important, and something that you should aim for in every one of your designs. There’s definitely an art to this, one which relates heavily back to your content planning and strategy stage.


What is Hierarchy?

A hierarchy can be described as:

A system or organization in which people or groups are ranked one above the other according to status or authority.

And when we translate this to how hierarchy works in design, we can adapt it a little to something like this:

A system or organisation in which the elements in our design are ranked one above the other according to status or importance.

By establishing a hierarchy we are aiming to display all of the different elements in our design effectively, according to how important they are and what level of focus or attention needs to be placed on them.

Hierarchy is also about storytelling; it’s about our user’s journey through the website and the user flow we create. We can leverage a strong hierarchy when trying to get our users to go where we want them to go.

Hierarchy also relates not only to the visual layout of our elements, but also the site structure to begin with, where we rely on the planning we did in our content stages. It’s at this point we can look at the content hierarchy, how the content should be split and managed and that helps us to move to our visual hierarchy and structure, where we look at the main layouts, grids, typography and imagery such as icons, buttons and photos.

barley-1
In the Barley design, they use hierarchy very well, using both content and imagery to convey their messages.

In the Barley design, they use hierarchy very well, using both content and imagery to convey their messages.

Why is Hierarchy So Important?

Hierarchy is important because it helps to provide order to a design and ensure that a stronger, more unified brand message is projected to the users.

Hierarchy also helps us to create areas that are visually interesting to our users, in turn helping us to direct the users on their journey around the website. When used in this way, having a good visual hierarchy in place can help you to highlight the areas that you want to be noticed. In creating a strong hierarchy and visual structure, you are also properly emphasising important areas and illustrating why they matter.

When used correctly, a clear hierarchy helps to establish a proper pattern of interaction, assisting your user journey. It can also make it easier for your users to make decisions and to understand properly how they should interact with your website.

zendesk-1
The Zendesk uses a lot of space, as well as good use of different styles of typography and imagery, to help guide the user through their key features.

The Zendesk website uses a lot of space, as well as good use of different styles of typography and imagery, to help guide the user through their key features.

Tools for Establishing Hierarchy

There are many different tools and techniques at your disposal to establish a good visual hierarchy in your design:

  • the use of colour
  • the use of contrast
  • the use of size
  • the use of alignment
  • the use of repetition
  • the use of proximity
  • the use of whitespace

These will all be mentioned in further detail, along with how to properly use each one, in the coming hierarchy articles where we will focus on both content and visual hierarchy structures.

Related Posts
  • Web Design
    Complete Websites
    Design a Travel Startup Landing Page Using PhotoshopLanding thumb
    In this tutorial I’ll walk you through a process of creating a simple and clean travel startup landing page design. I'll be using Photoshop CS6 to design a professional and lightweight layout combining beautiful imagery and some stylish fonts.Read More…
  • Web Design
    Design Theory
    Building Visual Hierarchy into Your DesignsDsfd hierarchy visual retina
    It’s important to remember that hierarchy has not only to do with content and the words that you have on a page. The imagery you include in your designs, from photos through to icons, buttons and any other visual elements other than text, has a big impact on the hierarchy and perception of your website.Read More…
  • Web Design
    Design Theory
    Building Content Hierarchy Through DesignDsfd hierarchy content retina
    Way back at the beginning of this series, we talked a lot about content and the importance content has in any design work. It’s something that should obviously be looked at and sorted through before you start any project, but you only get to see the real results of this work once you begin designing.Read More…
  • Web Design
    Design Theory
    Building Consistency and Relationships into Your DesignsDsfd relationships retina
    One key part of composition is understanding how to build consistency into your designs and how to display the relationships between each of the elements on the page.Read More…
  • Web Design
    Design Theory
    Adding Space to Your DesignsDsfd adding space retina
    Let’s get the basic stuff out of the way first. Whitespace isn’t simply a block of space in your design that has to be white. Instead, think of it more like structural “empty” space, where no extra elements, embellishments or other parts to your design are placed.Read More…
  • Web Design
    Design Theory
    Typography Basics for DevelopersDsfd typography retina
    Typography is a fundamental element in any design that you work on. The main reason we have websites in the first place is to display information, and for that information to be consumed by users who come across it. While there may be many other elements to a website, at the core is content. That content needs to be easily read, digested, understood and having a solid typographic base will only help with that.Read More…