An Introduction to Material Design – Will This be the Next Big Thing in Software Design?

Material design is a term that Google uses to describe its design sensibilities and practices across software, websites and apps. If you’ve ever used one of Google’s 50+ apps on iOS, you’ll find that they look markedly different from the apps you’re used to using from Apple – which is all down to this ‘material design’.

So what is material design? What are the rules? And how is it different from other design schemes like Microsoft’s ‘Metro UI’?

The Basic Principles of Material Design

If you want an official primer in material design, then you can find out more from Google themselves here.

But for those interested in getting stuck straight in, let’s go over some of the basic principles discussed in that text.

According to Google, the objective of this design language was to:

Create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design.”

So what does this mean? Essentially it sounds like Google wanted to take the principles that apply in the real world and then translate them for a digital format.

Grounded in Reality

Thus ‘material’ here is a metaphor that is supposed to convey the notion of a tangible, tactile reality based on paper and ink.

One thing that Google views as key to this, is the use of contrast, edges and realistic lighting which all provide cues as to how something should be interacted with:

“Surfaces and edges of the material provide visual cues that are grounded in reality. The use of familiar tactile attributes helps users quickly understand affordances.

“The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.”

On the face of it then, this sounds a little like a ergodic design (design based on real world objects). The difference though is that ergodic design is all about mimicking real specific objects (for instance, having the dialler app use a phone icon). This is more about using the contrast, shadows and edges that apply to all objects and using them to implicitly guide interactions.

Bold, Colorful Graphics

If you look at any of Google apps then, you won’t necessarily see ergodic designs, just lots of contrasts, clear edges and shadowing. At the same time, you might notice that they also use bold, high contrast colors that are somewhat minimalistic.

“The foundational elements of print-based design—typography, grids, space, scale, color, and use of imagery—guide visual treatments. These elements do far more than please the eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create a bold and graphic interface that immerse the user in the experience.”

The result is lots of bold shapes with colourful shading and minimal detail. Large, crisp fonts are also common.

The Use of Motion

Google also emphasizes the importance of motion as it relates to meaning. Motion is directional and instructional and this can be used to show users where to click or how to interact with elements. User actions are described as ‘inflection points’ that transform the rest of the design.

Key to this is that everything takes place inside of a single environment. Instead of travelling from page to page, the content moves onto the page. In a web design capacity, we might consider an infinite scrolling design to be similar in principle.

Dimensions

“On the web, the z-axis is used for layering and not for perspective. The 3D world is emulated by manipulating the y-axis.”

What does this mean? It means that material design uses the third dimension mainly for organization. Take a look at Google’s design and you’ll often see things that appear to be ‘stacked’ from an isometric view. This is another way in which material design is taking cues from the ‘real world’.

What Can You Learn From Material Design?

Google is openly sharing its design principles for you to apply to your own responsive web development if you should wish. But is this really the best responsive web design practice? Is it worth applying these principles to your own site?

You are under no obligation to of course. That said though, as Google clearly favors this type of design it definitely can’t hurt your SEO in the long term. What’s more, it will provide a consistent experience for those coming from Google or using an Android device.

Then again though, Google has never exactly been known for its design standards and it may simply be that these principles are not to your tastes. In which case, why not create your own consistent design language?