In the design world, the word ‘hierarchy’ is used to explain the order of importance that particular elements have. This applies to all kinds of art in ways you might not always expect – even a photograph of a landscape for instance will have a hierarchy as your eyes will naturally be drawn to some elements before others. You’ll probably follow the garden path with your eyes for instance to see the house in the background first, or you might see that some elements are just out of focus lending more prominence to the items in front.
In web design hierarchy is particularly important because you have so many different interactive elements to consider. A typical web design will include content, it will include borders and images and it may also include videos and forms. All this can be a literally overwhelming for a visitor, unless there is a clear hierarchy to help guide them through each of the items.
So how do you enforce this hierarchy and guide your visitors through your site? Here we will look at some of the ways you can add order to the chaos.
Contrast can be used to separate one element from another. This can mean a contrast in colour, or just a contrast in shape. Without this though, all of your different elements will blend into one another making it hard for people to know where one item ends and another begins. If nothing else, make sure that you have a border around these aspects so that they are viewed separately.
Now that each item has definitive boundaries, you can make one item more important by giving it more space on the page. The bigger the item of course, the more important it will be presumed to be and the less important the other smaller elements will seem.
A well designed website should use a colour code as part of its organization. You can achieve this by using a ‘base’ colour, with separate elements on top of it. If you have a white background for instance, then black text will stand out most because it has the most contrast. You can then use grey as a ‘secondary’ colour to mark sub headings and other things that you don’t want to draw as much attention to. Any colours with similar relationships on the colour wheel will work this way.
If something is very simple we will often tend to presume it offers less of importance than something complex – as complexity suggests interest. On a page full of blank shapes, our eyes would automatically be guided to the one complicated image on the page for instance. Avoid having too many complicated elements share a space as it will leave the visitors unable to decide where to look.
The position items have on your page will also make them seem more important or less so. Design throughout the ages has taught us that the most important thing will normally be the thing in the middle of the page and sometimes the thing at the top of the page. These are the two places we’ll look then to find out what the focus of a layout is, so that’s where you need to place your most crucial features.
- License: Creative Commons image source
- License: Royalty Free or iStock source: http://pixabay.com/static/uploads/photo/2012/12/24/08/39/background-72243_150.jpg
- License: Royalty Free or iStock source: http://pixabay.com/static/uploads/photo/2012/04/10/23/40/flat-27085_150.png
Author of this post, Mike K; is an internet marketing consultant in a leading web development firm. Analyzing websites is part and parcel of his job and knows all the key factors that help a website get noticed. So, he has talked about few of those aspects in this article.