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.
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.
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 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.
Below you can find direct links to starter kits from the official guide:
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:
10 wallpapers inspired by Material design for laptops, tablets, and smartphones.
A video for the finale (concept of Instagram with Material design):
Original article by Kirill Oleynichenko.
Also, get the lists of free vector software and free photo editing software.
Sweeping list of Halloween’s visual symbols enriched with some fun facts to know. Icons, illustrations,…
Halloween is almost here. It's time to think about costumes. If you're looking for something…
Create spooky, funny, or creative face swaps for your Halloween celebration with Face Swapper.
Design a stunning book cover with the Illustration Generator. This guide helps you brainstorm, craft…
Why is my printed logo not as vibrant as the digital one? Why do I…
Get an all-in-one UI kit to build a professional fintech landing page. It includes everything…
This website uses cookies.