Today we will compare two similar design styles, the first of which is a hot new product, and the second is progressively gaining popularity. The first is spontaneously adapted, while the second has clear rules. You may be familiar with the struggle between the two that is going on in today's times.

But really, what's the difference between them? What's the first better than second? Which design is best to use for the tasks at hand? In fact, some people often wonder how many differences there are between these two design styles. To begin with, it is necessary to recall that the basis of each is skeuomorphism.

Skeuomorphism

Skeuomorphism is a design that tries to display on the screen the things we are familiar with as they look in reality. At one time, this style was dominant in interface design.

The problem is that this way of depicting elements is not entirely convenient, although it used to be considered an excellent way. Well, this is all because they used to look at design differently.

Ultimately, the design world came to the conclusion that it was necessary to remove everything decorative elements and leave in them only what would be convenient to interact with. It was also necessary to reduce their volume for more fast loading and focus the user’s gaze on the most important and basic. Thus, everything unnecessary from skeuomorphism was removed, and the design appeared a new style which became known as flat design.

Flat design

Flat design in many ways is extremely simplistic, denying the presence of shadows, gradients and textures. This technique allows you to focus your eyes on icons, colors, and fonts.

This is primarily a digital style - it's very user-friendly and does a great job of allowing users to easily interact with your product because it removes all the unnecessary stuff.

Flat design tries to focus you on easy interaction with the site. The simplicity of its iconography allows for simplified functionality, since users can interact with the site even through images alone. At the same time, their use speeds up the loading of site elements. They also scale well, allowing them to look good on any device, regardless of its resolution. And, accordingly, this simplifies a lot for both the designer and the user.

Pros:

• Same display on all screens
• The absence of skeuomorphism allows you to speed up the process of understanding what you wanted to convey to users
• Removing all from unnecessary elements allows you to speed up the site
• The simplicity of flat design allows you to completely customize your site and make it responsive

Minuses:

• Flat design can be too limited by simplistic color, shadows, iconography
• It is very easy to create a website that is too inexpressive and boring.
• Some apps and websites require more complex visual associations to guide the user through the use of your product - this is the main disadvantage of flat design. Another common complaint is the lack of shadows and prominence, which sometimes makes it difficult to understand that an element is clickable.
• Its widespread use sometimes does not allow you to make your interface unique
• Lack of specific fixed rules (as opposed to material design)

Material design

Critics of flat design argue that it has gone too far. Separating the layer with shadows and animated elements is what allows us to more intuitively understand the elements of the page.

For those who didn't know, material design started at Google and they made a little page outlining rules design material. This style has countless and unique features, but perhaps one of the most best features- This is the use of the Z axis. Essentially, this adds a bit of skeuomorphism, which allows the two planes to seem to “float” on top of each other.

It is also the standard for Android applications. Should it be used on iOS? This question is still hot topic for discussion, although some say that this style It’s better to leave it within the framework in which it is currently contained. Well, everyone, as usual, has their own opinion on this issue.

Pros:

• Three-dimensional space makes interaction easier, for example, the use of shadows makes it clear what is above what and, accordingly, indicates where the user's gaze needs to be focused.
• A clear set of rules that allows you to avoid guessing what should look like
• If you are planning to make a website or application for Android, then material design allows you to create an excellent brand
• If you are interested in animation, then material design also gives a clear set of rules for its use

Minuses:

• Whether you agree with it or not, material design is inextricably linked with Google, making it very difficult to create a unique identity for your site or application if you follow Google's rules.
• Not all systems are able to reproduce the animation you create, and this may affect the overall functionality of your product
• Animations drain your battery faster
• Clear rules may slow the development of this design style

Conclusion

Material design is not fundamentally different from flat design, both are clean and minimalist. You are more likely to give your vote to the material interface, since flat design is more simplified. And while material design animation is widely praised, it mainly serves to simplify your interaction with a product. But nothing prevents you from combining these two styles.

I think flat design sites are more practical and load faster than sites filled with animations and heavy graphics. If you are creating a website aimed at simplicity, then flat design is definitely for you, but if you are more interested in the topic of animation, then I advise you to use material design.

