• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
185,491
On Slideshare
0
From Embeds
0
Number of Embeds
41

Actions

Shares
Downloads
2,286
Comments
12
Likes
494

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. Wireframe Prototype
  • 6. Wireframe Mockup Prototype
  • 7. Wireframe Mockup Prototype App
  • 8. Wireframe Mockup Prototype App
  • 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. 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
  • 50. Share on Facebook Share on Twitter