Mobile Prototyping Jujutsu (Prototyping mobile apps without code)               Pek Pongpaet
Outline1. Intro2. Why?3. Tools & Techniques4. Demo
@pekpongpaet  Pek Pongpaet
Best Entertainment AppiPadDevCamp Hackathon      Chicago, May 2010
Write about UX    “...your article has been our    most popular article on the           site since it ran.”             -...
6 Mortal Kombat Games
The Talk
What I’m talking about
http://fldt.st/13zlx82
Why???
NOBODY READS THESE
hard to imagine
Wireframes generallyuseless in getting feedback
Prototypes can be
Cheap
Fast
No Hold Ups
Unveil Usability Problems
Original Design                  impossible                    to reach                     without                  lifti...
New DesignEverything is within reach
Uncover Problems Earlier
design looks fine
but in normal usage,content is obscuredby hand
Especially important   if n00b to mobile
Typical WorkflowRequirements GatheringProposalDesignDevelopDeliverNot quite what they wantReiterate
New WorkflowRequirements GatheringProposal PrototypeClient FeedbackPixel Perfect PrototypeHand-off to dev team
Pixel Perfect Prototypes?
It feels real
Woah, that’s deep
Ressan Numba One:Poor Man’s Prototype
Photos is Your Friendhttp://www.flickr.com/photos/53225371@N05/5972087523/
Regular Notebooks
Step 1: Draw
Step 2: Take Picture
Step 3: Enjoy
Works for Phone Apps Too
Ressan Numba Two:Weapons
Balsamiq
Mockingbird
Konigi Wireframe Stencils
Keynotopia
Photoshop Templates
Invision
FieldTest
Ressan Numba Tree:Edge Cases
Error States
No internet
No GPS
OK, I’m ready to kick      some ass
http://fldt.st/1ub5jt
follow me on twitter@pekpongpaet
For more reading on designhttp://shelfluv.com/pekpongpaet/design
Prototype Jujutsu - Prototyping Mobile Apps Without Coding
Prototype Jujutsu - Prototyping Mobile Apps Without Coding
Prototype Jujutsu - Prototyping Mobile Apps Without Coding
Prototype Jujutsu - Prototyping Mobile Apps Without Coding
Prototype Jujutsu - Prototyping Mobile Apps Without Coding
Prototype Jujutsu - Prototyping Mobile Apps Without Coding
Prototype Jujutsu - Prototyping Mobile Apps Without Coding
Prototype Jujutsu - Prototyping Mobile Apps Without Coding
Prototype Jujutsu - Prototyping Mobile Apps Without Coding
Upcoming SlideShare
Loading in …5
×

Prototype Jujutsu - Prototyping Mobile Apps Without Coding

6,394 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

×