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.

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