February 12, 2014

Two Hours With Quartz Composer + Origami

Yeah, I’m jumping on the QC bandwagon while it’s hot. Last week like so many others like me I read the Fast Company article celebrating Facebook’s release of Origami, a plugin to Apple’s Quartz Composer graphics tool that aims to make it easier to use for interaction design and interactive prototyping. I had opened QC once or twice and found it pretty unapproachable, but this time committed to spending a couple of hours figuring it out. I’m eventually going to write a lil’ tutorial of my own about how to get started prototyping a simple app, but for now wanted to share a few useful starting points and tutorials, and a few less-useful personal reactions and observations.

QC is clearly a very powerful tool with generative graphics and animation capabilities that go well beyond what I’d need for even complex UI prototyping. There are some full-on epic examples of what’s possible woven into this discussion thread on Branch.com. For example, check out this prototype of Facebook Home’s navigation complete with “gravity” effects. It’s evident that mastery of this tool gives an interaction designer a ton of knobs to tweak when prototyping and demonstrating rich animations and interactions.

QC, even with Origami, is definitely not a “photoshop for interaction design”. The Fast Company piece calls it that in the title, so it’s not my fault for expecting it. Origami makes it promising, but it’s nowhere near a one-stop shop. You’ll need to use Photoshop (or Illustrator, or Sketch) upstream from QC in your workflow to design, create and cut graphic assets—just like you would when designing an app—to import into QC and bring to life. The size-cut-import workflow actually reminded me of the good old days of building Flash apps, just without any ability to create vector shapes or type.

I’m pretty sure that knowing how to prototype using CSS and Javascript makes it harder for me to grasp QC. It’s taking me a lot more time than I want to admit to get used to the “visual programming” interface that QC presents. I actually think that experience thinking in code puts me at a disadvantage; for example, my CSS-bred mental model views things like X/Y coordinates as intrinsic properties of an object. A div containing an image has set of CSS rules like position:absolute;top:10px; applied to it directly. In QC, if I want to apply that same 10 pixel offset to an image, I need to take the image and manipulate it indirectly using what QC calls a Transform patch. That, and there’s the typical beginner’s frustration of knowing that I could build a tab bar in 10 minutes MY WAY but instead I’m sitting here connecting those fucking tiny little wires to boxes repeatedly and seriously, can’t I just $('.tab').on('click') or something and make it work already?

There really aren’t that many QC tutorials that focus specifically on interaction design and prototyping. It seems like there’s a community of VFX artists and, specifically, VJs who use the tool to great effect and have made both tutorials and tons of sample files available on quartzcomposer.com and kineme.net. It’s a bit harder to hunt down what applies specifically to an interaction designer’s use case.

QC and Origami Resources

Dave O’Brien created an epic set of video walkthroughs where he recreates Facebook Home using Quartz Composer. Confession: I didn’t really watch past the second one. I bet that if I did, I’d like QC more.

And whoever these Prabrothers are, they appear to be on track to write a super-comprehensive guide to using QC for prototyping. The first chapter alone as well as the glossary are the two best introductions I found.

This Hackdesign lesson on QC has links to those two and more.

Finally, the example compositions from Origami’s own documentation were perhaps the most enlightening of all. They have these helpful little hints nestled within the different editors, not to mention very explicit descriptions of what each of the Origami patches do.