What is material design? Material Design: examples of use. Collection of free icons

“Flat” style is in trend today, no one denies this. I’ve been developing a small game for about three months now and decided to use “flat” design as the style, because... it is the most popular now, and it is also very easy to “reproduce” (the word “draw” does not fit here, because I am a programmer and I don’t know how to draw at all =)). That's why I decided to post my collection of Material Design from Google, which I collected while I was developing my new game.

So that you understand what we are talking about, here is a short video:

The most important document from which to start learning Material Design is, of course, guidelines from Google. There are plenty of examples of how to “should” and how to “don’t”, and there are also source codes (for Photoshop, etc.) in which you can dig deeper and figure out what’s what.

Here is another good site with a daily selection of concepts, applications, etc. made in the style of Material Design - Material Design Daily. There are a lot of animated examples, some just make you think “how could this be invented?” In a word - I recommend it.

A few words are worth mentioning about the selection of colors in Material Design. This is probably one of the main components of good design. Here are a few sites that will help you with this: Flat UI Colors, Material Pallete.

In our article today we will touch on a topic that has not yet been discussed on Rusability. To be fair, we note that in RuNet as such, interest in this topic is only beginning to gain momentum, despite the fact that the concept itself was born last year. We are talking about a sensational and, as some believe, revolutionary design direction, which Google has dubbed material design.

Material design is not so much even some new approach to building relationships between the user and the virtual environment, but rather an entire philosophy that regulates such relationships. Like many truly bright and fresh phenomena of recent times, material design is a successful compilation of those ideas and concepts that have either already been encountered separately in various products, or, as they say, were in the air. There are still debates about whether material design is a good direction, as well as a meticulous and scrupulous search for all sorts of shortcomings, but perhaps no one denies that this concept is a very accurate reflection of the spirit of the time and the aspirations of ordinary users. It is aesthetically sound, attractive, intuitive, and, apparently, very easy to use. “Material design is cool” - this kind of emotion unites both an enthusiastic audience and a more critical audience, pointing out the shortcomings of material design.

Material design can be seen as the first serious and rather predictable step towards the mass unification of interfaces, and, consequently, the unification of the user experience as such. This feature is key to material design - it is universal and uniform. As a second characteristic feature In material design, intuitiveness should be emphasized, which is the next most important aspect after comprehensive unification. As a matter of fact, these two components - the unification of interfaces and maximum intuitiveness - are designed to make material design a truly mass phenomenon.

Google unveiled material design to the general public on June 25, 2014 as the design for the new operating room Android systems, which later became known as Lollipop. It is possible to fully use material design only within the framework of creating applications for Lollipop, but some applications for Android 4 can also be redesigned in the material style, however, with certain restrictions. The main and probably the only factor significantly limiting the freedom of application developers for Lollipop is the poor compatibility of the material design concept with earlier Android versions and Android 5.1 Lollipop is still not widely used. In any case, it is only a matter of time before the latest flaw is eliminated.

Android Lollipop

The release of the material design concept was associated with the emergence of a detailed, accessible and thorough guidelines from Google. As we discuss material design in our article, we'll regularly refer to this comprehensive and vibrant guide developed by Google designers.

Main theses and basic principles of Material Design

The entire philosophy of material design rests on four fundamental and understandable principles:

1. Surfaces. Embodied in the form of cards created from “digital paper”, such surfaces are completely subject to the laws of the physical world, have a tactile response and provide strong feedback along with high intuitiveness.
2. Printing typography. Instead of reinventing the wheel, why not take advantage of more than a century of experience in the field of printing? Considering that the original surface is now represented by layers of virtual, practically tangible paper, it is quite logical to apply information to it in accordance with the best samples printing products. To put it more exaggeratedly, Google has adapted the rules of “real” typography for mobile device screens.
3. Animation. Animation in material design must obey physical laws, and therefore the intuitive expectations of the user. The relationship of moving objects, their influence on each other, the way they appear and move - all this must be real, logical and predictable.
4. Adaptive design. The very main aspect that we talked about at the beginning of the article. Responsive design aims to unify the user experience and make it consistent across all platforms.

By combining these fairly simple and obvious principles, Google has created a powerful and eminently logical system, which we will likely be using in some form or another for at least the next five years. Let's take a closer look at each of the four aspects of material design.

Surfaces, their properties and functions

The very materiality of the Google concept is concentrated in the properties of surfaces. The interface structure itself is as realistic as possible - it has a depth limited by the thickness of the device. For example, a device 1 cm thick according to material design will contain an internal world of the same thickness. This is very similar to a thin aquarium that has a back wall and a front glass, but instead of marine life floating around this aquarium, this aquarium has surfaces that resemble pieces of paper and are distributed in layers throughout the thickness of the aquarium. And, just like underwater inhabitants, these card surfaces are completely subject to physical laws - sometimes it seems that they are more than real, enclosed between the back wall of the smartphone and the display glass.

Sectional Material Design

AxisZin the worldmaterial design responsible for the volume of the interface