Write your choice in the comments, let's see who has more!

Google Vice President of Design Matias Duarte talks about the basic principles of the new design, which is called Material, in an interview with The Verge. This is a completely different approach, providing a unified set of rules, ranging from the type of software to the functions. For now, the design seems a little strange and takes some getting used to.

The design team at Google felt the need to come up with a unified look and functionality of the software that could be used across all products: Android, Chrome OS, web services. Instead of starting with developing a color palette, they started with the question: “What is software?”

Matter and form

The answer came from the design department when Jon Wiley, chief designer Google search engine, and his colleague Nicholas Jitcoff looked at the design Google Now. They looked at the card interface and thought: “And if you move the card, what is behind it?”

“This innocent question lit a powerful spark!” - Duarte said. The entire team began to think about a new way to interact with software elements. Instead of just using pixels on the screen and abstract layers, the team began to think about the design as a real, tangible object. Therefore, cards must have physical properties

. It's time to come up with rules that would define how everything should act and move on the screen. The development team wanted to achieve the effect that the user was interacting with physical objects. Thus, work began on a metaphorical material resembling paper - flat and white with realistic shadows. This was the seed from which the rest of the design grew, the implementation of which can be seen in Android L. Material Design

- bold, bright colors, minimalism and a sense of consistency.

Wiley and Zhitkoff say it's an aesthetic evolution of Google's entire design philosophy. In 2012 and 2013, within the walls of the Internet giant’s headquarters, work began on Project Kennedy, which would unify the design of everything.

Creativity and limitations Material Design brings it all together best ideas

. Matias Duarte sees our new style as a series of restrictions that, in his opinion, make the work of application designers easier and more consistent. For example, the gesture of turning a card over in order to see what is written on the back side. In the normal world this is not possible due to lack of space. It's as if the software were real physical objects inside the devices. And there's obviously no room on your phone to flip the card over, so Google limits this kind of manipulation.

We rely heavily on physics, and software often behaves in ways that disrupt our understanding of the world, like some sci-fi movie that defies basic logic. Duarte directly comments on Apple's new iOS design philosophy. We are not rushing through space and time at supersonic speeds. Design

Google's designers stubbornly refuse to name the fictitious material used. A solution that both gives them greater flexibility and adds a layer of metaphysical mysticism to the substance. Quantum paper - this was said in some leaks before Google I/O. This is important because the material obeys physics and it will not fall into the trap of skeuomorphism. It's not an imitation of physical objects exactly, as Duarte puts it, it's something "magical".

The material in our design can do things that physical paper cannot, such as growing and shrinking with animations. These animations are important to Google because they help users understand that they are inside the software. Wiley compares the software to movies, where there are sharp jumps between scenes. The user loses the sense of time and space. In software, it is important that the user understands the principles of moving from one to another.

Materialize

The other more important thing that Material Design brings is unification. Google has been working on algorithms for all products for years, and this has become an integral part of the new design philosophy. Instead of the user having to configure everything themselves, Material Design makes them believe that what they need on the screen will be what they need at the right time.

This is why Android Wear doesn't give users anything other than interaction with notifications. Alex Faaborg, platform designer, says:

You don't spend a lot of time interacting with the watch. You just want to be able to look at your wrist and instantly get necessary information or perform an action using a voice command. We've done a tremendous amount of work across the entire Google platform.

Google is asking too much credit for itself and its "magic" paper material, but Duarte believes there are good reasons for this.

We did this because it is the simplest solution. We want to design as simple a design for the user as possible.

Parc 3.0

There's a lot more to Material Design than just the design of Android L, Android Wear, and everything else Google is involved with. We are talking about sensations in the relationship between man and technology.

Duarte says Xerox PARC has done a brilliant job of creating a familiar window and cursor experience. This was innovative because the company was able to create a virtual version of a real desktop. People understood how a computer worked and could work with it comfortably. This also applies to what Apple has done with touchscreens.

Now Google believes it has managed to do the same. Wiley says that people today have a lot of technology: touch screens, gestures, voice commands, intelligent algorithms. Material Design combines all this diversity into one intuitive thing. This will help you easily use the same on Chrome OS, Android or the web.

