Home

An introduction to Google's Material Design (part 1)

As a winter-project for myself, I have decided to embark upon familiarising myself with Android's Material Design framework. Well, actually it's more of a UX goal, and my interest lies in being able to appreciate contemporary mobile design patterns, beyond just iOS.  Any good UX evangelist would not be doing her or his due diligence otherwise.

A lot of iOS 8 can be attributed to contemporary impressions from Android, including widgets, how some menus work, and I think we have evolved to a stage where each platform can flatter one another by adopting design principles from each other.

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.
— Google Design

So this post will be more of a summarisation and commentary, as I go through the material available at google.com/design. I think this initiative from Google is a bold and essential one, and as a living document, it's something that I'm glad they have taken upon themselves to make public.  

So the way I will structure my thoughts will be in a series of articles, starting with an introduction to material design, and set my thought process correlative with Google's theory. I would also welcome other people's thought's, so don't be shy commenting. I will also aim to make this as concise as possible, for the purpose of being used as a future reference. 

What is material?

Google advocate the material metaphor as follows:

A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.
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. Yet the flexibility of the material creates new affordances that supercede those in the physical world, without breaking the rules of physics.
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.
materialdesign_principles_metaphor.png

Yes, I know, quite an abstract definition of intent, but my take on it is that UX is based around implicitness, the ability to one use intuition, based on visual cues that follow the laws of physics, and perform an action. It has to make sense in reality. Now, this is an evolution of the previous design principles of skeumorphism, which was not a metaphor but rather a concrete physical representation of something.

Google's design principles spread to design decisions relating to typography, spacing, scale, colour, animation (and other visual elements). That is, choices colours, how they synthesise and relate to other elements, having images appear edge-to-edge without borders or gaps, and intentional character-by-character spacing. 

Google also emphasise that motion (animation) should be meaningful and used appropriately, and interaction feedback should also be subtle and purposeful. The same goes for screen-by-screen transitions, they need to be subtle and elegant. Once again, we need to adhere to the principles of physics whilst not resorting to skeumorphism. 

Material and 3D

Follow the gallery slideshow below to understand some of the concepts the document is trying to emphasise: (for more information on 3D objects, refer to: http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html#objects-in-3d-space-elevation

In the next article, I will look at Animation and Interaction, and how material adheres to the curving and timing principles of material design.