AltConf 2014: Interaction Prototyping with Origami & Quartz Composer

Introduction to Interaction Prototyping using Origami and Quartz Composer.

A recording of this presentation is available here: https://www.youtube.com/watch?v=dVmdFNbcjGQ

Sample Quartz Composition is available at https://github.com/jaythrash/spy-book

Originally presented at AltConf 2014 in San Francisco, CA on June 3, 2014

Transcript

1. Interaction Prototyping with Origami & Quartz Composer Jay Thrash AltConf, San Francisco June 2014
2. Interaction Prototyping Purpose |ˈpərpəs| The reason for which something is done or created or for which something exists.
3. Why does Interaction Design matter? Interaction Prototyping Purpose
4. Wireframes Mockups Application Interaction Prototyping Purpose Traditional Toolset
5. “iPad” by Apple, Inc. then, this happened… Interaction Prototyping Purpose
6. Wireframes Mockups Interaction Prototyping Purpose Application
7. Wireframes Mockups Interaction Prototyping Purpose
8. Application Gestures Easing Affordances Anticipation Timing Appeal Staging
9. Gestures Easing Affordances Anticipation Timing Appeal Staging Interaction Prototyping Purpose “Experience”
10. Interaction Prototyping Purpose “The App isn’t the binary. Dave Wiskus! Debug Podcast Episode 37 The App is the experience.” The App is the idea…
11. Interaction Prototyping Tools |to͞ol| A device or implement used to carry out a particular function.
12. Interaction Prototyping Tools Timelines L I N E A R
13. Thinglist by Elepath getthinglist.com Interaction Prototyping Tools
14. Interaction Prototyping Tools Programmatic [self customizedSolution];
15. Vesper by Q Branch vesperapp.co Interaction Prototyping Tools
16. Interaction Prototyping Tools Signal Flow
17. Paper by Facebook facebook.com/paper Interaction Prototyping Tools
18. Interaction Prototyping Tools Quartz Composer http://developer.apple.com/downloads
19. wiring patches Interaction Prototyping Tools
20. wiring patches Interaction Prototyping Tools
21. visual programming Interaction Prototyping Tools
22. rapid, interactive prototyping Interaction Prototyping Tools
23. So what’s the catch?
24. units vs. pixels Interaction Prototyping Tools +1.0 -1.0 +X -X +Y -Y +Z -Z +1.0 -1.0
25. controlled chaos Interaction Prototyping Tools
26. Origami Interaction Prototyping Tools
27. Design prototyping toolkit for Quartz Composer Interaction Prototyping Tools
28. http://origami.facebook.com Interaction Prototyping Tools
29. 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
30. Interaction Prototyping Build |bild| Construct by putting parts or material together over a period of time.
31. Interaction Prototyping Build Spyb00K
32. Feed Header Toolbar Interaction Prototyping Build Status Form Keyboard
33. Interaction Prototyping Build Quartz Composer Tour
34. Editor Shift+⌘+E
35. Viewer Shift+⌘+V
36. Library ⌘+Return
37. Inspector ⌘+I
38. Interaction Prototyping Build 11 Patches
39. Interaction Prototyping Build Render Input Logic Motion
40. Interaction Prototyping Build Demo
41. Interaction Prototyping Learn |lərn| gain or acquire knowledge of or skill in (something) by study, experience, or being taught
42. Resources Topics to Google • Facebook Origami • Transitional Interfaces • Avocado by IDEO • UX Prototyping
43. Expert Advice • Julie Zhuo • Drew Hamlin • Brandon Walkin • Pasquale D’Silva • Dave O’Brien
44. @jaythrash http://jaythrash.com/talks http://quartzcomposer.tv AltLabs 12:30-4:00
45. Thanks! @jaythrash http://jaythrash.com/talks http://quartzcomposer.tv AltLabs 12:30-4:00