MTE Explains: What Is Google’s ‘Material Design’ Android Interface?

One of the most exciting changes in Android 5.0 is the introduction of what Google calls “Material Design,” a new design language that determines how the company’s apps will look going forward. If you follow Android blogs or tech sites, you may have seen these two words thrown around quite a bit. But what do they actually mean?

Let’s break this down.

Think About Material Design Literally

The bulk of what you need to know is explained right in the name – Material Design. Google’s new interface is designed to look like it’s made from materials you can actually touch. Through the use of shadows and animations, things onscreen should move around the way you would kind of expect them to in reality. When you tap a button, additional actions pop out from under it. When you slide from the left, menus scoot on top of the previous screen. When you close an app, it slides away into the bottom of the screen. In a way, it’s kind of like interacting with a deck of cards.

Here’s how Google developers explained things at Google I/O 2014.

dZqzz5lZFvo maxresdefault

But What Does Material Design Actually Look Like?

Material Design borrows from concepts already applied to print design (think magazines and newspapers). Shadows help create a sense of depth where there is none, and proper usage can imitate the look of papers stacked several layers high.

Using these same techniques, modern apps look as though they have a sense of depth. The sidebar still comes out from the left side of the screen as before, but now it should float over the action bar at the top of the screen. Many apps have a Floating Action Button that hovers on top of other elements, and tapping it can bring out more options from underneath

MaterialDesign-Widgets

One trademark of Material Design apps thus far has been bold, bright colors. Google has exemplified this in its own apps, with Gmail being red, Inbox by Gmail sporting a light blue, and Keep getting yellow. Play Music is orange, Play Books is blue, Play Newstand is purple, Play Games is green, and Play Videos is red. The Play Store app swaps between these five colors, but that alone isn’t what makes it a good example of Material Design.

ZlY714W4uww maxresdefault

Your app can be gray and drab, like the current version of Google Drive, and still adhere to design guidelines. But colors do help establish a sense of which app you’re in and what function you’re doing. So while bold, attention-grabbing colors aren’t an inherent part of Material Design, they’re still a good thing to see.

MaterialDesign-Play-Books

Animations Are Key

It’s a little challenging to convey Material Design in static screenshots, and animations are a large reason why. To really make everything feel like actual material, each piece of the user interface has its place. Apps slide into the screen from the bottom and return there when done.

In the Android 5.0 version of the Google Now Launcher, the app drawer icon morphs into the white tray that holds your apps. Sidebars, buttons, and information cards all slide out from somewhere.

MaterialDesign-Launcher

These animations don’t just look attractive, they help users understand what’s happening. Having one page of an app slide out into another conveys that you’re looking at a different set of information now, whereas having the screen flicker and change instantly could appear to be the result of a glitch.

Animations show how different aspects of the user interface respond to our touch, and this is increasingly important as we move away from devices with physical input methods. We need to know what’s going on as we tap on different parts of the screen.

FBD0VlcVS1E maxresdefault

Material Design Isn’t Just About Android

While Google’s new design language is stirring the most excitement on its mobile platform, that doesn’t reflect its origins. This effort spawned from challenges encountered creating websites that scale across different screen sizes. The search giant wants the look and feel to transition across form factors, with people able to navigate one device using the information they learned from another. You can already see Material Design in the web versions of Keep, Drive, and Inbox by Gmail. It’s expected to show up more prominently in Chrome OS as well.

MaterialDesign-Form-Factors

Where Can I Find Material Design On Android Today?

Nexus devices shipping with Android 5.0 already provide a thoroughly Material experience. The latest version of the OS has also started to roll out to Nexus and Motorola phones and tablets. People without Android 5.0 don’t have to do without. Many of Google’s apps have already made the transition, and they’re available right in the Play Store. You can also check out our list of eight other apps that already show off Material Design.

And if you’re an Android app developer, Google has released a Material Design checklist that can help you be sure you’re getting everything right. Google has also provided a website that lays things out plainly for average folks too.

If you have questions about Material Design, don’t hesitate to ask away in the comments below!

Image credits: Android Developers, Google

Subscribe to our newsletter!

Our latest tutorials delivered straight to your inbox

Bertel King, Jr. Avatar

Read next

Tristan Harris, Google’s former design ethicist, told the US Senate that the pull-to-refresh gesture on nearly every app works like the lever of a Las Vegas slot machine, and he has long warned that we now reach for our phones around 150 times a day without ever calling it gambling
In 1969, László Bélády and two IBM colleagues published a paging-machine anomaly showing FIFO could make four memory frames suffer ten page faults after three frames suffered nine, leaving generations of operating-systems students staring at the moment more memory became the wrong answer
When Bell Labs engineer Karl Jansky pointed a rotating antenna at the sky in 1932 looking for sources of transatlantic radio static, he kept picking up a faint hiss that peaked every 23 hours and 56 minutes, and he eventually realized he had become the first human to hear the center of the Milky Way.
The colour magenta does not exist anywhere in the spectrum of visible light, and your brain manufactures it on the spot whenever red and blue cones fire together, inventing a hue to fill a gap that physics never bothered to provide.
On 28 May 2009, Google demoed a product called Wave on stage at I/O for 80 minutes and got a standing ovation from developers who had no idea what they had just watched, and 15 months later the company quietly shut it down because almost nobody could explain to a friend what it was actually for
When Clair Patterson set out in 1948 to measure the age of the Earth using lead in meteorites, his samples kept coming back contaminated, and the seven-year detour he took to find the source ended with him almost single-handedly forcing leaded gasoline out of American cars by 1986.
The IBM 305 RAMAC stayed in production until 1961, weighed more than a ton, stored five million characters on fifty spinning platters, and still drew customers because the alternative was a room full of punched cards
In 1977, Ann Druyan recorded an hour of her brainwaves and heartbeat two days after she and Carl Sagan agreed to marry, and NASA pressed the compressed minute onto Voyager’s Golden Record as a private love signal now more than 25 billion kilometres from Earth