So, how can we help you?

Tell us a little about you and your project and we will get back to you quickly.

Quartz Composer key to iOS 7 design

July 18th, 2013 Jeremy Jeremy


A couple rough animations I mocked up using Quartz Composer. Ironically, less-real-worldy elements make it easier to animate in dynamic, fluid, and, yes, physical ways.

iOS 7 has made us totally rethink many of our apps. Of course the aesthetics needed to change, but as designers we should never stop there. The new OS brings amazing opportunities to engage the user even more emotionally through some really cool new APIs.

One of the new things in iOS 7 is a built in physics engine and a new focus on interactions and animations. As designers, that is super exciting to us. Unfortunately, traditional design tools like Photoshop lack the ability to flesh out these kinds of new interaction ideas. Photoshop is built for static mockups. That doesn’t cut it any more.


Fortunately, Apple has built a really neat tool called Quartz Composer (requires developer login) that makes it possible to play around with animation. I have always known about Quartz Composer but never gave it a chance due to the steep learning curve. With iOS 7, though, I really had no choice so I finally started diving into this week. Though many people have said it is a “dying application” (and it may be) it is nonetheless an incredibly useful tool and perhaps the best way to design animated interactions at the moment.

Quartz Composer tutorials are scarce but here is a nice set of video tutorials on creating Facebook Home using Quartz Composer by Dave O Brien. These give you enough of an idea to get started. I might actually work on some tutorials myself so stay tuned.

Hours is coming along beautifully and we cannot wait to show you more! If you want to stay in the loop, signup for the Hours mailing list below and take a peek at my Dribbble because I post stuff there quite often.


clicking on ".more" toggles class "visible" on "#popover" clicking on ".pageCover" removes class "visible" on "#popover"