In the world of material design, surfaces exist at different levels of depth. And if in flat design, which is one of the predecessors of material, there was no hint of volume, then in material design almost imperceptible, light shadows form incredibly realistic depth.

How to Display Shadows in Material Design

Imagine that on your desk there are pieces of ordinary paper, cut into the shape of rectangles of various sizes. By moving them across the table surface and overlapping each other, you will clearly see which paper card is above the other. This happens due to the slight shadow cast by the edges of the paper. In material design, the developers have completely recreated this principle, and the distribution of “digital paper” cards at different levels, when one card overlaps another, fully corresponds to the content hierarchy - a surface located on top of another and casting a shadow on it is in this moment the main one, the user’s attention is focused on it.

The priority surface comes to the fore, casting a shadow on the bottom “leaf”

The surface itself is really a plane of a certain shape (in most cases, rectangular), which is capable of casting a shadow. The surface serves as a platform for content, a blank piece of paper on which other elements will later appear. Nothing more than the surface is meant in material design - pieces of “digital paper” do not and cannot have any texture or gradient transitions.

Features of typography in Material Design

As we already mentioned, typography in material design is as “real” as surfaces. This means that it uses all the rules and approaches that are used in printing. In the examples shown by Google, you can find best samples classical typography in virtual execution.

Typography Examplesmaterial design

Fonts

The standard font used in Android for a long time is Roboto. The new Lollipop OS and Material Design also use it as the main font. In addition to Roboto, Android applications can also use the Noto font, intended for those languages ​​that do not have their own versions of Roboto. Despite general style applications for Android and the font recommendations given in the guideline, it is quite acceptable in some cases to use your own proprietary font instead of Roboto, designed to form appropriate associations in the user.

FontRoboto

One of the most noticeable typographic features in material design is the use of contrasting font sizes. This classic technique can be seen in many examples from Google - the headings on the screens are typed in a very large font and, thanks to this, they stand out significantly from the rest of the text. To a certain extent, due to large headers that are visible from afar, the user can easily navigate between application screens and quickly grasp the essence of the current content. In addition to this, headers in this format look really cool.

High contrast typography in action

Content arrangement or layout principle inmaterial design

The way content is placed in the material design concept also complies with the principles of poly graphic design. The main and style-forming component of virtual layout in material design is the location of the fields. Margins and padding are arranged in such a way that the user's focus is on the content located in the middle of the main column, and easy and quick access to additional elements is possible thanks to the wide left margin. A similar principle can be observed on the pages of many printing publications.

Structure and layout of fields in material design

Icons

The iconography used in material design is a logical evolution of the idea of ​​maximum simplification that could be seen in earlier versions of Android. Google describes the icons for material as simple, clear, and friendly. At the same time, the idea of ​​materiality can also extend to icons - Google itself consistently embodies the idea of ​​material in the icons of its products. For example, the Gmail icon of a paper envelope comes from its real-life counterpart. In a material design environment, a simplified image of an envelope appears almost as real as a “real” prototype—the icon shows distinctive shadows that represent the curves and physical structure of a piece of paper folded into the shape of an envelope.

Virtual prototype of a paper envelope and finished iconGmail

It is noteworthy that the material approach to creating icons is only allowed for those icons that symbolize a specific product, such as Gmail. Others, system (or UI icons) icons that fill applications, are of a less material nature. They are truly minimal, uniform and simple. Due to their simplicity and symbolism, they are readable even when greatly reduced. These icons are dominated by geometric shapes.

IconsAndroid Lollipop– could there be anything more minimalistic and simple?

For developers, Google offers an impressive set of icons made in the style of material design. In this collection you can find, perhaps, any necessary icons for creating applications with material design. Google's material design icon set is available on GitHub. I would also like to mention the resource materialdesignicons.com, where you can find not only icons from other authors, but also offer ones you’ve developed yourself.

Philosophy of color

In the new Lollipop design, color plays a more significant role than in previous versions of Android. Even in this aspect of the design, the materiality that we talk about throughout the article is noticeable. Google itself is separately manifesting a new color policy, noting sources of inspiration such as modern architecture, road signs and even sidewalk marking tape. At the same time, bright man-made color combinations in material design coexist with natural, muted natural shades. In many ways, this approach is again consistent with printing canons, according to which color has a special impact on the reader’s perception of information.

The main idea of ​​working with color in material design is the division of shades into main and accent shades. Google suggests using 500 different shades as primary colors, which together make up the Primary palette. All other colors not included in this palette can be used as accent colors.

