Prototype Jujutsu - Prototyping Mobile Apps Without Coding

6,155 views
6,088 views

Published on

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

Prototype Jujutsu - Prototyping Mobile Apps Without Coding

  1. 1. Mobile Prototyping Jujutsu (Prototyping mobile apps without code) Pek Pongpaet
  2. 2. Outline1. Intro2. Why?3. Tools & Techniques4. Demo
  3. 3. @pekpongpaet Pek Pongpaet
  4. 4. Best Entertainment AppiPadDevCamp Hackathon Chicago, May 2010
  5. 5. Write about UX “...your article has been our most popular article on the site since it ran.” -Tiffany Hampton, UX Mag
  6. 6. 6 Mortal Kombat Games
  7. 7. The Talk
  8. 8. What I’m talking about
  9. 9. http://fldt.st/13zlx82
  10. 10. Why???
  11. 11. NOBODY READS THESE
  12. 12. hard to imagine
  13. 13. Wireframes generallyuseless in getting feedback
  14. 14. Prototypes can be
  15. 15. Cheap
  16. 16. Fast
  17. 17. No Hold Ups
  18. 18. Unveil Usability Problems
  19. 19. Original Design impossible to reach without lifting handHands Need to Move to Reach Far
  20. 20. New DesignEverything is within reach
  21. 21. Uncover Problems Earlier
  22. 22. design looks fine
  23. 23. but in normal usage,content is obscuredby hand
  24. 24. Especially important if n00b to mobile
  25. 25. Typical WorkflowRequirements GatheringProposalDesignDevelopDeliverNot quite what they wantReiterate
  26. 26. New WorkflowRequirements GatheringProposal PrototypeClient FeedbackPixel Perfect PrototypeHand-off to dev team
  27. 27. Pixel Perfect Prototypes?
  28. 28. It feels real
  29. 29. Woah, that’s deep
  30. 30. Ressan Numba One:Poor Man’s Prototype
  31. 31. Photos is Your Friendhttp://www.flickr.com/photos/53225371@N05/5972087523/
  32. 32. Regular Notebooks
  33. 33. Step 1: Draw
  34. 34. Step 2: Take Picture
  35. 35. Step 3: Enjoy
  36. 36. Works for Phone Apps Too
  37. 37. Ressan Numba Two:Weapons
  38. 38. Balsamiq
  39. 39. Mockingbird
  40. 40. Konigi Wireframe Stencils
  41. 41. Keynotopia
  42. 42. Photoshop Templates
  43. 43. Invision
  44. 44. FieldTest
  45. 45. Ressan Numba Tree:Edge Cases
  46. 46. Error States
  47. 47. No internet
  48. 48. No GPS
  49. 49. OK, I’m ready to kick some ass
  50. 50. http://fldt.st/1ub5jt
  51. 51. follow me on twitter@pekpongpaet
  52. 52. For more reading on designhttp://shelfluv.com/pekpongpaet/design

×