Your SlideShare is downloading. ×
0
Design Prototyping
            Bringing Wireframes to Life




Dan Harrelson
Please                   *

   @danharrelson
         #mix09
          #proto




      * As if I could stop you...
Introduction
• Design deliverables
• What’s design prototyping?
• Why prototype?
• What makes a good prototype?
• Techniqu...
Design processes
        are dynamic
No Product        Awesome Product
Design processes
  are dynamic
Design processes
  are dynamic
Design processes
  are dynamic
Competitive Analysis
                            User Research
        Business Strategy        Brand Guidelines

Technolo...
Users    Stakeholders
     Developers
                  Designers
                                Customers
Partners

    ...
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
Prototypes
     ... allow engineers and
     designers the ability to
   explore design alternatives,
         test theori...
easy                    connected
                .NET                            integrated
                  fast       ...
Prototypes
     ... allow engineers and
     designers the ability to
   explore design alternatives,
         test theori...
branded                               hard
                                  easy
complex
                         static ...
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
        Work
        Feel
Experiences are
  Interactive
Experiences are
  Responsive
Experiences have
   Emotion*
 *Wireframes Don’t
Generate concepts
Validate concepts
What makes a
good prototype?
Interactive
How about an
How Fast?
     Fast
 afternoon?
http://www.boxesandarrows.com/view/interactive
Disposable



It’s not about the prototype,
      it’s about the ideas!
Focused
Don’t prototype:         Do prototype:

                         •Core interactions
•Solved problems
             ...
Focused
                       Design
Critical
                       Prototype




           Quick
           Wireframe
...
Prototyping
techniques
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 an...
Questions?
           Comments?
Dan Harrelson
@danharrelson
dan@adaptivepath.co
m
Use promotional code MIX and get 10% off either registration price.




                               May 11-14, 2009    ...
Design Prototyping: Bringing Wireframes to Life
Design Prototyping: Bringing Wireframes to Life
Design Prototyping: Bringing Wireframes to Life
Design Prototyping: Bringing Wireframes to Life
Design Prototyping: Bringing Wireframes to Life
Design Prototyping: Bringing Wireframes to Life
Design Prototyping: Bringing Wireframes to Life
Design Prototyping: Bringing Wireframes to Life
Upcoming SlideShare
Loading in...5
×

Design Prototyping: Bringing Wireframes to Life

2,714

Published on

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.

Published in: Technology, Business
0 Comments
23 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,714
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
219
Comments
0
Likes
23
Embeds 0
No embeds

No notes for slide

Transcript of "Design Prototyping: Bringing Wireframes to Life"

  1. 1. Design Prototyping Bringing Wireframes to Life Dan Harrelson
  2. 2. Please * @danharrelson #mix09 #proto * As if I could stop you...
  3. 3. Introduction • Design deliverables • What’s design prototyping? • Why prototype? • What makes a good prototype? • Techniques for prototyping
  4. 4. Design processes are dynamic No Product Awesome Product
  5. 5. Design processes are dynamic
  6. 6. Design processes are dynamic
  7. 7. Design processes are dynamic
  8. 8. Competitive Analysis User Research Business Strategy Brand Guidelines Technology We take in all Metrics sorts of input
  9. 9. Users Stakeholders Developers Designers Customers Partners We work with lots of different people Prospects
  10. 10. We come up with some dynamic ideas
  11. 11. We output some pretty static stuff • Sitemaps • User flows • Personas • Wireframes • Visual comps
  12. 12. We need something more dynamic: Design Protoyping
  13. 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. 14. easy connected .NET integrated fast AIR JSON performance slow Rails Silverlight REST connected api Proof of concept XAML scalable mashup hard secure
  15. 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. 16. branded hard easy complex static functional simple animated safe personal competitive friendly slick Design prototype interactive usable
  17. 17. Why prototype?
  18. 18. Wireframes aren’t enough
  19. 19. Prototype goes here
  20. 20. Reduce documentation
  21. 21. Get internal buy-in* *money for your concept
  22. 22. Usability test
  23. 23. See how a concept will Function Work Feel
  24. 24. Experiences are Interactive
  25. 25. Experiences are Responsive
  26. 26. Experiences have Emotion* *Wireframes Don’t
  27. 27. Generate concepts Validate concepts
  28. 28. What makes a good prototype?
  29. 29. Interactive
  30. 30. How about an How Fast? Fast afternoon?
  31. 31. http://www.boxesandarrows.com/view/interactive
  32. 32. Disposable It’s not about the prototype, it’s about the ideas!
  33. 33. Focused Don’t prototype: Do prototype: •Core interactions •Solved problems •Important patterns •Agreed upon solutions •Risky functionality
  34. 34. Focused Design Critical Prototype Quick Wireframe Complex
  35. 35. Prototyping techniques
  36. 36. Paper prototyping
  37. 37. Digital prototyping
  38. 38. http://www.boxesandarrows.com/view/quick-and-easy-flash
  39. 39. In conclusion • Deliverables need to be more dynamic • Design prototyping can help... • Good ones are fast, disposable and focused
  40. 40. Questions? Comments? Dan Harrelson @danharrelson dan@adaptivepath.co m
  41. 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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×