Google material design article in Russian. Google Material Design - a possible look for a new era. Optimize your images for SafeSearch

• Tutorial

Can buttons be hexagonal?

Google I/O 2018 left a huge amount of material to comprehend. What's new? How to live further? Is my application out of date? Can buttons be hexagonal? Are designers no longer needed again? It is more pleasant to comprehend slowly and in small portions. This portion is about design.

After four years, I got pretty fed up with Material Design. By according to Google, 1.5 million applications have been created based on this design system. Why? After all, it was originally created for Google’s internal needs.

It solved the problems of heterogeneity of design for Android and the lack of any system
- It was universal for different devices: tablets, smartphones, web.
- It is designed from the user's point of view and is intuitive.

The system was accused of being inflexible and, as a result, receiving a carbon copy design. If you design a service strictly following the guides, then visually the applications really turn out characterless. On the other hand, why blame the system? Guidelines have never been the bible; one could deviate from them. Maybe you only chose the color for your application in the Google Color palette? I hope not.

On the other hand, by adding custom elements, you risked meeting your own Android developers in a dark alley and listen to a long speech about why and how wrong you are. These were dangerous times.

All Material Design Award winners took the same risk. Have you noticed how custom the UI of these projects is? But Google encouraged them, and everyone was surprised.

Now it's obvious: Google wants us to customize our apps. Products should be beautiful and different. The updated MD is an attempt to show designers and businesses how to customize the UI without fear of being scolded by developers.

material.io – Design, Develop, Tools

You can start learning the design system from the website - not only some of the content has been updated there, but also the visual style. Now even the 404 screen will teach you, and by clicking on an element from the guides, you will see its specification with all the distances, fonts and links to download from the Google library.

The result is not impressive yet. The biggest benefit should have been the ready-made code for native elements, but the GitHub link is not that cool. It’s also too early to ask developers to add new elements to your application - the code for them has not yet been provided.

What if your elements are not native? You can see the markings, but you won’t be able to get the cut icons. So it’s too early to talk about replacing Zeplin.

This article is for those who are planning to start mobile development. Development professionals already know all this.

Apple

Let's start with perhaps the most elaborate guide from Apple. At first glance, everything looks somewhat stingy, for each tool or section there are 2-3 pictures and a few paragraphs: the guideline is very well developed in terms of presenting information per unit of text. You can fully understand all the recommendations in just a few hours.

Of the minuses, it is worth noting the lack of Russian language, but there is an amateur translation. Read: medium.com/ios-guidelines-in-russian.

Take a look at the step-by-step guide to developing iOS apps: https://developer.apple.com/library/ios/referencelibrary/GettingStarted/DevelopiOSAppsSwift/index.html. The guide will help a person, even a little familiar with application development, become familiar with the stages of development. To do this, you first need to download the main Xcode developer tool, and then create your first mini-masterpiece with step-by-step instructions.

By combining the guideline with the developer's guide, you can gain an initial understanding of developing an iOS application. For everything else, including chewing on what you read, there is a profession - “”.

Google

Material design from Android is a phrase often found on the Internet, but, unfortunately, many understand it as just a set of Google graphic add-ons, nothing more. In fact, this is a fairly strict recommendation that is designed to make your application clear and easy for the user to learn.

The guidance ranges from a general introduction to the use of specific tools. The basics and first steps of the developer are accompanied by pictures and videos: it’s immediately clear that Google worked quite hard on this manual.

From the point of view of the usefulness of the presented content, one can also speak only in a positive way: each property of the tool, each action is provided with text and graphic description, also links to the development manual. Therefore, even without specific instructions for action, both a beginner and a ready-made specialist can create a serious Material Design application.

Windows Phone

After carefully studying and working with similar guides from Google and Apple, I can’t help but feel that the guideline is somewhat “clumsy” Windows Phone. It seems that the creators really didn’t want to adhere to the corporate policy of preparing such documentation, but the bosses insisted.

The main advantage of the guideline is the Russian language. The information is presented in detail, but is not conveniently structured; there is too much “water” for such a guide. However, if we consider the guideline not as a textbook that you must first read and then start developing, but as pocket guide- then we can admit that such excess is useful.

All manufacturers of popular mobile platforms took a responsible and intelligent approach to the development of the main design guide. Working with each of them is convenient, pleasant, and most importantly useful. All you have to do is learn how to create applications, then the guidelines will definitely come in handy.

What do you think about the guidelines? Tell us.

