A look into the Google’s brand new Design Language
*Figure-1. A default wallpaper that comes as stock in Lollipop.
It was back in June 2014 that Google announced their latest version of Android (then code named Android L) would follow a brand new design language called Material Design. This was an expansion of their existing ‘card’ design seen in Google now.
What is ‘Material’?
Take a closer look at the default wallpaper from Lollipop (in this figure-1), you’ll notice that it resembles strips of paper stacked on top of each other. Well, that’s what it is; the ‘material’ in Material Design is paper.
Using paper as an inspiration and mimicking its physical properties in a digital UI makes it stand out from the flat approach of Apple’s iOS7 and Microsoft’s Metro UI. This is due to the fact that while the other two are usually restricted to a 2D plane, Material Design uses 3D space.
Every element has a depth, along with width and height, elevation to be exact. They also use shadows to highlight this. Any element, when triggered, will appear to levitate itself, by increasing the spread the shadow it casts. This is called ‘Lift on Touch’
Another form of tactile response Material design offers is called ‘Touch Ripple’, inspired from how a drop of ink acts on paper. The user receives an instantaneous response of his interaction in the form of a ripple that coats the surface of interaction, the epicenter of this ripple would be the exact point the user touched.
Besides this, Google has brought out a few other principles and guidelines to be followed, for animations and transition effects. The most important one (I feel) is called ‘Consistent Choreography’.
We’ve all seen interfaces that bombard the user with meaningless transitions and animations. Google, however follows a much subtle approach.
All of the transitions/animations in Material Design should be consistent. For example, objects moving to the screen should do so in a similar path/curve, this path/curve should be consistent for all similar transitions on that particular screen. Since all the objects on screen behave in a similar fashion the user will understand the application better.
Figure 4. An example of the colors used in material design
One of the most evident features of the Material Design is the color schemes it follows. As stock you get 20 ‘Bold’ colors from Google. You also have a choice of 10 different shades of each color and 4 extra shades to be used as accent colors. You are also free to choose colors according to the branding of your app. When they say ‘Bold’ they really mean it the hit you right in the eye from the first glance, as seen in figure 4.
The tech giant also provides guidelines to be followed when using various components, from buttons to text-fields, even on the images that are used.
It is still too early to say how material design will change the Android real-estate. Although most of the major applications have begun their transition, it will still be a while before we can expect a complete overhaul.
Although mixed reactions are coming from users who have already got their hands on Lollipop, as a designer I feel that Material Design brings life into regular UI. This I think is a huge leap for interfaces.
Here are some useful links, if you wish to get a deeper understanding of Material Design
How not to freak out about Material Design – An article by Max Weiner, Android Lead at Pocket
As a UI Mobile Developer, please do share your thoughts.
* Images Source : Google Design Specs
Front-End Developer, RapidValue Solutions