Ever wonder exactly what Material design is or what it’s for? Even if you’re familiar with the design standard, there’s are a lot of different resources out there. So we gathered all of the information on material design in one place. Here you’ll find an explanation, links to official guides for designers and developers, starter kits, and unofficial reference materials.

What Is Material Design?

Material design is a design language and style created by Google.

It was launched in June, 2014. At first company employees referred to it by the code-name quantum paper. The basic metaphor of material design is a flat sheet of paper in 3D space.

What Is Material Design for?

Material design serves two goals: it unifies the company’s numerous products and it unifies Android app interfaces.

After the rise of skeuomorphism, or using design cues from real-world counterparts, web interfaces radically shifted to being flat, which was, once again, excessive.

In order to be clear and international, Google decided interface objects needed to have a metaphor in the real world. Paper became that metaphor. It is thin and flat but can be positioned in 3D space, has a shadow, speed of motion, and acceleration. However, this is quantum rather than real paper. While it submits to the laws of physics, it also has some magical properties. This helps show the user the principles of using the interface and how one situation shifts to the next. Animation not only brings the interface to life but actually shows the user what is happening.

How Is Material Design Different From Flat Design?

Material design is a bit closer to realism.

Flat design became the antiphase of skeuomorphism. It is a reaction to the tendency of imitating real objects in interfaces. By the time users got used to screen interfaces, designers began changing things once again. By flattening their interfaces, they took all of the volume and realism out and brought them down to the flatness of the screen. Material design is the next step in this cycle – a small step back towards realism, with the help of the metaphor of a flat sheet of paper. It seems real, yet it has magic properties.



Starter Kits From the Official Guide to Material Design

Below you can find direct links to starter kits from the official guide:





Official Guides to Material Design

The official guide is by far the best and most important source of information about Material design. It is very well structured and has great illustrations. Every paragraph is supported by clear examples, including do’s and dont’s. The official guide was also very helpful for us when we checked up the sizes and style guidelines for our Android 5 Lollipop icons.

Here are some examples:







For Android app developers, there is a separate website with official guides and lessons.

For AngularJS developers there is an official styles portal.

Of course, to get a full understanding you need to watch the showreel because the basic essence of material design can best be seen in action:





Free HTML Source

PSD Resource

Sketch Resource

Icons

Other Goodies

Apps With Material Design

Free Wallpapers

10 wallpapers inspired by Material design for laptops, tablets, and smartphones.

Further Reading

A video for the finale (concept of Instagram with Material design):



Original article by Kirill Oleynichenko.