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

188,894

Published on

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

Published in: Technology, Business
12 Comments
506 Likes
Statistics
Notes
No Downloads
Views
Total Views
188,894
On Slideshare
0
From Embeds
0
Number of Embeds
43
Actions
Shares
0
Downloads
2,392
Comments
12
Likes
506
Embeds 0
No embeds

No notes for slide

Lean Prototyping - A Practical Guide

  1. 1. Lean Prototyping - A practical guide
  2. 2. Rohit Agarwal I prototyped
  3. 3. You can check it @ www.framebench.com
  4. 4. Wireframe
  5. 5. Wireframe Prototype
  6. 6. Wireframe Mockup Prototype
  7. 7. Wireframe Mockup Prototype App
  8. 8. Wireframe Mockup Prototype App
  9. 9. WIREFRAME WIREFRA
  10. 10. FOCUS ON SPACING UI ELEMENTS DRAWN PLACEHOLDERS WIREFRAME WIREFRAME WIREFRAME WIREFRAME WIREFRAME WIREFRAME WIREFRAME WIR
  11. 11. Wireframe for a Conference website
  12. 12. Wireframe for an iPhone app
  13. 13. Wireframe : Framebench Website
  14. 14. PROTOTYPE PROTOT
  15. 15. PROTOTYPE PROTOT A plan for how it WORKS, NOT how it looks
  16. 16. Think about MENUS and ANIMATION PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP
  17. 17. Think about use CASES and user FLOW PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP
  18. 18. Think about MOST FREQUENT actions : reduce clicks PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP
  19. 19. Visualize all possibilities – save redesigns and headaches later Framebench App Prototypes PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP
  20. 20. MOCKUP MOCKUP M
  21. 21. MOCKUP MOCKUP M 2 types
  22. 22. MOCKUP MOCKUP M 2 types Low fidelity High fidelity
  23. 23. HIGH FIDELITY MOCK > LOW FIDELITY MOCK < MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP
  24. 24. MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP
  25. 25. POP QUIZ This mockup is… LOW FIDELITY? HIGH FIDELITY? MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP
  26. 26. POP QUIZ This mockup is… LOW FIDELITY!! MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP
  27. 27. MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP
  28. 28. And yes… This mockup is… HIGH FIDELITY! MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP
  29. 29. LEAN
  30. 30. Conceptualize it
  31. 31. Categorize everything you need on your application. Post-its are great for this! Create multiple drawings and placements for various elements.
  32. 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. 33. Wireframe it
  34. 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. 35. I personally love Balsamiq..
  36. 36. And Moqups.
  37. 37. Wireframe.cc is super lightweight!
  38. 38. Prototype it
  39. 39. You have various wireframes ready, its time to quickly create proof of concepts. Lean Prototyping = Test Quickly = Fail Faster
  40. 40. Interactive Wireframes This is all about determining flow
  41. 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. 42. Mock it
  43. 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. 44. Collaborate?
  45. 45. Will your team and designer always be together? How can you collect feedback and test these wireframes & mockups?
  46. 46. Meet GIFs Images Prototypes Have live discussions on your [ Wireframes Mockups Videos PDFs ] with anyone, anywhere
  47. 47. Scribble over mockups. Track versions. Get them approved faster. Use TableTop Sync
  48. 48. Your cases?
  49. 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. 50. Share on Facebook Share on Twitter
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×