Most designers today create static mockups to communicate app ideas. But increasingly apps are anything but static, which means as designers we need a better tool for interaction design.
Origami is a free toolkit for Quartz Composer—created by the Facebook Design team—that makes interactive design prototyping easy and doesn’t require programming.
Quartz Composer is a freely-available Mac OS X application by Apple that's been around for nearly a decade. It was never designed for the purpose of interaction prototyping though: it's primarily a motion graphics tool.
Out of the box without Origami, interaction prototyping with Quartz Composer is complicated. Origami provides a set of tools for Quartz Composer that make interaction prototyping a lot easier.
- Switch Toggles between on and off and remembers its current state.
- Scroll Lets you allow the user to scroll an image.
- Bouncy Animation Animate a changing value with a bouncy spring.
- Classic Animation Animate a changing number with a specified duration and easing curve.
- Transition Takes a number in the range of 0 to 1 and converts it to a range starting with Start Value and ending in End Value.
- Color Transition Fades between two colors.
- Image Transition Fades between two images.
- Interaction 2 Lets you get clicks on Layer patches. It works with Render in Image patches, iterators, and the Phone patch.
- Layer Lets you put an image on screen and adjust how it shows up.
- Text Layer Lets you put text on screen.
- Button Shows a button with a customizable label and background. Connect it to the Interaction 2 patch to make it interactive.
- Hit Area Lets you specify an area on screen to get clicks on. Connect it to an Interaction 2 patch to make it interactive.
- Phone Draws a phone (iPhone, Android or Windows Phone) with a specified screen image.
- Timer Runs a timer for a specified duration starting with a specified signal. It outputs the state of the timer as well as the time elapsed.
- Counter 2 Represents a number that can be incremented, decremented or set to a specific value.
Improvements to Quartz Composer
- Retina support for the viewer
- Automatically add a Layer patch when you drag in an image
- The up and down arrow keys can be used in text fields in the Inspector window
- Disabled patches show up as dimmed
- Native full screen support in the viewer window
- Connections are maintained when a splitter is deleted
- Fix an issue introduced in 10.8 that replaced spaces with underscores in port names
- Fix a crash introduced in 10.9 when you close a document
Requires Mac OS X 10.8 or higher.