Introducing Origami for Quartz Composer

For easier interactive design prototyping

Why does interactive prototyping matter?

The process of designing should reflect the end product. If you’re designing a poster, then working on a static canvas makes sense. But more and more of us spend our days designing for interaction. We’re creating mobile and tablet UIs that respond to swipes, flings, taps, and presses. We’re designing for a world beyond just looking, pointing and clicking, but that gets into the realm of feel and manipulation—as Bret Victor so eloquently writes.

What is Quartz Composer?

  1. Motion graphics applications like AfterEffects or Flash
  2. Writing application code (Objective-C or Java)

Pros:

  1. Quartz Composer is state-based rather than time based (like AfterEffects). Which means the user can press a button, and upon pressing that button, something will happen and the state will be changed.
  2. Prototyping with Quartz Composer is fast: You can change a composition (edit values, make new connections between patches, swap in a new image) on the fly without having to recompile or wait for that result to take effect in your prototype. This has a pretty significant speed advantage over writing code and having to wait for compile/build (worst case scenario) or even doing a bunch of browser refreshes. Additionally, somebody well-versed in Quartz Composer can throw together a fairly complex mock (how chat heads move around the screen, for example) with a few number of patches.
  3. Quartz Composer compositions feel more self-documenting and therefore easier to understand than reading code. This is because the ports (parameters) and outputs are immediately obvious on the screen.
  4. Quartz Composer is powerful. It’s built on OpenGL, the same technology that powers graphics in Mac and iOS apps, so you can design things that are hard or impossible to do with other tools, for example, lighting, meshes or ripples.

Cons:

  1. Quartz Composer is pretty poorly documented. There aren’t many resources or tools to make it easy to ramp up.
  2. The app is pretty buggy. It’s not uncommon to crash multiple times a day.
  3. Quartz Composer was traditionally used for motion video graphics and not design prototyping. As such, it wasn’t designed with the design prototyping context in mind.

What, exactly, is Origami?

Origami is a free-to-use set of simple starter patches that allow for a number of common design patterns and interactions. Origami also comes with some example compositions to demonstrate the functionality of the patches.

  1. Easily hook in mouse input and keyboard commands to make something happen on the screen.
  2. Implement common animations such as sliding panes and drawers, zooming and shrinking photos, rotating icons, etc with springs.

Are you going to release updates?

Yes, we’d like to release more examples, patches, documentation and videos in the future. We can’t promise anything by any date, but we’ll do our best. Meanwhile, if you’d like to contribute, please join our Facebook group and get in touch.


The Year of the Looking Glass

A collection of essays by Julie Zhuo on design, building products, and observing life.

    Julie Zhuo

    Written by

    Product design VP @ Facebook. Author of The Making of a Manager https://amzn.to/2PRwCyW. Find me @joulee. I love people, words, and food.

    The Year of the Looking Glass

    A collection of essays by Julie Zhuo on design, building products, and observing life.