9 principles

1. Material is a metaphor

Material Design is a system that rationalizes space and movement. The design is based on a tactile reality, inspired by the possibilities of paper and ink, but open to imagination and magic.

2. Surfaces are intuitive

Planes and edges convey visual signals based on our perception of reality. Using familiar tactile attributes taps into the primal parts of our brain and helps us quickly understand what is being imagined.

3. Dimension creates interaction

The fundamentals of light, surface and movement are key to how objects interact. Realistic lighting divides space and focuses attention on moving parts.

4. Unified responsive design

One design for everything. Each device reflects a different take on the same basic elements. Each view is tailored to size and interaction for each device. Colors, iconography, hierarchy and spatial relationships remain unchanged.

5. Fonts, graphics, colors

Distinctive design creates hierarchy, understanding and helps focus. Specially selected colors, use of space from edge to edge, large fonts and the deliberate/intentional use of white allows you to completely immerse the user in the interaction process, making it clearer and more understandable.

6. Primary actions

User action is the essence of design. Primary actions transform the entire design. They focus on the core functionality and immediately catch the user's eye.

7. Users initiate changes

Changes in the interface occur due to user actions. Movement enhances the experience of primary action.

8. Animated choreography

All actions take place in a single environment. The objects that the user sees do not disrupt the rest of the user experience, even after transformations and reorganizations.

9. Movement provides meaning

Movement has meaning and is necessary to attract attention. Transitions are effective.

Design is the art of creating. Our goal is to satisfy a diverse range of human needs. As these needs evolve, so too must our designs, ideas, and philosophies.

We set ourselves the goal of creating a visual language for our users that combines the familiar principles of classic design with innovation.

You have probably come across the phrase “ material design" The concept of material design is not new and is already quite firmly established in the web design market, primarily due to its appeal to user experience. Material design was first introduced in the summer of 2015 by Google, and since then it has been an inextricably linked concept with this company. What are its distinctive features, basic principles, and is it as good as they say about it? More on this later in the article.

Material design is not just an idea; it once forced designers to completely reconsider their views on the process of creating websites and applications. Modern websites make full use of Google's design frameworks and material design documentation. But before moving on to dessert, let’s define the concept of design material, its purposes and main characteristics.

What is material design?

Material design is graphic language and a design style created by Google's design team to help designers create sites and apps that are accessible, practical, and useful. The concept is based on living documentation that is located in public access and can be used by any user interested in the concept of material design. To this day, the documentation is continually updated to reflect changes in design and development. Thanks to this, material design remains relevant and is constantly evolving as a direction.

Material design has a number of goals and principles stated by its creators. The list may look somewhat idealistic, but we will still present its main ideas below.

Material Design Goals

1. Create a visual language that will combine classical principles good design with the innovations and capabilities of science and modern technology.
2. Develop a single basic system, which allows you to create universal designs for different platforms and devices. Mobile principles are fundamental, but touch, voice commands, mouse input, and keyboard are the primary input and interaction methods that will be considered when developing designs.

Material Design Principles:

1. Material design is a metaphor: visual cues and all graphic elements designs must be based on and interconnected with the surrounding reality, the material world.
2. Graphic, clear, purposeful: Basic design theory (use of types, grids, organization of space, scale, proportion, color and imagery) should guide visual effects and compose visual basis design material.
3. Every movement or action matters: the movement of objects or other actions performed should not interfere with the user, on the contrary, they should ensure the convenience and consistency of the actions performed.

In addition to the above goals and principles, there are many other guiding factors. Which define material design. Material design documentation is broken down into many specific concepts and techniques. So, for example, Google has developed a set of specific rules for creating animations, styles, layouts, components, etc.

All of these recommendations are based on the basic properties of material design. The most important thing is that material design is based on reality, in which objects are located in an almost three-dimensional space. In terms of aesthetics, material design falls somewhere between flat design and skeuomorphism.

Material Design Color and Typography

Colors in material design have a lot in common with . The material palettes are quite bold and bright. , same as in flat design, simple sans serif.

