Tweet
Tweet

Slide 1

Slide 1 text

Origami Design Prototyping • • • • • • • • • with • • • • • • • • • Jay Thrash Triangle CocoaHeads January 2014

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Prologue

Slide 4

Slide 4 text

May 2013 Triangle CocoaHeads

Slide 5

Slide 5 text

May 2013 Triangle CocoaHeads

Slide 6

Slide 6 text

Quartz Composer

Slide 7

Slide 7 text

Quartz Composer visual programming

Slide 8

Slide 8 text

Quartz Composer

Slide 9

Slide 9 text

wiring patches Quartz Composer

Slide 10

Slide 10 text

Quartz Composer

Slide 11

Slide 11 text

rapid prototyping Quartz Composer

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

So what’s the catch?

Slide 14

Slide 14 text

Quartz Composer

Slide 15

Slide 15 text

Quartz Composer 2007

Slide 16

Slide 16 text

Quartz Composer state of decline? 2007

Slide 17

Slide 17 text

Quartz Composer

Slide 18

Slide 18 text

Quartz Composer increased complexity

Slide 19

Slide 19 text

Origami Design prototyping toolkit for Quartz Composer

Slide 20

Slide 20 text

Origami http://origami.facebook.com

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

SpyBook Demo

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Thanks! @jaythrash [email protected] http://jaythrash.com/talks