Your SlideShare is downloading. ×

Lean Prototyping Guide

1,298

Published on

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

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
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,298
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
62
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Lean Prototyping - A practical guide
  • 2. Rohit Agarwal I prototyped
  • 3. You can check it @ www.framebench.com
  • 4. Wireframe
  • 5. PrototypeWireframe
  • 6. PrototypeWireframe Mockup
  • 7. Prototype App Wireframe Mockup
  • 8. Prototype App Wireframe Mockup
  • 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. 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
  • 50. Share on Facebook Share on Twitter

×