What is Material Design?

You don’t need to be a physicist to know there are plenty of differences between the digital and physical world.

You do, however, need to be somewhat astute to realise that, despite the obvious differences, the way we interact with them both is actually very similar.

We swipe, scroll, pinch, rotate, and tap virtual objects just like we’re manipulating physical material. The only major giveaway is that, well, we’re not. Apart from the implications this has for those designing our digital experiences, it doesn’t really matter during interaction if something is made of pixels or particles.

At least it shouldn’t. There’s no shortage of clunky and unintuitive mobile experiences out there — particularly on Android — that prove this theory dead in the water. But this is precisely why Google, in 2014, introduced its new “design language”, Material Design — to help bridge the language barrier and mental gap designers face between physical and virtual experiences.

With the online documentation being pretty dense and online guides a little confusing, we’re going to dive into exactly what Material Design is and what it applies to. We encourage you also to check out Google’s Material Design website, which is packed full of expanded guidelines, resources, and features.

Material, but not exactly

Just like physical material, digital material can be measured across three planes — height, width, and depth. This measurement is made in dps or device independent pixels, conveying that it’s also a measurement independent of any one screen resolution — as if they were merely different sized windows through which we can see it.

The problem is, when building environments with digital material, components don’t interact as they would if they had any real substance. Material Design, then, emphases gaining a strong understanding of concepts like lighting and shadows. For instance, with the primary light source flowing through the window of the screen, objects that are closer should cast darker shadows and those further away lighter ones.

Content, on the other hand, is handled much the same in the digital world as in the real world. It’s flat, being layered on top of material like ink on skin. It’s also guided by long-established print design methods — things like typography, space, grids, colour, scale, and imagery.

Working within these physical parameters, Material Design lays out what brands and designers need to do to retain hierarchy, meaning, and focus throughout the whole length of their digital experiences. Here are five of the main areas Google go into, along with some of its suggestions for achieving that result.

Shape

As a defining factor in a materials purpose, shape is an important component of Material Design. Within the confines of a small rectangular screen, one small change to a material’s shape can communicate a tonne of meaning.

It’s most decisive effect is in where the user should place their attention. Size, corners, curves, and angles all say something at varying volumes about what materials do and when they should be used. Familiar shapes help users recognise regular functions, unique shapes draw attention to something new, changes in state — bigger to smaller, closer to further — indicate actions and functions in relation to other elements in a group.

As shape doesn’t exist independently but in relation to other components, the key here — as in many areas of Material Design — is consistency. With consistency in form and geometry, materials can take on their own meaning and purpose while interacting together nicely as a unified whole.

Motion

Although not bound by the laws of physics, material in the digital realm should behave like material in the real world. However, this doesn’t mean it should be limited to the basic motions and actions we’re used to seeing.

The best analogy I’ve heard is that digital material is like the stuff of Spongebob — it can stretch, divide, merge, regenerate, and all without going beyond our laws and ideas about what’s possible. Material Design places a lot of focus on bold motion and strong animations like these, then, with the caveat that they must be rooted in reality.

To help explain why, let’s consider that some objects, according to their size, weight, texture, and environment, behave differently than others during an interaction. It is this mechanism of interaction — the subtleties of feedback, the coherency of transitions, etc. — through which users decipher whether or not a UI is intuitive, real, or effective.

Icons

The Material Design approach to icons is telling of everything the language is trying to achieve: communicate meaning in the quickest and most attractive way possible.

System Icons, as it calls them, are the little symbols that typically represent actions, files, devices, and directories. As per the guidelines, they should be geometric rather than gestural, of one block colour with varying opacity depending on their state, and contain very little detail. Above all, though, they should be consistent.

Consistency is, once again, the key. To be effective, icons need to be recognisable at any size and create a sense of brand unity across many devices and platforms. With a disparate set of products, Google does this better than anyone else — so take heed from its vast library of themed Material Icons.

Colour

If pixels are the particles that make up your material, and material the substance that makes up your brand, then nothing says more about your brand than the colours it uses.

Google understands this, and through its Material Design Palette Tool, allows brands to create organised and balanced colour schemes. You first select primary and secondary colours — the ones that reflect your brand’s central tone and style. Then you choose from generated dark and light variants of each to be used throughout your UI in different ways.

Used together, this builds a harmonious colour theme that serves the Material Design guidelines — for instance, by always displaying text clearly and enabling users to distinguish between separate UI elements and surfaces.

Type

As we were reminded by the thin font trend, the most important point in type design is that fonts communicate information in a clear and efficient way.

Through achieving clarity and efficiency, you can’t help but achieve beauty as a side effect. The primary focus of the Material Design Type scale, then, is to first help you establish a structured and hierarchical system of fonts across all devices. It consists of guidelines over 12 scale categories — from H1 and subtitles to body, captions, and buttons. And to support the specific needs of your brand, it also lays out a range of contrasting styles that follow the scale.

One of the things it advises is that, for instance, when choosing your heading fonts, you should choose something expressive, such as a display, for the largest, handwritten or script style for H3, and Serif or sans serif for H5 or H6.

Material Design 2?

After four years since the initial release of Material Design, Google has begun slowing but surely rolling out version number two.

With Gmail’s recent redesign — one of the last services to adopt Material Design principles — many of you may have already gotten a glimpse of what this may look like. An abundance of white space, bold and colourful icons, a move from Roboto to “Google Sans”, and rounder, bouncier corners are just some of the differences that will likely define Google’s new approach.

But let’s be clear, few of the underlying principles laid out in Material Design 1 are actually changing. And Google will likely not name it as a release of a new iteration, but rather frame it as another part of its continually evolving design philosophy.