Material Design: to the moon and back

  • Tutorial
“Is this dull dialog really needed?”



In this article, I outlined the main principles of Material Design and gave advice on their implementation. The text is written in the wake of a workshop for developers that we, Robots, arranged in collaboration with the Russian office of Google (Think Mobile).


At one time, all Google products looked differently different. Even one product on different platforms did not look consistent.

Everything began to change in 2011, when Google began to work hard to unify the visual part of the ecosystem of its products and called it Project Kennedy.

What does Kennedy have to do with it?
The legend is this: President Kennedy initiated a program of manned flight to the moon (if you believe that this flight has ever been). And the big boss at Google Larry Page professes the principle that there is no point in improving products by 10% - they should be 10 times better than competitors. If you already launch the product, then immediately to the moon. And here it was decided to remake everything cool.


The result primarily affected the web, but also affected some mobile products. At the same time, there was a separate work on the design of Android - Holo, which replaced the not too aesthetically pleasing interfaces of old Android.
But there was one problem: Holo was still different from Project Kennedy.

Users had to adapt to the new interface when switching, get used to the appearance, location of controls and so on.
Therefore, at some point, a group of designers from different parts of Google gathered and began to fight on this problem in order to solve it once and for all.

In 2014, a new design system was introduced at the I / O conference, an approach called Material Design. The new design system allows you to create a consistent user experience on all screens: desktop, smartphone, tablets, watches, televisions, cars. For Android applications, Material Design is an evolution of the Holo visual language and design guidelines. In many ways, this is a more flexible system, which was created taking into account the fact that other designers will use it - Google was only the first user.

Material Design allows you to take a more objective approach to making design decisions: how something looks, how something works, how animation is performed, and so on. It sets a reasonable framework, but not excessive restrictions.

4 principles of material design



Material Design is based on four main principles:
  1. Tactile surfaces. In Material Design, the interface is made up of tangible layers of so-called “digital paper”. These layers are located at different heights and cast shadows on each other, which helps users better understand the anatomy of the interface and the principle of interaction with it.
  2. Print design. If we consider layers as pieces of “digital paper”, then with regard to “digital ink” (everything that is depicted on “digital paper”), we use the approach from traditional graphic design: for example, magazine and poster.
  3. Meaningful animation. In the real world, objects do not arise from nowhere and do not disappear to nowhere - this only happens in the movies. Therefore, in Material Design, we always think about how to use animation in layers and in “digital ink” to give users hints about how the interface works.
  4. Adaptive design. It is about how we apply the previous three concepts on different devices with different resolutions and screen sizes.


So, we will move in order.

Tactile surfaces



Let's start with the tactile surfaces. These are the very pieces of “digital paper” that, unlike ordinary paper, have superpowers — they can stretch, connect, and change their shape. The rest behave in full accordance with the laws of physics and the laws of the Russian Federation.

Surface



What is a surface? Basically, it is a “container” with a shadow and nothing more. But this is quite enough to distinguish one object from another and show how they are located relative to each other. The Philosophy of Material Design strives for simplicity and clean design.

There is no need to go too far and use the texture, apply gradients for the image of chiaroscuro. No need to give the visual properties of the skin like a grandmother’s door to the apartment - a neat shadow can express a lot. But each surface has its own height - the location on the Z axis. And each of the surfaces casts a shadow on the bottom, as in the real world.

Depth



In the traditional "flat design" shadows such as all kinds of manifestations of volume are avoided, but they fulfill the important function of indicating the structure and hierarchy of elements on the screen. For example, if the rise of an element is greater, then its shadow is greater. This increased depth helps to focus the user's attention on critical things and do it gracefully.



Depth also gives clues about the interaction. Here, as the user scrolls, the green bar sticks to the top layer and a shadow is added. This shows that not only the “ink” is moving, but the white background is lower and moving entirely.



It is important to note that the depth has a “bottom”. It is assumed that it is limited by the thickness of the mobile device itself. That is, if on a smartphone it is a centimeter from glass to the back wall, and you have a credit card in the interface, then you can’t just flip it over - it will rest against the glass and the back wall.

NB!
  1. Depth should make sense. Ask yourself the question: “Why so, and not otherwise?” If there is no answer, it makes sense to look for another solution.
  2. Take care of the logistics. Floating buttons, toolbars and dialog boxes are at a certain height. Sometimes they need to move along the Z axis to avoid collisions when something happens. With this choreography you need to be extremely careful.
  3. No need to force a button. The floating button is a very characteristic element. Many people think it’s worth adding it to the interface: it immediately becomes Material Design. But it should only be used for key action in your application. If you need to close some window or confirm the action, then you do not need to use the floating button. There are other elements to this.
  4. Not everything should be on the card. If an object has many forms and it contains a lot of different content, then the card is suitable. And if not, then maybe it is better to do this in plain text or a text list?
  5. Is this dull dialog really needed? Google designers have tried to make dialogs better, but Bottom Sheets is more suitable for most tasks. There are still Snackbars. Dialogs are only needed to ask the user a question.
  6. Use list expansion. This is an underestimated pattern, but it is quite a Material and solves the problem well.


