Learn techniques to prototype mobile apps without writing a single line of code.

1. Mobile Prototyping Jujutsu
(Prototyping mobile apps without code)
Pek Pongpaet

2. Outline
1. Intro
2. Why?
3. Tools & Techniques
4. Demo

3. @pekpongpaet
Pek Pongpaet

5. Best Entertainment App
iPadDevCamp Hackathon
Chicago, May 2010

7. Write about UX
“...your article has been our
most popular article on the
site since it ran.”
-Tiffany Hampton, UX Mag

11. 6 Mortal Kombat Games

12. The Talk

13. What I’m talking about

14. http://fldt.st/13zlx82

15. Why???

16. NOBODY
READS
THESE

17. hard to imagine

18. Wireframes generally
useless in getting feedback

19. Prototypes can be

20. Cheap

22. Fast

23. No Hold Ups

24. Unveil Usability Problems

25. Original Design
impossible
to reach
without
lifting hand
Hands Need to Move to Reach Far

26. New Design
Everything is within reach

27. Uncover Problems Earlier

28. design looks fine

29. but in normal usage,
content is obscured
by hand

30. Especially important
if n00b to mobile

31. Typical Workflow
Requirements Gathering
Proposal
Design
Develop
Deliver
Not quite what they want
Reiterate

32. New Workflow
Requirements Gathering
Proposal Prototype
Client Feedback
Pixel Perfect Prototype
Hand-off to dev team

33. Pixel Perfect Prototypes?

34. It feels real

35. Woah, that’s deep

36. Ressan Numba One:
Poor Man’s Prototype

37. Photos is Your Friend
http://www.flickr.com/photos/53225371@N05/5972087523/

38. Regular Notebooks

39. Step 1: Draw

40. Step 2: Take Picture

41. Step 3: Enjoy

42. Works for Phone Apps Too

44. Ressan Numba Two:
Weapons

45. Balsamiq

46. Mockingbird

47. Konigi Wireframe Stencils

48. Keynotopia

49. Photoshop Templates

50. Invision

51. FieldTest

53. Ressan Numba Tree:
Edge Cases

54. Error States

55. No internet

56. No GPS

57. OK, I’m ready to kick
some ass

59. http://fldt.st/1ub5jt

60. follow me on twitter
@pekpongpaet

61. For more reading on design
http://shelfluv.com/pekpongpaet/design