The Material design style remains an incomprehensible and unknown object for most. We will figure out simple and understandable examples of what it is and how to use it.
Printed 2021-04-20
The style Material design (material design in the Russian version), having gained insane popularity, remains an incomprehensible and unknown object for most. We will understand simple and understandable examples of what material design is (we will mainly talk about website design ) and how to use it.
DOWNLOAD CHECK LIST FOR MATERIAL DESIGN->
Initially, Google's designers set themselves three global tasks:
- Create not just a new style, but an entire design system in which principles and rules will be clearly spelled out;
- Update existing styles (FLAT / Metro, minimalism and others), relying on new technologies.
Where the Material Design came from: statistics of mobile Internet
The small screen of a mobile phone makes much higher demands on usability, forcing developers to carefully think through all the mechanics of the application or adaptive site. The new style of Google was created in order to combine the "mobile" and "desktop" sites, having come up with a single concept for them.
“Material” in design: what is it?
The concept of material became the basis of style. This is the main "building element" from which the functional blocks of the design are assembled. It can be briefly described as follows:
- He must be felt to be felt;
- It is interactive, and on the monitor screen behaves in the same way as a physical object in life would behave;
- It looks like paper;
- He creates shadows, bends, moves like a real one.
Layering Example "digital paper "
These conditions are quite understandable: you probably noticed - and more than once - that you often want to click on the“ tasty ”, voluminous button that behaves like a real one when pressed. Since the computer screen transmits only visual images, people with a different perception system (audio and kinesthetic) are deprived and do not get the sensations they are used to. The designer can only pretend: to make the button so that this image arouses in the visitor's imagination the feeling that he is touching this button and feels its roughness, angles, volume. This is important for kinestets, for example, these are people who are particularly susceptible to tactile sensations.
Google material design
Of course, such properties have been used in design before: for example, large glossy buttons with glare were popular in Web 2.0 style. But in the material design properties are clearly spelled out. In particular, all the elements have the same “thickness”: there are no more webdannel buttons that stand out from the rest of the page blocks.
Button in the style of material design and Web 2.0 button
In addition, according to the rules that Google designers came up with for the design material, individual elements “lie” closely against each other, and do not hang in the air. As a result of this, shadows are always small and have clear contours (instead of shadows from close scattered light, for example).
Another important difference of the new style is its dynamism. The reason here again is in mobile phones and tablets: the limited screen size does not allow you to place all the necessary information and controls in plain sight, and the user has to move, scroll and click a lot. In Google, for the material design, they provided clear-cut schemes: any movement has its own meaning - it is either a pull-out menu, or an element deleted by a sliding motion of the finger and so on.
Errors and misconceptions
First. To get the material design, it's enough to replace all the elements and backgrounds on the site with textures. No! If you do this, you'll get a dirty and ugly site that doesn't even reach the webdwan site.
Second. Materials in the design must be used realistic. Not necessary! It is important that they act like real ones. It doesn't matter if it is a real wood texture or a “synthetic” texture created in Photoshop using the Noise tool.
What textures are suitable for material design with Google style
Third. Material and its interactivity is the only thing that distinguishes this style. No! To get a “canonical” material design, like Google's, you need to follow other principles:
- Pictures are drawn without gaps, edge to edge;
- Large, well-read sans-serif fonts;
- Color coding;
- Icons made on the same principles as material for design;
- Adaptive layout.
Android material design
There are some specific features in applying general rules to mobile applications. Remember we talked about shadows? Initially, the material design elements for Android really lie on top of each other, like sheets of paper. But when interacting, each element, whether it's a dialog box or a navigation button, rises up. This is the way in which active blocks are highlighted in this style. It uses the same principle that has been embedded in pop-up technology since Web 2.0.
Now" layered the principle has moved from pop-ups to the entire interface
It is interesting that the developers of the design material in Google even clearly prescribed all the parameters for each of the possible interface elements!
Colors in the material of the design
The approach to the color scheme resembles FLAT-style. These are quite bright, juicy, natural colors. Material design involves the use of three basic types of colors:
- The main color that prevails in all screens of the interface;
- A complementary color, which usually denotes blocks that are associated with the main content, explaining or supplementing it. Often this is simply a lighter or darker shade of the main color.
- Accent color, which is used to highlight buttons, conversion elements and other important things.
Material colors design: google palette