Design Prototyping: Bringing Wireframes to Life

3,073 views
2,947 views

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
3,073
On SlideShare
0
From Embeds
0
Number of Embeds
162
Actions
Shares
0
Downloads
220
Comments
0
Likes
23
Embeds 0
No embeds

No notes for slide

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/

×