Print design




Since we call surfaces “Material Paper” in Material Design, everything that is placed on it — text, images, pictograms — is printed in “digital ink”. And Material Design uses the classic principles of printing design in the design of interfaces.

Elegant typography


Typography plays a crucial role in print design. Take any magazine, and you will notice that typography performs two important functions there. Firstly, font selection and composition is a style-forming element of a publication’s brand. Secondly, typography defines the structure of content.

There is quite a lot of text on this screen. But if you drop the icons and turn the text into gray blocks, then it becomes obvious that the structure is quite distinguishable.

Before us is a large headline and a set of smaller elements that differ in their richness - the more important ones are darker. At the same time, we clearly distinguish the grouping due to the fact that some rectangles are located close, and there is a significant indent between the blocks. In general, everything is in the best traditions!

Font size




Google.com/design/spec has a standard font palette that you can safely use. The palette uses the Roboto font, but you can replace it with your own company font to support the brand. It’s important to carefully test everything, since font rendering can work differently on different devices. Usually OTF fonts work better than TTF.

Contrast typography




Another principle from the world of printing that gets along well in Material Design is contrast typography - a really noticeable contrast between the font sizes of the title and the typesetting. It beautifully and well highlights the main thing.

Modular grid and guides



Now to the location of the content on the screen. In the printing design, modular grids are used, in the screen design it is more basic grids with very small modules. So, Material Design uses an 8dp grid. DP is a density-independent pixel, a unit much like the point unit in iOS.

But the main distinguishing feature of the placement of content in accordance with the principles of Material Design is the location of key guides. They set margins from the edges of the screen, structuring information and controlling the user's gaze. If you are familiar with the design of multi-page publications or have read Chichold , then you probably know a lot about the grid and fields and understand where the legs grow from here.

In fact, we see a column of text in the middle and a large field on the left, which makes it possible to focus on the main content, and give auxiliary elements in the margins.

Geometric iconography



If we talk about iconography, then simple icons have been used in Android for some time, but in Material Design they have become even simpler and friendlier. On the unofficial resource materialdesignicons.com, designers can find pictograms for their purposes and, if possible, contribute.

Color




As in printing design, in the design of interfaces, color is an important means of expression. In the former Android, color was something extra, but now it plays a more prominent role. In Material Design, the standard application color palette consists of primary and accent colors.



The main one is used for large areas like the action bar, and the status bar is painted in its darker variation. A brighter accent color is used pointwise in controls, buttons, stripes, indicators, etc. Accent color is designed to draw the user's attention to key elements, such as a floating button.

How much color to apply? Emphasis is placed point, in a small amount. There is a simple basic rule for coloring the rest of the interface. When there is a lot of text, for example, this is a mail list, you should leave the app bar of a standard size and color it to allow the user to focus on the content. If there is not so much content, for example, a detailed view of an individual element, photo or calculator, then this is a great opportunity to use large color dice - 2x or 3x app bar heights.



Android supports a library called Palette, which allows you to extract color from photos. That is, it is possible to dynamically color the interface based on photo illustrations in the application.



We took a photograph, and the algorithm selected 6 colors from it with different characteristics:
- there are 3 juicy and 3 muted colors;
- they are divided into light, standard and dark colors;
- for each background color, its own text color is determined, which can also be used.

Beautiful photos




Finally, as in print design, Material Design encourages the use of photography and illustrations in all its glory. Pictures are generally placed without frames, often “over the top”. Even the status bar is specially made transparent so as not to interfere. Moreover, every drop of “digital ink” on the screen has a function, almost nothing is just for decoration.

NB!
  1. Brand with pleasure. Google is in a better position to use vibrant colors as branded, but this should not be taken as a problem. Colors can be chosen from a corporate brand book and generally use a logo.
  2. Do not forget the indentation and “let's air”. The basic grid in 8dp and the left margin in 72dp are practically the rule. Let the content be good and free.
  3. Expressive photos take the weather. Photographs and illustrations as expressive means are our choice.


Meaningful animation




In the real world, objects cannot simply appear from nowhere or disappear into nowhere. This would be bewildering and confounding people. Therefore, in Material Design, meaningful animation is used to show what just happened.



Example 1. The animation shows that it was this particular card that, after clicking, came to the fore, opened, and more information became visible.



Example 2. An event in the calendar, when clicked, breaks off the surface, turns into a separate layer of “paper”, begins to transform, and opens as detailed information about the event.



An interesting point is that the active movement attracts the eye - this is natural for our eyesight. Using animation, we control the user's attention.

Asymmetry




