Documentation
for Design and Planning
wireframe, mockup, prototype
hlb@handlino.com

How Projects Really Work (version 1.5) Create your own cartoon at www.projectcartoon.com
How the customer How the project leader How the analyst How the programmer What the beta testers How the business
explained it understood it designed it wrote it received consultant described it
How the project was What operations How the customer was How it was supported What marketing What the customer
documented installed billed advertised really 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
HAPPY☻
client, developer, designer, ...

wireframe
: function & layout

mockup
: form, design, visual

prototype

wireframe

wireframe mockup

wireframe mockup prototype

wireframe
http://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)

Mockup
http://www.flickr.com/photos/7423705@N02/452860780/

Photoshop

balsamiq mockup
http://www.balsamiq.com/products/mockups

Paper Prototyping

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

HTML Prototyping

polypage
http://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 mockup
prototype

wireframe prototype