Training by guidelines: profession.

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 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 that significantly limits the freedom of application developers for Lollipop is the poor compatibility of the material design concept with earlier versions of Android and the still low prevalence of Android 5.1 Lollipop. 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 clear 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 examples of printing products. To put it more exaggeratedly, Google has adapted the rules of “real” typography for screens mobile devices.
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 across 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 demonstrated by Google, you can find the best examples of classical typography in virtual execution.

Typography Examplesmaterial design

Fonts

Standard font, for a long time used in Android - 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 corresponds to the principles of print 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 attention is focused on the content located in the middle in the main column, and light and fast 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 represents a logical development of the idea of ​​maximum simplification that could be seen in more earlier versions 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 separately demonstrates the new color policy, noting such sources of inspiration as modern architecture, road signs and even sidewalk marking tapes. 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 letter designation as "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 coloring the action bar applications one of the colors we must paint 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 the movement of surfaces in the real world is accurately simulated.

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. 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. In all other respects, different versions of the same application should provide a completely identical user experience.

Google was one of the first to realize the need to unify and develop a uniform user experience. 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. In terms of aesthetics and UX, Google has achieved good results, however, between the desktop and desktop versions of their products mobile gadgets there was still a real chasm under 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 end up in various parts 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 file manager a floating button can mean adding files or creating a new folder, in messenger or mail 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 one important point– 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, the new app bar is a tool full control user 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 the entire required 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 burdens him with unnecessary stuff. 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 proverbial “air” in material design (as in modern design in general) is the subject of the most heated debate between designers, developers and ordinary users. The issue of empty spaces in modern interfaces is indeed quite controversial, since the attitude towards the amount of free space on the screen depends, after all, on individual preferences. Many users want to see all (or most) necessary information in front of you, trying not to resort to scrolling and flipping. Such users are frankly annoying 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 become an introduction to such a promising direction as material design for interested readers. By understanding the philosophy of the new Google project, you will be able not only to implement your ideas in this fresh and practical format, but also, perhaps, to refine and improve the material concept itself, developing your own “tricks” and improving the user’s relationship with the digital interface.

Material Design is a design concept created to unify services, interfaces and other products. The concept was developed by Google and presented to a wide audience on June 25, 2014 at the Google I/O convention. At the core of development color scheme, properties and elements of design objects. Material Design is regularly supplemented and updated by developers. In simple terms, the basic idea is a block design that opens and folds into cubes like cards, using a shadow effect. The cards themselves should switch smoothly among themselves.

The strategy of this design is based on creating a holistic user experience, the ability to penetrate services into the most different areas life activity of a PC user.

When creating objects, we proceed from centuries-old experience and rely on it. But software design is still in its infancy and systematically developing product. Looking at it completely, we asked ourselves: what does it consist of?

- John Wiley, Chief Design Officer, Google Search

Main principles

The main principles of Material Design include tactile surfaces, printing design, meaningful animation, and adaptive design.

Tactile surfaces. The interface consists of "digital paper". Layers of this “paper” are placed one above the other and cast shadows. Thanks to these shadows, PC users better understand the basics of working with the interface.

Print design."Digital paper" displays "digital ink". For digital ink images, the approach of traditional magazine or poster design is used. The main elements of print design are scale, grid, color and space. From these, focus, hierarchy and meaning are created. Thanks to color, fonts, sizes, background and other elements, the interface design itself is created. Using it focuses attention on the main functionality, key points of product or service management.

Meaningful animation. The clarity and understandability of the application animation directly determines the time spent by the user of a personal computer on understanding the results of the actions used in this program. Animation is a kind of hint for managing the Material Design interface.

Adaptive design. One of the features of Material Design is its versatility, that is, the ability to use the three components described above on different devices, such as a computer, phone, tablet, etc.

Tactile surfaces

Tactile surfaces are those same pieces of “digital paper” that, unlike regular paper, have superpowers - they can stretch, connect and change their shape.

Surface

A surface is the part of a design element that casts a shadow that makes one element different from another. Material design strives for maximum simplicity and “clean” design.

“Pure” design is usually called the ability to convey the properties of an object through a gradient or shadow, without using structure. All surfaces have their own shadow and a certain height.

Depth

In "flat design" they try not to use shadows that show volume. At the same time, shadows are set a certain hierarchy and the structure of interface elements. Deep shadow highlights the key subject and focuses attention on it in a subtle and elegant way.

Depth is a clue about how objects interact. At the moment of user scrolling, the green plate is attached to the top layer and forms a shadow. This clearly demonstrates not only the movement of the “ink”, but also the movement white background located below.

