Are you new to Designerside? You should subscribe to our RSS feed so you can keep up with our great content. Thanks for stopping by!

Messages in graphic bottles

Design hierarchy is all about the importance of visual information and giving it assigning levels of importance to make the message of the design get across. Graphic design can be distilled down to it’s core by saying it is about visual information management. You use the layout, graphical elements and typography to create a journey for your viewer. By effectively learning to use design hierarchy you add sophistication to your design by directing where your viewers go. More than likely the majority of design hierarchy designs you will make will actually be sub conscious ones.

All roads lead to the focal point

Design hierarchy can also be seen as ‘hierarchy of elements’ - the placing of elements to establish a focal point. With modern design there is invariably more than one focal point, the skill is guiding the eye through these points on the design journey. If you think of focal points as anchors to your message which you use to guide the eye about the design. There doesn’t have to just be one focal point, a design can have many and each focal point may even be part of the hierarchy by leading down a focal point importance chain.

Chop up your chunks

A design is a mass of information, by using design hierarchy you translate this information into chunks that are dealt in priority by the eye. A tip is to take all your design contents and think about what you want your reader to do. What do you want them to see first? What do you want them to understand? What do you want their actions to be? Use design hierarchy to break down the steps to achieving the goal and distilling the mass of information into a clear message at the end of the journey. If it’s several messages then lead from one the other easily using a hierarchy and focal points.

There can be more than one

Design hierarchy on the web is taken a stage further as you have to think about the entire site not just one instance of a page. By thinking about and leading through the site using the tools of design hierarchy you are able to guide the entire website journey. You use design elements to denote sections, give value to areas and unite the design.

Tallest first

By using a design hierarchy you are creating an order of importance of the visual elements. You have to also bare in mind how your design will be read. Text is read in western cultures left to right from top to bottom, use this to interpret your visual hierarchy. Say, you have something that is actually at the bottom and you want it to be a focal point. Make it stand out and the eye when going down the page will jump over lesser elements to that one. Also think about your content and arrange this to create your hierarchy.

Tool time

The key to a good design hierarchy is that it’s a natural flow and doesn’t feel forced. To get a hierarchy you have several tools you can use. These are various techniques you can apply to your design.

1. Contrast
   By balancing your site using contrast you are able to add focus and draw the reader to specific points of your design. Think about what draws your eye to a web page. This is using contrast in design hierarchy. A design with no contrast is a mass of flat information, nothing stands out. By using colour and hue you are able to guide and create a visual hierarchy.

   The flip-side of this grey mass of no contrast is of course the migraine inducing mess of graphics and typography in more colours and hues than a psychedelic rainbow. It’s the same usual story with design - balance. By intelligently placing contrast to create a visual balance and tip toward the hierarchy your design will be easier to follow and get the message across better.

2. Element balancing
   Elements also need to be balanced to create the design hierarchy. You are affected by what audience you are aiming to of course in the selection of elements. Eyes are drawn to images or large text. By using these elements you can focus in parts of your design. A big glossy image will attract a visitor and the biggest text line will mean you read this first. When presented with a mass of information the human eye naturally locks onto prominent elements. Think about what stands out and what you want to stand out. Your audience will also be lead in the same way you are.
3. Whitespace
   By using whitespace you can filter the information and segment your design. Space in a design lets the elements breathe and also draws attention to the separation of parts into logical forms.
4. Leading focus
   By leading into say a block of text with a bold, larger header you are able to sum up that text and then draw the reader into the content. This is a great way to break up the design. You can also use graphical elements to lead the eye. Lines can be directed to draw the reader. Often when leading to the focal point it is best to be subtler than hitting them over the head with big arrow pointing.
5. Proportion
   By using the relative sizing of elements and placing these in your design you can give it form and sense. It might be a large glossy photograph to focus at the header, or a repeated proportion of icon images to graphically denote meaning on the design. You can use the same logic you would use on typography to go from large to small images as you go down the hierarchy.
6. Relationships
   By creating areas that are designed in a similar style you are able to unite these parts and cement their relationship visually. Users when viewing a mass of information build mental models to assess relations among topics - you can create and lead this relationships by uniting elements through design. You can use icons here again to link elements with the same meaning or section to them.

Tie it up all in pretty pixels

Design hierarchy has balance at it’s core. By treading a tight rope of design elements you are able to make sense of your design. Viewers won’t end up confused, but will have the ability to digest and understand your meaning. A fair few of the decisions you’d make regarding design hierarchy are probably things you naturally do when designing. By introducing some basic tools of design hierarchy you will bring more usability and power to your design.