Sunday, July 6, 2014

This is Material Design and yeah it's Awesome!

Material-Design
When google overhauled the Android design philosophy in Ice Cream Sandwich, they introduced a whole theme called holo. Android versions after that like Jellybean continued to use the holo theme but when Kitkat was revealed last year, the holo theme hasn’t been much of a design highlight. Instead a more brighter and minimalistic design status was showcased in Android 4.4 Kitkat. At Google IO this year, Matias Duarte the man behind the design overhaul in Android 4.0 Ice Cream Sandwich introduces a new design language called material design alongside the Android L release (developer preview). This time around the design overhaul not only affects android, other google products like android wear and android tv are also being themed under this new design language.

The Backstory

Matias-Duarte-Android-GoogleIf you look to the left, there he is Matias Duarte, the man behind the second major design overhaul to android. Here’s an interesting fact, prior to moving in to google Matias was the brains behind the UI design of Palm’s WebOS (now you know why some say that the android design elements remind them about WebOS).

Since he joined google in 2010, he has been contributing a lot to how android looks like today. But Material Design is probably his boldest move ever, this new design language has the modern flat look to it and has a variable sense of depth which does not go overboard. According to Matias, Material Design is like a metaphor because like a metaphor, material design can show you a lot of information from a something so compact.

But what does that mean? Basically, material is the convergence between the modern flat design with a touch of depth which is not to overpowering. The depth is there because like in real life we can see which layer is on top another because we see things in three dimension. But things are different on your smartphone/tablet because what you see is in 2D, unless if you have the new Amazon Fire phone which has the eye tracking technology to give you glasses free 3D. The approach which the new material design is taking is a kind of depth which is present just to show you the position and also motion because in real life depth can be clearly seen when in motion (it’s something like a black hole effect, you can clearly see the motion when the black hole is revolving at high speeds).

Ok, at this point you might be thinking what on earth am I talking about, first about a design language then about a metaphor. When I first heard about it during the keynote I thought I understood the design but when I started reading the design guidelines then I was a bit puzzled. Here’s a couple of articles and vides which will help you digest the main revelation behind this new design language by google:


Material Design

material-design-colors-2Moving on, Material design isn’t all about the metaphor and the modern flat look. As I said earlier in the introduction, when google announced Kitkat late last, the holo design was about to go extinct because more solid colors was being introduced with kitkat and with the design overhaul in the Android L release, we can clearly see that black will not be the dictator of the user interface of android. Instead of black, more brighter colors are being implemented throughout the system and the gmail and calendar app on stock android will no longer be just white with a subtle color accent, gone is the dull looking app designs and in is the more modern color popping apps which are uniquely different in terms of color that is.

Additionally with the Android L release, the color palette has been extended to cover a wider range of colors so that devs can create a more unique experience with their application. You can examine the article banner for this article, It took me a few hours to get it done because I was following the design guidelines to create this banner. With my particular design I implemented a subtle amount of depth to the main window and also to the colorful tiles. In the actual design scheme every single element in the canvas is supposed to have a slight depth either during motion or when it’s static.
“bold colors are the main focus in material design”
Android-material-design-theme-colors-style


Motion is yet another major part in Material Design, as I mention earlier just now, the depth present in the new material design is to complement the animations. According to Matias the animation gives the user a sense of feedback when they click on to a slider or button. Aforementioned, it’s like a real life object, when you touch it or move it you’ll get a response like a small movement. The new animations are complemented with the new Android L release which can render animations at 60fps so you’ll be glued to your screen watching how each elements on the screen move from one place to another.

Finally, typography is also being highlighted in material design because typography is one of the core things in a successful design. Roboto V2 is the new standard and the fonts has been remastered, the changes are subtle but in the end of the day it all comes down to the typography. Although I did not stress out the new spacings in my reference design above^, it doesn’t mean it’s not important. The more wider spacing being implemented will showcase a major difference to previous designs because with the wider spacings, the typography tend to look more readable and is less of a strain to the eyes.

materialdesign-goals-landingimage_large_mdpi















Overall, the new material design is definitely a radical change to android. I really like the fact that this design is scalable to multiple screen sizes and the fact that in the near future android apps will be coming to the chrome store makes me so excited. I’ll revisit the material design once again when the Android L release gets publically available in the fall. This is because currently, everything is all about how to design and things get fun only when the developers chip in to showcase this design language to their application. And about the lack of new articles for the past few months, all I have to say that I’m really very time strapped with my studies and not to fret I’m in the midst of creating a plan to write weekly articles. Do follow us at the usual places (Twitter, Facebook, Google+ and Instagram) so you don't miss any future coverage.