running words around
design education and visual communication
authored by chris m hughes

Are we entering the age of Material Design?

Monday, 5 January 2015

The zeitgeist of the 1980s was perfectly captured by Madonna when she sang "We are living in the material world, and I am a material girl."  Now it seems that Google are attempting to pull off the same trick for the 2010's with 'Material Design', their new visual design language, introduced at the I/O Conference in June 2014.

Material Design is defined via a set guidelines that combine the central principles of good design with current best practice in interactive screen technologies.  The result is a manifesto for designing unified experiences across platforms and devices. But is Material Design merely a trend, or is it the way digital design was always meant to be done? It certainly seems to cover most of what has been learned about interaction since the rise of mobile devices. So are we perhaps entering an age when it will dominate interactive design and visual communication?

Originally code-named 'Quantum Paper', the idea was Google's effort to encourage a consistent approach to design across all of its products.  But by extension, it also proposes a whole new standard for digital design in general, encompassing design ideas and technical execution in typography, layout, animation and interaction across all platforms, including web, Android, and iOS. 
 At the launch, Google released this short video to summarise the approach -

Concurrently, Google published their design guidelines on a beautifully realised website, which you can visit here.  In the introduction of the document Google establishes two key goals, encapsulated in three underlying principles. The goals broadly stated are -

1) The creation of a visual language that synthesises classic principles of good design with the innovation and possibility of technology and science.

2) The development of a single underlying system that allows for a unified experience across platforms and device sizes.

The three underlying principles allied to the approach are -

1) Material is the Metaphor - inferring that designers can transfer the lighting and surface experiences of paper and ink into screens.

2) Bold, Graphic, Intentional - placing print-based design - typography, grids, space, scale, colour, and hierarchy - at the centre of visual considerations and styling.

3) Motion Provides Meaning - embracing the use of animation, motion and transitions to guide and inform the user experience.

And the three principles are encapsulated by this visual in the documentation -

Material is Metaphor                Bold, Graphic, Intentional        Motion Provides Meaning

In support of Material Design, Google's documentation includes exhaustively detailed guidelines on colour palettes, typography, layout and grids, animation, touch experiences and navigation principles.

Material Design - Colour sampler

Material Design - sample palettes

Material Design - long touch, long press-drag, double-touch drag

Material Design - Roboto Sans, weights and stance.

If you are thinking this all sounds a bit like its been appropriated from the Swiss Style, you'd be right. Some of the language feels like it is lifted directly from the pages of Die Neue Grafik, which is no bad thing. The approach should serve to embolden print-based designers who are transitioning to digital, because Material Design uses fundamental tools that have come from the world of print design, like baseline grids, proportional spacing rules, and strict control of whitespace. Stuff that has been thankfully appropriated for web design since the introduction of HTML5 and CSS3.  There are a number of interesting points which serve as unifying elements -

Firstly there is a detailed section on a bespoke baseline grid, allied to the 'paper' paradigm which controls feedback, display and movement through screens and dialogues.  This is supported by a really detailed typographic hierarchy that is well researched and presented.

Secondly, there is the global use of 'dp' as the unit of measurement and size for elements, grids, spacing and so on. This may be an unfamiliar unit but dp stand for Density-independent Pixels, an abstract unit that is based on the physical density of the screen. These units are relative to a 160 dpi screen, so one dp is one pixel on a 160 dpi screen. The ratio of dp-to-pixel will change with the screen density, but not necessarily in direct proportion.  The corresponding unit used for the typography is the sp (scale-independent unit), which also requires a screen resolution of 160dpi (which again makes 1sp equal to 1px).

Thirdly there is direct reference to movement in 3D where 'Z-axis motion is typically a result of user interaction with material'.  There are a series of rules to accomplish this, including a collection of situations in which drop shadows and layered elements can be used. The shadows are also given a specific depth, which is always 1dp.

Finally, Material Design proposes a rigorous model for developing wireframes and responsive patterns, which uses the 'cards' paradigm and also a set of device-based 'whiteframes'. These provide a variety of layout structures using a consistent approach to surfaces, layers and shadows.

Material Design - Metrics for margins and headers.

Material Design - Cards paradigm for layout structure.

Having read through the whole document, it seems fairly clear to me that Google have given it their best shot at articulating the current state of interactive design and usability in the way that Jakob Nielson did during the mid-1990s. What's also interesting is that with the discrete use of drop shadows and layered surfaces, Google are reintroducing a controlled amount of skeuomorphism back into screen design, allowing interaction to extend into the z-axis as a means of enhancing usability.

So Material Design could be viewed as an extension or development of Flat Design. The inclusion of downloadable resources at the end of the guidelines affirms this, with the whiteframes, iconography and components all supplied in vector formats only.

Where 'Material Design' could be extended is into interactive editorial design (for digital publishing) and in time this might provide a completely unified set of design principles for any format or visual medium.

We've already included Material Design as part of our curriculum delivery for Visual Communication in areas like web design, user experience and motion graphics, and I fully expect other Art Schools and Design courses to be thinking along the same lines.  Material Design may not be the complete solution, but it will definitely become a dominant trend in digital design during 2015 and there is much to be learned from Google's take on good design principles, minimalism and usability.

Material Design Interaction demo
Material Design Palette generator