intro: prototyping

Intro:

Prototyping

Intro:

PrototypingXXC (Charles Chen)2008-08-16

This photo by loft42 http://www.flickr.com/photos/loft42/2732712949/

Agenda

�wireframe

�Effective prototyping

– prototype vs. prototyping

– forms of prototype

– tools of prototyping

wireframe

Dan Brown:Page Description Diagram

http://www.boxesandarrows.com/view/where_the_wireframes_are_special_deliverable_3

�Prototyping make prototypes

�Prototypes are artifacts for designing

�Wireframe is an artifact

Prototyping

Not prototype

http://www.effectiveprototyping.com/

The first Prototyper

Design

Methodology� discovery

� define

� design

� develop

� plan

� specification

� design

� result

Forms of

prototype� prepare

� early stage

�midterm stage

� late stage

� plan

� specification

� design

� result

prepare

�requirements inventory worksheet

�task worksheet & flow

�persona & scenario

By by quickandirty http://www.flickr.com/photos/quickandirty/68582535/

early stage

� Sketch

� Card sorting

� Wireframe

� Storyboard

� High-fidelity video

prototypes (to sell a

concept)

� Blank models

� Wizard-of-Oz

Pen & Paper

http://blogs.sun.com/MartinHardee/entry/design_comics_templates_1_0

midterm

stage�Conceptual video prototyping

�paper prototype

�Digital interactive prototypes

Aurora: Concept Video Part 1

late stage

�Animated prototypes (such as those

created in Flash)

�High-fidelity interactive prototypes

�code prototype

�software prototype

Tools

http://www.istartedsomething.com/20071018/powerpoint-prototype-toolkit-01/

Notepad

File Edit Format View Help

Lorem Ipsum is simply dummy text of the printing and

typesetting industry. Lorem Ipsum has been the industry's

standard dummy text ever since the 1500s, when an

unknown printer took a galley of type and scrambled it to

make a type specimen book. It has survived not only five

centuries, but also the leap into electronic typesetting,

remaining essentially unchanged. It was popularised in the

1960s with the release of Letraset sheets containing Lorem

Ipsum passages, and more recently with desktop publishing

software like Aldus PageMaker including versions of Lorem

Ipsum.

Photoshop

Excel

InDesign

Axure PR

Pencil

Denim

http://dub.washington.edu:2007/denim/

next time

Design Guidelines