What is material design? 10 pioneering examples

We published our 17 crucial web design trends for 2015 a couple of weeks ago, and this is the first in a series of posts looking at each trend in a more in depth manner.

This week, the meeting point between flat design and skeuomorphism: material design.

Material design

Material design is a visual language created by Google. The manifesto that has been set out is an ever-evolving and constantly iterated document, but the fundamentals are fairly clear once you get through the somewhat intimidatingly pretentious language.

Although the ‘synthesizing of classic principles of good design with the innovation and possibility of technology and science’ does have a certain optimistic charm to it.

The overriding goal is to develop one system that allows for a unified user experience across all devices, platforms and screen sizes.

The general rule is that mobile functionality (swiping, tapping) should be primary, but mouse, keyboard, touch and mouse must be as important.

Material as metaphor

To quote Google:

The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.

So basically it’s not quite the wholesale junking of skeuomorphism like we might have expected, but it’s a significant step into a whole new visually representative language.

Skeuomorphism is quite simply the practise of making something artificial appear real and the most famous modern example of this can be found in the iPhone’s yellow papered, ring bound Notes app and the rickety-bookcase-aping Newsstand app.

Since the introduction of iOS7, this design trend has become more and more unpopular, and quite right too.

Most of us have been interacting with the digital world for half our lives now, we no longer need the patronising comfort of a button on a digital screen to look exactly like a button in the real world. The faster we consumers get used to this, the faster digital design can move forward.

However within flat design there is a tendency for buttons to disappear into the background, forming a seamless wall that can leave the user bewildered and frustrated that they can’t find functions that aren’t clearly defined, especially if they don’t have any previous experience with the interface.

This is where material design comes in. The surfaces and edges of elements in material design provide visual cues that are grounded in reality. Realistic lighting also helps to define objects and divide space.

The use of familiar tactile features also helps users quickly understand the relation between an object and its environment.

Bold intentional graphics

The principals of print based design are not only there to appear visually attractive but also to guide your experience using hierarchy, meaning and focus.

Bold solid colours, sharply defined edge-to-edge imagery, large-scale typography and intentional white space helps to create an immersive user experience.

Meaningful motion

User actions are the primary focus, the person interacting with the design controls the experience rather than the other way round.

Action should also take place in a single environment and interactive objects should be presented to the user without breaking continuity even as the experience changes.

There is vast amounts of information on the Google Design website going into greater technical detail with regards to environmental properties, 3D design, animation and responsive interaction, so if you’re interested do check it out.