Lean Prototyping Guide
•Download as PPTX, PDF•
5 likes•1,992 views
With the help of Framebench you can understand what is lean prototype and how it works. for more details visits http://www.framebench.com/
Report
Share
Lean Prototyping 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. A plan for how it WORKS, NOT how it looks PROTOTYPE PROTOT
- 16. PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP Think about MENUS and ANIMATION
- 17. PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP Think about use CASES and user FLOW
- 18. PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP Think about MOST FREQUENT actions : reduce clicks
- 19. PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP Visualize all possibilities – save redesigns and headaches later Framebench App Prototypes
- 20. MOCKUP MOCKUP M
- 21. MOCKUP MOCKUP M 2 types
- 22. 2 types Low fidelity High fidelity MOCKUP MOCKUP M
- 23. HIGH FIDELITY MOCK > MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP LOW FIDELITY MOCK <
- 24. MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP
- 25. MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP POP QUIZ LOW FIDELITY? HIGH FIDELITY? This mockup is…
- 26. MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP POP QUIZ LOW FIDELITY!! This mockup is…
- 27. MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP
- 28. MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP And yes… HIGH FIDELITY! This mockup is…
- 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. 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. 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 with anyone, anywhere GIFs Images Prototypes Wireframes Mockups Videos PDFs Have live discussions on your [ ]
- 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