Your SlideShare is downloading. ×
Lean Prototyping Guide
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Lean Prototyping Guide

1,271

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,271
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

×