Facebook Home for Android developed with Apple's Quartz Composer

Facebook Home, the social network's package of Android apps intended to take over the user experience of select smartphones running Android, was rapidly prototyped using Apple's powerful Quartz Composer visual programing tool.

Quartz Composer, a component Apple ships for free within its Xcode package of development tools, enables designers to create complex motion graphics by graphically linking together prebuilt rendering and processing actions.

QC makes it easy to tap into the power of Core Animation, the framework used to develop the rich user interface of OS X and iOS, including elements such as Time Machine and the Home screen or desktop Dock. QC can be used to create everything from iTunes visualizations and OS X screen savers to interactive light shows and prototype user experiences.

Facebook hopes to use Apple's graphics development tools to add value to Android smartphones, displacing the focus on Google's apps with its own social network-oriented features.

The social network's product design director Julie Zhuo noted in a blog posting that "you don't design something like Facebook Home using Photoshop," adding that "something like Facebook Home is completely beyond the abilities of Photoshop as a design tool," because you can't "talk about physics-based UIs and panels and bubbles that can be flung across the screen if we?re sitting around looking at static mock[up]s."Quartz Composer is "a visual prototyping tool that lets you create hi-fidelity demos that look and feel like exactly what you want the end product to be."

Zhuo noted the Facebook Home Design Team were "avid users" of Apple's QC, which she described as "a visual prototyping tool that lets you create hi-fidelity demos that look and feel like exactly what you want the end product to be."

She wrote that "not only does QC make working with engineers much easier, it?s also incredibly effective at telling the story of a design.

"When you see a live, polished, interactable demo, you can instantly understand how something is meant to work and feel, in a way that words or long descriptions or wireframes will never be able to achieve. And that leads to better feedback, and better iterations, and ultimately a better end product."

From Apple to Android

To develop its Home experience for Android smartphones, Facebook hired former Apple human interface designer Mike Matas, who had contributed toward the experienced of iOS as well as apps including Photo Booth and Time Machine. Apple had hired the 19 year old Matas from Delicious Monster in 2005, based on design work he had completed as a teen.

After leaving Apple in 2009, Matas followed iPod head Tony Fadell to Nest, where he helped design that company's learning thermostat.

At the same time, Matas also cofounded Push Pop Press in 2009 in an effort to develop interactive iPad books using a physics-based touch interface. However, after showing off its first title, an interactive version of Apple board member Al Gore's "Our Choice" book, Push Pop reportedly ran into conflict with Steve Jobs.

During 2011, Jobs was rumored to have threatened intellectual property claims against Push Pop, related to the idea that Matas and his confounding partner Kimon Tsinteris had both developed patent claims they assigned to Apple as employees.

Tsinteris refuted the rumor, telling AppleInsider last year that Apple had not played a role in shutting Push Pop Press down, noting that the company had instead awarded the firm an Apple Design Award for its efforts.

Apple was pursuing its own interactive content plans, however, having shipped Xcode 4.0 and the HTML5 iAd Producer development tools in 2010, launched iBooks alongside the iPad 2 in 2011, and was ramping up to deliver iBooks 2 and the new iBooks Author development tool in early 2012.

Any potential competition between Apple's iBooks and Push Pop Press in the realm of interactive content ended abruptly in August 2011, when Facebook bought up Push Pop Press and scuttled its plans for digital books.

"We're taking our publishing technology and everything we've learned and are setting off to help design the world's largest book, Facebook," the acquired company announced on its web page.

The result is a very Apple-like experience option currently limited to specific Android phones (shown above), albeit one that hasn't yet proven itself as a successful, differentiating feature among smartphone buyers. If it does turn out to be a hit, Facebook Home may spread to other platforms, potentially replacing the tiles of Windows Phone or even the basic user interface of simpler feature phones.

Hear how Facebook Design uses Quartz Composer, a node-based visual programming language, to help ship better products faster. Drew Hamlin will lead this half-day workshop intended for anyone interested in interaction design and rapid prototyping. The workshop will familiarize attendees with Quartz Composer; a tool that is frequently used by the design team at Facebook for prototyping. There are no prerequisites for attendance.

Not entirely shocking. Apple hardware and software (as well as packaging, marketing, iconography, accessories, etc) is used as the template for everything, so you may as well develop your products using Apple's tools as well.

I hope Apple locks down Xcode / Composer to only work on OSX devices. I know it's crass and in bad taste but the thought of elegant Apple-designed interfaces being used to put lipstick on a pig is just disgusting.

