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

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