« The material design is full, combined with muted tones, an approach that takes its roots from modern architecture, road signs, marking tape and sports fields,” as stated in Google’s material design documentation. “Accentuate bold shadows and highlights. Use unexpected and bright colors».

And the best thing about the color concept of material design is the use of clear contrast. For comfort Google users provides a full color palette with swatches available for download. Color concepts are so simple that you wonder if Google thinks designers have completely forgotten color theory.

The guidelines for choosing and using fonts are also quite basic and simple. The default font for all applications – Roboto – is available for download here, where you can also find a table of font combinations and selection.

Templates, structure and design

In its structure and arrangement of elements, material design borrows heavily from the concept of print design. Material design encourages designers to create and use a basic grid and mathematical structure to place elements based on patterns.

Next, the template is divided into areas, for each of which the documentation provides a number of recommendations that are aimed at improving user experience on the website or in the application (there are also recommendations regarding how important a particular element is).

Basic material design elements

Each element that a site created in the material style can consist of is described in detail in the documentation. Starting from how to create it and what it should look like, to its place, method and moment of appearance on the user’s screen. In general, it’s difficult to come up with something that the creators missed or didn’t. The list includes 19 main structural components, some of them are listed below.

• Bottom screen (bottom layers of design)
• Buttons
• Cards
• Dialogues
• Separators
• Grids
• Lists
• Progress and activity bars
• Sliders
• Subheadings
• Switches
• Tabs
• Text fields
• Popup windows

Designers who like the look of the proposed components can even download the source for Illustrator. Icons and other details are paired with styles and adapt to the selected template.

Convenience, accessibility and user experience

“A product is accessible when all people – regardless of ability – can use it to achieve their goals. A truly successful product is accessible to the widest possible audience.”

In Material Design Documentation great attention focuses specifically on accessibility, convenience and user experience, which is very important. While many of the aesthetic properties of material design may seem quite primitive to experienced designers, some of the concepts of user experience and interaction are implemented at the highest level.

The section on interaction models is especially useful. It reveals ideas aimed at making some design elements universal in relation to all possible web projects. For example, the format for specifying date and time, or search operation. These may vary from site to site, but the differences are minor and generally these elements are fairly universal. If a visitor sees a magnifying glass, he understands that there is a search in front of him that can be used, even if there is no text index next to it. This is why material design contains some of the most simple tools, which users expect to see on any website, and with which they are accustomed to working.

Accessibility and understandability of design is another aspect that is widely covered in material design documentation. Material design must take into account users who can interact with it not only through colors and shapes, but also through sounds and voice search. Also, it is important to consider the possibility of viewing designs on devices with high contrast, large screen, without visible screen, only with the help voice control, or considering a combination of all these elements.

10 Material Design Resources

Material design is popular topic for discussion, and a source of inspiration for many blogs, forums, and other sites where web designers gather. There are many useful things that you can download directly from Google resources, but besides this, there are many resources that post their work in the material design style. Here are some sites that can help you learn material design concepts and download free materials.

1. Sets of elements in material design style for smartphones and other mobile devices (see below).

Part 1: Material Design Gallery for Websites and Apps – Free Materials

In order to simplify the task for those readers who decided to take on a project in the material design style, we decided to create a gallery with ready-made developments and solutions. Just take one or more free sets, which are kindly provided by designers from around the world. Below you will find an extensive collection of such items.

Material Design by UXPin

Material design by Creative Tim

Free selection of materials from Designtory

UIDE – free sketch material from Mateusz Dembek

Google material design sketch resource

L Bootstrap material design in Android style by Vitaly Chernega

Sketch resource for material design from Boilerplate

Material Design for EL Passion

Froala blocks in material style

Free Landing 1.0 in material style

Mobile material design

avsc material design

UI material design by Jakub Kośla

Material design for Android by Ivan Bjelajac

Material design by Ultralinx

Mobile Material Design by Emma Drews

Free material selection from Adrian Goia

Material design from UI8

Material Design for Photoshop by Psddd

Android material design PSD from Nine Hertz

Other material design collections that may be useful

Station interactive material design by Nelson Sakwa

Widgets in the style of material from Elad Izak

Material sketch from Benjamin Schmidt