The bottom layer of depth is the "bottom".

• Remember logistics. Various dialog boxes, floating windows, toolbars have a certain height. To avoid collisions, they periodically need to move along the Z axis.
• Don't force the buttons. You should use a floating button only in case of urgent need, since its use immediately brings the Material Design effect to the design. You should not use it to confirm any actions or close windows.
• Not everything needs to be on the card. It is appropriate to use a card only when the object contains many forms and a large amount of content. For other options, it makes more sense to use traditional text or lists.
• Minimalism in dialog boxes. Dialog boxes should only be used to confirm user actions when questions arise.

Print design

All objects located on the surface of the material design are applied with “digital ink”. These objects are images, test, pictograms. The arrangement of these objects follows the principle of printing design.

Elegant typography

Typography is important in printing design. It sets the structure of the content and influences the formation of the style of a particular brand.

Typography forms a structure of elements that have their own size, font, hierarchy. With their help, we visually understand which elements are more significant and why some of them are key and others are secondary.

Contrasting typography

Another important principle of printing is the contrast of typography. It's easy to see that a large headline and dark font mean something important and basic, while smaller text and a lighter tone mean secondary information. Contrast allows you to highlight the main points, giving the overall aesthetics of the content.

Modular grid and guides

If basic grids are used in screen design, then in print design - modular grids. For Material Design, a grid with a step of 8dp is used.

A distinctive feature of content placement in Material Design is the placement of basic guidelines. Thanks to them, indents are created from the screen borders, affecting the structure of the page content and the control of the user's gaze. As a result, we see the main text in the center of the screen, and additional elements are placed outside it, near the borders.

Geometric iconography

The simplest icons have long been used on the basis of the Android system. In Material Design they look even simpler and more visually pleasing.

For example, indicators and buttons are highlighted in rich, bright colors. Thanks to these colors, they place emphasis on the main control elements (floating buttons, etc.). If it is necessary to introduce additional colors into the design, it is recommended to use basic, discreet shades.

Download icons on the topic:

Color

Color in design is responsible for expressiveness. Previously, in Android the color scheme was secondary, but now it is assigned one of key roles. In Material Design, the basic color palette consists of accent and primary shades.

The action bar is painted with the main color, and the status bar is highlighted with a more saturated tone. Accent color is used for stripes, indicators, floating buttons. It draws attention to key elements of the board.

Accents are placed pointwise and in small quantities. For the rest of the interface, colors are used in accordance with the rule: a large amount of text (a list of mail letters) is left standard size and add color to attract the attention of the PC user; a small amount of text (calculator, photo) is increased 2-3 times in size and colored dies are added.

In the Android system, you can color the interface dynamically, that is, highlight the main colors from the overall photo.

Beautiful photos

In Material Design you can and even need to use various photographs and illustrations. Often pictures have no frames. The status bar itself is made colorless so as not to distract attention from the images. “Digital ink” is always used not only for beauty, but also for the functionality of the design.

• Branding is recommended.
• We must not forget about indents and free space (for the base grid 8dp, for indents - 72 dp).
• Use bright images.

Meaningful Animation

Material Design, like the physical world, uses meaningful animation to show the user what has happened in the moment. That is, the user should see that not a single object comes from nowhere and disappears into nowhere.

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

Example 2. When you click on a date in the calendar, an event pops up, which is smoothly torn off as a layer from the general calendar, turns into a separate block and is revealed in a detailed separate block with a description of this event.

Animation helps to concentrate the user's attention and focus his gaze on the actions of the interface.

Reaction

One more key point animation in Material Design is considered to be a reaction to certain actions of the PC user. Changes in the Android L interface occur after touching your fingers. These changes are reflected in a wave-like action.

Microanimations

Micro-animations are extremely important. They are used as a response to all user manipulations. This makes the interface more detailed and responsive.

Clarity and Sharpness

The final principle of animation is clarity and sharpness of action. Material Design has an interesting animation curve. All objects quickly respond to user actions, return sharply, but take a little longer to freeze and transition to the final calm state. Ultimately, the user does not waste time waiting, which means he does not get annoyed or experience negative emotions when interacting with the interface.

• Think through the animation in advance.
• Use animation optimally (excessive use is discouraged, as all animation must be meaningful).

Adaptive design

Final key aspect Material design is a responsive design concept. This means options for applying the other three aspects to various screens devices (phone, PC, TV, etc.).

From general to specific

The most popular method is to compress the amount of information along with compressing the screen itself. You can fit a lot of content on your TV. The phone first displays a list, which can be clicked to reveal detailed information.

