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

Transcript

1. Origami Design Prototyping • • • • • • • • • with • • • • • • • • • Jay Thrash Triangle CocoaHeads January 2014
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
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