Pro Yearly is on sale from $80 to $50! »

App Prototyping 101: From Paper to Product

83231ffaec4a72ef96d26526872961ac?s=47 Jay Thrash
August 24, 2014

App Prototyping 101: From Paper to Product

These are slides from a workshop I originally gave at 360iDev in Denver, CO on August 24, 2014

App prototyping is a powerful technique for quickly iterating, analyzing, and improving your app designs. The importance of prototyping cannot be underestimated when it comes to validating everything from the user experience, the interaction design, and the problem we are trying to solve as app designers and developers.

In this fun, hands-on workshop, we will cover a wide range of tools and techniques for prototyping your app; from paper and pen sketches to interactive, animated mockups which allow you to rapidly try out multiple ideas with real users before before ever launching Xcode.

83231ffaec4a72ef96d26526872961ac?s=128

Jay Thrash

August 24, 2014
Tweet

Transcript

  1. App Prototyping 101 From Paper to Product Jay Thrash @jaythrash

    360iDev, Denver August 2014 WIFI 360iDev pw: denver2014
  2. App Prototyping Agenda |əˈjendə| a list of items to be

    discussed at a formal meeting
  3. App Prototyping Agenda ✴ Interaction Prototyping ✴ Quartz Composer ✴

    Keynote ✓ Sketching ✓ Role ✓ Skills ✓ Techniques Paper Pixels
  4. App Prototyping Agenda Schedule

  5. App Prototyping Agenda Pause Practice Present

  6. App Prototyping Purpose |ˈpərpəs| The reason for which something is

    done or created or for which something exists.
  7. Why does prototyping matter? App Prototyping Purpose

  8. How Apps Are Made* App Prototyping Purpose *results not typical

  9. Idea How Apps Are Made* App! ! App Prototyping Purpose

    *results not typical S.M.O.P. ☕️
  10. Idea How Apps Are Made* App! ! App Prototyping Purpose

    *results not typical S.M.O.P. ☕️
  11. Idea App? App Prototyping Purpose “SMOP” ☕️ How Apps Are

    Made ^(really) ☕️ ☕️ ☕️ ☕️ ☕️
  12. App Prototyping Purpose This is why prototyping matters

  13. Idea How Great Apps Are Made Coding App! App Prototyping

    Purpose Prototypes
  14. Idea How Great Apps Are Made Coding App! ! App

    Prototyping Purpose Prototypes
  15. App Prototyping Purpose Create Prototypes

  16. App Prototyping Purpose Create Prototypes Collect Feedback

  17. App Prototyping Purpose Create Prototypes Collect Feedback Validate

  18. App Prototyping Purpose Create Prototypes Collect Feedback Validate

  19. App Prototyping Purpose Know what to build before you build

    it
  20. App Prototyping Paper

  21. App Prototyping Sketching |skeCH| a rough or unfinished drawing or

    painting, often made to assist in making a more finished picture
  22. Purpose App Prototyping Sketching

  23. App Prototyping Sketching Problem Solving ?

  24. App Prototyping Sketching Externalize Thinking

  25. App Prototyping Sketching Visual Communication “Download”

  26. App Prototyping Sketching Visual Communication

  27. App Prototyping Sketching Shared Understanding

  28. App Prototyping Sketching Collaboration

  29. App Prototyping Sketching Think Understand

  30. App Prototyping Sketching Think Understand Reflect

  31. App Prototyping Sketching Think Understand Reflect

  32. App Prototyping Sketching Think Understand Reflect Repeat

  33. Co$t App Prototyping Sketching

  34. App Prototyping Sketching Cheap Fast Valuable

  35. App Prototyping Sketching Cheap Fast Valuable Pick 3!

  36. App Prototyping Sketching Sketching Drawing http://maxcdn.webappers.com http://www.cathrinelindblom.com

  37. App Prototyping Sketching Sketching Drawing http://maxcdn.webappers.com http://www.cathrinelindblom.com

  38. App Prototyping Sketching Jason Santa Maria …but about being a

    good thinker.” “Sketching isn’t about being a good artist…
  39. Tools App Prototyping Sketching

  40. App Prototyping Sketching Tools Printer/Sketch Paper “N-Up” Templates ! Fancy

    Sketchbooks Paper Pens Black & Red Shading Marker Extras ˒ Drafting Dots ˒ Post-its ˒ Straight edge
  41. Skills App Prototyping Sketching

  42. App Prototyping Sketching 5 Basic Elements

  43. App Prototyping Sketching 5 Basic Elements Dot Line Square Triangle

    Circle
  44. App Prototyping Sketching Sketching Tips Use your arm, Not your

    wrist 1 Rotate the page 2 Keep it simple 3 Minimize embellishments 4
  45. Techniques App Prototyping Sketching

  46. App Prototyping Sketching Divergent

  47. App Prototyping Sketching Divergent Convergent

  48. App Prototyping Sketching WWDC 2014 - Session 223 - Apple,

    Inc. Divergent
  49. App Prototyping Sketching Convergent

  50. Practicing App Prototyping Sketching

  51. Refine & Repeat Assess 1 min App Prototyping Sketching •Group

    Activity •“Time Boxed” •Specific Challenge •Quantity > Quality Present 1 min Speed Sketch Sessions Sketch 5 min
  52. Sketch Board App Prototyping Sketching •Public •100% Uptime •Historical Record

    •Mobile Organizing
  53. Practice App Prototyping Sketching

  54. App Prototyping Pixels |ˈpiksəl| a minute area of illumination on

    a display screen, one of many from which an image is composed.
  55. Origami Quartz Composer App Prototyping Pixels

  56. Quartz Composer http://developer.apple.com/downloads App Prototyping Pixels

  57. visual programming App Prototyping Pixels

  58. wiring patches App Prototyping Pixels

  59. wiring patches App Prototyping Pixels

  60. rapid, interactive prototyping App Prototyping Pixels

  61. Origami App Prototyping Pixels

  62. Design prototyping toolkit for Quartz Composer App Prototyping Pixels

  63. http://origami.facebook.com App Prototyping Pixels

  64. Origami • Phone • Phone Dimensions • Switch • Scroll

    • Bouncy Animation • Classic Animation • Transition • Color Transition • Image Transition • Interaction 2 • Layer • Text Layer • Button • Hit Area • Timer • Counter 2 Patches
  65. Quartz Composer UI Tour App Prototyping Pixels

  66. Editor Shift+⌘+E

  67. Viewer Shift+⌘+V

  68. Library ⌘+Return

  69. Inspector ⌘+I

  70. App Prototyping Build |bild| Construct by putting parts or material

    together over a period of time.
  71. App Prototyping Pixels Disc Golf App •Scrolling list of courses

    •Animated Team listing
  72. App Prototyping Pixels Feed Header Avatars

  73. Render Input Logic Motion App Prototyping Pixels

  74. Render Input Logic Motion App Prototyping Pixels

  75. App Prototyping Pixels Disc Golf App let’s build it!

  76. App Prototyping Pixels Demo

  77. Practice bit.ly/360idev-qcdemo App Prototyping Pixels

  78. App Prototyping Pixels |ˈpiksəl| a minute area of illumination on

    a display screen, one of many from which an image is composed.
  79. App Prototyping Pixels Keynote

  80. App Prototyping Pixels Keynote • Under Valued
 Drawing & Animation

    • Easy Distribution • Test on Device
  81. App Prototyping Pixels Rapidly • Build Screens • Test Flow

  82. App Prototyping Pixels Animations

  83. App Prototyping Pixels Animations Transition • Build In • Build

    Out •Slides •Objects Actions • Move • Scale • Rotate •Objects
  84. SpyBook UX App Prototyping Pixels Animations in Action

  85. App Prototyping Pixels Drawing

  86. App Prototyping Pixels Shape Tools More than meets the eye

  87. App Prototyping Pixels Shape Tools Image Masks Shape Operations

  88. App Prototyping Pixels Shape Tools Image Masks Shape Operations

  89. App Prototyping Pixels Simulating Screen Transitions Table Navigation? Modal Sheets?

    Push Move In Magic Move
  90. App Prototyping Pixels Demos

  91. App Prototyping Pixels Practice