Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Lean Prototyping - A practical guide
Rohit Agarwal I prototyped
You can check it @ www.framebench.com
Wireframe
Wireframe Prototype
Wireframe Mockup Prototype
Wireframe Mockup Prototype App
Wireframe Mockup Prototype App
WIREFRAME WIREFRA
FOCUS ON SPACING UI ELEMENTS DRAWN PLACEHOLDERS WIREFRAME WIREFRAME WIREFRAME WIREFRAME WIREFRAME WIREFRAME WIREFRAME W...
Wireframe for a Conference website
Wireframe for an iPhone app
Wireframe : Framebench Website
PROTOTYPE PROTOT
PROTOTYPE PROTOT A plan for how it WORKS, NOT how it looks
Think about MENUS and ANIMATION PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP
Think about use CASES and user FLOW PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP
Think about MOST FREQUENT actions : reduce clicks PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE P...
Visualize all possibilities – save redesigns and headaches later Framebench App Prototypes PROTOTYPE PROTOTYPE PROTOTYPE ...
MOCKUP MOCKUP M
MOCKUP MOCKUP M 2 types
MOCKUP MOCKUP M 2 types Low fidelity High fidelity
HIGH FIDELITY MOCK > LOW FIDELITY MOCK < MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP
MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP
POP QUIZ This mockup is… LOW FIDELITY? HIGH FIDELITY? MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOC...
POP QUIZ This mockup is… LOW FIDELITY!! MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP
MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP
And yes… This mockup is… HIGH FIDELITY! MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP
LEAN
Conceptualize it
Categorize everything you need on your application. Post-its are great for this! Create multiple drawings and placements ...
There’s nothing better than the pen, paper and post its for this. Try out Behance’s Action sheets http://www.creativesout...
Wireframe it
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 ...
I personally love Balsamiq..
And Moqups.
Wireframe.cc is super lightweight!
Prototype it
You have various wireframes ready, its time to quickly create proof of concepts. Lean Prototyping = Test Quickly = Fail F...
Interactive Wireframes This is all about determining flow
Twitter Bootstrap Prototype in the browser UI Packs Today’s UI packs allow for you to get started right in the browser!...
Mock it
Mockups generally are medium to high fidelity prototypes made in software like There’s nothing lean about a mock and in f...
Collaborate?
Will your team and designer always be together? How can you collect feedback and test these wireframes & mockups?
Meet GIFs Images Prototypes Have live discussions on your [ Wireframes Mockups Videos PDFs ] with anyone, anywhere
Scribble over mockups. Track versions. Get them approved faster. Use TableTop Sync
Your cases?
I’m fairly active on twitter: @jumbld & extra good karma for you if you try out www.FrameBench.com and give us feedback
Share on Facebook Share on Twitter
Upcoming SlideShare
Loading in …5
×

Lean Prototyping - A Practical Guide

221,133 views

Published on

given on 10 Nov, 2013 @ New Delhi, India.

Published in: Technology, Business
no profile picture user
  • Real Money Streams ~ Create multiple streams of wealth from your home! ◆◆◆ http://ishbv.com/ezpayjobs/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Visit this site: tinyurl.com/sexinarea and find sex in your area for one night)) You can find me on this site too)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • You can now be your own boss and get yourself a very generous daily income. START FREE...●●● http://ishbv.com/surveys6/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area for one night is there tinyurl.com/hotsexinarea Copy and paste link in your browser to visit a site)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Discover the secrets to getting a bigger penis naturally with this 100% free. ♥♥♥ https://tinyurl.com/ydaetwbk
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
Show More
Show More

Lean Prototyping - A Practical Guide

  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

×