Material. It’s a simple word, but it conveys multiple meanings.
Usually it’s a noun, the generic word for the substance an object is composed of. But it can also be an adjective, meaning the most essential and relevant parts of the topic at hand.It’s the latter definition that is the most apt when considering capital-M Material, Google‘s new design philosophy, which gets its banner debut in Android 5.0 “Lollipop.” The first Lollipop devices — the Nexus 6 smartphone and Nexus 9 tablet — debut this month, heralding the Material era.
Material has an ambitious mission: to create a unified design language across all devices — mobile, desktop, wearables and everything else — that doesn’t just work for Google, but also every app developer and manufacturing partner that touches Google’s ecosystem.
If Android is a world, and apps are the countries, Material is the new international law
If Android is a world, and apps are the countries, Material is the new international law.”Material design is our new look and feel, but it’s a lot more than that,” explains Matias Duarte, vice president of design for Android. “We wanted to come up with a design system that would help us actually unify and rationalize across all the different screens that we’re designing for — laptops, phones watches, televisions, automobiles. So we wanted to step back, reset, ground zero… can we come up with a design system for all these screens?”
Building Material
Material was the biggest design project Google has ever undertaken, Duarte says. It touched every design team within the company at some point. One of the early stages in the project saw one designer actually construct every Google product logo out of physical paper.
“We set out to understand, what is Material?” says Duarte. “How could you make things out of Material? We did these studies of actually carving out of paper all of our product icons. From that, we did a lot of explorations… Could we achieve something that had the bold graphic character that was very on trend right now, but also was informed by reality, nuanced and plausible in a way that your brain would just intuitively understand.”
One of the most important aspects of Material is the use of layers and dimensionality. Parts of the screen will elevate themselves or blur in the background depending on how the user is interacting with them. A good example of this how Android Wear smartwatches handle Google Hangout notifications — by showing the message on a piece of “paper” in the foreground while the person’s profile picture appears “behind,” slightly blurred.
To users of iOS 7 (and now 8), this will sound familiar. Apple’s design has been using layers in this way for some time, and Material is certainly, in part, Google’s attempt to instill the benefits of having a similar set of first principles in the Android world. While Android has had a distinctive look and feel since at least version 4.0 “Ice Cream Sandwich,” material updates and codifies it.
Material is very opinionated in the sense of ‘what are the rule of apps on Android and apps on the web?’
Material is very opinionated in the sense of ‘what are the rule of apps on Android and apps on the web?’” says Duarte. “It has a point of view: you should be using layers, you should be using white space, you should be avoiding skeuomorphism. In a sense, this does create greater constraints for people who want to work within that. But at the same time, design is all about working within constraints.”Another key aspect of material is its use of animation. Touching a button within an app doesn’t just call up a menu. If it’s done right, a Material app will have all the animation emanate from the touch point, like ripples in a pool of water.
“We wanted all the energy in the user interface come from your touch,” says Duarte. “Even navigation follows this same principle.”
Theory vs. practice
It all sounds beautiful in theory, and there’s so far one concrete example of the principles in practice: Inbox, Google’s new email app, is a showcase for Material design. It’s full of layering, bold colors and intuitive animation.
“Inbox has a bright, primary action,” explains Nicholas Jitkoff, a Google designer. “But they also evolved it — looking at how they could turn it into a speed-dial, to instantly compose to different people.”
To ensure Material wouldn’t just work for Google properties, Duarte says Google’s designers went ahead and created third-party apps on its own. Because Material needed to be kept secret before its big reveal at Google I/O 2014, the design team had to build a whole alternate universe of apps to ensure the principles worked and still left room for brands to express themselves.
Based on early examples of actual third-party apps, it appears to have worked. Tumblr’s Material app, like Inbox, has a prominent action button, and while the animation that it creates follows the Material approach of having it “emanate” from the touch point, the navigation is distinctively Tumblr.
Google hopes Inbox, Tumblr and other early Material apps (including the Wall Street Journal) serve as beacons for the 1+ million Android apps that will need to evolve to match the new design philosophy.
For Google, Material also sends a message to those who may have written off Android as a mess of fragmented devices, wildly varying apps and ugly OEM skins: We can play the design game just as well as Apple. Starting now, iOS is on notice.
It will probably take years for Material to fully permeate Google’s ecosystem, but Duarte says the company created the philosophy with that kind of patience in mind.
“It started with this question of, ‘Where is Google’s design going to go in the future?’ We wanted not to just think about an evolutionary step, but we wanted to project ourselves five years in the future and ask what’s it going to look like then?”
If Google has its way, it’ll be a Material world.
View article source