46
Intro: Prototyping Intro: Prototyping XXC (Charles Chen) 2008-08-16 This photo by loft42 http://www.flickr.com/photos/loft42/2732712949/

Intro: Prototyping

Tags:

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Intro: Prototyping

Intro:

Prototyping

Intro:

PrototypingXXC (Charles Chen)2008-08-16

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

Page 2: Intro: Prototyping

Agenda

�wireframe

�Effective prototyping

– prototype vs. prototyping

– forms of prototype

– tools of prototyping

Page 3: Intro: Prototyping

wireframe

Page 4: Intro: Prototyping
Page 5: Intro: Prototyping
Page 6: Intro: Prototyping

Dan Brown:Page Description Diagram

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

Page 7: Intro: Prototyping

�Prototyping make prototypes

�Prototypes are artifacts for designing

�Wireframe is an artifact

Page 8: Intro: Prototyping
Page 9: Intro: Prototyping
Page 10: Intro: Prototyping

Prototyping

Not prototype

Page 11: Intro: Prototyping

http://www.effectiveprototyping.com/

Page 12: Intro: Prototyping
Page 13: Intro: Prototyping

The first Prototyper

Page 14: Intro: Prototyping

Design

Methodology� discovery

� define

� design

� develop

� plan

� specification

� design

� result

Page 15: Intro: Prototyping

Forms of

prototype� prepare

� early stage

�midterm stage

� late stage

� plan

� specification

� design

� result

Page 16: Intro: Prototyping
Page 17: Intro: Prototyping

prepare

�requirements inventory worksheet

�task worksheet & flow

�persona & scenario

Page 18: Intro: Prototyping
Page 19: Intro: Prototyping
Page 20: Intro: Prototyping

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

Page 21: Intro: Prototyping

early stage

� Sketch

� Card sorting

� Wireframe

� Storyboard

� High-fidelity video

prototypes (to sell a

concept)

� Blank models

� Wizard-of-Oz

Page 22: Intro: Prototyping

Pen & Paper

Page 23: Intro: Prototyping
Page 24: Intro: Prototyping
Page 25: Intro: Prototyping
Page 26: Intro: Prototyping
Page 27: Intro: Prototyping

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

Page 28: Intro: Prototyping
Page 29: Intro: Prototyping
Page 30: Intro: Prototyping
Page 31: Intro: Prototyping

midterm

stage�Conceptual video prototyping

�paper prototype

�Digital interactive prototypes

Page 32: Intro: Prototyping

Aurora: Concept Video Part 1

Page 33: Intro: Prototyping

late stage

�Animated prototypes (such as those

created in Flash)

�High-fidelity interactive prototypes

�code prototype

�software prototype

Page 34: Intro: Prototyping

Tools

Page 35: Intro: Prototyping
Page 36: Intro: Prototyping
Page 37: Intro: Prototyping
Page 38: Intro: Prototyping

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

Page 39: Intro: Prototyping

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.

Page 40: Intro: Prototyping

Photoshop

Page 41: Intro: Prototyping

Excel

Page 42: Intro: Prototyping

InDesign

Page 43: Intro: Prototyping

Axure PR

Page 44: Intro: Prototyping

Pencil

Page 45: Intro: Prototyping

Denim

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

Page 46: Intro: Prototyping

next time

Design Guidelines