Facebook Home for Android developed with Apple's Quartz Composer

in macOS edited January 2014
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

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.


  • Reply 1 of 33
    tallest skiltallest skil Posts: 43,388member

    *laughs internally*

  • Reply 2 of 33
    mazda 3smazda 3s Posts: 1,613member


    Originally Posted by Tallest Skil View Post

    *laughs internally*


    Not sure I see what's funny? Best tool for the job image

  • Reply 3 of 33
    studentxstudentx Posts: 112member
    Ah Google, Samsung and Facebook are having their cake and eating yours too!

    - Karma
  • Reply 4 of 33
    So that's what QC is for.
  • Reply 5 of 33
    fuwafuwafuwafuwa Posts: 163member
    What a waste, using good tool to polish turds.
  • Reply 6 of 33
    So Facebook used an Apple app/tool to build Facebook Home on Android?
    I don't see a problem with this...

    So what does this say....

    Facebook engineers prefer using Macs?

    Google's Android developer tools are inferior to Aplle's iOS/OSX developer tools?
  • Reply 7 of 33
    vl-tonevl-tone Posts: 337member
    I guess that for some devs Quartz Composer is taking the roles of what HyperCard and Macromedia Director used to have as rapid-prototyping tools...

    The weird thing in this story is that Quartz Composer compositions (.QTZ) do not even run on iOS (damn I wish they did! Maybe in iOS 7?). So I guess they added touch screens to their Macs...
  • Reply 8 of 33
    thttht Posts: 5,355member
    Mike Matas used to be member on AI!
  • Reply 9 of 33
    vl-tonevl-tone Posts: 337member
    Interesting page I just found:

    From the page :
    [quote]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.[/quote]
  • Reply 10 of 33
    slurpyslurpy Posts: 5,381member

    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. 

  • Reply 11 of 33
    sflocalsflocal Posts: 6,088member

    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*

  • Reply 12 of 33
    [quote]So what does this say....

    Facebook engineers prefer using Macs?

    Google's Android developer tools are inferior to Aplle's iOS/OSX developer tools?[/quote]

    Android platform has more choice of developer tools than Apple?
  • Reply 13 of 33
    philboogiephilboogie Posts: 7,675member
    tht wrote: »
    Mike Matas used to be member on AI!

    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?
  • Reply 14 of 33
    thepixeldocthepixeldoc Posts: 2,257member
    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....:smokey:
  • Reply 15 of 33
    philboogiephilboogie Posts: 7,675member
    ^ post

    Excellent post, thanks. We could add to that "the whole internet was designed on NeXT, the precursor of the Mac link

  • Reply 16 of 33
    MacProMacPro Posts: 19,697member
    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.
  • Reply 17 of 33
    philboogiephilboogie Posts: 7,675member
    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.

    That is indeed evil, but it's a nice evil.
  • Reply 18 of 33
    palegolaspalegolas Posts: 1,361member
    Quartz Composer is great.. I wish Apple was less mysterious about it and its future.
  • Reply 19 of 33
    tallest skiltallest skil Posts: 43,388member

    Originally Posted by PhilBoogie View Post

    Man, would I love to have a working one of these.

  • Reply 20 of 33
    philboogiephilboogie Posts: 7,675member
    philboogie wrote: »
    ^ picture of the NeXT cube
    Man, would I love to have a working one of these.

    And I would love to have that one - lol.

    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.
Sign In or Register to comment.