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:

• Color swatches (.ai)
• Mobile layout template (.ai)
• Tablet layout template (.ai)
• Desktop layout template (.ai)
• Whiteframes (.ai)
• Roboto font and Roboto specimen booklet
• Noto font. The standard typeface on Android for all languages not covered by Roboto
• Components sticker sheet in PSD, AI, and Sketch
• Icons: more than 800 icons on Github and a zip-file with these icons in various formats and sizes

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

• Polymer – a library for web developers created by Google developers
• Material UI CSS framework
• Another Bootstrap UI kit
• Materialize CSS framework

PSD Resource

• Material UI-kit – a huge set of paid components and templates for designing mobile apps
• Grid for creating your own icons
• Google Design Icon Template
• Another template for icons

Sketch Resource

• Material design by Google Sketch resource
• Template on Dribbble

Icons

• Icons for Android 5 Lollipop by Icons8
• 615 Material design icons (created by the community)

Other Goodies

• Palette generator

Apps With Material Design

• Google Docs
• Inbox
• Google Calendar for Android
• Google Maps
• Papyros (Quantum OS)
• Google for iOS
• Web-based Telegram

Free Wallpapers

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

Further Reading

• Designmodo’s note on Material design
• Blog with daily posts of Material design showcases
• Top designers react to Material design

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

Original article by Kirill Oleynichenko.