Documentation for Design and Planningwireframe, mockup, prototype

hlb@handlino.com

How Projects Really Work (version 1.5) Create your own cartoon at www.projectcartoon.com

How the customerexplained it

How the project leaderunderstood it

How the analystdesigned it

How the programmerwrote it

What the beta testersreceived

How the businessconsultant described it

How the project wasdocumented

What operationsinstalled

How the customer wasbilled

How it was supported What marketingadvertised

What the customerreally needed

deliverable (n.)A document created during the course of a web design project to facilitate communications, capture decisions, and stimulate innovation.

why?

communication

make people

HAPPYclient, developer, designer, ...

wireframe: function & layout

mockup: form, design, visual

prototype

wireframe

wireframe mockup

wireframe mockup prototype

wireframehttp://www.flickr.com/photos/88864835@N00/48713348/

http://www.flickr.com/photos/35468151759@N01/184032078/

http://www.flickr.com/photos/63641363@N00/2648414123/

http://www.flickr.com/photos/76877398@N00/130960238/

http://www.flickr.com/photos/32729422@N00/2192411612/

Axure RP(demo)

Mockuphttp://www.flickr.com/photos/7423705@N02/452860780/

Photoshop

balsamiq mockuphttp://www.balsamiq.com/products/mockups

Paper Prototyping

Hanmail Paper Prototypehttp://www.youtube.com/watch?v=GrV2SZuRPv0

HTML Prototyping

polypagehttp://code.new-bamboo.co.uk/polypage/

when to use what?

wireframe mockup prototype

in Taiwan

mockup

why we skip Photoshop

http://www.37signals.com/svn/posts/1061-why-we-skip-photoshop

wireframe mockupprototype

prototypewireframe

CC-- 2.5

CC --

2.5

http://hlb.yichi.org