design prototyping: bringing wireframes to life
DESCRIPTION
See how "design prototyping" differs from other techniques, and learn how to determine when a prototype is needed. Understand how to tailor your prototype to a particular audience, gather techniques for bringing paper sketches to life, and how interactive sketching can fit in an Agile process.TRANSCRIPT
Design PrototypingBringing Wireframes to Life
Dan Harrelson
Please *
* As if I could stop you...
@danharrelson#mix09#proto
Introduction
•Design deliverables
•What’s design prototyping?
•Why prototype?
•What makes a good prototype?
•Techniques for prototyping
No Product Awesome Product
Design processes are dynamic
Design processes are dynamic
Design processes are dynamic
Design processes are dynamic
We take in all sorts of input
Competitive AnalysisUser Research
Brand Guidelines
Metrics
Technology
Business Strategy
We work with lots of different people
Stakeholders
Prospects
CustomersDesigners
Developers
Partners
Users
We come up with some dynamic
ideas
We output some pretty static stuff•Sitemaps
•User flows
•Personas
•Wireframes
•Visual comps
We need something more
dynamic:Design Protoyping
* 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 *
Proof of concept
secure
scalable
connected
connected integrated
Rails
.NET
mashuphard
easy
REST
JSON
Silverlight
AIR
slow
fast
api
performance
XAML
... 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
Design prototype
animated
usable
slick
branded
friendly
hardeasy
competitivepersonalsafe
functionalcomplex
simplestatic
interactive
Why prototype?
Wireframes aren’t enough
Prototype goes here
Reduce documentation
Get internal buy-in*
*money for your concept
Usability test
See how a concept
will Function
See how a concept will Function
FeelWorkWork
Experiences are Interactive
Experiences are Responsive
Experiences have Emotion*
*Wireframes Don’t
Generate conceptsValidate concepts
What makes a good prototype?
Interactive
FastHow Fast?How about an
afternoon?
http://www.boxesandarrows.com/view/interactive
DisposableDisposable
It’s not about the prototype, it’s about the ideas!
It’s not about the prototype, it’s about the ideas!
Do prototype:
•Core interactions•Important patterns•Risky functionality
Don’t prototype:
•Solved problems•Agreed upon solutions
Focused
Focused
Complex
Cri
tica
l DesignPrototype
QuickWireframe
Prototypingtechniques
Paper prototyping
Digital prototyping
http://www.boxesandarrows.com/view/quick-and-easy-flash
In conclusion
•Deliverables need to be more dynamic
•Design prototyping can help...
•Good ones are fast, disposable and focused
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/