If you own an Android device, you might have already received (or at least heard about) the 5.x updates in the form of the latest OS update, Lollipop. With it comes a whole host of new changes and improvements to notifications, encryption software, performance, and, most importantly, the ‘Material Design’ style Google announced last year. From Tom’s Hardware:
“Material design is a mix of colourful flat user interfaces with shadows that give them depth and hierarchy, which makes apps more intuitive to use. Another big part of the Material Design philosophy is “responsive” motion for the “enchantment” factor that Google has mentioned in the past as a design principle they care about.”
It’s already interesting from an aesthetic perspective, but in addition to the visual changes, Material Design introduces a new language and a new set of ‘design rules’ for Android-based devices (it seems like Google have managed to push the envelope far beyond ‘smartphones’ to other devices such as toothbrushes, watches, bins…).
Google’s stated goals for the new language include Creating a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science and developing a single underlying system that allows for a unified experience across platforms and device sizes. Mobile precepts are fundamental, but touch, voice, mouse, and keyboard are all ﬁrst-class input methods.
What this translates to in actuality is a design framework of sorts, which aims to create a unified ‘material’ environment across all Android devices. The materiality of material design, as outlined by Google, is made up of three key concepts:
Environment, in which each visual element occupies a position on a Z-axis as well as an X- and Y- (see image below)
Material properties, in which each element has varying x and y dimensions but a uniform thickness of 1dp; elements casts shadows due to the relative elevation between them; content is displayed on material elements with behaviour of its own but is limited by those same elements; material can change shape only along its plane; material can move along any axis; perhaps most importantly, Z-axis motion is (usually) only the result of user interaction.
Objects in 3D space. Here Google have drawn principles from how objects are organised in the real world (i.e. they can be stacked or affixed to one another, but cannot pass through one another) and have created a ‘spatial model’ based on this. This most heavily influences the element’s elevation. Each object has a resting elevation, which it must always return to. Elevation is again signified by shadows. This also lays the foundation for object relationships.
So what they’re aiming for is a visual environment that is not 3D per se, but abides by the spatial and material rules of a 3D environment. From this, Google have introduced a whole new host of stylistic changes and APIs, which affect not only the ‘launcher’ environment of app icons and widgets, but also apps themselves. In the next few posts, we’re going to examine what the aesthetic changes derived from these new principles will mean for design within the ‘launcher’ environment of app icons and widgets, as well as within apps themselves. You can read through the whole Material Design specification here.