Laying out the grid:

Create a layout grid based on a unit of 95 with a 10 pixel gutter example below. This grid was inspired by the grid background subtraction.com In 2004, the grid was hot pink. Today the grid is invisible.

Layout Resources in Visio

These are all listed on the Information Architecture Institute's Tools project page, along with many, many other tools and resources. Below, I have copied the links to the tools which will be useful for our course and this project.

Wireframe Templates

Templates used in creating wireframes are available for your use.

• LombardiWireframe.vst (177 kb, for Visio) 
• LombardiWireframe.vdx (754 kb, for importing into Omnigraffle) 
• LombardiWireframe.pdf (16 kb, for viewing or importing into Illustrator) 

• SmithWireframe.vst (147 kb)
• SmithWireframe.vdx (1 MB, for importing into Omnigraffle)
• SmithWireframe.pdf (11 kb, for viewing or importing into Illustrator)

• WarfelWireframe.ai (660 kb) (Illustrator) 
• WarfelWireframe.pdf (5.1 MB)

• CavazzaWireframe.ppt (120 kb) (Powerpoint)
• CavazzaWireframe.pdf (496 kb)

• GarrettDimon_Wireframes_2003.vsd (Visio 2003, 733 kb)
• GarrettDimon_Wireframes_2002.vsd (Visio 2002, 692 kb)
  

Wireframe Stencils

• GarrettDimon_IA_Stencil_2003.vss (Visio 2003, 276 kb)
• GarrettDimon_IA_Stencil_2002.vss (Visio 2002, 252 kb)

Assignment:

The purpose of this assignment is to learn the tools, NOT to make an original design.

Select one of the sites listed below and create a wireframe of the site. You can use visio or photoshop, whichever you are most comfortable with.

• ATT wireless
• Guggenheim Museum - Venice

Background grid (this page)

 

The grid from subtraction.com

Example set of deliverables

Christina Wodtke produced this set of deliverables--personas, conceptual model, site map and wireframes (3.3 MB)

Page Description Diagram (PDD)

• Article on creating PDDs by Dan Brown
• Example PDD