Material Design - What is it for and why it is so popular
Material Design is designed to make digital objects look lifelike. That is, physical properties are added to them. They are considered tangible and real.
In this post, we'll talk about Google's revolution in the web design world.
HISTORY OF ORIGIN
Once upon a time, the websites and mobile apps of the Google ecosystem did not have a consistent style. Each product had its own drawbacks. In 2011, the corporation decided to integrate a concept called Project Kennedy into all projects.
The reference to US President Kennedy is related to the fact that the founder of the technology corporation Larry Page believes that products cannot be improved by 5-10%. If you change them, then the whole. John F. Kennedy launched a mission to the moon. And Page set the task of changing the approach to interface design.
The collaboration between designers and programmers has changed the look of Google services and smartphone apps. At the same time, users faced a serious problem - the structure of the products on the phones was very different from the web versions. The IT giant threw all its strength into quickly eliminating the defect.
In 2014, at the annual Google I/O conference, the company presented to the public a new system called Material Design. In it, the corporation's specialists globally revised the approach to the structure of interfaces and interaction with graphic objects on the screen. It provides a unique user experience across devices, from computers to small smartphones.
Google's designers set themselves several main tasks:
- Create a styling system that is more than just style.
- Develop a fresh concept based on the existing Flat and Metro directions.
- Take design to the next level. Make the interface not only beautiful, but tangible.
The new approach sets the motion vector, rather than creating clear boundaries. The UI is considered as a living object with all its inherent properties.
We must pay tribute to the corporation with a worldwide reputation. It took the developments of Metro and Flat, added unique features and created a new philosophy that instantly became popular and turned into a working concept for millions of interfaces around the world.
Material design began to develop more than 5 years ago, but many experts still bypass it and do not want to delve into it. For them, it remains the unconquered peak of Everest, which is not easy to reach.
The purpose of the article is to talk about the main principles of the idea of Google and show that this breakthrough in the field of user interface should be familiarized more closely. Professionals should understand that layouts in graphic editors are not just pretty pictures. Google was the first to breathe life into them and showed that objects can be set with properties and behavior logic.
It is based on 4 basic rules that Google laid out in the reference guide on the official website. Before moving on to their consideration, let's analyze the strengths of the concept.
- ease of perception;
- unified interface on all platforms;
- logical behavior of objects;
Material is a metaphor that unites the correct organization of space and the movement of entities.
The first and foremost principle is the tangible layers that are placed on digital paper. Each element is part of a single system. Borders and shadows create an anatomical sequence that appears as a "living organism" with constant interaction of components.
Surface - a container with a shadow border. The minimalistic approach seems too simple, but this set is enough to distinguish elements and understand how they relate.
- minimum effects;
- upper objects cast shadows on lower ones;
- the shapes are anchored to a single location with coordinates along the z-axis.
The Flat Design concept does not allow the use of shadows and other effects that create volume. In Material, the principle of depth plays an important role. It helps you focus on the main components and tells you how to interact with buttons, shapes, or scrolling. Depth must be used with surgical precision. If it is not tied to the interaction scenario, it is better to look for another solution.
Be sure to take into account that physical objects have a beginning and an end. Elements inside the interface should be positioned so that they do not "cling" to the edges of the screen. Do not forget that the philosophy is based on the perception of the UI as a "living organism".
Tactile surfaces are based on the use of multiple layers - shapes are placed at different heights and cast shadows. "Magic" necessarily takes place within the framework of the laws of physics. Realism of the image is achieved due to the fact that the upper layers direct the "rays" to the lower ones.
The interaction of components in the digital environment is carried out according to certain rules. If the interface is "paper", then all the blocks located inside the system are written in "ink". The philosophy behind Google's idea is to use the truisms of printing in the field of UI design. This includes fonts, grids, icons, color schemes, and multimedia.
Users love interfaces in which the element is in place, actively interacts with others, and is designed as part of a "print newspaper". Imagine the application screen is a digital sheet. Without guidelines, harmonious typography, clear borders and color composition, even the coolest work will turn into a chaotic template.
The second Material Design principle consists of 7 building blocks. Let's take a quick look at each of them.
Typography comes first. In printed matter, it solves two main tasks:
- Sets the style of the publication.
- Forms a "skeleton" of content.
It is very easy to check the harmony of fonts. I need to mentally remove icons and other visual elements. If the structure remains the same without them, then the typography has done its job. Large headings are usually combined with small paragraphs and footnotes. There is a noticeable border between the blocks, which is set by uniform indents.
The size of fonts also plays a role. Important blocks are made large, and minor ones fade into the background. The authors of Material Design emphasize that the font family must be tested for cross-platform compatibility. Otherwise, the display difference may cause dissonance.
The contrast of fonts in books, magazines and newspapers fits perfectly into the plane of the digital environment. The text in different areas is drawn up in the same style, but the differences should be clearly traced.
Grid and guides help you create UI with maximum fidelity. Material Design uses 8dp modular grids. Dp is a unit of measurement that takes into account the density of the device's screen. Borders define the structure of the layout and provide a comfortable experience for the content.
The creators of the new design style have revised the approach to the use of icons. They were part of the UI before, but are now more user-friendly. There is even an unofficial portal with a large set of ready-made options.
In the printing industry, the perception of the material by the readers depends on the correct use of color. In the digital environment, similar rules apply. Google's concept in this aspect involves the use of a composition of the main and additional shades. The main color is used in the controls, while the accent color draws attention to important components.
The last key factor in print design is the use of illustrations and photographs. Color-saturated pictures are widely used, which are placed without borders.
If we briefly describe the properties of printing in material design, then these are:
- visible padding and borders;
- harmonious fonts and colors;
- bright photographs and "cartoon" illustrations.
An integral part of the philosophical concept of material design is animation. Through the use of dynamic effects, users see the response to the action. This allows communication between the interface and the gesture to be established. It is based on the word "meaningful". That is, you cannot just add animation and consider the problem solved. We must go the other way. The user needs to understand what happened, and not just enjoy the beautiful movement.
Objects of the real world cannot appear out of thin air and dissolve again in space. They must be tied to specific mechanisms and events. A practical animation assumes that after completing an action, the user knows what to do next.
Let's look at the mechanism with an example. By clicking on the plus sign, the screen for adding a new event opens. The card appears smoothly, without harshness and excessive pathos. The cancellation of an action is carried out with the same grace. The rectangular area neatly turns into a round object. Animation doesn't just add a wow effect to a standard action. It tells a story, and the user listens to it and instantly understands.
This principle works thanks to 4 important attributes:
- Asymmetry. The boundaries of the interface depend on the thickness of the device, so transformations must be carried out within the plane. The proportions of objects are changed independently. If you do not follow this rule, the user will face incorrect scaling of objects. It is necessary that the animation is carried out evenly.
- Reaction. The touch should be in the center. Responses to actions are usually instantaneous. I touched the button with my finger and it responded to the touch.
- Microanimation. The tool allows you to set work scenarios for small elements. In the interface, every detail is important, microanimations provide detail and maximum immersion in the work of the digital environment.
- Clarity and sharpness. The essence of the last criterion is that the movement should be sharp, but at the same time clear. It is important to observe the principle of naturalness. As if the figure moves at will, and not due to the program code.
Animation is an important element, the script for working with it must be written in advance. Better not to leave the task for later. Experienced designers advise balancing and remembering that dynamics must be meaningful.
We return to the initial tasks set by the employees of the IT corporation. They wanted to create a single concept for all of the company's products. So that services go to applications and appear the same.
Responsive design gracefully solves the problem of displaying content on devices with different display parameters.
Let's start with the fact that as the device screen shrinks, the amount of content needs to be drastically reduced. While long drop-down lists can easily fit on a widescreen computer monitor, space on a smartphone is very limited. Splitting actions into several screens comes to the rescue. First, we show the list, and then, by clicking, we display a detailed description.
One of the tasks that the designer has to solve is the organization of space in the layout. The material design resource has a good tip. They suggest using whitespace or white space. They make it possible to understand how to match layers and shadows on different devices.
The unit of measure for padding is the independent pixel dp. It should be borne in mind that for devices with different form factors, the distance will be different. For smartphones 72dp, and for tablets - 80. When creating shapes, you need to use multiple proportions.
Blocks are the main structural unit. Integrate them into a modular grid for an organized creative space. Add objects, shadows, animation and the basic work is done.
A graphic designer should not only be a skilled designer, but also a tester. He must clearly understand how the UI will be displayed on smartphones, tablets, laptops and 30-inch monitors. Considering that compact devices have horizontal and vertical display modes, a specialist needs to spend not a single day creating prototypes, taking into account the characteristics of gadgets.
POPULARITY OF MATERIAL DESIGN
After the presentation of a revolutionary approach to virtual product design, the Google concept quickly spread and took root in the professional community. Some projects wanted to change the design to follow the trends. Others have realized the benefits of a meaningful interface. The IT corporation has made a big breakthrough.
It is convenient to interact with any Google application on a smartphone. One gets the impression that there are real objects on the screen that fulfill a clear purpose, but at the same time are self-sufficient.
Google has put the target audience first. The company didn't just create a consistent style for its products. She detailed the concept and created a thematic site with instructions, articles and examples. This work deserves respect.