Material Design

What is Material Design and is it here to stay?

Material Design

What is Material Design and is it here to stay?

Back in 2014 Google developed what's now known as 'Material Design' which, according to their blog, is 'a visual language for users that synthesises the classic principles of good design with the innovation and possibility of technology and science.' Fyi, the principles are laid out in this document.

In other words, they wanted to provide a set of physics and rules for how software should look and act, thereby allowing for a unified user experience - whether through touch, voice, mouse or keyboard - across platforms and devices.

The result, although this is work-in-progress, was a solution to the limitations of both featureless flat design as well as skeumorphic design (design that mimics real-life objects), yet incorporating a little of both at the same time. 

Google's Material Design is based on a number of principles, the most important of which we summarise below:

Material is the metaphor (for paper and ink)

Using visual clues grounded in reality, light, surface and movement convey how objects behave, interact and exist in relation to each other.

Bold, graphic, intentional

Large-scale typography, intentional white space, grids, scale, colour, and edge-to-edge imagery create hierarchy, meaning and focus and provide waypoints for the user.

Motion provides meaning

The user is the prime mover, allowing him to transform and re-organise the design while maintaining focus and continuity. The transitions are efficient and coherent and the feedback is subtle yet clear.

The motion principles of material design are created to be alive, realistic, responsive, natural, aware, and intentional. It has momentum, responds to gravity, can push other elements away or attract them, but the ultimate goal of each animation is to guide the user in a quick, clear and cohesive way. 

3-D World

All material objects have x, y, and z dimensions and a single z-axis position.

Key lights create directional shadows, while ambient light creates soft shadows from all angles. Material has a standard 1 dp thickness, that's about one pixel thick on screens with a pixel density of 160.

Image: three-dimensional environment containing light, material, and cast shadows. Source: Google.

Material properties

Immutable with inherent behaviours, these are the characteristics of material:

  • Solid
  • Occupies unique points in space
  • Impenetrable
  • Mutable shape
  • Changes in size only along its plane
  • Unbendable
  • Can join to other material
  • Can separate, split, and heal
  • Can be created or destroyed
  • Moves along any axis

Elevation and shadows

To create a look and feel that is familiar to the user, objects cast shadows and reflect light, and can be stacked or affixed to one another just as in the physical world.

Some components have responsive elevation, which means they change elevation in response to user input (e.g., normal, focused, and pressed) or system events. These elevation changes are consistently implemented using 'dynamic elevation offsets'.

What's next

In August 2016 Google released a new material design spec that provides guidelines for notifications such as new content areas, user controls, interactions and short text input; widgets for user engagement, retention and acquisition, and when and how to acknowledge user actions.

It also includes details of how to use the Up and Back buttons on the navigation and using full-screen mode for Lean Back, Immersive mode and Light out interactions.

As Google coin this market on design and development, it's not sure what will come after or what the next great trend will be. In the end, usability, speed and best use of space will have as much influence on design as demand for good looks. 

If you want to see great Material Design in action, Google will be honouring five winners who represent what they see as the finest application of Material Design at the SPAN LA conference on October 27. The event will be livestreamed, so be sure to sign up. 

Navigate back