With the help of Framebench you can understand what is lean prototype and how it works. for more details visits http://www.framebench.com/

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