Indentations

On large screens, content is placed using blocks. They fill free space and can be stretched in width. Stretching occurs with readability of the content in mind. On the remaining part of the screen, indents are created on which floating buttons or tiles can be placed.

Guides

Indents are set using guides. The width of indents for smartphones, tablets, computers and TVs will be completely different. So, for a tablet it is 80 dp, and for a smartphone screen it is only 72 dp.

Dimensions

All interface elements must have multiple proportions. The screen sizes of tablets and smartphones differ from each other, but applications using elements with multiple parameters adapt to any device size.

Blocks

A modular grid of blocks helps set a visual rhythm for optimal decision making.

Toolbar

Action bar- one of the main components of the interface. It contains action buttons and headings. In Android L, the action bar has become an attractive and functional control unit. This was achieved due to the fact that forms, floating buttons, and pull-out navigation with convenient controls can be placed in the Toolbar.

• You should not use navigation drawer for simple tools. It is recommended to use navigation only for multiple tasks in the application.
• Be bold with toolbars.
• Place the floating button in the most optimal location. Don't snap strictly to the bottom corner.
• Practice interface elements both vertically and vertically horizontal screen devices.

Material as a metaphor

Google developers have managed to combine good, attractive design with the innovations of modern technology and science.

This is not the first time that materialism has been used in the digital sphere. Thus, Apple recently used the philosophy of skeuomorphism (imitation of the perception of visual objects from the material world around us) in interface design.

A good example of this is the Newsstand app. Here we visualized objects familiar to us: newspapers, magazines that stand on shelves. By flipping through these magazines, we imitate the real act of flipping through an ordinary book in everyday life. Thus, traditional real life is duplicated in “digital”.

Development of digital design

The vast majority of users interact with the digital environment every day. They no longer require exact similarities between virtual objects and the real world. The sooner all users get used to this moment, the sooner digital design can begin to actively move forward.

Based on this, Material Design is no longer so influenced by skeuomorphism. Now this is just a new step in the evolution of virtual objects.

Visibility as a fundamental basis

The surfaces and edges of the various controls in Material Design create cues in how to navigate and manipulate the interface, similar to actions in real life.

Tactile characteristics of objects help to distinguish key objects from additional ones and determine the relationship between them.

Material design fundamentals also include print design principles. Emphasis is placed not only on aesthetics, but also to create a special structure, hierarchy, and create a simple management system.

The visual component of Material Design is based on rich colors, crisp edges, large typography, and large spaces between different elements.

Meaningful dynamics

The main attention is focused on the behavior (actions) of the user. His interaction with design occurs on the basis of accumulated user experience, and nothing else.

Examples of websites in the Material Design style

As soon as the concept release appeared on the Internet, many representatives of Material Design appeared online.

The example sites are created in strict accordance with the basic principles of Material Design. They are simple and clear, contain floating buttons, shadows, bright colors and visual effects, smooth navigation. All of this adds up to a great user experience.

Videos

Material Design has attracted a huge audience. He demonstrates how to correctly create a UI so that it is absolutely understandable and clear to the user, just like a familiar object from the real world that you can touch with your hands.

Roman Nurik, one of the designers Google Teams, described how the I/O 2014 application changed during development to comply with the principles of Material Design. We translated his video especially for you.

Video from the Google Design channel.

At the Google I/O 2018 developer conference, in addition to updated Android and deeper integration artificial intelligence to your services, Google company introduced a new standard in system and mobile application design - Material Design 2.0. What's new?

White space and translucency

One of the most noticeable changes The new material design has a minimal amount of saturated colors and gray backgrounds, only solid white space and translucency. In my opinion, this looks very fresh, thereby bringing the operating system and software to a new level of visual perception. From now on stock Android P, without graphic add-ons from third party manufacturers, I rightfully consider it the most beautiful solution among interfaces. IMHO.

New developer tools:

Material Theme

The Material Theme plugin for Sketch is essentially a library of fonts, icons and corporate colors provided by the new Google guidelines in Android P. Also, when developing with its help, you can edit the shape of components and typography in your project in a couple of clicks.

More roundings and minimalism

As many have noted, appearance has become very similar to Apple iOS 10 and 11, but definitely this step was taken by the company specifically for manufacturers and owners of frameless smartphones, the number of which is inexorably growing every year, because this appearance of the system and software goes much better with their rounded displays.

New fonts

In the new design of logos and branded services Google developers and designers used the Product Sans font typeface. A special branch of Google Sans has been created for them. It is based on the aforementioned font, which replaced the standard Roboto.

