Menu
homeiOS

Google Material Design - a possible look for a new era. Recommendations for working with Google Images

  • 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 looked inconsistent across different platforms.

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 the new interface when switching, get used to the appearance, layout of controls, and so on.
Therefore, at some point, a group of designers from different parts of Google got together and began to wrestle with this problem in order to solve it once and for all.

In 2014, at the I/O conference, a new design system was presented, an approach called Material Design. The new design system allows you to create a consistent user experience on all screens: desktop, smartphone, tablets, watches, TVs, cars. For Android apps, Material Design is an evolution of Holo's visual language and design guidelines. In many ways it's a more flexible system, designed with the expectation that other designers will use it - Google was just the first user.

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

4 Principles of Material Design

Material Design is based on four main principles:
  • 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.
  • Print design. If we think of layers as pieces of “digital paper,” then when it comes to “digital ink” (everything that is depicted on “digital paper”), the approach taken from traditional graphic design is used: for example, magazine and poster design.
  • 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.
  • Adaptive design. It's about how we apply the previous three concepts on different devices with different resolutions and screen sizes.

    • So, let's move in order.

    Tactile surfaces

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

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

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

    Depth

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

    Depth also provides clues about interaction. Here, as the user scrolls, the green bar sticks to the top layer and a shadow is added. This shows that it is not just the “ink” that is moving, but the white background is below and moving 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!
  • 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.
  • 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.
  • 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.
  • Not everything needs to be on the card. If an object has many forms and contains a lot of different content, then a card is suitable. And if not, then maybe it would be better to do it with plain text or a text list?
  • 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 only needed to ask the user a question.
  • Use list expansion. This is an underrated pattern, but it is quite a Material and solves the problem well.
    • Print design

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

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


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

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

    Font size

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

    Contrasting typography

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

    Modular grid and guides

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

    But the main distinguishing feature of placing content in accordance with the principles of Material Design is the 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 provide supporting elements in the margins.

    Geometric iconography

    Speaking of iconography, simple icons have been used in Android for some time, but in Material Design they have become even simpler and friendlier. On the unofficial resource materialdesignicons.com, designers can find icons for their purposes and contribute where possible. Color

    As in print design, color is an important means of expression in interface design. In the old Android, color was something extra, but now it plays a more prominent role. In Material Design, the default color palette for an app consists of a primary color and an accent color.

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

    How much color to use? Accents are placed pointwise, in small quantities. There is a simple basic rule for coloring the rest of the interface. When there is a lot of text, such as a mail list, it is worth leaving the app bar at a standard size and coloring it to allow the user to focus on the content. If there is not much content, for example, a detailed view of a single element, a photo or a calculator, then this is an excellent opportunity to use large colored tiles - 2 or 3 times the height of the app bar.

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

    We took a photo, and the algorithm identified 6 colors with different characteristics from it:
    - there are 3 rich and 3 muted colors;
    - they are divided into light, standard and dark tones;
    - each background color has its own text color, which can also be used.

    Beautiful photos

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

    NB!
  • 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.
  • Don’t forget the indentations and “give some air.” A base grid of 8dp and a left margin of 72dp is pretty much the rule. Let the content be good and free.
  • 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, after being clicked, came to the foreground, opened up, and more information became visible.

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

    The interesting point is that active movement attracts the eye - this is natural for our vision. 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 at a very large distance.

    Reaction

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

    Microanimations

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

    Clarity and Sharpness

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

    NB!
  • Don't leave animation for last. Animation should not be left until the very end - it can be a key factor in the user experience and should be thought through in advance.
  • Know your limits. Too much animation is also bad. Control yourself and remember that it must be meaningful.
    • Adaptive design

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

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

    Placing content using blocks makes it much easier to work with free space on large screens. We know the contents of each block, we understand how wide it can be so as not to lose 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 tiles.Whiteframes

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

    The guides give us indents for the “ink” on separate sheets of “paper”. 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 - a functional and beautiful application control block. This became possible due to the fact that now you can place many functional elements in the toolbar that you could not even dream 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!
  • 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.
  • 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.
  • 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.
  • 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: Add tags

    Tag the publication with your own tags. It is better to separate tags 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...

    Author's note: In 2014, Google published the specification for Material Design, a visual language that aims to bring together established design principles, seamless user experiences across platforms and devices, and technological and scientific innovation.

    If you are using Bower as a manager, you can type the following command to install MDL in the bower_components folder: bower install material-design-lite –save

    If you use npm, to install MDL in the node_modules folder you need to enter the following command: npm install material-design-lite –save

    Google recommends using CSS and JS files located on a CDN. This is the method we used in the demo. First of all, in the head of the HTML document you need to include the CSS file MDL, Material Design icons and project styles in which you can make your own changes:

    < link rel = "stylesheet"

    href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css" >

    < link rel = "stylesheet"

    href = "https://fonts.googleapis.com/icon?family=Material+Icons" >

    < link rel = "stylesheet" href = "css/styles.css" >

    Typography in Material Design Lite

    For English and similar languages ​​(Latin, Greek and Cyrillic characters) Roboto and Noto fonts were chosen in the material design.

    Noto also supports "dense" scripts such as Chinese, Japanese and Korean, as well as "high" scripts such as languages ​​from Southeast Asia and the Middle East, i.e. Arabic, Hindi, etc. To include the Roboto font in your project, add a link tag to the top of the head of the HTML document:

    < link rel = "stylesheet"

    href = "http://fonts.googleapis.com/css?family=Roboto:400,100,500,300italic,500italic,700italic,900,300" >

    For Latin, Greek, and Cyrillic characters, the Material Design specification recommends typographic scales of 12, 14, 16, 20, and 34. You can apply MDL typographic principles by adding a set of special classes to your markup. For example, .mdl-typography—display-2 for h1 and .mdl-typography—display-1 for

    Will make the font size 45px and 34px respectively:

    Title

    Sub-title

    < h1 class = "mdl-typography--display-2" >Title< / h1 >

    < p class = "mdl-typography--display-1" >

    Sub-title

    < / p >

    MDL has quite a few classes with typographic scales, accessibility, and readability. Classes make it easier to display text content, which is then enjoyable to read regardless of the device from which the site is viewed.

    How to choose a color for your project in MDL

    Take a look at the MDL file of the material.indigo-pink.min.css library. The file name refers us to the Material Design color palette in the styles. The default color palette uses indigo as the main color and pink as the accent color. But you are by no means limited to these colors. Below are material design guidelines on how to develop your own color palette and how to use it in MDL.

    Principles for choosing colors in Material Design

    Material design likes to combine bright and muted colors, shadows and highlights: “Color should be unexpected and bright
    Google Material Design Specification"

    However, this does not mean that you can use arbitrary colors on a web page. It's quite the opposite.
    Material Design offers a wide range of beautiful, harmonious color palettes. To make it easier to select colors, each color in the palette has several levels and values ​​in hexadecimal. There are 500 primary colors in material design guidelines. Other colors are best used for accent.

    When developing your own palette, Material Design recommends using three shades from the primary palette and one accent color from the secondary palette. Example:

    Once you understand the principles of using colors in material design, it's time to pick a cool color palette for your MDL project. Below I will tell you how to do this.

    How to Customize the Default Color Palette in Material Design Lite

    You can switch from your native indigo pink color palette to your own in one of the following ways. If you used Google CDN like in the demo above, you need to:

    Set the URL to the MDL style file in the href attribute of the link in the header of your HTML document.

    Replace indigo and pink with your primary and accent colors, respectively.

    For example, you chose turquoise as the main color and yellow as the accent color in the palette. Below is what the URL to MDL styles on the CDN will look like:

    < link rel = "stylesheet"

    href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.teal-amber.min.css" >

    That's all! If you store compiled and minified MDL files on your server, then the MDL website will help you. There you'll find the Customize and Preview tool, which lets you choose your main and accent colors using an interactive palette wheel. You can then download the CSS file with your chosen theme and paste it directly into your project:

    The HTML demo for this article uses the default palette of indigo-pink, but you are free to experiment with different colors in one of two ways.

    MDL component layer

    MDL offers many commonly used web components, including layers, buttons, cards, radio buttons, etc. Start building the structure of your HTML template using Material Design Lite layers. The MDL layer extends to the entire container with classes.mdl-layout .mdl-js-layout. Start with the code below, paste it right after the opening body tag:

    CSS flexbox is used to create layers in MDL. A tag with class.mdl-layout is a flex container with the flex-direction property: column. The layer consists of the following subcomponents:

    Navigation layer

    How to use tabs for navigation

    You can create a menu in one of the following ways:

    Transparent header

    Fixed sidebar without header

    Fixed header

    Fixed header and sidebar

    Scrolling header

    Cascading header

    Feel free to view all of the above options in the MDL navigation section, and also experiment with each of them in your project.

    As for the demo at the beginning of the article, there I selected the Tabs component as the menu. What's great about tabs is that although the content is divided into separate screens in sections, all sections are physically located on the same page. This means that when users click on a tab link, they do not wait for the server to load a new page in the browser. Content is available instantly, thereby creating a pleasant experience for site visitors.

    To quickly create a header with tabs you will need: Add two more classes to the container we created earlier - .mdl-layout—fixed-header and .mdl-layout—fixed-tabs.

    < div class = "mdl-layout

    Mdl-js-layout mdl-layout--fixed-header

    Mdl-layout--fixed-tabs" >

    < / div >

    Notice how MDL uses CSS classes from the BEM namespace.

    Your Title Tab 1 Tab 2

    < header class = "mdl-layout__header" >

    < div class = "mdl-layout__header-row" >

    < ! -- Title -- >

    < span class = "mdl-layout-title" >Your Title< / span >

    < / div >

    < ! -- Tabs -- >

    < div class = "mdl-layout__tab-bar mdl-js-ripple-effect" >

    < a href = "#fixed-tab-1" class = "mdl-layout__tab is-active" >Tab 1< / a >

    < a href = "#fixed-tab-2" class = "mdl-layout__tab" >Tab 2< / a >

    < / div >

    < / header >

    All that remains is to add the corresponding panels with content:

    content panel 1 content panel 2

    < main class = "mdl-layout__content" >

    < ! -- Panel 1 -- >

    < section class = "mdl-layout__tab-panel is-active" id = "fixed-tab-1" >

    < div class = "page-content" >

    < ! -- контентпанели1 -- >

    content panel 1

    < / div >

    < / section >

    < ! -- Panel 2 -- >

    < section class = "mdl-layout__tab-panel" id = "fixed-tab-2" >

    < div class = "page-content" >

    < ! -- контентпанели2 -- >

    content panel 2

    < / div >

    < / section >

    < / main >

    The panel with id="fixed-tab-1" has the class set to .is-active and will be displayed by default.

    How to Place Additional Content in the Sidebar

    The demo also uses the drawer section. Drawer is a sidebar that can be hidden or shown by clicking a button. You can also make the panel open and fixed so that its content is always visible.

    Your Title

    < div class = "mdl-layout__drawer" >

    < span class = "mdl-layout-title" >Your Title< / span >

    < / div >

    Watch these pieces of code in action or take a look at the finished demo with tabs and sidebar.

    Grid in Material Design Lite

    MDL uses a 12-column grid for desktop computers, an 8-column grid for tablets (up to 800px), and a 4-column grid for mobile device screens (up to 500px). You can make the container a grid by adding the .mdl-grid class:

    By default, the container for grid columns takes up the entire width of the screen. If you don't like this, limit the width using styles. For example, in the demo for this article, both options are implemented, both a full-screen grid and a centered block:

    This result can be achieved if you wrap each section in different .mdl-grid elements, and add a custom class with CSS max-width: 960px to a separate section.

    < div class = "mdl-grid intro-section" >

    < ! -- контентненавесьэкран-- >

    < / div >

    Intro-section (max-width: 960px; )

    Intro - section (

    max - width : 960px ;

    Also, if you want to get rid of the outer margins between the grid columns, MDL has a wonderful class that needs to be added to the column container - .mdl-grid—no-spacing:

    < div class = "mdl-grid mdl-grid--no-spacing" >

    < ! -- контент-- >

    < / div >

    You will get something like:

    < div class = "content-grid mdl-grid" >

    < div class = "mdl-cell" >

    < ! -- контент-- >

    Google design evangelist Mustafa Kurtuldu on the use of their technology in the development of the Keep and Inbox applications.

    To bookmarks

    The translation was prepared by the team of the Skyeng online English school.

    Material Design provides a set of tools and rules that help you consciously approach UX design when creating an application interface.

    But what if these principles don't work for a certain product? And what do Google designers do when they develop a product that goes beyond the classic guidelines?

    Material guidelines are adaptive. In this article, we'll look at two Google apps, Keep and Inbox, to understand how they not only deviate from some rules, but also shape new principles of Material Design.

    Inbox: Modular grid

    Developing a new email service is a very ambitious task for Google, given the already established Gmail in the market. Inbox's goal was to add depth to interface design and create a unique user experience and brand identity, playing by the new rules of Material Design.

    When the Inbox team was collating preliminary designs, the Material Design concept was still in development. This gave Inbox a great opportunity to set the standards for Material Design while addressing the challenge of depth and volume in the UI.

    Depth

    Inbox's original design wasn't flexible enough—the grid space only allowed seven emails to fit on a 13-inch screen. This was too little, especially compared to Gmail, which fits 16-20 letters.

    If you open Gmail and Inbox in adjacent windows, you can see a big difference in visual weight. And one of the biggest challenges was finding the right balance between content and white space.

    Tim Smith

    Chief Designer at Inbox

    By changing the grid settings, line heights, and how the font looks, Inbox designers were able to achieve optimal depth in the interface while still displaying 12-17 letters, each inside a Material Design card. The application interface adapts to the user's device. For example, the font in the “Subject” line changes depending on the screen size.

    Colors, images and icons

    The use of contextual images in groups of letters is another distinctive feature of the service. For example, if the user is planning a trip to New York, he will see the Manhattan sky on the card with the corresponding letter.

    There are many icons on the left navigation bar, their colors correspond to their functions in the application. When the user clicks the green Completed button, the background of the top bar also turns green, indicating that the context has changed.

    Top panel

    Another important task for the team was to develop the top bar of the application. The initial idea was to create a transformable panel that would not stretch across the width of the browser window, but would change depending on the content.

    We worked through about a dozen different variations of this concept until we ultimately arrived at the full-screen experience you see now. We also created several search bar concepts before choosing the best style.

    Tim Smith

    Chief Designer at Inbox

    Cards in Inbox expand and contract, meaning the header format changes depending on how the user interacts with the email. The top bar also displays a search bar and a menu with other Google apps. This approach allows Inbox to remain adaptive without complicating the interface.

    Keep: Responsive Navigation Samples

    Keep is a cross-platform note-taking app that expands and collapses cards on the screen, focusing the user's attention when adding a new note. The bottom navigation bar allows you to quickly create a new note in one click.

    Engagement, blank screens and animation

    Typically, the user is faced with a blank screen when there is no content on the page. In Keep, this screen looks like a blank canvas where the user can quickly jot down their ideas.

    White space encourages the user to explore menu items in a panel that expands to display various filters represented as icons; a layout menu that lets you switch between list and grid, and a left navigation bar where you can change basic app settings.

    We worked a lot on animation - how notes are displayed as a stream, how they move when you open and close them.

    Genevieve Cuevas

    Selecting the Right Material Elements: Bottom Navigation or Floating Action Button

    Conciseness and ease of use are the key features of Keep. During the app's redesign, the developers studied Material Design patterns and ultimately chose cards that help differentiate notes from each other, a left navigation bar that makes it easy to customize the app, and a context menu that changes depending on the type of note - like notes with checkboxes that display a menu to check and change elements in the list.

    Together, these elements create a clear and functional interface, adapting to a specific situation. When redesigning Keep, the creators experimented with some of the application's basic navigation elements - in particular, they tried to replace the existing navigation with a floating action button.

    The original navigation allowed you to create a new note with one tap, and the floating action button required two clicks: one to show options and a second to create a note.

    When we introduced the floating button, some of our users complained that creating a note in two clicks was not as convenient.

    Genevieve Cuevas

    Google Keep Software Engineer

    Many users who used the app before and were used to one-click navigation did not approve of this change. By testing and ultimately rejecting the floating button, the Keep developers were able to choose a solution that best suited the interests of their product.

    A guide, not a set of rules

    The Keep and Inbox teams used the guidelines as the basis for their applications. When they encountered a user scenario that didn't work, they were able to adapt their design to suit the users' needs.

    Material Design offers guidance based on Google's years of experience, but it can't solve absolutely every problem. The Keep and Inbox examples show that you can use Material Design guidelines, changing them as needed for your product.

    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. The development is based on the 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 various areas of a PC user’s life.

    When creating objects, we proceed from centuries-old experience and rely on it. But software design is still a nascent 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 define a certain hierarchy and 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 of the 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 print 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

    While screen design uses basic grids, print design uses 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 the 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 at a standard size and color is added 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, after being 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

    Another key point of animation in Material Design is the 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

    The final key aspect of Material Design is the concept of responsive design. This means options for applying the other three aspects on different device screens (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 is 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 for both vertical and horizontal device screens.
    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 was released online, 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, and 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 on the Google team, described how the I/O 2014 application changed during the development process to comply with the principles of Material Design. We translated his video especially for you.

    Video from the Google Design channel.

    What is material design? It is a set of styles and graphics developed by Google, as well as guidelines and rules for adhering to those styles. Material design was first shown at a developer conference, Google I/O, in the summer of 2014. The style is based on the format of “cards” and “blocks” - simple and concise forms and graphic elements, as well as the overall simplicity and freshness of the design - calm, soft colors, lack of volume, small details and detailing in general. The first “release” for material design took place with the launch of the Google Now service, and the style officially became the basis for the Android operating system quite recently, in version 5.0, also known as Android Lollipop.

    In my opinion, material design has several very important advantages over all previous attempts by Google to bring the design of its operating system and programs for it to a unified form, but also some disadvantages. In this short article I will try to present my point of view on the new design language from Google.

    Material design – arguments FOR

    The first and most important argument in favor of the new style, in my opinion, is its execution. I don’t want to again seem like a hater of Apple’s technology and approach, but in this case it’s not scary, because I’m only expressing my point of view. So, in my opinion, updating iOS to the seventh version and updating Android to the fifth version are, as they say, two big differences.

    In the case of Apple, we saw the usual transfer of previous graphics to a flat form, no new idea, no desire to bring something fresh - they just took the existing interface, crushed it, redrawn the icons and added rainbow background pictures. It is the background images in the new iOS 7 and the menu transparency effects that are an indicator of the bad taste and unwillingness of designers to do something good and kind, as it seems to me. In the “seven” they simply showed off everyone’s eyes with beautiful animation effects and the general brightness of the new interface. It seems to me that no one really thought about whether this would be convenient, because otherwise Apple designers would have paid more attention to functional aspects rather than to the rainbow design.

    The notification shade, called up from the top, and the control panel, called up from the bottom, are clear examples of a useless “upgrade” in iOS7. The first one was never made clearer - all notifications are piled up in a mess and there are too many of them, the second one was done halfway, switches allow you to turn interfaces on/off, but do not proceed to setting them up and selecting networks

    Android 5.0 has also been updated very seriously in terms of graphics compared to 4.x precisely in connection with the transfer of the operating system to material design. And, at first glance, the changes here are similar to those that took place in iOS - a final change of style to a flat one, a lighter overall design, external simplicity. But then the differences begin. In Android 5.0, the interface is more holistic thanks to the material design - everything is done in one calm style, nothing stands out and does not look colorful or overly bright. Does the basic principle of material design exclude the priority of graphic effects in the interface over its practicality? and that's very cool.

    To sum up the first argument - material design already looks very holistic, this is exactly what the operating system from Google and CO lacked - integrity and generality. When, opening each individual program, be it contacts, a browser, an email client or something else, you see the same animation, the same color palette and simply recognizable elements. Due to this, it is easier to get used to the new OS and it is simply pleasant to work with it.

    The second argument is that if you have already used a smartphone on Lollipop or seen screenshots, you probably noticed that the interface has become visually larger. The consolidation of the interface has been going on in touch devices for a long time. If we compare the first versions of Android with the “then” Windows Mobile, it is obvious that Android was larger and simpler, less information fit on the screen, but it was also more convenient to control the smartphone. In material design, some elements have been replaced with “cards”, fonts, icon and line sizes have been slightly increased, and the interface as a whole has become larger. I like this, probably because I’m getting old, jokes aside, but the older I get, the less desire I have to look at “millisized” icons and elements, even with good eyesight. By the way, this is why I don't like the iPhone 5 and anything smaller. Compactness is compact, but even on a 4.5" diagonal screen, you want to see normal-sized elements, and not study it with a magnifying glass. This is simply more convenient in many situations, especially when working with a smartphone on the go, for example. Therefore, the general enlargement of the interface in Android 5.0 based on material design seems to me to be a good step.

    The third argument in favor is that Google not only switched Android to a new design, but also immediately prepared the necessary visual guides demonstrating the implementation of the main elements for software developers. Simply put, if you are making a new program or want to convert an old one to a new design, you website and study Google recommendations.

    For example, it says what colors to use. fonts and how to use them are shown. And recommendations for using the correct graphic images in the program.

    Material design – arguments AGAINST

    However, the third argument in favor of material design is also an argument against it. Yes, Google was great for not abandoning the developers and providing them with comprehensive guidance on the correct use of the new design language, but in this case, let’s say, they failed to think about the users. Programs written according to all the rules of material design or externally modified according to Google's guidelines will look very harmonious in Android 5.0 and not so much in earlier versions of the system. And vice versa - all applications that do not follow the rules of material design will look somewhat foreign on a smartphone with Android Lollipop. And in the next six months there will be many such programs, I would venture to guess. Still, not every developer of a popular program, especially if it is complex and requires constant updates and improvements, will drop everything and start converting it to material design.

    A clear example of an old design in a very current program - WhatsApp. How long will the application not be transferred to md? Good question

    It turns out that some developers will now really give up everything and transfer their programs to material design, while others will not. And on Google Play there are programs with an older, let’s say, design, but also sometimes necessary for work. As a result, it turns out that Google’s desire (undoubtedly correct!) to bring Android to a common form is not enough; something needs to be done with hundreds of thousands of programs. Question - what?

    Dear readers, what do you think of Google’s idea to bring all its services and applications to a common form, using material design as the basis?