Examples of primary colors fromPrimarypalettes and related accent colors (shown in the lower blocks, with a letter designation in the form “A" before the shade number)

When designing an interface, Google suggests limiting yourself to a maximum of three colors from the main palette and one accent color. Primary colors are applied to elements such as the action bar, and also (as in the case of white) applied to the surface containing the main text content. It is noteworthy that when coloring the action bar of an application with one of the colors, we must color status bar a darker shade of the same color:

Status bartakes coloraction bar, but still stands out as a richer, darker shade

Really bright and eye-catching colors in material design are used to create accents. Active application elements need such color accents, first of all, of course, the Floating Action Button. In addition to this, it is necessary to paint a variety of sliders and switches in bright accent colors.

Active elements such as the floating button and sliders are highly intuitive, thanks in large part to the use of accent colors to encourage the user to take action.

Animation

The Suprematist Square Movement, Kazimir Malevich (1920) andMeaningful Motion, Google Material Design (2014)

Animation in material design is one of its most interesting aspects. It is thanks to the detailed animation that obeys the physical laws of the real world that devices with Android 5 on board are so captivating and make the user want to tinker with them for hours, especially at first after getting to know them. The functional purpose of animation in material design is to constantly demonstrate to the user the consequences of his actions. Animation attracts the eye and clearly, eloquently shows the user what exactly is happening at a given moment in time.

Like all other components of material design, animation that obeys physical laws is not something fundamentally new - the developers just adapted the rules of classical animation to the virtual environment of the operating system.

The basis of material design animation is the interaction of planes, pieces of “digital paper” that we talked about earlier. These planes, moving at different levels in their world, limited by the back wall of the smartphone and the glass of the screen, can meet, displace and shift each other, come to the foreground at the user’s command, increasing in size and filling the screen.

Just like in classical animation, all movements of planes are regulated strict rules, thanks to which there is an accurate simulation of the movement of surfaces in real world.

Firstly, any objects in the real world have mass, and, therefore, a certain resistance. In order to move an object, a force must be applied to it. In this case, the object (in our case, the surface) will not begin to move immediately - due to its mass and resistance, it will accelerate for some time, and then, after the main movement caused by the application of force ends, it will also slow down for some time, moving thanks to inertia. By applying these simple laws, we get an interface with incredibly realistic surface movements.

Moving surfaces have the ability to move naturally, providing predictable resistance to movement

Moving the "digital paper" layer in the gallery

Secondly, material design is very effective at indicating the appearance or departure of a new object from the screen. Just like in the real world, in the environment of material design, objects do not appear from nowhere, nor do they go to nowhere. In Lollipop OS, the appearance of a new object in the foreground is associated with curious metamorphoses - the object, indeed, does not suddenly appear out of nowhere, it slides out, gradually stretching and taking on the shape of a surface. In this case, no respect for proportions occurs, because a proportional and symmetrical increase or decrease in the surface will give the impression of approaching or moving away, while we need to indicate the appearance on the screen of a new piece of “digital paper”, isolated and independent.

To realize this effect of the appearance of a new object, material design offers two approaches with varying degrees of obviousness. The most vivid and unambiguous indication of the appearance of a new surface is realized with the help of an increasing drop - after touching with a finger and calling the object, the surface begins to spread across the screen like a wave.

A spreading drop forming a new work surface is one of the most visual effects in material design.

The effect of a spreading surface can be very elegant and colorful.

Another way to show the user the principle of transitions is asymmetrical, uneven magnification of a rectangular surface caused by the user. The surface rectangle is stretched disproportionately until it acquires a given shape. This technique allows you to attract the user’s attention with active, nonlinear movement and draw his attention to the principle of the appearance of new surfaces.

Example of animation of basic icons inAndroid Lollipop

UbiquitousRipple-Effect

The Ripple effect, namely the wave-like movement of shadows where a finger touches the device screen, is another important aspect of feedback. In Lollipop, the Ripple effect is applied almost everywhere. When touching the interface of the new operating system, the waves diverge in most cases, be it pressing a button or viewing a gallery of photographs. Speaking technical language, as soon as the system receives input information (touching the display with a finger), the system immediately confirms the acceptance of this information through the wave-like spreading of “digital ink”.

Ripple-the effect that occurs when you quickly touch the screen with your finger

Ripple-effect that occurs when you try to move an image inside the gallery

Technical aspect of animationmaterial design or natural envelope

As we have already said, in the real world, in order to bring an object out of a state of rest, a force must be applied to it, while the main phase of the object’s movement will be preceded by its acceleration, just as a complete stop will be preceded by deceleration. Constantly interacting with the material world, we are accustomed to this state of affairs, so any other ways of moving objects, such as instant acceleration and a sharp stop without inertia, seem unnatural, strange and, often, annoying to us. Taking this aspect into account, the creators of material design have worked hard on the “physics” of animation, bringing it as close as possible to real life.

In the environment of material design, objects brought out of a state of rest quickly (but not instantly!) accelerate and gently, slowly slow down. This type of movement and animation is fun to interact with because it matches our experiences with the real world.

Motion graph of animated objects: fast acceleration and smooth deceleration

Adaptive design

The most important, key aspect of material design. The material design philosophy implies complete unification of the user experience. In other words, the user should not encounter different versions of the same application when using different gadgets. The user experience should be the same for both desktop and smartphone or tablet. The only acceptable and objective differences are different sizes and proportions of application interface elements. Everything else different versions one application should create a completely identical user experience.

The need to unify and develop a uniform user Google experience were among the first to realize. In practice, this realization turned into the so-called Kennedy Project, when in 2011 the company began developing a single type of interface for all its applications. Google had achieved good results in terms of aesthetics and UX, but there was still a real gap between the versions of their products for the desktop and for mobile gadgets running Android. Actually, material design itself is the next attempt after the Kennedy project to create a truly unified interface.

The visual simplicity of material has allowed us to develop a number of rules and methods that make it easy to adapt applications created in the material design style for various platforms.

Firstly, applications made in accordance with the material design concept have a block structure. Analyzing the interface of such applications, you can see that it is characterized by a clear distribution of blocks along a modular grid. Instead of a varied, not always obvious and confusing interface design, we get a kind of constructor, the individual parts of which can be relatively easily moved and adapted to a specific display.

Modular grid and distributed blocks

Thanks to blocks, each of which has an objective limit of expansion or compression, we can make the application interface highly readable and easy to use on any screen. It is thanks to the margin for expansion and contraction that each application block has that material design provides a truly effective tool for completely unifying the interfaces of various software products.

Interface designed according to the principlesmaterial design, universal for any screen

Secondly, adapting the application interface for different devices is associated with the amount of information displayed on the screen. Obviously, what smaller screen, the less detailed information we can demonstrate within it. In this case, we are forced to transfer some of the content to separate screens or hide it behind additional elements - this practice is especially typical for applications adapted for smartphones.

Elements

Floating button in normal or mini version

Floating action button. The floating button is one of the most characteristic and recognizable elements of material design. This is what the user notices first. A floating button is a very good way to push the user to some key action; with its help, a person quickly gets access to those functions that are most relevant to him at the moment. The button tends to appear in different parts of the screen and, despite the fact that it can most often be found in the lower corner, it can be located anywhere on the screen.

It must be remembered that a floating button can only be associated with a key, main action carried out in specific application. For example, in a file manager, a floating button can mean adding files or creating a new folder, in a messenger or email application - creating a new message or letter, in social network– mark “like” and so on. The main action is always bound to a floating button, although there are certain restrictions.

Not every screen needs a floating button. Some actions are easier to accomplish by interacting directly with the app's content. The most typical example of such an exception is a gallery of photographs. When viewing photos, it is easier to interact directly with the images, without the intermediary of a floating button.

While in the gallery, the user does not need a floating button - the main action is to select and view photos

A floating button always has the shape of a circle, casting a small shadow and being the same fragment of “digital paper” as other surfaces. The button has a bright accent color that does not intersect with the main colors from primary palette, thanks to which it always remains the main and most noticeable element on the screen. Its dominance is also emphasized by its position relative to other layers of the interface - the floating button is always on top and cannot be overlapped by other application elements.

Floating Action ButtonV action

What best characterizes a floating button is the fact that it can only be associated with positive actions, such as creating, adding, or moving within navigation. Associating a floating button with destructive or atypical actions - deleting, adjusting the volume or calling the settings menu - is illogical and psychologically unfounded.

Positive and negative actionsfloating action button

And finally, the last important point is that there can only be one floating button on the screen. The presence of several floating action buttons within one screen completely destroys the whole point of a floating button - implementation key action in the application.

App barwho replacedaction bar

The action bar has seriously changed compared to previous versions. IN Android Lollipop its functionality has increased noticeably and now the updated element is called app bar. Thanks to the changes new app bar is a tool for complete user control over the application, and, as is the case with other aspects of material design and the new Lollipop OS in particular, the app bar is completely intuitive and understandable.

The App bar is not limited to a fixed size - now it can be proportionally increased, placing on it all the necessary content and application controls, such as drop-down menus, filters, search form, and so on.

Basic version of the updatedaction bar, containing the necessary elements to control the application

Shadesapp bar, proposedGoogle

Current state of affairs with Android Lollipop and AppCompat v21 application development

The main problem associated with the transition to material design is the poor compatibility of new interfaces with older versions of Android. Many developers are reluctant to sacrifice this compatibility, and for this reason, the adoption of material design applications is still quite limited. This state of affairs will continue for some time, as long as the overwhelming number of Android devices run on its older versions.

However, for those developers who want to keep their apps compatible with older versions of Android, Google offers a set of tools that allow you to use material design elements in apps for predecessors to Lollipop. In the corresponding blog, developers are invited to familiarize themselves with the AppCombat library, which can be used to introduce material elements into older versions of Android.

One of the most interesting features is equipping an application running under previous versions of Android with a full-fledged app bar, which is a critical design element in Lollipop. Along with the new widget, old applications receive all the advanced functionality that distinguishes the app bar from the previous action bar.

Widgetapp bar

A Critical Look at Material Design

Despite all the obvious novelty and successful implementation, material design (if desired) can have some shortcomings. Although, as in all such issues, everyone decides for themselves whether the listed points are disadvantages. It is worth noting that at the moment, supporters of the material design concept still make up the majority of those who continue to vigorously discuss Google’s latest brainchild. However, the more skeptical public has the following complaints about the Lollipop interface.

Microsoft Flat Designwas much more practical and successfulmaterial design. As we have already said, material design is nothing more than a successful compilation of approaches and techniques that have already been developed and used by someone else before. One of the concepts that has been adopted by material design developers is the so-called “flat design” from Microsoft. The very idea of ​​abandoning excesses in favor of a flat digital space first appeared in Microsoft products. Flat design represented a complete rejection of skeomorphism in any of its manifestations. Material design is a softened version of this concept by simulating “digital paper” and “digital ink.” Material design incorporates the best of both worlds - flat and minimalistic spaces from flat design and a certain animated volume from skeomorphism.

Microsoft Flat Design

However, not everyone considers material design to be the middle ground and a friendlier version of flat design. Quite rich animation and volume in material design are considered by many users and developers to be an excess that distracts the user and loads him with unnecessary visual information. Material design is also blamed for its high demands on the resources that are used to animate all elements.

Inefficient use of screen space, too much empty space. The abundance of the notorious “air” in material design (as in modern design in general) is the subject of the most heated debate between designers, developers and ordinary users. Question empty spaces V modern interfaces and in fact quite controversial, since the relationship to quantity free space on the screen depends, after all, on individual preferences. Many users want to see all (or most) of the necessary information in front of them, trying not to resort to scrolling and paging. Such users are frankly annoyed by large indents and gaps between content, as well as the need to constantly scroll. Grouped content, intelligently distributed across the entire screen area, is their choice.

Another type of user, on the contrary, welcomes sparse content, the presence of “air” and clean free space. They are not burdened by the need to scroll and flip more often virtual pages, and they consider the presence of large indents as a necessary condition for quick and easy discharge the desired element from the total mass of content. In addition, these users consider the “air” to be justified and favorable from an aesthetic point of view.

For example, let’s compare the Settings menu interface for Android and iOS:

Interface comparisoniOSAndAndroid– the triumph of subjective perception. Some users consider the location of content iniOSmore rational and justified - everything is at hand, while inAndroidit takes extra effort to find the menu item you're looking for. In turn, another part of the users finds the interfaceiOS too overloaded and difficult to understand, and the interfaceAndroid– easier and more accessible.

The discussion of the advantages and disadvantages of material design is still ongoing, users and developers are paying attention to controversial issues and shortcomings, and are also looking for ways to effective use material design concepts. In the very near future we will see what fate awaits material design - will it remain an ambiguous fad imposed on us for some time giant Google, will it just be another big experiment in the field of interfaces or will it be a new stage that takes the art of UI to the next level? new level.

Conclusion

If you plan to seriously engage in material design and want to see the entire material concept in its entirety, then you need to study a simple, accessible and visual Google's guideline. We hope that our short review will be an introduction to such a promising direction as material design for interested readers. Understanding the philosophy of the new Google project, you will not only be able to implement your ideas in this fresh and practical format, but also, perhaps, refine and improve the material concept itself, developing your own “tricks” and improving the user’s relationship with the digital interface.

The main rule Google— carefully monitor the user’s needs and, based on them, adjust your design (and not only that). A trend such as Material Design allows you to improve UX, making you want to return to the resource again and again. And one of its key elements is the ability to seamlessly interact different functions on one platform.

Material Design stems from the idea of ​​free movement in the right user direction and is based on tactile reality. Initially, its developers were inspired by ordinary ink and paper, but since then it, of course, has moved far from this fundamental feature, acquiring the characteristics of real magic. In other words, by improving the visual and functional part, Google specialists combined the principles of good design with innovation and the capabilities of new technologies.

What are the features of Material Design? The surfaces and edges of elements in this design direction combine visual images and cues to create cues that help the user intuitively navigate the site (as if it were all happening in the real world).

In addition, Material Design uses the principles of printing design to effectively place accents (that is, focus attention on the desired element), simplify navigation in the interface, and intuitively convey the meaning of its elements. Material Design is characterized by rich, even colors, sharp, defined edges, large typography and considerable space between elements. Together, these elements not only add up to a picture that is pleasing to the eye, but create new reality with conceptual meaning and many features that give the user a unique UX.

With this type of design, the user's actions are the focus. All interactions take place in one environment, interactive objects move from one environment to another without interrupting the sequence.

Material Design is a story about functionality that every element strives for. According to this principle, it is important to focus on the main points of attention of the user in order to direct him in the right direction.

Material Design is a story about interactivity. The page responds to any slightest movement of the user, and each transition should be smooth, as if you were floating in a boat on a calm river and know where and why you should turn. Therefore, Material Design is also a story about awareness: in addition to the fact that every action is pleasant (and easy) to perform, the user must clearly and clearly understand what and why he is doing and where the next touch will lead him. Therefore, feedback should be clear, accessible and easily identifiable.

As already mentioned, the interface structure borrows many of the “tricks” of printing design, but all of them are used not in their original, but in an improved form. Material Design adds to these features unlimited scaling and page resizing capabilities, which allow you to adapt the design to any device, such as a tablet or smartphone. All these possibilities give a feeling maximum comfort when working with navigation and the entire interface (since unlimited possibilities are subject to the principles of simplicity) and inspire a sense of trust.

The main question that a designer should answer before development is what exactly will the user (or want) to do when working with the application? Once you have formulated the answer, you can begin to implement Material Design ideas.

When creating an app, remember that content is just as important as its visual design. It should not confuse the user, but on the contrary, it should create a feeling of comfort and a clear understanding of why he is here and what he will do now.

Test different variants arrangement of elements, for example, a toolbar can be located at the top of the screen and thus solve all navigation tasks, making it easier to switch between different tabs and search.

Remember the principles of functionality and try to guide the user, do not “drop” him on the first page. This approach will be more advantageous: you will be able to focus the visitor’s attention on important aspects the product/service you provide. Already at the development stage, think about creating a navigation system that allows you to highlight the supporting components that every visitor can easily and quickly reach.

When choosing the best objects, shapes and colors, do not stop there: start manipulating these elements with the help of movements, giving them flexibility and tangible “material” weight. This complete tactile control over every, even the smallest movement makes Material Design uniquely beautiful.

Your goal at this stage of development is to find a balance between ease of movement and the physicality of each object that will meet the principles of a seamless UX.

Careful planning and testing will pay off during the launch phase: if you do everything right, the user will be hooked by the information you present. In addition, if it is necessary to perform an action in several steps, a planned algorithm using bright objects and animation will bring him to completion of the operation (after all, he will clearly understand what is expected of him and how to do it).

Animation in Material Design is often used to create smoother transitions, but it shouldn't be limited to just that. With its help you can improve many interface details and navigation bar. In addition, you can use small details in the icon menu, which will not only add clarity, but will also once again emphasize your concern for the aesthetics of the application.

Remember that Material Design focuses on usability, not just good design as such. Its principles can be the best starting point for creating an application that will captivate a huge audience with its grace and convenience.

Your job as a designer is to make the user's life easier and give effective solution when it interacts with the application. This happens, first of all, due to the provision of the most important information in the shortest possible time and in the most convenient format.

Always keep in mind the focal points that the user should focus on, and make sure at each test that they do not fade into the background while the visitor “wanders” through the resource. Pop-ups, notifications, and other distractions can irritate your visitors or even drive them into a corner. Be a kind of guide: help them not to get lost and find what they need. Instructions and a help button should also be available at all times.

Another one good idea— insert descriptions of the links that you place on the resource. They are needed for a clear and quick understanding of where the user will end up. A less effective tool is to use the "click here" button

4. Icon template from Google Design:

5. Icon Grid System for Android L:

One of the main trends of 2015 is Material Design - the design of applications and software for the Android operating system, developed by Google. Material Design is a unified set of rules that applies to all Google products, but the design concept itself is not at all limited to the Android OS. Material design welcomes anything that can enhance interactivity: animation, sound, color, flat elements, and much more. Essentially it's a reimagining flat design with a small amount of skeuomorphism. Material design takes the relationship between humans and technology to a new level, with the main goal of creating a design that is as simple as possible for users.

The concept of Material Design was first introduced in the summer of 2014, but today you can find many sites and applications on the Internet that use the principles of a material site. Here are a few very interesting examples already existing sites and several concepts showing what familiar web resources could look like.

INBOX BY GMAIL

Inbox is one of the first websites created in the Material Design style. Interestingly, the Inbox design was developed before work began on creating unified requirements for Google products. However, everything characteristic features style is present in Inbox - after all, it was designed by Google designers.

Evernote is one of the most used Android apps in the world. This year its design has been redesigned in accordance with the principles of material design.

Here is an example of what it could look like user interface Facebook, if it were created in accordance with the requirements of Material Design. The concept turned out to be quite successful, at least in appearance home page does not scare away the user.

FACEBOOK NEWS FEED

This is what a Facebook news feed could look like.

THE NEW YORK TIMES

The NY Times website design has always been a bit of a mess. However, the redesign benefited this influential online publication. This is a very impressive example of how Material Design principles can be used.

The appearance of You Tube has already been brought into line with the requirements of material design - after all, the site is owned by Google. However, designer Markus Hofer believes that there is no limit to perfection.

WINDOWS EXPLORER

Material design principles can be used for more than just websites or apps. Even operating system interfaces can be developed in this style. This is what, for example, Explorer could look like in Windows.

OTHER EXAMPLES

• Tutorial

“Is this boring dialog really necessary?”

In this article, I outlined the main principles of Material Design and gave advice on how to implement them. The text was written in the wake of a master class for developers, which we, Robots, organized together with the Russian office of Google (Think Mobile).

Once upon a time, all Google products looked bad in different ways. Even one product per different platforms looked inconsistent.

Everything began to change in 2011, when Google began working 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 the program to fly a man to the Moon (if you believe that this flight ever happened). 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 those of competitors. If you’re going to launch a product, then go straight to the moon. Here, too, it was decided to radically redo everything.

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


Users had to adapt to 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 got together and began to wrestle with this problem in order to solve it once and for all.

In 2014, at the I/O conference, a new design system was presented, an approach called Material Design. The new design system allows you to create a consistent user experience on all screens: desktop, smartphone, tablets, watches, TVs, cars. For Android apps, Material Design is an evolution of Holo's visual language and design guidelines. In many ways it's a more flexible system, designed with the expectation that other designers will use it - Google was just 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 done, and so on. It sets reasonable limits, but not unnecessary 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 how they interact with it.
2. Print design. If we think of layers as pieces of “digital paper,” then when it comes to “digital ink” (everything that is depicted on “digital paper”), the approach taken from traditional graphic design is used: for example, magazine and poster design.
3. Meaningful animation. In the real world, objects do not appear out of nowhere and do not disappear into nowhere - this only happens in movies. That's why at Material Design we're constantly thinking about how to use animation in layers and digital ink to give users hints about how the interface works.
4. Adaptive design. It's about how we apply the previous three concepts on different devices with different resolutions and screen sizes.

So, let's move in order.

Tactile surfaces

Let's start with tactile surfaces. These are the same pieces of “digital paper” that, unlike regular paper, have superpowers - they can stretch, connect and change their shape. Otherwise, they behave in full accordance with the laws of physics and the legislation of the Russian Federation.

Surface

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

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

Depth

In traditional "flat design" such shadows are avoided as any manifestation of volume, but they perform an 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 focus the user's attention on critical things and do so gracefully.

Depth also provides clues about interaction. Here, as the user scrolls, the green tile sticks to the top layer and a shadow is added. This shows that not only the “ink” moves, but White background is located below and moves entirely.

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

NB!

1. Depth must make sense. Ask yourself the question: “Why is this and not otherwise?” If there is no answer, it makes sense to look for another solution.
2. Take care of 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. You need to be extremely careful with this choreography.
3. No need to force the button. The floating button is a very distinctive element. Many people think that it is worth adding it to the interface: this immediately becomes Material Design. But it should only be used for a key action in your application. If you need to close a window or confirm an action, then you do not need to use a floating button. There are other elements for this.
4. Not everything needs to be on the card. If an object has many forms and contains many different content, then the card is suitable. And if not, then maybe it would be better to do it with plain text or a text list?
5. Is this boring dialog really necessary? Google Designers We tried to make the dialog boxes better, but Bottom Sheets are still more suitable for most tasks. There are also Snackbars. Dialog boxes are needed only to ask a question to the user.
6. Use list expansion. This is an underrated pattern, but it is quite a Material and solves the problem well.

Print design

Since in Material Design we call surfaces “digital paper”, then everything that is placed on it - text, images, icons - is printed with “digital ink”. And Material Design uses the classical principles of printing design in the design of interfaces.

Elegant typography

In print design, typography plays a fundamentally important role. Pick up any magazine and you'll notice that typography serves two important functions. Firstly, the choice and composition of the font is a style-forming element of the publication’s brand. Secondly, typography sets the structure of the content.


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

We have a large header and a set of smaller elements that are distinguished by their saturation - 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

The website google.com/design/spec has a standard font palette that you can safely use. The palette uses the Roboto font, but can be replaced with your own signature font to support the brand. It is important to test everything carefully, as font rendering may work differently on different devices. Typically OTF fonts perform better than TTF.

Contrasting typography

Another principle from the world of printing that fits well into Material Design is contrasting typography - a really noticeable contrast between the font sizes of the title and the typesetting text. It's beautiful and highlights the main thing well.

Modular grid and guides

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

But the main thing distinguishing feature placement of content in accordance with the principles of Material Design - placement of key guides. They set indentations 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 Tschichold, then you probably know a lot about the grid and margins and understand where the legs come from.

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

Geometric iconography

Speaking of iconography, 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 icons for their purposes and contribute where possible.

Color

As in print design, color is an important means of expression in interface design. In the old Android, color was something extra, but now it plays a more prominent role. In Material Design the standard color palette application 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 in spots on controls, buttons, stripes, indicators, etc. An accent color is designed to draw the user's attention to key elements, such as a floating button.

How much color to use? Accents are placed pointwise, in small quantities. 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 standard size and color it to allow the user to focus on the content. If there is not much content, for example, a detailed view of a single element, a photo or a calculator, then this is an excellent opportunity to use large colored tiles - 2x or 3x the height of the app bar.

Android supports a library called Palette that 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 photo, and the algorithm identified 6 colors with different characteristics from it:
- there are 3 rich and 3 muted colors;
- they are divided into light, standard and dark tones;
- each background color has its own text color, which can also be used.

Beautiful photos

Finally, just like print design, Material Design encourages the use of photography and illustration in all its glory. Pictures are mostly placed without frames, often “right through”. 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 bright colors as branding, but this shouldn't be seen as a problem. You can choose colors from the corporate brand book and use the logo in general.
2. Don’t forget the indentations and “give some air.” A base grid of 8dp and a left margin of 72dp is pretty much the rule. Let the content be good and free.
3. Expressive photos make the difference. Photographs and illustrations are our choice as means of expression.

Meaningful Animation

In the real world, objects can't just appear out of nowhere or disappear into nowhere. This would cause confusion and confuse people. That's why Material Design uses meaningful animation to show exactly what just happened.

Example 1. The animation shows that this particular card, when clicked, came to the foreground, opened up, and more information became visible.

Example 2. An event in the calendar, after clicking, comes off the surface, turns into a separate layer of “paper”, begins to transform and is revealed in the form of detailed information about the event.

The interesting point is that active movement attracts the eye - this is natural for our vision. With the help of animation we control the user's attention.

Asymmetry

Since the depth of the interface is limited by the thickness of the device, all object transformations have to be done in the plane. This also means that the transformation animation must be asymmetrical - that is, the change in the width and height of the object must be independent. Otherwise, the illusion of moving closer or further from the viewer arises, and by a very large amount. long distance.

Reaction

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

Microanimations

In Android L, we can animate every element of the application - be it transitions between content or small action icons. Every detail of an application is important, and micro-animations add greater detail and responsiveness to every user action.

Clarity and Sharpness

And the last, key principle of animation: movement should be fast and clear. Unlike the banal acceleration at the beginning and slowdown at the end, the animation curve in Material Design is more natural and interesting. Objects react faster and reach the target state, return faster, but take a little longer to reach the resting state at the end. As a result, the user has to wait less (less annoying). At the same time, where the object has already left the sphere of interests of users, it allows itself to behave more naturally.

NB!

1. Don't leave animation for last. You shouldn’t leave animation until the very end - it can serve key factor user experience, and it needs to be thought out in advance.
2. Know your limits. Too much animation is also bad. Control yourself and remember that it must be meaningful.

Adaptive design

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

From general to specific

The most common technique is to reduce the amount of information displayed on the screen along with making the screen smaller. If on the big screen we can afford to show both the list and detailed information according to the selected element, then on smartphones a list is first displayed, and for details a separate screen is needed. In the case of tablets, the app bar can sometimes be enlarged to at least slightly cope with excess free space.

Indentations

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

Whiteframes

Ideas for organizing space and spacing for different screens can be viewed on the website google.com/design/spec in the Whiteframes section. This is a great place to start, get the general idea and then continue with your own experiments.

Guides

The guides give us the indentation for the “ink” on separate sheets"papers". On a smartphone we have one sheet and one good indentation on the left, but on a tablet there are two of them and in both cases there is an indentation. It is important that the indentation will be different for these two form factors. On a tablet it is 80dp, and on a smartphone it is 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 a multiple: 1x, 2x, 3x. This size is different on smartphones and tablets, but the application adapts without problems.

Blocks

Thinking in blocks can generally be helpful. If you ask something like this modular grid from blocks divisible by 8dp, you will get an excellent visual rhythm and it will be more convenient to make decisions. Go to the site with whiteframes and look at the materials.

Toolbar

Action bar is one of the most important parts interface. It contains the header, action buttons and navigation. In Android Lollipop, the action bar has turned from a constrained strip at the top into a full-fledged widget - functional and beautiful block application management. This became possible due to the fact that now the toolbar can accommodate a lot of functional elements, which we had never even dreamed of before:
- input fields, forms;
- floating main action button;
- the toolbar is hidden by the extended navigation, but here we see a completely functional widget;
- the toolbar is convenient to manage if necessary.

NB!

1. A navigation drawer is not always needed. Google uses slide-out navigation very often in its apps, so you may see it in various examples. But Google has a lot of problems that can be solved with its help: posting help, settings, login/logout, user information, and so on. If you have similar tasks, then everything is OK, but if you are making a simple tool, then it’s not worth it.
2. Be bolder and wittier with toolbars. The ability to change the size of the toolbar dynamically, making it double or triple size is very cool and convenient. Most designers are afraid to deal with this and choose one size once and for all, but here you can and should be bolder.
3. There is no need to make a ghetto out of the bottom corner for a floating button. A floating button can be anywhere: bottom, top, right, left. Of course, in a corner it may be convenient to reach it, but this is not the only option. The button can be moved 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 do have all these devices that they turn this way and that (even if we're talking about about smartphones). This moment needs to be worked out.

This is Material Design. Don’t be afraid to experiment and make mistakes: don’t get hung up on copying existing solutions. Try it!

Tags: Add tags

Tag the post with your own tags It is better to separate labels with a comma. For example: programming, algorithms

Comments 121

• • • • • • • • • • Do you, like Google, only hold your phone horizontally?
                    

                    In vertical only 50-70% of the screen is used

                    
                    

                    • There is quite a lot of text on this screen.

                      Is this a lot of text? What has Twitter done to people...