- inls490-127 - Information Architecture -
  home Units: 1 2 3 4 5 Schedule Resources
-

Module 5 - Deliverables and Page Design

Due Friday:

  1. Site Mission and Goals
  2. Vision Statement
  3. Audience Definition
  4. Competitive Analysis
  5. Site Inventory and Content Map
  6. Personas
  7. User Flow Diagram
  8. Wireframes
  9. Revised Site Structure (Content map)

Readings

For Monday:

For Tuesday:

For Wednesday & Thursday:

Recommended Readings

Lecture Notes:

Assignment:

1 - Wireframes

The term wireframe refers to a rough or general outline of something. In the context of Information Architecture, wireframes are schematic (or diagrammatic) representation of representation of the navigation, interactivity and content of web page. Wireframes are rough drawings; tools for thinking and discussing.

Types of wireframes

As the design of the web site proceeds, the wireframes will go through several iterations, beginning with very rough boxy sketches and moving through increasingly defined sketches. The wire frame is never developed to the level of a graphic design, but rather is a communication tool that will be given to the graphics team.

Wireframes are created typically as a set, with different wireframes demonstrating the elements of the various major page groups. Most web design proposals would include the following wireframes:

Assignment: Wireframe (schematic page layout)

Due: in your deliverables submittal at the end of the semester.

You have done your analysis, now we are going to begin to propose how to turn this site around. What do you want to do about the home page? Is it almost perfect, or absolutely horrendous? Your assignment is to create a wireframe proposing changes to the homepage with will implement the goals and visions that you collected in the mission, goals and audience definition

Your final wireframe should be able to be printed out on 8.5 x 11 paper. If your pages scrolls, it may take more than one sheet.

Pick your software:

At this point in time, there is no single software package that is universally agreed upon as the perfect IA tool. For serious IA or usability work, most people use Visio or Omnigraffle. HTML Is less frequently used for wireframing because of the tendency of the client to assume that the look and intersection is literal. That is, what he sees in the wireframe bears a strong resemblance to the final web site. This can be confusing and/or frustrating. There is a growing list of emerging IA software tools, which include wireframing among their capabilities. AxureRP and Adobe Thermo are some of the IA specific software tools that are emerging.

A short list of software options below.

Visio is probably the most popular software package for information architects. If you think that you want to pursue IA further, it is well worth your time to learn the basics. However, it is not a particularly intuitive software package and has a bit of a learning curve. Omnigraffle is a similar tool for the Mac.

There are a number of templates available which will ease the creation of wireframes (hint: use the shift key when resizing objects). Henrik Olsen has provided a very clear tutorial: Visio - the interaction designer's nail gun and set of templates and shapes ('GUUUI Web Prototyping Tool'). This will take you through creating a wireframe in Visio.
The IA institute Tools collection offers several shape stencils and templates for Visio.

Powerpoint is a familiar interface to most of us which has the graphics tools to create the basic shapes that are needed in a wireframe. Frederic Cavazza has created a Powerpoint wireframe template with shapes that you can use to create your wireframe assignment. Paul Hibbits offers some alternative shapes that you can use in your wireframe.

cavazza cavazza

CavazzaWireframe.ppt

hibbits

Paul Hibbits' PPT widgets only - no templates

Adobe Illustrator, InDesign (or Photoshop) are good choices for highly defined wireframes. You can begin to specify grids and proportions. If your client is working with a content management software package (such as dual has defined layout limitations, Illustrator will allow you to easier create grid based proportional wireframes.
Note: In using these packages, you need to be aware of any potential boundaries between the IA team and the design team.
UX matters has a tutorial on wireframing in Illustrator or InDesign. Within that article is a link to their templates.
AiBurn has a tutorial on Wireframing using Illustrator by Sean Hodge
The IA institute Tools collection offers several shape stencils and templates for Adobe Illustrator.

Word or Excel: Both programs have drawing tools, though neither is really set up for creating a drawing of this scale. Still it can be done - and most everyone has access to Microsoft Office.

2 - Revised Content Map

This is an update of the content map that you created previously. This version of the map will reflect the reorganization and changes that you have made. These changes will be based on our decisions regarding the structuring of the content and on your observations made during the cardsorting exercise.

It will probably be easiest to create this by making, in Excel<a new content list which refelcts the proposed changes in site navigation. This is the two column list with the headers of Name and Relates_to. Then let Visio generate your revised content map.

Use color coding or other graphic indicator to indicate new or revised structures. In this map, you will need to show:

  1. the top level (home page)
  2. secondary or landing pages
  3. third level (or repeating pages)

Show any revised labels for the pages. Indicate graphically (color or font type) which labels:

-