Lean Prototyping Guide

1,851 views

Published on

With the help of Framebench you can understand what is lean prototype and how it works.

for more details visits http://www.framebench.com/

Published in: Business
  • Be the first to comment

Lean Prototyping Guide

  1. 1. Lean Prototyping - A practical guide
  2. 2. Rohit Agarwal I prototyped
  3. 3. You can check it @ www.framebench.com
  4. 4. Wireframe
  5. 5. PrototypeWireframe
  6. 6. PrototypeWireframe Mockup
  7. 7. Prototype App Wireframe Mockup
  8. 8. Prototype App Wireframe Mockup
  9. 9. WIREFRAME WIREFRA
  10. 10. FOCUS ON SPACING UI ELEMENTS DRAWN PLACEHOLDERS WIREFRAME WIREFRAME WIREFRAME WIREFRAME WIREFRAME WIREFRAME WIREFRAME WIR
  11. 11. Wireframe for a Conference website
  12. 12. Wireframe for an iPhone app
  13. 13. Wireframe : Framebench Website
  14. 14. PROTOTYPE PROTOT
  15. 15. A plan for how it WORKS, NOT how it looks PROTOTYPE PROTOT
  16. 16. PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP Think about MENUS and ANIMATION
  17. 17. PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP Think about use CASES and user FLOW
  18. 18. PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP Think about MOST FREQUENT actions : reduce clicks
  19. 19. PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP Visualize all possibilities – save redesigns and headaches later Framebench App Prototypes
  20. 20. MOCKUP MOCKUP M
  21. 21. MOCKUP MOCKUP M 2 types
  22. 22. 2 types Low fidelity High fidelity MOCKUP MOCKUP M
  23. 23. HIGH FIDELITY MOCK > MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP LOW FIDELITY MOCK <
  24. 24. MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP
  25. 25. MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP POP QUIZ LOW FIDELITY? HIGH FIDELITY? This mockup is…
  26. 26. MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP POP QUIZ LOW FIDELITY!! This mockup is…
  27. 27. MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP
  28. 28. MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP And yes… HIGH FIDELITY! This mockup is…
  29. 29. LEAN
  30. 30. Conceptualize it
  31. 31. Categorize everything you need on your application. Post-its are great for this! Create multiple drawings and placements for various elements.
  32. 32. There’s nothing better than the pen, paper and post its for this. Try out Behance’s Action sheets http://www.creativesoutfitter.com/products/100/action-method
  33. 33. Wireframe it
  34. 34. Now that you have a basic idea in your mind, you’re ready to put it on a digital pad. AND.. There are a variety of tools available today!
  35. 35. I personally love Balsamiq..
  36. 36. And Moqups.
  37. 37. Wireframe.cc is super lightweight!
  38. 38. Prototype it
  39. 39. You have various wireframes ready, its time to quickly create proof of concepts. Lean Prototyping = Test Quickly = Fail Faster
  40. 40. Interactive Wireframes This is all about determining flow
  41. 41. Prototype in the browser Today’s UI packs allow for you to get started right in the browser! Twitter Bootstrap UI Packs Chrome Developer tools!
  42. 42. Mock it
  43. 43. Mockups generally are medium to high fidelity prototypes made in software like There’s nothing lean about a mock and in fact should be done once you’ve tested everything else.
  44. 44. Collaborate?
  45. 45. Will your team and designer always be together? How can you collect feedback and test these wireframes & mockups?
  46. 46. Meet with anyone, anywhere GIFs Images Prototypes Wireframes Mockups Videos PDFs Have live discussions on your [ ]
  47. 47. Scribble over mockups. Track versions. Get them approved faster. Use TableTop Sync
  48. 48. Your cases?
  49. 49. I’m fairly active on twitter: @jumbld & extra good karma for you if you try out www.FrameBench.com and give us feedback
  50. 50. Share on Facebook Share on Twitter

×