Design Document: Wireframing

We nearly have all the pieces we need to get this job rolling. The why, who, what and when's have all been answered. How is left.

The visual design will help the user to:

  • know where they are in the site
  • know where they have been
  • know how to get to where they want to go
  • visualize a mental map of the site
  • create a cohesive, uniform and hopefully professional look to the site

Layout Grids

-are templates that describe the page

You need to block out space for:

  • content - this is why the user is here, should be prominent
  • global navigation
  • local navigation
  • branding
  • miscellaneous info - copyright, partners

The process:

From your site structure listing, determine all possible page types.

(These can be regular content pages, forms pages, interactive pages, etc.)

Try to develop two or three grids of generic page types.

Global navigation has to be consistent site wide

Local navigation can change, however, it should be as consistent as possible

The goal here is to develop a layout grid that no matter what the content might be, it will fit within the grid. It will need to be scalable.

view in seperate window


modifed: 2007-05-02
Google
web www.digitalvertebrae.com
Exercises
The exercises for this week are listed below and available in PDF or MS Word formats.
HTML: Build a Three Page Site
 
©2009 Web Site Development: an introduction