In the first part of this series, we covered using the Metro style to present a website in a structured way, with a style that is very modular and places great emphasis on typography. It is advisable to read the first part, which can be found here, if you have not already done so.
In Part 2 of this series, we'll discuss Google's Material style inspiration. The Material style is similar to the Metro style with the use of bright and solid colors, but the Google style adds drop shadows to differentiate the depth of the elements. What sets this style apart from others is the use of smooth animations and transitions to make the content of a web page more dynamic.
Google-Material
History
2012 - Now
Google is bringing a breath of fresh air to their mobile platform, Android, by introducing Google Now, an application that presents a contextualized summary based on the user's location. Google Now is the first application that adopts a new illuminated style, presenting information in the form of cards, with very bright colors and elegant typography.
2014 - Lollipop
Google presents the fifth version of its mobile operating system, Android Lollipop, completely changing its graphic direction. From the very beginning of Android, the design was entirely dark, with only slight blue demarcations. Following the style of Google Now, the whole system became illuminated, with pure whites and bright colors.
With Lollipop, Google bet a lot on the metaphor of cards, combining drop shadows with a very flat and minimalist style. There is also a huge amount of work that has been done on the smoothness of the animations, which makes everything on the screen feel like it can be manipulated easily. This is in stark contrast to early versions of Android, where animations previously were sluggish and unsmooth due to the system's lack of performance.
2014 - Android Wear
Google brought its new style, now called Material, to an entirely different platform.
The style
Form:
- Maps separated between levels with shading
- Shadings
- No gradients
- Bright colors
Typography:
- Large fonts
- Font of choice: Roboto
Funds:
- Sections separated by different bright colors
- The typography in front of the colors is often white or black in order to remain visible.
Icons:
- White pop-up icons
- Multicolor app icons with depth
Examples from the web
Google I/O - Official Google conference
Angular - Web application development platform
AndroidTO - Conference on Android
Material Tools
Material Design Lite - Simplified development library
Polymer Project - Official web framework
MaterialUp - Material web community
Finally, if you want a website that presents the content in a dynamic way, with a style that emphasizes smooth animations and transitions, the use of the Material style is recommended. In the last part of this series, we will discuss the inspiration of the translucent style of iOS and OSX from the Apple company to make your website design more refined.