Prototyping with Quartz & Facebook Origami
An introduction to a powerful tool
Much of the personality of an application today is how it reacts and interacts on the input of the user. Not only since iOS7 it becomes more and more obvious that animations make a huge emotional difference to the people who are using it. So how can we quickly find and create ideas to make the actions feel alive and vibrant? The answer Quartz Composer patched up with Facebook Origami.
Facebook Origami is basically a lot of additional patches for Quartz composer that make it easier than ever to quickly create a high fidelity mockup of interactions and animations. The best way to understand Quartz composer is more as a visual programming tool with inputs and outputs than a designing software like sketch, photoshop etc.
Why its so much more practical than other prototyping tools? Because you can easily tweak your composition and rewire it in just about a few moments making it super fast to illiterate your ideas.
The environment and tools of Quartz
1. Editor (Shortcut ⇧⌘E)
This is where most of the magic happens and where you will spend a majority of your time. Figuring out the perfect values for your animations. It can be understood as the workbench where you drag all your different patches and wire them together. Here you can also enable all the different additional functionalities like the viewer or the parameters in the topbar.
2. Patch Library (Shortcut ⌘⏎)
If you think as your prototype as to be building a house here is the place where you find all the different kind of bricks and woods you will need for building. Just double click or drag and drop one of them into your editor and wire it up, pretty much as simple as it gets.
3. Parameters/Patch Inspector (Shortcut ⌘I)
In the Inspector you can tweak and modify a number of given settings that always depends on the specific patch that you have currently selected. For an example you have a bouncy animation patch selected and can here now adjust how fast it will go (ten and how much it will bounce back and forth (friction).
4. Viewer (Shortcut ⇧⌘V)
Basically the stage where you can preview everything you build in the editor.
What comes next?
Like the title said this is just the beginning of an ongoing series of articles and tutorials I will be creating within the next weeks, along the way I am learning the tool myself and using it already while creating the interactions of the upcoming Blinkist iPad app that will be released soon.
Amazing Resources
As Quartz has now quite a renaissance there is a ever growing library of resources. Here you can find a small special selection of what is currently available.
Introducing Origami for Quartz Composer
Great example files for reverse engineering from the official side.
