Together with a new Android version called Lollipop, Google presented a new design language called Material Design at its developer conference I/O last summer, which will be used cross-platform on all devices. Since then, this guide has been hailed as one of the big trends for this year, but how exactly does it differ from other style guides?
Looking at the material design principles, three points are emphasized:
- The Material Metaphor
Known materials from reality should describe the appearance and be supplemented by digital possibilities. The interface is based on the realistic (tactile) perception of paper. - Intuitive and natural
The surfaces should behave like familiar objects from reality (NUI). - Animations with meaning
Movements of components occur naturally and thus support the interaction.
What is hidden behind the paper metaphor?
Material Design Pages should be arranged like stacks of paper on top of each other or side by side to create a sculptural experience. Which pages are positioned above others is controlled by the introduction of the Z-axis, so each object receives a depth coordinate. Their position becomes visible through virtual lighting (Key light & Ambient light), which means in plain text nothing else but the comeback of the shadow.
The description of the interfaces and page elements also corresponds to a detailed and modern Interface Guideline, which describes current trends such as Responsive Design, the use of a lot of white space and large typography, gives recommendations and provides examples.
Motion provides meaning
More interesting are the chapters dealing with the description of animations: here are recommendations for the use of animations of elements and views, their physical properties (how they accelerate and decelerate and what forces act on them) and how they relate to each other and connect views. This is usually not described in detail in Interface Guidelines.
It is important to note that animations in material design are not just transitions between two views, but that choreographed motion design can draw the user's attention and thus provide an additional function. So far, animations only describe their movement (e.g. emergence, moving in, fading) not their functional character (e.g. giving feedback or hierarchical timing).
This is where things could really change in the future: when we think about how things move, animations will become more than just fancy accessories. Perhaps agencies will eventually establish animation as a third component of their work alongside interaction and design.
In summary, material design is characterized by two things in particular:
- Material Design is a modern, comprehensive and very detailed interface guideline, which helps to develop understandable and descriptive layouts, but like all detailed guidelines, also limits them.
- At its core, however, Material Design differs primarily in the detailed description of animation, which should help the user to understand the interaction.
When people talk about Material Design Trend 2015, they probably mean primarily borrowing from the Google style guide and a well thought-out use of animation.