What’s New: Material Design

Can buttons be six-sided?

Google I/O 2018 gave us a lot to mull over. What’s new? What’s next? Is my app out of date? Can buttons be six-sided? Are designers obsolete? It’s best to mull things over at a gentle pace, in little bites. This little bite is on design.

In just four years, Material Design has been around the block. According to Google, 1.5 million apps have been created using this design system. Why? After all, it was originally created for Google’s internal needs.

  1. It solved the problem of heterogeneity when designing for the Android and the absence of any kind of system.

  2. It was universal, working on tablets, smartphones, and Web-based platforms.

  3. It was created with the user in mind, making it intuitive.

Now it’s clear: Google wants us to customize our apps. Our products should be beautiful and varied. The updated MD is an attempt to show designers and businesses how to customize UI without fear of getting cussed out by developers.

material.io – Design, Develop, Tools

We can start studying the design system by looking at the website — the look has been updated, as well as some of the content. Now even the 404 screen has something to teach you, and when you click on an element from the guides, you’ll see its specifications, with all of its spacing, fonts, and links to downloads from Google’s library.

Here are links to the guidelines and resources for developers. In the new system, design + development = <3

App bars: bottom

An interesting attempt to simplify users’ lives and move key navigation elements to the bottom. You can put up to four actions in this panel, including the floating action button.

Use itd
1. On mobile devices
2. On apps with a side menu
3. On screens with 2-5 actions

Don’t use itd
1. On apps with bottom navigation
2. On screens where there aren’t any actions, or just one

The recommendation on what color a floating action button should be hasn’t changed: it should be contrasting. If you want the floating action button to be the color of the app bar, add additional shading under the button or find another way to make it stand out. The button can remain stationary during scrolling.

Another important thing. Pop-up elements such as snackbars shouldn’t hide Bottom App Navigation. In contrast, the keyboard appears above the panel and hides it.

The relationship between the Bottom App Bar and the navigation panel remains complicated. The Back button should still be on top. The upper panel shouldn’t be too bright, without additional shading. As for icons and actions, you can play around with them, putting them where they fit best.

Chips

Compact elements for use as tags, filters, choices, and actions. They were used before, too, but now they’ve been officially written into the code.

You can also open Chips to show more information, move them by dragging and dropping, and scroll horizontally.

Backdrop

A type of modal window. Its main purpose is to display contextual content with actions. Backdrops consist of two layers: front and back. Unlike iOS modal windows, on the Android, the two layers are connected. If you complete an action on the back layer, the content on the front will change.

The front layer is for displaying relevant information and interacting with it. You can add a subheader and make it stationary during scrolling if needed. You can put any content on the card, with vertical or horizontal scrolling.

The form of the Backdrop depends on the style of the app. You can play around with it using the Sketch plugin, which we’ll discuss a little later. There’s also a template for Figma.

Banners

A good alternative to alerts. The banner displays an important message which the user can either respond to or close at any time.

Banners appear in the upper part of the screen, under the App Bar. Only one banner can be on the screen at a time.

Image lists

Now you can give images a repeating pattern without spending a ridiculous amount of time on it. That’s about it, really.

Dividers

Nothing out of the ordinary. Now dividers are official.

Text fields

Now the guidelines include filled and outlined texts fields. You can enter text several lines in height, add an explanatory line, and use icons. All the states you need can be found in the guidelines.

In addition to components, the site’s icon and typography sections have also been updated. You can change the type scale, choose custom fonts, and change the style of icons. Now many elements can have straight, clipped, or rounded corners or be six-sided. Interfaces in Google’s own products, for instance, have become more rounded. For a clearer idea what native elements are available, you can use this plugin for Sketch.

Material Theming This plugin lets you quickly create your own library in symbols, consisting of native MD elements. You can customize color, font, icons, and the appearance of objects. And though Google used to recommend that you use only their palette, now you’re free to choose whatever colors you like.

What if your elements aren’t native? You can see the markup, but you won’t be able to get cut icons. In other words, Zeplin doesn’t have to worry about replaced for now.

During tests of the library, there were issues finding the symbols we needed quickly  — it’s difficult to use something you didn’t create yourself. Plus, some states are missing, there are mistakes, and not all of the elements fit the scenario. When you choose a non-standard font, the size might change to 11.72pt, for instance. So for now, you have to double check all the work you do with the plugin.

Despite these shortcomings, if your app uses native Android elements, it’s definitely worth trying out the library.

Gallery

Google has finally released its own service for uploading screens, commenting, and viewing markup elements, similar to Zeplin. You can add artboards either by uploading them to the Gallery or by using the plugin for Sketch that we described, and you can view and comment on screens using your computer or apps for iOS and Android.

The results are a little underwhelming at this point. Our highest hopes were for the ready-made code for native elements, but the GitHub link just isn’t that great. And it’s too early to ask developers to add new elements to your app; the code for them isn’t available yet.

What if your elements aren’t native? You can see the markup, but you won’t be able to get cut icons. In other words, Zeplin doesn’t have to worry about replaced for now.

The idea of commenting on screens individually isn’t new, so why not create a tool for viewing artboards in the scenario, as in RealtimeBoard? At the very least, adding the ability to prototype, to understand which screens are connected, would make life easier.

This tool needs some work. For now, it’s definitely inferior to what’s already out there.

What else?

The designs of Gmail and Google Drive have been updated. You can also check out the app for Google I/O participants — there, too, the guidelines have been updated. If you have anything to add, don’t be shy.

A lot of unusual rounding has appeared in Google apps, so products that haven’t been updated look out of date. The system has lost something in terms of recognizability and personality, but it’s interesting to follow the development of Google’s internal products and the ways they remain consistent.