Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AltConf 2014: Interaction Prototyping with Origami & Quartz Composer

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

83231ffaec4a72ef96d26526872961ac?s=128

Jay Thrash

June 03, 2014
Tweet

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