Home
Web Design Basics
Templates & Tuning
Material Style Web Templates from Web Design Library

Material Style Web Templates from Web Design Library

AliceL

Apr 20, 2015

If you are in web design business (you are reading this post, so you most probably are) you absolutely could not miss the latest rage in the industry - Google's material design. Just look at the Google trends, I think this chart speaks volumes about the popularity of the material trend.

google trends material design

Well, we haven't missed it too, please welcome the brand new Material Design Web Templates!

Google design vision

Simply put, material design is a design concept that combines the norms of science and technology with the principles and common rules of classic design and adds some magic to it all.

The concept was born from Google's desire to unify the user experience across their platforms. First there was an interface for the Google+ app, then there was a whole new redesign of all the Google's major products, including Gmail and Calendar, based on what Google called a "unifying theory of a rationalized space and a system of motion."

Everyone loved the new Google design, though some still say it's not that different from the dear old flat style. There are differences in these two, and fundamental ones. Google combined the best traits of skeuomorphism (like motion and reflection of reality) and minimalism of flat design and they achieved amazing results.

Here are the main principles of material design:

Unexpected, vibrant colors.

The color pallets of material style are inspired by the real life things that surround us - architecture, athletic courts, pavement markings etc. There are deep shadows, bold hues and bright highlights.

google design

Bold and geometric shapes.

Material keeps shapes simple and bold, symmetrical and consistent, and "inspired by the tactile and physical quality of material" as Google puts it.

material-design

Graphic, bold, engaging imagery.

The images have to express delight, relevance and information. Every photo or illustration needs to be relevant to the context.

google-material-design

Large-scale, bold typography.

Google continues to use Roboto and Noto as their standard typefaces. Whatever typeface you use when creating your material design app, it has to be easy to read, large and dynamic.

google material design

Consistency.

"Material design is guided by print-based design elements - such as typography, grids, space, scale, color, and imagery - to create hierarchy, meaning, and focus that immerse one in the experience."

According to Google by repeating visual elements, structure and spacing you create consistency and thus better user experience, especially if you do this across platforms, screen sizes and environments.

If you want to try your hand in the trendiest trend in the contemporary web design - Google released a comprehensive list of guidelines, rules and tools to help you create apps for Android and web.

Here's a couple of freebies you might find handy:

Material Design Icons

Material Design UI Kit