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

Prototyping with Origami

83231ffaec4a72ef96d26526872961ac?s=47 Jay Thrash
January 23, 2014

Prototyping with Origami

Introduction to Origami - a design prototyping toolkit for Quartz Composer.

A recording of this presentation is available here: http://vimeo.com/jaythrash/facebook-origami

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

Originally presented at Triangle CocoaHeads on January 23,2014

83231ffaec4a72ef96d26526872961ac?s=128

Jay Thrash

January 23, 2014
Tweet

Transcript

  1. Origami Design Prototyping • • • • • • •

    • • with • • • • • • • • • Jay Thrash Triangle CocoaHeads January 2014
  2. None
  3. Prologue

  4. May 2013 Triangle CocoaHeads

  5. May 2013 Triangle CocoaHeads

  6. Quartz Composer

  7. Quartz Composer visual programming

  8. Quartz Composer

  9. wiring patches Quartz Composer

  10. Quartz Composer

  11. rapid prototyping Quartz Composer

  12. None
  13. So what’s the catch?

  14. Quartz Composer

  15. Quartz Composer 2007

  16. Quartz Composer state of decline? 2007

  17. Quartz Composer

  18. Quartz Composer increased complexity

  19. Origami Design prototyping toolkit for Quartz Composer

  20. Origami http://origami.facebook.com

  21. 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
  22. 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
  23. 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
  24. 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
  25. 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
  26. 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
  27. 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
  28. 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
  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. 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
  31. SpyBook Demo

  32. Additional Resources Origami Project Page http://facebook.github.io/origami/ “Introducing Origami for Quartz

    Composer” by Julie Zhuo http://bit.ly/introducing_origami QC Designers Forum http://qcdesigners.com “Prototyping with Quartz Composer” by Jay Thrash http://bit.ly/qc_prototyping
  33. Thanks! @jaythrash jay@jaythrash.com http://jaythrash.com/talks