1.
Design Prototyping
Bringing Wireframes to Life
Dan Harrelson

2.
Please *
@danharrelson
#mix09
#proto
* As if I could stop you...

3.
Introduction
• Design deliverables
• What’s design prototyping?
• Why prototype?
• What makes a good prototype?
• Techniques for prototyping

4.
Design processes
are dynamic
No Product Awesome Product

5.
Design processes
are dynamic

6.
Design processes
are dynamic

7.
Design processes
are dynamic

8.
Competitive Analysis
User Research
Business Strategy Brand Guidelines
Technology
We take in all
Metrics
sorts of input

9.
Users Stakeholders
Developers
Designers
Customers
Partners
We work with lots
of different people
Prospects

10.
We come up with
some dynamic ideas

11.
We output some
pretty static stuff
• Sitemaps
• User flows
• Personas
• Wireframes
• Visual comps

12.
We need something
more dynamic:
Design Protoyping

13.
Prototypes
... 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

14.
easy connected
.NET integrated
fast AIR JSON
performance
slow
Rails
Silverlight
REST
connected
api
Proof of concept
XAML
scalable mashup
hard
secure

15.
Prototypes
... 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

16.
branded hard
easy
complex
static functional
simple
animated
safe personal
competitive friendly
slick
Design prototype
interactive
usable

17.
Why prototype?

18.
Wireframes
aren’t enough

19.
Prototype
goes here

20.
Reduce
documentation

21.
Get internal buy-in*
*money for your concept

22.
Usability test

23.
See how a concept
will Function
Work
Feel

24.
Experiences are
Interactive

25.
Experiences are
Responsive

26.
Experiences have
Emotion*
*Wireframes Don’t

27.
Generate concepts
Validate concepts

28.
What makes a
good prototype?

29.
Interactive

30.
How about an
How Fast?
Fast
afternoon?

31.
http://www.boxesandarrows.com/view/interactive

32.
Disposable
It’s not about the prototype,
it’s about the ideas!

33.
Focused
Don’t prototype: Do prototype:
•Core interactions
•Solved problems
•Important patterns
•Agreed upon solutions
•Risky functionality

34.
Focused
Design
Critical
Prototype
Quick
Wireframe
Complex

35.
Prototyping
techniques

36.
Paper prototyping

37.
Digital prototyping

38.
http://www.boxesandarrows.com/view/quick-and-easy-flash

39.
In conclusion
• Deliverables need to be more dynamic
• Design prototyping can help...
• Good ones are fast, disposable and
focused

40.
Questions?
Comments?
Dan Harrelson
@danharrelson
dan@adaptivepath.co
m

41.
Use promotional code MIX and get 10% off either registration price.
May 11-14, 2009 September 15-18,
April 2-3, 2009 Berlin 2009
San Francisco San Francisco
June 15-18, 2009
San Francisco
http://adaptivepath.com/ November 2-5, 2009 http://uxweek.com/
events/2009/apr
Washington, D.C.
http://adaptivepath.com/even
ts/2009/uxi/