Material: The Latest Design Philosophy From Google

|

google-material-1

Material is a simple word that conveys multiple meanings. It can be a noun, as “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 appropriate when considering Material, Google’s new design philosophy, which gets its banner debut in Android 5.0 “Lollipop.”

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. In a simple words, 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. 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?” said Matias Duarte, vice president of design for Android.

Material was the biggest design project Google has ever undertaken. It grasped 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.

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.

google-material-2

For latest iOS users, 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? 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 lies on 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.

Theory Versus Practice

It sounds great in theory, and there is 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.

To ensure Material wouldn’t just work for Google properties, Google’s designers went ahead and created third-party apps on its own. Since 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-material-3

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.