Wireframe, Mockup, Prototype

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

HAPPY☻client, 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」。

謝謝ご清聴ありがとうございました