What’s Material Design?

Material design is a design language developed by Google in 2014.

What Google wanted to achieve was to combine a tactile experience with a bold and vibrant aesthetic. According to Google: “We challenged ourselves 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.”

Material design started with mobile but then it was extended to any other device.
It is based on those following principles:

  • Realistic visual elements: the design is inspired by design with paper and ink, like in real life.
  • Bold, graphic and intentional: Google went back to the fundamental design techniques: typography, grids, space, scale, colour and imagery guide the entire design. Elements live in defined spaces and are bold and deliberate.
  • Animations: animations are a key component of Material Design, but they are not just simple movements. Animations need to happen in a single environment and need to have a simple and easy transition, with movements and actions that should mirror the physical world.

Tactile Surface

Tactile surface is something that comes up a lot when talking about layered interfaces.
Think of this as having multiple sheets of paper that are stacked together to create a framework. Those sheets are an evolution of the physical one as they can change shape and form, but work in a similarly realistic way.

This surface is a flat container but with a faint shadow to separate it from other containers and layers. Everything else is not necessary.

 

Google Material Design properties (video credits https://material.google.com/)

The approach used is always a minimalistic one. The colours used fall within the flat aesthetic, but Google provides a vast number of colour options. There are not incorrect colours per-say, but it’s all about how you use them.

Google Material Design colours (video credits https://material.google.com/)

Sans serif fonts are preferred (Google suggest using Roboto and Noto as the dominant typeface). Text needs to have breathing space to be easily readable in every situation and should be simple, concise and direct

style_typography_roboto1

Google Material Design – Roboto Typeface (image credits https://material.google.com/)

If you want to know more, I strongly suggest to go to https://material.io/ and explore the website. You will be amazed how much work there is behind design elements that you use in your everyday life in apps and websites.

What’s next?

Google continues to evolve and refine their material design language. Material design is now widely used, but designers are starting to break some rules in order to evolve it. For example reintroducing gradients but still using the Material colour palette, or breaking the rule of the flat container.
This is producing some nice results, but is still in an experimental phase.

screen-shot-2015-11-10-at-10-30-35 screen-shot-2015-11-10-at-10-30-04

Weather Timeline app (left) and Elevate app (right) 

It’s hard to tell how things are going to change, but one thing is certain. Google was able to set a new standard in the design field, and a really good one.