Continuing to test different UI interaction prototype, today I used Quartz Composer + Facebook’s Origami extensions to recreate my “Yo with Her” design.
I went through John Park’s excellent video tutorials on Vimeo to get some basic ideas of Quartz Composer’s paradigm. It’s pretty much a data-flow computation thing.
Having learned the basics of Quartz Composer, I looked through a few Origami specific examples and tutorials:
- QuartzComposer.tv Episode 2: The Scroll Patch
- Facebook’s origami examples
- UI Prototyping with Quartz Composer and Origami
I haven’t figured out how to achieve parallax effect yet, but basic scrolling with pulsing heart looks like:
It looks like a mess, but it’s actually not bad! Unlike FramerJS, the interactive primitives (“patches” in QC lingo) Origami added are iOS specific, which makes the prototype feels like iOS.
Adding assets into quartz composer is done by drop and dropping.
Quartz Composer is pretty easy to pick up, I think. The concepts aren’t hard to grasp. What makes learning it unnecessarily difficult is that the patches aren’t very discoverable, and there’s lots of old Quartz Composer cruft unrelated to UI prototyping.
Of Pixate, FramerJS, Origami, I think I am leaning towards learning Origami more in depth.
