P2+Protoyping

=P2: Prototyping= For interactive designers, prototyping is used to demonstrate a product, an idea or a particular set of interactions as a partial representation of the design. It can be made from any number of materials from paper to software but no matter what, it needs to be //interactive//. It may serve to focus on just the interface or a particular set of functions, but it will capture some of the features highlighted in the envsionment stage.

A prototype can be built in varying degrees of fidelity depending on what the designers are looking for and where they are in the development process. First and foremost, the prototype move the design out the designer's world (system maps, flowcharts) and makes it a conversation piece with people in evaluating your design ideas.


 * What is a Prototype?**
 * a piece of wood (ie. Palm Pilot development)
 * cardboard mockup
 * video simulation
 * paper-based outline
 * hyperlinked screens shots
 * software


 * Why Prototype?**
 * useful aid when discussing idea with stakeholders
 * communication device amongst designers
 * answer questions and support designers in choosing between alternatives


 * Also**
 * to test technical feasibilty
 * clarify vague requirements
 * user testing and evaluation


 * Low Fidelity Prototype**
 * materials of low cost and fast assembly
 * affords multiple concept testing in short time frame
 * outlined screens for GUI


 * High Fidelity Prototype**
 * looks and acts more like the finished design
 * interactive, functional
 * useful for marketing ideas, testing technical issues

Process
The teams will need to decide on which section of the proposed VA website will be designed and built as a functioning prototype. The goal of this phase is to simulate a realistic user experience with a focus on the tasks in this section (ie. finding the graduate degree requirements). Therefore your team will build the facade of the entire system to make it plausible, but just focus on making what is needed to perform the desired tasks. In doing so, the users can evaluate how well the system supports these tasks for the typical person using the system.

In reference to your System Map and IA (can be modified), these steps need to be followed:

//These four stages are not mutually exclusive and there is much interdependency in their timelines and goals.//
 * 1) Functional Wireframe
 * decide on a series of screens/states needed to create the desired experience
 * use the desired technologies - HTML/CSS, JavaScript, Flash, etc.-
 * insert boxes and text placeholders within each screen with needed functionality (eg. drag and drop, rollover, scroll, links, etc.)
 * continue developing the series into the desired series of screens
 * 1) Information Design
 * organization and groupings of information
 * follow and/or further develop hierarchy
 * decide on how much information per screen/state
 * develop a labeling system for naming of information
 * 1) Visual Design
 * develop a visual language of colour palette, typography, icons, etc.
 * design a consistent layout and hierarchy using visual design elements
 * 1) Content Mapping
 * map content on to functional wireframe
 * apply info and visual design approaches to content

These steps are meant as a guide to building a prototype and is not a prescription to a successful outcome. Interactive and visual problem solving greatly benefits from a variety of perspectives coming from thoughtful engagement with the process ... from all team members.

Deliverables
A functional prototype that offers adequate interactivity to simulate a user experience for testing in the next phase. It will consist of:
 * 1) a web-based interactive system with appropriate interaction and visual design
 * 2) documentation and updates in the group wiki area

Week 04 - Jan 26
in class
 * introduction to prototyping
 * define scope of group's prototype
 * discussion and consultation of next phase
 * production of functional wireframe

at home
 * continued production of functional wireframe

Week 05 - Feb 2
in class
 * review functional wireframes
 * information design
 * team consultation and production
 * visual design potential

at home
 * refine functional wireframe
 * develop information design

Week 06 - Feb 9
in class
 * present team work
 * visual design and content mapping for interface
 * team consultation and production

at home
 * apply visual design and content
 * finalize all prototype work

Week 08 - Feb 23

 * **due for in class presentation**