So soon we can expect a large-scale redesign of all web and mobile Google services. At the moment, one of these first-borns in the application store is Google Play Games, Google Tasks and an app for Google I/O 2018 conference participants.

• Updated style of corporate illustrations

• Using the logo's four primary colors as a visual language

Example, new version of Gmail:

Material Design 2.0 Concepts

Of course, the design community responded to the upcoming design changes from Google, and exactly a month ago, a Reddit user under the nickname Morphicsn0w presented his vision of the Google Play site.

In addition to visual changes in the form of rounded cards presenting applications, the author abandoned, in his opinion, unnecessary sections such as recently downloaded applications, thereby making the store interface simpler and more informative.

On app description screens, Morphicsn0w has focused on app descriptions, shifting the focus away from information about download numbers and user ratings.

The designer also redesigned the search system in Google Play, adding sorting of the results found by price, update date, rating and number of downloads. The presence of such sorting would greatly simplify the search for the necessary software in the store, I am waiting and hoping for the implementation of such from Google.

The beloved YouTube, the author of the portal 9to5Google, and part-time good designer Alex Brooks, also fantasized about what could be changed in the existing video hosting client, was not left out. The result personally inspired me very, very much.

The first thing Alex redesigned was the home screen navigation bar, painting it in bright, cheerful colors. Following the first point there is a redesigned search line, now it is not displayed separate button, but occupies the entire useful area of ​​the top part of the application, thereby simplifying access to it. And the bar with the number of subscribers, a button to subscribe to the channel and return to the previous level in the author’s view is located at the bottom, which is also a useful solution from the point of view of ease of use.

The designer combined the library section (history of videos watched, management of downloaded videos, liked videos, etc.) with the settings section user profile, now both parameters can be accessed by clicking on the userpic. In my opinion, although this is controversial, it is still to some extent the correct decision, since it simplifies user interaction with the service and makes the application more understandable for new users who are just getting acquainted with the world mobile technologies.

For more information about Alex's YouTube concept, read the original article.

Google Play Music concept in Material Design 2.0

Inspired by the presentation and dozens of works by other designers, I decided to try and make something of my own, using one of the current Google services as a basis; my choice fell on Play Music. I had never worked with this service before, specifically as a streaming platform, but out of duty I had to. The service generated extremely positive impressions, if only because the application itself works adequately and does not crash, unlike Apple Music, which I have been using since its release on Android.

In general, the services are similar, and both perform their primary task - playing music. And both have complaints regarding the interface, but since today we are talking about Google, we will consider their service accordingly.

Main screen

The first complaint about the main screen is that I don’t like what it is huge space, exclusively occupied search bar and covers of playlists with selections. Actually, first of all, I decided to fix this.

In my concept main screen is the same, but slightly rethought feed with selections of albums, songs, playlists based on the user’s tastes, only now to view the contents and go to play the desired track, you don’t need to make an extra click and leave the main screen, the same applies to the transition between sections (home, recent, hit parade, etc.), which can now be done using swipes across the screen.

Player

The second point that is unsuccessful in design, in my opinion, is the player. IN official application Google Play Music song covers stretch across the entire diagonal of the smartphone screen, which is why on devices with high-resolution displays they look very sloppy and smeared. I presented the solution to the problem as follows:

Now the covers are neatly placed in the middle, and a preview of the previous and next tracks is shown on the left and right edges, as if hinting at the possibility of switching them with a swipe.

Media library

The third thing I don’t like about Play Music is the layout and decoration of the media library. In my opinion, its structure is too complicated. For example, to access this section from the main screen, you need to perform as many as four actions: swipe to call sidebar; click to select the “Music Library” section; swipe through the list to select the desired tab (playlists, radio stations, artists, albums).

Therefore, I moved the button with access to added tracks to the lower dock, and when it opens, by default the albums tab will be displayed with the ability to sort them by release date, addition and alphabet.

Menu/Side Bar

In accordance with the new principles of Google application design, I moved the usual menu with access to settings to the upper right corner.

Presentation of the Google Play Music concept on Behance

Conclusion

To summarize, I want to say that I am very pleased with the path that Google is trying to follow. In addition to a major leap in the development and convenience of its services, the company is moving forward with its design code. Having written an article about experience six months ago using iOS 6 in 2018, I caught myself thinking that over the years, the mobile operating systems Android and iOS have not evolved much in terms of visual and conceptual interface design, but now I am completely unconvinced of my position, at least in relation to Android .

Thank you for your attention!