Material Design – A visual language for Android

Dream. Dare. Do – that is Suyati’s work principle in a nutshell.

Mar
24
2015
  • Author:
  • Telvin Mathew

Material Design is one of the newest features introduced by Google for the new stylish Android Lollipop. I am assuming that you guys already know about the introduction of Lollipop in Android. It is the yummiest version of Android; I can’t wait to see the expression on your faces once you start using it.

Being an open source system, Google developers have endless options to show off their creativeness through Android. We all know that it is the most widely used operating system in mobiles and Android phones have the most versatility in screen size, considering Tablets as well. So in the new release, Google concentrated on making a bold, colorful and responsive UI design for consistent, intuitive experiences across all your devices.

Now let me educate you on how is it different from iOS flat designs. The iOS flat design was introduced in the iOS 7 update; it replaced skeuomorphism with the new flat design. Although it wasn’t given a good welcome by users, we have to admit that iOS 7 was clean, modern and established.

The new release of Android Lollipop represents the biggest redesign in Android history. Like iOS 7, Google introduced flatter and more minimalist design. But unlike iOS, material design is more than an addition; it is a complete restructuring of the designs standard in Android. Its main goal is not only to give a highly consistent experience for the user, but to enhance their understanding of what is happening.

To iOS lovers, the introduction of Android Lollipop is a terror; finally Google has started giving importance to design. Introduction of Lollipop is like the kiss to the frog, which turned it into a prince. The new design is a visual treat to the users and more ambitious. And now that Google will transit it into Android wearables and TVs; we can expect much more in the future.

What does Material design look like?

You can already see glimpses of material design in apps like Google Play, Newstand, Inbox and Tumblr.

Material Design Blog

 

 

Above is an application, which uses material design. What do you see?

I see responsiveness, realistic lighting and shadow, vivid new colors, typography and edge to edge imagery. All this is what material design is about; this makes it easier to navigate through the device and helps to grab your attention.

UI Design

The UI in material design consists of surfaces arranged at varying elevations, casting shadows on surfaces behind them, just as shadows are created by objects in real life. It makes the UI more realistic and interactive. Shadows are used to communicate, helping to grab attention and establish hierarchy. Shadows and surfaces are used in consistent and structured ways. Each shadow indicates a new surface. You can add shadows in the xml layout in Android L by using android:elevation and android:translationZ attribute. In the earlier versions, shadows were normally provided as PNG assets.

Motion

In general, UI elements don’t appear or disappear into places; they animate either as a unit or individually. Motion helps communicate what’s happening in the UI. It provides continuity across app contexts and states. Motion also adds delight using smaller-scale transitions. In Android L, new animations and new transitions are available, which are much better than the UI transitions in iPhone.
One new animation is Shared Element transition. When an item is touched to see its details, there is a “hero” transition that moves and scales the item between its position in the current screen and its position in the detail screen. This is called “shared element transition” in the SDK. Also, there are Ripple Effects originating from where you touched the screen, which are used to show touch feedback on an item. Animations are used in more subtle, delightful ways. They are simple and elegant and do not confuse the user with complex animation that they cannot follow.

Tangible surfaces, bold graphic design and meaningful motion work together to bring a consistent experience across any screen—be it phones, tablets, laptops, desktops, TVs, wearables or even cars. This is what Google was trying to achieve through material designs, i.e. to create a user interface that is consistent and have smooth animations, and the theory is as simple as that! There are so many more new features in Android Lollipop that are yet to be explored.
Cheers, to all Android lovers out there!

About the author:


Telvin Philips Mathew
Telvin is an Android Software Developer, who has been working in Suyati Technologies for the past 7 months. He is a tech freak, and his curiosity and passion towards technology drive him to be a developer. Telvin is in love with traveling; in fact, his bucket list is loaded with travel itineraries alone! He believes that the world is a book and those who do not travel read only one page.

Leave a Comment

Your email address will not be published. Required fields are marked *