Wireframe, Mockup, Prototype
date post
21-Oct-2014Category
Technology
view
14.787download
0
Embed Size (px)
description
Transcript of 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
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