Lean Prototyping - A Practical Guide
•
559 likes•231,728 views
given on 10 Nov, 2013 @ New Delhi, India.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Lean Prototyping - A Practical Guide
Similar to Lean Prototyping - A Practical Guide (20)
Recently uploaded
Recently uploaded (20)
Lean Prototyping - A Practical Guide
- 1. Lean Prototyping - A practical guide
- 3. You can check it @ www.framebench.com
- 4. Wireframe
- 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