Wireframes and Prototypes

 

Moving from the strategy, and scope we shift onto designing the structure and skeleton for Project 1. At this stage we begin to decide how content and pages are connected and where content (i.e. various levels of navigation, copy, pictures, video, etc.) live. This is done using information architecture and wireframes.

Information Architecture

An information architecture simply shows how your pages are connected using one of four architectural types: Hierarchical, Matrix, Organic or Sequential.

Hierarchical Structures

In Hierarchical Structures, also known as tree structures, there is a top down approach or parent/child relationships between pieces of information.  Users start with broader categories of information (parent) and then drill further down into the structure to find narrower, more detailed information (child).

Matrix Structures

A Matrix Structure allows users to determine their own path since content is linked in numerous ways. This type of structure takes full advantage of the principles behind hypertext.  For example, one user could choose to navigate through a set of content based on date while another navigates based on topic or catagory.

Organic

An Organic Structure encourages users to explore, and like Matrix takes full advantage of the principles behind hypertext. Pages are connected based on content but have no hierarchy and are not categorized.

Sequential Structures

Websites with Sequential Structures require users to go step-by-step, following a specific path through content.

Archicture Examples

Wireframes

These are simple drawings that indicate where content and interface elements go. The gallery shows a few examples.

Later stage wireframes are cleaned up using photoshop or illustrator. Wireframe Examples.pdf

Paper Prototypes

Prototyping can bring a site to life without a line of code or pixel pushed across a screen. This phase of the process allow designers to test elements of their site, discover how a user might interact with it and quickly make changes. Further this can lead iterations to evolve more quickly, and help designers spot design flaws before they become bugs.

IDEO on Prototyping

Google on Prototyping

The videos show two websites being tested through paper prototyping.

A few resources from Paper Prototyping by Carolyn Snyder

Examples of great documentation