Lean Prototyping - A Practical Guide

208,443 views

Published on

given on 10 Nov, 2013 @ New Delhi, India.

Published in: Technology, Business
12 Comments
551 Likes
Statistics
Notes
No Downloads
Views
Total views
208,443
On SlideShare
0
From Embeds
0
Number of Embeds
4,648
Actions
Shares
0
Downloads
2,528
Comments
12
Likes
551
Embeds 0
No embeds

No notes for slide

Lean Prototyping - A Practical Guide

  1. Lean Prototyping - A practical guide
  2. Rohit Agarwal I prototyped
  3. You can check it @ www.framebench.com
  4. Wireframe
  5. Wireframe Prototype
  6. Wireframe Mockup Prototype
  7. Wireframe Mockup Prototype App
  8. Wireframe Mockup Prototype App
  9. WIREFRAME WIREFRA
  10. FOCUS ON SPACING UI ELEMENTS DRAWN PLACEHOLDERS WIREFRAME WIREFRAME WIREFRAME WIREFRAME WIREFRAME WIREFRAME WIREFRAME WIR
  11. Wireframe for a Conference website
  12. Wireframe for an iPhone app
  13. Wireframe : Framebench Website
  14. PROTOTYPE PROTOT
  15. PROTOTYPE PROTOT A plan for how it WORKS, NOT how it looks
  16. Think about MENUS and ANIMATION PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP
  17. Think about use CASES and user FLOW PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP
  18. Think about MOST FREQUENT actions : reduce clicks PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP
  19. Visualize all possibilities – save redesigns and headaches later Framebench App Prototypes PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP
  20. MOCKUP MOCKUP M
  21. MOCKUP MOCKUP M 2 types
  22. MOCKUP MOCKUP M 2 types Low fidelity High fidelity
  23. HIGH FIDELITY MOCK > LOW FIDELITY MOCK < MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP
  24. MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP
  25. POP QUIZ This mockup is… LOW FIDELITY? HIGH FIDELITY? MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP
  26. POP QUIZ This mockup is… LOW FIDELITY!! MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP
  27. MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP
  28. And yes… This mockup is… HIGH FIDELITY! MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP
  29. LEAN
  30. Conceptualize it
  31. Categorize everything you need on your application. Post-its are great for this! Create multiple drawings and placements for various elements.
  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. Wireframe it
  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. I personally love Balsamiq..
  36. And Moqups.
  37. Wireframe.cc is super lightweight!
  38. Prototype it
  39. You have various wireframes ready, its time to quickly create proof of concepts. Lean Prototyping = Test Quickly = Fail Faster
  40. Interactive Wireframes This is all about determining flow
  41. Twitter Bootstrap Prototype in the browser UI Packs Today’s UI packs allow for you to get started right in the browser! Chrome Developer tools!
  42. Mock it
  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. Collaborate?
  45. Will your team and designer always be together? How can you collect feedback and test these wireframes & mockups?
  46. Meet GIFs Images Prototypes Have live discussions on your [ Wireframes Mockups Videos PDFs ] with anyone, anywhere
  47. Scribble over mockups. Track versions. Get them approved faster. Use TableTop Sync
  48. Your cases?
  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. Share on Facebook Share on Twitter

×