![Page 1: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/1.jpg)
Design PrototypingBringing Wireframes to Life
Dan Harrelson
![Page 2: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/2.jpg)
Please *
* As if I could stop you...
@danharrelson#mix09#proto
![Page 3: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/3.jpg)
Introduction
•Design deliverables
•What’s design prototyping?
•Why prototype?
•What makes a good prototype?
•Techniques for prototyping
![Page 4: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/4.jpg)
![Page 5: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/5.jpg)
No Product Awesome Product
Design processes are dynamic
![Page 6: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/6.jpg)
Design processes are dynamic
![Page 7: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/7.jpg)
Design processes are dynamic
![Page 8: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/8.jpg)
Design processes are dynamic
![Page 9: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/9.jpg)
We take in all sorts of input
Competitive AnalysisUser Research
Brand Guidelines
Metrics
Technology
Business Strategy
![Page 10: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/10.jpg)
We work with lots of different people
Stakeholders
Prospects
CustomersDesigners
Developers
Partners
Users
![Page 11: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/11.jpg)
We come up with some dynamic
ideas
![Page 12: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/12.jpg)
We output some pretty static stuff•Sitemaps
•User flows
•Personas
•Wireframes
•Visual comps
![Page 13: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/13.jpg)
![Page 14: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/14.jpg)
We need something more
dynamic:Design Protoyping
![Page 15: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/15.jpg)
* http://en.wikipedia.org/wiki/Prototyping
Prototypes... allow engineers and designers the ability to
explore design alternatives, test theories and
confirm performance prior to starting production of a new product *
![Page 16: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/16.jpg)
Proof of concept
secure
scalable
connected
connected integrated
Rails
.NET
mashuphard
easy
REST
JSON
Silverlight
AIR
slow
fast
api
performance
XAML
![Page 17: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/17.jpg)
... allow engineers and designers the ability to
explore design alternatives, test theories and
confirm performance prior to starting production of a new product *
* http://en.wikipedia.org/wiki/Prototyping
Prototypes
![Page 18: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/18.jpg)
Design prototype
animated
usable
slick
branded
friendly
hardeasy
competitivepersonalsafe
functionalcomplex
simplestatic
interactive
![Page 19: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/19.jpg)
![Page 20: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/20.jpg)
Why prototype?
![Page 21: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/21.jpg)
Wireframes aren’t enough
![Page 22: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/22.jpg)
![Page 23: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/23.jpg)
![Page 24: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/24.jpg)
![Page 25: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/25.jpg)
![Page 26: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/26.jpg)
Prototype goes here
![Page 27: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/27.jpg)
Reduce documentation
![Page 28: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/28.jpg)
![Page 29: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/29.jpg)
Get internal buy-in*
*money for your concept
![Page 30: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/30.jpg)
Usability test
![Page 31: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/31.jpg)
See how a concept
will Function
See how a concept will Function
FeelWorkWork
![Page 32: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/32.jpg)
Experiences are Interactive
![Page 33: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/33.jpg)
Experiences are Responsive
![Page 34: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/34.jpg)
Experiences have Emotion*
*Wireframes Don’t
![Page 35: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/35.jpg)
Generate conceptsValidate concepts
![Page 36: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/36.jpg)
What makes a good prototype?
![Page 37: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/37.jpg)
Interactive
![Page 38: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/38.jpg)
FastHow Fast?How about an
afternoon?
![Page 39: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/39.jpg)
http://www.boxesandarrows.com/view/interactive
![Page 40: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/40.jpg)
DisposableDisposable
It’s not about the prototype, it’s about the ideas!
It’s not about the prototype, it’s about the ideas!
![Page 41: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/41.jpg)
Do prototype:
•Core interactions•Important patterns•Risky functionality
Don’t prototype:
•Solved problems•Agreed upon solutions
Focused
![Page 42: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/42.jpg)
Focused
Complex
Cri
tica
l DesignPrototype
QuickWireframe
![Page 43: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/43.jpg)
Prototypingtechniques
![Page 44: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/44.jpg)
Paper prototyping
![Page 45: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/45.jpg)
Digital prototyping
![Page 46: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/46.jpg)
http://www.boxesandarrows.com/view/quick-and-easy-flash
![Page 47: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/47.jpg)
In conclusion
•Deliverables need to be more dynamic
•Design prototyping can help...
•Good ones are fast, disposable and focused
![Page 49: Design Prototyping Bringing Wireframes to Life Dan Harrelson](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649da25503460f94a8f26d/html5/thumbnails/49.jpg)
September 15-18, 2009San Francisco
http://uxweek.com/
Use promotional code MIX and get 10% off either registration price.
April 2-3, 2009San Francisco
http://adaptivepath.com/events/2009/apr
May 11-14, 2009Berlin
June 15-18, 2009San Francisco
November 2-5, 2009Washington, D.C.
http://adaptivepath.com/events/2009/uxi/