In the previous step we looked at Personas. In this section we will look at Wireframes.

Download a PDF version of this lesson (10k) Wireframes. This lesson is a sample from the manual.

• Wireframes are hierarchical menu sketches that structure content and contain the objectives, bullet information points, title, keywords and calls to action for every proposed page on your website.
  A simple mock-up pad makes this process easier. To create a wireframe:
• Make 20 or 30 copies of the mock-up sheet;
• Conduct a brainstorming session (check our website for details how to do this effectively);
• Write bullet points for every page;
• Once you’re satisfied with the bullet points captured, arrange them on a large table in the menu structure proposed for the website;
• Try rearranging the sheets in various combinations until you are satisfied with the menu structure;
• Label and number the pages using the layer, order and parent boxes.

Grey Scale Storyboard

A storyboard is a series of illustrations that represents the steps involved in interacting with the website. It’s a good way to make sure all the steps of a process make sense. Colour can distort the objectivity of the reviewer so the first review of your website should be done in monochrome so you can confirm the following:

• What the websites pages will look like if customers choose to print them in black and white.
• The judicious use of white space in the design.
• The navigation structure for ease of use.
• The design and process is accurate and complete.
   

Colour Pages

Colour invokes emotion that tends to distort a user’s perspective, so review colour pages only once you are satisfied with the grey scale.
 

Click here to return to DotNetNuke session contents.

or Click here to go on to the next step of  Scan and Skim.