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.
Discover top Figma plugins to streamline your workflow, enhance visuals, and add creative flair to…
Learn how to manage visuals in blog posts to optimize them for SEO in this…
Unraveling Figma’s pricing structure: tips to avoid hefty bills and save money. (more…)
Don't switch tabs to browse icons, illustrations, and photos for your websites. Get them inside…
Transform your Notion space with custom covers! Dive in for easy steps, pro tips, and…
Each design has its own scale. It applies to elements size and like thickness. Now,…
This website uses cookies.