Hey this isn't just any old Android app!!! It was designed in OSX!!! *rolls eyes*

Really? Cool! Also, only the 2nd person to use his real name then. I like Delicious Library link
Nice piece from the bio:Sony, with its appreciation for style, had gotten the famous designer Issey Miyake to create one of its uniforms. It was a jacket made of ripstop nylon with sleeves that could unzip to make it a vest. “So I called Issey and asked him to design a vest for Apple,” Jobs recalled. “I came back with some samples and told everyone it would be great if we would all wear these vests. Oh man, did I get booed off the stage. Everybody hated the idea.”

In the process, however, he became friends with Miyake and would visit him regularly. He also came to like the idea of having a uniform for himself, because of both its daily convenience (the rationale he claimed) and its ability to convey a signature style. “So I asked Issey to make me some of his black turtlenecks that I liked, and he made me like a hundred of them.” Jobs noticed my surprise when he told this story, so he gestured to them stacked up in the closet. “That’s what I wear,” he said. “I have enough to last for the rest of my life.”

Despite his autocratic nature—he never worshipped at the altar of consensus—Jobs worked hard to foster a culture of collaboration at Apple. Many companies pride themselves on having few meetings. Jobs had many: an executive staff session every Monday, a marketing strategy session all Wednesday afternoon, and endless product review sessions. Still allergic to PowerPoints and formal presentations, he insisted that the people around the table hash out issues from various vantages and the perspectives of different departments.

Because he believed that Apple’s great advantage was its integration of the whole widget—from design to hardware to software to content—he wanted all departments at the company to work together in parallel. The phrases he used were “deep collaboration” and “concurrent engineering.” Instead of a development process in which a product would be passed sequentially from engineering to design to manufacturing to marketing and distribution, these various departments collaborated simultaneously. “Our method was to develop integrated products, and that meant our process had to be integrated and collaborative,” Jobs said.

This approach also applied to key hires. He would have candidates meet the top leaders—Cook, Tevanian, Schiller, Rubinstein, Ive—rather than just the managers of the department where they wanted to work. “Then we all get together without the person and talk about whether they’ll fit in,” Jobs said. His goal was to be vigilant against “the bozo explosion” that leads to a company’s being larded with second-rate talent:

For most things in life, the range between best and average is 30% or so. The best airplane flight, the best meal, they may be 30% better than your average one. What I saw with Woz was somebody who was fifty times better than the average engineer. He could have meetings in his head. The Mac team was an attempt to build a whole team like that, A players. People said they wouldn’t get along, they’d hate working with each other. But I realized that A players like to work with A players, they just didn’t like working with C players. At Pixar, it was a whole company of A players. When I got back to Apple, that’s what I decided to try to do. You need to have a collaborative hiring process. When we hire someone, even if they’re going to be in marketing, I will have them talk to the design folks and the engineers. My role model was J. Robert Oppenheimer. I read about the type of people he sought for the atom bomb project. I wasn’t nearly as good as he was, but that’s what I aspired to do.

The process could be intimidating, but Jobs had an eye for talent. When they were looking for people to design the graphical interface for Apple’s new operating system, Jobs got an email from a young man and invited him in. The applicant was nervous, and the meeting did not go well. Later that day Jobs bumped into him, dejected, sitting in the lobby. The guy asked if he could just show him one of his ideas, so Jobs looked over his shoulder and saw a little demo, using Adobe Director, of a way to fit more icons in the dock at the bottom of a screen. When the guy moved the cursor over the icons crammed into the dock, the cursor mimicked a magnifying glass and made each icon balloon bigger. “I said, ‘My God,’ and hired him on the spot,” Jobs recalled. The feature became a lovable part of Mac OSX, and the designer went on to design such things as inertial scrolling for multi-touch screens (the delightful feature that makes the screen keep gliding for a moment after you’ve finished swiping).

edit: Forgot to ask: why doesn't Apple change this:
so that you can only publish your work created with Xcode for iOS or OSX and nowhere else?Edited by PhilBoogie - 4/11/13 at 11:40pm

I know this will be rebutted and certain extremists here will begin to gnash their teeth, growl and kick their cat... however I think many people would be surprised to know that most of the progressive web and mobile development is being designed and programmed on Macs using Apple and Mac software.

Including Google: which I've heard is roughly 90% Mac. There was an article here on AI a ways back where they were not allowing Windows machines on their internal network even.