Since the depth of the interface is limited by the thickness of the device, all the transformation of objects has to be done in the plane. This also leads to the fact that the transformation animation must be asymmetric - that is, the change in the width and height of the object must be independent. Otherwise, there is an illusion of approaching or moving away from the viewer, and at a very large distance.

Reaction




Another very important principle of animation in Material Design is the response to user actions. Where possible, the epicenter of changes in the interface should be a touch on the screen of the device. For example, a wave that appears and comes from the point of contact with a finger. This effect is seamlessly implemented in Android L.

Microanimation




In Android L, we can animate every element of the application - whether it's transitions between content or small action icons. Every detail of the application is important, and microanimations add more detailed and responsiveness to the application for each user action.

Sharpness and sharpness




And the last, key principle of animation: the movement must be fast and clear. Unlike the banal acceleration at the beginning and deceleration at the end, the animation curve in Material Design is more natural and interesting. Objects respond more quickly and reach the target state, sharper return back, but go a little longer to a state of rest at the end. As a result, the user needs to wait less (this is less annoying). Moreover, where the object has already left the sphere of interests of users, it allows itself to behave more naturally.

NB!
  1. Do not leave animation in the end. You should not leave the animation to the very end - it can serve as a key factor in the user experience, and it needs to be thought out in advance.
  2. Know the measure. Too much animation is also bad. Keep yourself in control and remember that it should be meaningful.


Adaptive design



The last major aspect of Material Design is the concept of responsive design. That is how we can apply all three first concepts on different devices and screens in different form factors.

From general to specific



The most common trick is reducing the amount of information displayed on the screen along with reducing the screen. If on the big screen we can afford to show both the list and detailed information on the selected item, then on smartphones the list is first displayed, and for details we need a separate screen. In the case of tablets, the app bar can sometimes be increased to at least cope with the excess free space.

Indentation



Placing content using blocks greatly simplifies working with free space on large screens. We know the contents of each block, we understand how wide it can be, so as not to lose in readability, and also how narrow, so as not to be too crowded. On wide screens, the blocks are stretched to their readability limits, and then indents from the edges, which may well be large, are added. They can be filled with a floating button and colored dice.

Whiteframes



Ideas for organizing space and indentation for different screens can be found on google.com/design/spec in the Whiteframes section. This is a great place to start, understand the general meaning, and then continue your own experiments.

Guides



Guides give us margins for “ink” on separate sheets of “paper”. On the smartphone we have one sheet and one good indent on the left, and on the tablet there are two of them and in both cases there is an indent. It is important that the indent will be different for these two form factors. On a tablet, it's 80dp, and on a smartphone, 72dp. The margins from the edges of the screen are also different.

Dimensions



It is recommended to take multiple proportions for all elements. In particular, choosing the app bar size is much more convenient if you make it multiple: 1x, 2x, 3x. On smartphones and tablets, this size is different, but the application adapts without problems.

Blocks



Thinking in blocks can generally be helpful. If you ask such a modular grid of blocks that are multiples of 8dp, you get an excellent visual rhythm and it will be more convenient to make decisions. Go to the website with white frames and see the materials.

Toolbar



Action bar is one of the most important parts of the interface. It contains the title, action buttons and navigation. In Android, the Lollipop action bar has evolved from a shackled strip on top to a full-fledged widget - a functional and beautiful application control unit. This became possible due to the fact that now you can put many functional elements in the toolbar, which you could not even dream of before:
- input fields, forms;
- floating button of the main action;
- The toolbar is hidden by advanced navigation, but here we see a fully functional widget;
- The toolbar is conveniently managed if necessary.

NB!
  1. Далеко не всегда нужен navigation drawer. Google очень часто использует выдвижную навигацию в своих приложениях, поэтому вы можете видеть её в разных примерах. Но у Google очень много задач, которые можно решить с её помощью: разместить помощь, настройки, логин/логаут, информацию о пользователе и так далее. Если у вас похожие задачи, то всё OK, а если вы делаете простой инструмент, то не стоит.
  2. Cмелее и остроумнее с тулбарами. Возможность менять размер тулбара динамически, делать его двойного и тройного размера — это очень круто и удобно. Большинство дизайнеров боится с этим связываться и выбирают один размер раз и навсегда, но тут можно и стоит быть смелее.
  3. No need to make a ghetto for the floating button from the bottom corner. A floating button can be anywhere: bottom, top, right, left. Of course, in the corner it can be convenient to reach, but this is not the only option. The button can move from place to place depending on the task.
  4. Both smartphones and tablets; both vertically and horizontally. The range of Android devices is large, and this does not make life easier for developers. But the truth is that users really have all these devices that they rotate this way and that (even if it comes to smartphones). This moment needs to be worked out.

This is Material Design. Do not be afraid to experiment and make mistakes: do not get hung up on copying existing solutions. Give it a try!

Also popular now: