Facebook Home prototyped in Quartz Composer - Tutorial

69 points about 1 year ago from Daan v., Interaction Designer at UNITiD

Facebook Home is prototyped with Quartz Composer (by Facebook), @DaveOBrien_ (a design student from Ireland) reverse engineered it and made 5 tutorials explaining how it's done!

Demo: http://www.youtube.com/watch?v=4N6Qr1hsxU8

Tutorials: http://www.youtube.com/watch?v=GGAtBvKsJAI http://www.youtube.com/watch?v=TkXcJ6DHsZA http://www.youtube.com/watch?v=SSgl58wGR2s http://www.youtube.com/watch?v=RiOKvRSCJ-A http://www.youtube.com/watch?v=_S_btiO6XTk

Sort by:

22 comments

Daan v., Interaction Designer at UNITiD

Just found out a (quick and dirty) way to interact with QC on an iPhone (or iPad): Liveview (with Interactive turned on). You do have to scale the components in such a way that they fill the entire 640*960px on your screen ideally. In my demo I just cropped the UI a bit.

Demo: http://f.cl.ly/items/0R320N1s1B0T3A2g0g0H/Stratus%20App%202013-04-16%20at%2010%3A57%3A40%20PM.mov

5 points about 1 year ago Reply

Nice tip!

0 points about 1 year ago Reply

Good stuff, glad people are finally noticing this program… just as it's being discontinued.

4 points about 1 year ago Reply

This was a rumor going around last week. There was an official reply saying this was a misinterpretation of a bug report: http://prod.lists.apple.com/archives/quartzcomposer-dev/2013/Apr/msg00037.html

1 point about 1 year ago Reply

Bit worried for it's future, used to be installed as standard with dev tools. When I went to install it for ML it took a lot of digging to find where it was hiding these days.

Hope it doesn't die, fill a big void on OS X seen as we don't have vvvv and MAXMSP costs a fortune and has awful DRM.

0 points about 1 year ago Reply

For anyone interested in learning QC, I put together a simple demo of an iPhone app and left a lot of comments on how it was put together. This is the file I wanted to see when I started learning: http://buff.ly/17B6xVK

There needs to be more of this - be the change you want to see.

2 points about 1 year ago Reply
David K., Designated Driver

Thanks for this. I agree, QC seems like a much improved way to show flows for interaction work so far. Also a lot of fun learning a new program from scratch again.

0 points about 1 year ago Reply
Max M., Principal at Marele & Co.

quartz composer is an amazing piece of kit

1 point about 1 year ago Reply
Nathan M., Designer of Flinto

Wow, thanks! There isn't much UI specific QC material, so this is much appreciated.

1 point about 1 year ago Reply
Miguel O., Visual Designer at Skype Edited about 1 year ago

I followed the full tutorial, but in the end, trying to add the text to the bubbles and its shadows somehow broke the comp. I really want to learn how to use this app, it seems limitless, but, somehow, I feel like every little thing, such as a drop shadow ( that I can quickly do in AfterEffects), requires a lot of work.

0 points about 1 year ago Reply

It's closer to coding than After Effects. Things people take for granted like drop shadows are not as simple as they first appear.

0 points about 1 year ago Reply
Julien D., Product Designer

Any easy way of getting that on my mac (running lion) without having a developers account?

0 points about 1 year ago Reply
Daan v., Interaction Designer at UNITiD

Yes. Look in the branch topic, I believe there is a dropbox link to the installer.

0 points about 1 year ago Reply
Scott S., Designer @ The App Business.

If anyone wants to join There is a Branch conversation going on here about Quartz Composer : http://branch.com/b/quartz-composer?ref=sidebar#zQeRTJ56Qh8

0 points about 1 year ago Reply
Camilo S., Digital Creative Director @Lowe Interamérica

Excelent! I've been looking for this!

0 points about 1 year ago Reply
Martijn O., Designer

These tutorials are really awesome! Thanks! I can't wait for more of them.

0 points about 1 year ago Reply
c k., User Experience @ Black Island

Is there anywhere that explaining why you connect the images patches? I've tried hard to use it before, but was confused about the basic way nodes connect to each other. Even Developer tools wasn't clear on it.

0 points about 1 year ago Reply

QC is a very complicated application, it does a heck of a lot more than this. So if you load in an image you don't necessarily wan't it displaying on the screen, you might be using it as a text on an object, as a mask, as pure image data to build a noise map from or something.

So when you drag an image in you have to wire it up to a billboard/sprite to tell QC that you wan't to display it as a graphic in the composition.

4 points about 1 year ago Reply

James summed it up nicely here.

It's difficult to fully understand why we use nodes unless you have a good knowledge of programming. They are essentially data structures which require inputs to work.

Think of them as a class. For example, the class person needs instances of 'name', 'age' and 'height'. Those would be fed in by the user if we were building a software application. Nodes are just like that. We are given a Sprite/Billboard ( like a class with it's variables ) with which we have to link an image ( which is like a user input to a console )

1 point about 1 year ago Reply
c k., User Experience @ Black Island

I have plenty of programming knowledge. I guess i just don't understand some overall concepts about the app. Is the flow nodes similar to a DOM? In my view the way I "think" it would work, is that every node in Quartz Composer has an input & output line drawn from it.. But that never happens on screens so it's confusing. My mind wants to think everything is supposed to be connected.

0 points about 1 year ago Reply
Jimmy O., Maker at hull

Thanks for sharing!

0 points about 1 year ago Reply
Daan v., Interaction Designer at UNITiD

On The Verge:

"Talking heads: how a late-night hack turned into Facebook's next big thing" http://www.theverge.com/2013/4/16/4205000/talking-heads-how-a-late-night-hack-turned-into-facebooks-next-big-thing

0 points about 1 year ago Reply