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.

Material Icons

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:

components_buttons_usage_dialogs1

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:
Image 6
Image 7
Image 10
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.

 

Try free tools for creators by the Icons8 team

Icons8, a library of about 120K+ free icons and free clip art images
Lunacy, free graphic design software with built-in design resources
Photo Creator, free collage maker with AI-based technologies to make custom photos for your story
Fugue, royalty free music for videos of any kind
Pichon, the desktop app to download icons and clip art and use them offline
Icons8 Photos, the big collection of free stock photos designed to work together
Ouch!, a library of free vector illustrations


Also, get the lists of free vector software and free photo editing software.

Try tools for creators by the Icons8 team

Icons8 Icons8, a library of about 130K+ icons and clip art images
Offline app icons8 Offline app and plugins to drag’n’drop icons and clip art to any design tools
Moose Moose, the big collection of high-quality stock photos
illustrations Ouch!, a library of vector illustrations and collages
Photo Creator Photo Creator, free collage maker with AI technologies to make custom photos
Vector Creator Vector Creator, free collage maker to make custom illustrations for your designs
Fugue Fugue, royalty free music for videos of any kind
Lunacy Lunacy, free graphic design software with built-in design resources
Smart Upscaler Smart Upscaler, image upscaler to enlarge and enhance images using AI
Generated Photos Generated Photos, unique, worry-free model photos generated by AI
Also, get the lists of free vector software and free photo editing software.
pinterest linkedin VK reddit