Facebook: appears to also have a vast majority of Mac users. I have no numbers, but a colleague was recently at FB-HQ on official "phone" business, and related to me this observation.

If you take a look on the web for certain Google IO conferences and seminars, you'll also see mostly if not all Macs running and loving dev tools like Tower (GIT hub), Sublime Text 2, the built in terminal or iTerm, etc.

Finally... this all makes sense considering the web (Apache), as well as iOS and Android as platforms, are based on UNIX.

So what's the easiest desktop OS and best hardware on the market that runs UNIX at it's core? Yup. Macs.

NOTE: the following probably belonged in a previous thread yesterday... but...

Due to most forward-thinking young engineers studying and developing for mobile these days, whether web or apps for the 2 leading platforms (also Amazon)... I find it (personally) rather obvious why Microsoft is having such a hard time getting their Mobile Initiative off the ground. None of the major tech news or analyst companies make note of this either regarding the plunging sales of PCs. There's only the backward, ingrained desktop-die-hards and gamers left either developing for and/or using the Windows platform. The rest have moved on to mobile Post-PC preparation and usage. Just my little added take to their problem....

Knowing what you are talking about would help you understand why you are so wrong. By "Realistic" - AI Forum Member

A friend of mine does. Still works. And because he has it, he got the Apple cube when it was released. Yep, nice little museum he is building up. That NeXT one was expensive though, 20k IIRC, but might've been due to software - don't know.

Nevermind my previous message. I somehow thought that some people didn't wan't QC to run on iOS because it would allow some cheap crappy apps to be published. (QC projects only run on Macs right now and not on iOS)

"During 2011, Jobs was rumored to have threatened intellectual property claims against Push Pop, related to the idea that Matas and his confounding partner Kimon Tsinteris had both developed patent claims they assigned to Apple as employees."

"Confounding" partner? Talk about a Freudian slip. And how does Tsinteris feel about Matas?

Isn't it more like HTTP was first designed on a NeXT? Because there's a lot more to the Internet than HTTP.

Indeed, 'the internet' spans a whole lot of tech, and Tim Berners Lee is simply being remembered as the one who invented 'the WWW', based on Apple's HyperCard. From Wiki: "he implemented the first successful communication between a Hypertext Transfer Protocol (HTTP) client and server via the Internet"

I know it's evil of me but I wish there was a way anything created using this tool refused to operate on anything not made by Apple.

It's javascript not some proprietary programming language like Xcode. Interestingly, it is surprisingly easy to import a QC project directly into Xcode so Facebook could build something for iOS very quickly. That said, it would have to pass the scrutiny of the Apple review committee and I doubt it would be approved in its present form as it clearly duplicates core functionality with its launcher home screen.

Not so sure about that. QC projects can run in a browser on the web and look very similar to a native app on iPhone, plus a QC can be imported into Xcode in less than a minute and compiled as an iOS app.

Indeed, 'the internet' spans a whole lot of tech, and Tim Berners Lee is simply being remembered as the one who invented 'the WWW', based on Apple's HyperCard. From Wiki: "he implemented the first successful communication between a Hypertext Transfer Protocol (HTTP) client and server via the Internet"

I hope Apple locks down Xcode / Composer to only work on OSX devices. I know it's crass and in bad taste but the thought of elegant Apple-designed interfaces being used to put lipstick on a pig is just disgusting.

Hey this isn't just any old Android app!!! It was designed in OSX!!! *rolls eyes*

XCode does only work on OSX devices...

The reason is can compile apps that work on other platforms is because it uses the open-source compilers GCC, LLVM and Clang.

And what other tools are Android developers going to use? Windows? The only 2 decent options are Linux or OSX, so that's what most Android devs use... (Google uses alot of Linux boxes, Facebook apparently likes OSX)

Not so sure about that. QC projects can run in a browser on the web and look very similar to a native app on iPhone, plus a QC can be imported into Xcode in less than a minute and compiled as an iOS app.

That's simply not true. iOS doesn't contain the Quartz Composer framework. QTZ files can be open in Safari through the Quicktime plug-in, but it relies on the old QT7 APIs which never existed in iOS.

Indeed, 'the internet' spans a whole lot of tech, and Tim Berners Lee is simply being remembered as the one who invented 'the WWW', based on Apple's HyperCard. From Wiki: "he implemented the first successful communication between a Hypertext Transfer Protocol (HTTP) client and server via the Internet"