Designing Your Site: Visual Hierarchy

Principle 2:
Visual Hierarchy

Visual hierarchy is the order or sequence in which our eye moves and perceives the things it sees. When it comes to a web page, the visual hierarchy can be referred to the sequence in which our eye moves from one topic/content/block to another. When designing a web page, a designer first needs to identify the order of importance of the various topics and then place them in such a way that the visitors first view what is most important and then move onto the others in a hierarchical manner.
There are two ways to create a visual hierarchy, and they are given as follows:

• Size hierarchy – As the name suggests, size hierarchy is the kind of hierarchy in which the most important content or image is of the largest size on a webpage, followed by the second most important content or image in the second largest size and so on. The distinction in sizes should be such that a visitor would view the items in the order of importance, and the pecking order of things is obvious.
• Content hierarchy – Besides the hierarchy of size, which is one of the best ways to create the order of importance, another way you can incorporate this principle is by creating a hierarchy of content. You can place content in such a way that the human eye first travels to the content that is most important, for example, the business’s objective or purpose and then moves to the less important content blocks in a hierarchical order.
• Notes about Luenendock's visual Hierarchy:
  • Content hierarchy is probably not as powerful a means of controlling audience attention as is size hierarchy.  Interest in content will vary from user to user.
  • Striking elements: There is a third means of guiding attention, which is to make an element striking or different from other elements on the page.  If all of the elements on the page are green, and one adds a red element, then, regardless of size, that element will take the attention.

​What about your site:
Have you successfully choreographed your audience's experience?

1 = Eye does not know where to go first or second...
10 = highly choreographed - Audience follows a natural and easy path based on visual hierarchy.

How might you improve on the visual hierarchy of your site.  Add this to your ePortfolio "to do" list.

Examples

NO
http://art.yale.edu/ A real site by Yale University Art Department.  Yup.  The whole thing is a striking element making it difficult to determine what IS content.  
http://www.irishwrecksonline.net/
Hard to determine where to go to enter the site.  If the linked icon were larger, more striking, and more obvious, it would be better.
http://www.007museum.com/
A site full of striking elements.

YES

http://www.mixd.co.uk/
Colour and size of striking image draws your attention.
http://ezorzi.com/
Beautiful and simple.  You get an almost immediate sense of the designer from the home page.
http://www.emilianobarri.com/
Striking imagery and visual appeal. ​

​Adapted from an article by Martin Luenendonk for Entrepreneurial Insights (June 3, 2015) with permission from the author. (http://www.entrepreneurial-insights.com/web-design-principles-successful-websites/).