There have been a lot of leaks and rumors leading up to Google I/O this year. From Gmail to your Android device's home screen, nothing has been spared. Through all of this, we've seen some really interesting and non-traditional Android app designs, with matching web counterparts, that have made readers rightfully question their validity, and Google's design direction.

We've received new information related to what appears to be a new design paradigm for all Google's products across all platforms that should help explain what we've been seeing - say hello to Quantum Paper.

image

Right off the bat, it seems necessary to clear up that Quantum is the new design direction we've seen in recent leaks, including our post on Project Hera. It's also worth reiterating that Quantum is not Hera. Hera itself is not about design, it's about the unification of Chrome and Search on Android, where search tasks would create entries in your recents menu. It just so happened that our images (based on what we had been given) had elements from the Quantum design approach. That having been cleared up, I should also point out that we aren't treating this leak as one of our normal rumors. Like the Nearby rumor, we are confident enough that this is coming, and have seen enough information to move forward in presenting what we know confidently. That being said, there is always at least some chance that things could change before release.

What is Quantum Paper?

image

Quantum Paper is the overarching name for a new, unified design framework intended to make experiences consistent across all platforms. According to information available to us, it represents Google's effort to both create (with Google apps) and encourage consistent, beautiful design that delights across all platforms. Quantum Paper is a hugely ambitious project, looking to unify and codify paradigms for visual, motion, and interaction design across all platforms, including web, Android, and iOS.

Before we can understand the big picture though, we should look at Polymer.

Polymer

Polymer, more than anything else, gives us a really good look at some of the things Quantum can do. The project has been progressing at polymer-project.org for some time now, and it was shown off during the keynote at last year's Google I/O. Essentially, it's a toolkit for designing responsive websites using predefined yet customizable building blocks, like the header above. Take a look at this snippet from last year's keynote.

h/t Vinicius Low for pointing out this video

Polymer, then, is an open-source extension of Web Components. Google wants "this elegant UI framework that works across all form factors, all devices." Watching the proceeding video shown on stage, we can see a lot of familiar objects, from the header and search UI to things like the new camera icon, which already appears in Google Camera.

image image

What's even better about Polymer is that users can play around with its various bits and pieces already, with a designer tool available through the official Polymer site. Speaking of the Polymer site, it's made using Polymer. Scale it down and you'll notice that it too adopts the same header building block as we're seeing above.

image

The goal with Polymer is ostensibly to let developers use a predefined framework that not only comes in handy for Google's own products, but which allows third parties to create consistent, responsive, "delightful" web apps.

Back to Quantum

Having had a quick refresher, let's turn back to some of the recent Android-centered leaks. Let's review a few screenshots we've seen. The screens below are courtesy of Geek.com.

nexusae0_Screenshot____ nexusae0_2014-03-26-1

Time

There are many things going on here. The first thing many readers noticed about the shots above (and our own mockups in our coverage of Hera) is the exposed hamburger icon. Replacing the embedded rectangles that previously represented the presence of a navigation drawer, these shots show the three rectangles out in the open. This matches what we've seen in Polymer.

We also see some new iconography, much of it matching the symbols shown briefly at I/O 2013 (above), and some of which are already present in Polymer's designer tool. Then there are new interaction elements. The most obvious of these are the new toggle switch, the search icon, the "new content" button, and the "cluster" icon.

search pin newcontent cluster

Above: Search icon seen in Google+ and Gmail leak, pin toggle from Gmail leak, "new content" button from Gmail and calendar leaks, "cluster" icon from calendar leak

We've already seen the new search icon and new content icon in the radical overhaul of Google+, which itself is our first look at the Quantum approach on Android. The bright red header bar and new iconography represent the Quantum touches appropriate for the Google+ app. The good news is that, while Google+ lacks a hamburger menu, the UI element itself doesn't appear to be going anywhere - the new exposed hamburger icon still represents the presence of a navigation drawer.

GoogleKit

While Quantum is Android's arm of the Quantum Paper framework, GoogleKit will be the framework for iOS apps, according to our information. It isn't clear whether Google will be encouraging third-party developers to use this framework for iOS development, but it is clear that Google will be making an effort to use these paradigms and guidelines with their own products.

When can we see it?

According to the information available to us, the public will first (officially) see and hear about the Quantum framework for Android when Android's L release debuts. This is planned to be "the first instance of Quantum on Android," and will be open for third-party developers to use.

Along with this release, we have reason to expect a new set of guidelines called - appropriately - the Quantum Paper Spec, which will explain the overall approach and best uses for the design elements available.

While we can't say when the L release might hit, the information available to us does indicate that Quantum on Android is expected to be rolled out in iterations through Google products throughout the time leading up to release. Google+ is the first step, with other apps to eventually join. All apps and websites are expected to be updated in concurrence with the official debut of Quantum Paper with Android L, with refinement to follow.

Final Thoughts

Our new information surrounding Quantum is refreshing. There has been a lot of confusion over the past months about interface leaks and updates, with many questioning why Google isn't remaining consistent and resolute in its design guidelines for Android.

Having seen Quantum Paper, however, it is clear that not only is Google looking to be more consistent in Android design, but they are planning to provide all the pieces necessary to third party developers, and make this new interface approach consistent not just on its mobile operating system but across its web properties and perhaps more interestingly, iOS as well.

The potential here is large. You wouldn't be mistaken to think of Quantum as a sort of broad-sweep replacement for Holo, but it's even more powerful than that. The framework will include interface, motion, and interaction (as stated before) on all platforms, making for not just clearer and more consistent UI but also a more consistent user experience.

Yes, there will be pain points as developers consider and adapt their apps to this framework, but having this range of tools and guidelines available should make the process of designing new interactions and apps much simpler for those working on any platform. Here's looking forward to an official introduction to Quantum Paper.