NED11: Module 4

Notes from Unit Outline
Visual hierarchy is the arrangement of elements according to importance and emphasis. When building a website you need to decide the order of importance for each piece of information. Things to remember when designing your hierarchy:

• Most people scan websites from top left to bottom right
• They tend to look for larger items first
• They are attracted to bright colours first
• They look at items which appear 'heavier' first
• They look at moving elements before static ones
• Finally, most people tend to look at moving images of another human (such as a video) before moving onto the other elements

Information courtesy of Graham, L. 1999, The Principles of Interactive Design,1st edn, Delmar Publishers, Albany, New York http://www.desktopcafe.com

Visual techniques you can use to emphasise the focal point in your visual hierarchy:

• Make it the biggest and brightest
• Enclose the item in a different shape to the other elements
• Add a border around it or change the colour
• Isolate it from the other elements or add a special effect

Information courtesy of Landa, R 1996 Graphic Design Solutions 1st edn, Delmar Publishers, Albany, New York. 

A very useful tool for web designers is to use a program called a wireframe. A wireframe is a diagram which illustrates the layout of a webpage using different shapes to represent content, function, and navigational elements to show their place on the page. When designing a wireframe, consider the following:

• global navigation - should appear consistently on every page and refers to the major sections of the website, not every single page
• local navigation - a submenu of links within each major section of the site. It should appear near the top AND at the bottom of every page
• page specific content - includes headers, sub headers, text and images. The most prominent content should appear in the centre of the page
• administrative navigation - also called utility information and includes site map, help, contact us and/or about us sections
• page title - best format is: site name: section name: page name. 40 characters is a good limit
• search capability - because some people can't be bothered browsing, it is useful to include search facilities on your site
• page footers - be consistent with style and position.