Lean Prototyping Guide
Download as PPTX, PDF5 likes1,999 views
The document is a practical guide on lean prototyping, emphasizing the importance of creating wireframes and mockups to visualize app designs before development. It discusses different fidelity levels of prototypes, tools for wireframing, and the iterative nature of testing and feedback in the prototyping process. It encourages the use of digital tools for creating interactive wireframes and effective collaboration among teams.
![Meet
with anyone, anywhere
GIFs
Images
Prototypes
Wireframes
Mockups
Videos
PDFs
Have live discussions on your [ ]](https://image.slidesharecdn.com/lean-prototyping-guide-140310074541-phpapp02/85/Lean-Prototyping-Guide-46-320.jpg)
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