Webdesigntuts+

---

An Introduction to Hierarchy Posted: 30 Sep 2013 04:31 AM PDT 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. 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. 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.

You are subscribed to email updates from Webdesigntuts+ To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610