Color picker material Color Picker

Let's sum it up

The concept of material design is a well-thought-out solution for creating any modern design site or application. In addition, there are quite detailed guide on Material Design, which will be very useful for beginning designers, but may seem a little primitive for experienced designers.

It is possible that tomorrow a completely new design will appear, which will erase material design from the memory of developers, just as it erased Flash technology in its time. No one is immune from this. But as designers, you have the right to decide for yourself how interesting and necessary material design is to you in your next projects, as well as use its developments and elements for your own experiments.

Have fun creating designs, and if you have anything to add to the article, feel free to write your suggestions in the comments.

Today, an increasing number of corporate customers indicate “Material Design” in the “Design Request” column in the brief for website creation. At the same time, it is not so much the visual component that attracts the attention of the corporate segment as the fact that the style is trendy and well-known.

Before moving on to the examples, let's understand one simple truth:

Material Design is the corporate style of Google Corporation. To imitate him is as stupid as, for example, an instant noodle manufacturer trying to imitate the Ferrari brand.

The Material Design guideline, in addition to Google itself, also applies to products of partner companies, mainly applications for the Android platform. For everyone else who is not related to Google Corporation and Android platform, interest in Material Design should be purely educational.

A corporate website requires a more meaningful approach than just saying “I want it like this.” If a website is the face of a brand on the Internet, then it should have individual features and visually correspond to the general image of the company.

Material Design has not yet reached the peak of its development and today there are not many sites that are not only made in full accordance with the requirements of the Google brand book, but are also harmoniously integrated into their own visual branding. Nevertheless, we managed to find several successful examples of sites in the Material Design style.

Examples of websites in the Material Design style

The Kiosk Browser website is not only made in the Material Design style, but is also well optimized for mobile devices.

A very successful solution that harmoniously combines details and designs from the Material Design guideline (shadows, buttons, flat design, colors and JS effects) and the corporate style of the ISoE group of international schools.

The lifeaweso platform is designed in accordance with the fundamental Material principles Design: simplicity, clarity, understandability. The site is still under development, but the integration of Material Design style visuals looks pretty good.

The well-known developer of digital solutions and online services Futurice simply could not make a bad website. The pastel color scheme, smooth navigation, and functional elements combine to create a great user experience.

This site uses the principle of simplicity inherent in Material Design and complements it with lively, high-quality photos. Particularly impressive background images when scrolling.

Here we see the key element of Material Design - cards. The site is very light and simple: there is no clutter of unnecessary elements, and Key information displayed in separate blocks.

In addition to other attributes from the Material Design concept, there is a key control element here - a button that floats above the site. After cards, this is perhaps one of the most memorable elements of Google's design direction.

And, of course, let's not forget about the original source. Service interface Google Alerts recently updated to Material Design, which significantly improved its visual characteristics and usability.

desyatykh March 11, 2015 at 5:08 pm

Material Design: To the Moon and Back

• Redmadrobot company blog,
• Mobile application development,
• Android development

• 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, separate work was underway on the design of Android - 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 it 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 Applications Material Design represents the 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 consider layers to be pieces of “digital paper”, then when it comes to “digital ink” (everything that is depicted on “digital paper”), an approach from the traditional graphic design: for example, magazine and poster.
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 to 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 itself. 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 have tried to make dialog boxes better, but Bottom Sheets are still better suited 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 printing design typography plays a fundamental role important role. Pick up any magazine and you'll notice that typography does two things: 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.

Before us large headline and a set of smaller elements that differ in 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

If we talk about iconography, then simple icons have been used in Android for some time, but in Material Design they have become even simpler and friendlier. On the unofficial resource materialdesignicons.com, designers can find 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 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. The accent color is designed to attract 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, detailed viewing individual element, photo or calculator, then this is an excellent opportunity to use large colored dies - 2x or 3x app bar height.

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 practically 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 pressing, comes off the surface and turns into separate layer“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. Using 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 last, key principle 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 adaptive 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, understand general meaning and then continue 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 set such a modular grid of 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 of the 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 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, it may be convenient to reach it in a corner, 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 are talking 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:

• material design
• android
• interface design

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...