Visual Hierarchy and Your Website

Your website is a tool to communicate with your users. Sometimes, however, we have so much that we want to communicate that the message gets lost along the way. The best way to make sure we are able to communicate our message clearly is by using visual hierarchy in our website.

Visual hierarchy – how you organize and visually prioritize elements on each web page – helps with comprehension and guides users through the story that you want to tell. It shows users what they should look at first, as well as helping them determine if your page has the information they are looking for, and where that information is located. Because of this, when creating or updating your website, visual hierarchy is one of the most important things that you should consider for each page.

For myself, I find that an easy way to determine the visual hierarchy of a web page is by going through the following steps:

• Collect all the content that is going to be on a page (I'm talking everything – all of the text, the images, the calls to action)
• Decide what is most important and relevant for the site's users, then what is next most important, and next, etc. (i.e., a heading is important because the user needs to know what this page is about)
• Decide if the users should do something and what that something is (ie – a call to action is important if you want the user to contact you about information on the page)