Essentials to tame a wild beast - Pushing prototypes with Quartz Composer
Dave O Brien
Lesson 40
Recent shifts in mobile design means we must also shift our thinking. The use of motion and animation plays an essential part in conveying the personality of your work. Think of your favorite apps and Im sure you can pick out an interaction coupled with animation that makes each unique as well as adding function.
Thinking in motion is becoming more prevalent now but unfortunately these thoughts are hard to get down on a piece of paper. While not being as easy to learn as a pen, Quartz Composer is one of the best direct manipulation tools at the moment to help you breathe life into those radical ideas.
-
Introduction to Quartz Composer
If you've never used Quartz Composer before, these 7 videos will show you everything you need to know to get started. They start out simple, then advance to more complex programs that demonstrate the practical uses of QC.
Watch the 7 videos and try to follow along in Quartz Composer. Some of the exercises are really cool!
If you don't have Quartz Composer on your Mac yet, download Graphics Tools for Xcode from Apple Developer Center. -
Designing Facebook Home
It's no secret that a lot of the early work on Facebook Home was done with Quartz Composer. The end result was a very interesting one for many reasons; namely that an idea in it's infancy can be fleshed out very quickly with QC. This is very beneficial as it gives the designer a very clear view of what works and what doesn't.
Skip to 20 min 50 secs and pay close attention to Joey Flynn's section where he demos Home within QC. -
My Facebook Home Tutorials
I was fascinated by Home when it was announced, and my fascination further developed once I read that they prototyped out the initial and final versions using QC. I spent a few hours late one night building out my own replica and then recorded a series of tutorials outlining how I did it.
Follow along tutorials 1 - 3. First watch them. Then build alongside with the video and finally try and do it again without looking at the videos. Take it one video at a time. -
QC Designers : Custom Patches For UI Design
QC Designers is a great resource started by Hans Van De Bruggen where other QC users post problems, patches and sample compositions. It's a wonderful supplement to have while trying to get to grips with QC.
Join QC Designers and install the custom patches and make some very basic ones of your own such as a patch to output the cursor's X/Y position. -
Learn how others use QC
VJ's and visual effects artists are the ones who really know QC and are able to bend it to do whatever they desire. Check out 1024d.wordpress.com and Kineme.com for some amazing patches and compositions. I recommend you try QuartzBuilder, NetworkTools & GLTools
Come up with an iOS style interaction, package it up with QuartzBuilder and share it on Dribbble or Twitter. -
Stay in the loop
When I started out learning QC, the articles and tutorials about using it for UI/Interaction design were non existent. The QC group on Facebook is by far the best collective of QC users and they provided me with some great advise in my hour of need.
Join the Facebook group and get to know the regulars on there. Don't be afraid to ask questions and show off your work.
Dave O Brien
Designer, Twitter
I'm a creative from Ireland who currently works as a designer at Twitter. I enjoy dreaming up ideas, fleshing them out and building them to fruition. When I want to make my designs dynamic I breath life into them with Quartz Composer and add any additional post flourishes in After Effects. The best way to reach me is on Twitter.
