Material Design 2 — more than just rounded corners
Tags: materialdesign, google, ios, android
Published: 2019-11-14 13:39:44

---
title: Material Design 2 — more than just rounded corners
published: true
date: 2018-05-11 14:50:00 UTC
tags: material-design,google,ios,android
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/1*tIOufDyXyCbog64OBiUrfg.png)<figcaption><a href="https://material.io/">https://material.io/</a></figcaption>

### Material Design

Google first showed it’s vision for the next UI principles in 2014.

{% youtube 1TbbLzCBwj0 %}

So with Google I/O 2018 an iterativ version of material design was published.

Many things were left untouched, which is good because it worked well so far. Some things are now tweaked and enhanced to provide better freedom for creative UI designers. And some new stuff was added. Let’s break it down.

### Goals

The first version of the Material Design guidelines had two fundamental goals which it achieved very well over the past few years.

#### **Create**

Create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science.

#### **Unify**

Develop a single underlying system that allows for a unified experience across platforms and device sizes. Mobile precepts are fundamental, but touch, voice, mouse, and keyboard are all ﬁrst-class input methods.

If you want to read more about the first version, head over to the archived guidelines.

[Introduction - Material Design](https://material.io/archive/guidelines)

Designs that adopted the Material Design guidelines were pretty intuitive. But they had one thing in common, they _looked and felt nearly all the same_. You might argue that this a good thing, but if you want to present your brand, it’s certainly not. That’s why Google added a third goal this year.

#### Customize

Expand Material’s visual language and provide a flexible foundation for innovation and brand expression. Take a look at the talk to see what can be now achieved by just making a few tweaks.

{% youtube 3VUMl_l-_fI %}

### Principles

Material Design started with three very important key principles.

#### Material is the metaphor

Material Design is inspired by the physical world and its textures, including how they reflect light and cast shadows. Material surfaces reimagine the mediums of paper and ink.

#### Bold, graphic, intentional

Material Design is guided by print design methods — typography, grids, space, scale, color, and imagery — to create hierarchy, meaning, and focus that immerse viewers in the experience.

#### Motion provides meaning

Motion focuses attention and maintains continuity, through subtle feedback and coherent transitions. As elements appear on screen, they transform and reorganize the environment, with interactions generating new transformations.

### Two new principles

To achieve the new goal of customization, they had to expand that list a bit.

#### Flexible foundation

The Material Design system is designed to enable brand expression. It’s integrated with a custom code base that allows the seamless implementation of components, plug-ins, and design elements.

#### Cross-platform

Material Design maintains the same UI across platforms, using shared components across Android, iOS, Flutter, and the web.

### Colors

{% youtube xYkz0Ueg0L4 %}

[Color - Style - Material Design](https://material.io/archive/guidelines/style/color.html#)

That’s how it started. A predefined color palette and I, as a developer, was happy that my decisions were made so easy. It even says so in the video title!

And now, for the new goal and principles, we have the choice for even more colors. Like all the colors. Want your app to be purple but kinda blue? No problem, go for it!

![](https://cdn-images-1.medium.com/max/1024/0*uNfp9jsEENQgZqVq.png)

So they defined three principles for colors.

#### Hierarchical

Color indicates which elements are interactive, how they relate to other elements, and their level of prominence. Important elements should stand out the most.

#### Legible

Text and important elements, like icons, should meet legibility standards when appearing on colored backgrounds, across all screen and device types.

#### Expressive

Reinforce your brand by showing brand colors at memorable moments that reinforce your brand’s style.

[The color system](https://material.io/design/color)

### Shape

Up until now we had round buttons, slightly round corners and hard corners. Now we can have every combination with various settings involved.

![](https://cdn-images-1.medium.com/max/1024/0*5NwaS0Joh4PEso8l.png)

Material surfaces have a rectangular shape by default, with 4dp rounded corners. They have adjustable:

- Corner angles and curves
- Edge angles and curves
- The number of corners

Shape changes, such as rounded or clipped corners, can be subtle or more significant.

[About shape](https://material.io/design/shape/about-shape.html)

### Components

#### App bar

We already know and love the app bar. It’s placed at the top and provides space for our burger menu icon, a title and various actions we need.

![](https://cdn-images-1.medium.com/max/1024/0*ZeSNdKPlX2ElCrBg.png)

But you know what loves the top space? The notch. Oh the glorious notch. You may noticed the iPhone X UI tweaks to integrate the notch better into current designs. And it’s coming to android, too. Scaled page titles and all the top actions are now on the bottom. They don’t say it but that’s why the app bar bottom was introduced.

![](https://cdn-images-1.medium.com/max/1024/0*MrmnIeOaXAaEw1i4.png)

It shifts the current app bar to bottom and basically acts like normal. But what about a FAB (Floating Action Button). Doesn’t it get in the way you may ask?Yes, it would. So they just merged it.

There are various variants on how the FAB is placed and its visual appeal. It can even be placed in a cutout.

[App bars: bottom](https://material.io/design/components/app-bars-bottom.html)

#### Button

What’s the primary action on this page? That’s what every designer asked in the past. And in most cases it was very easy to define what’s a _primary_ and what’s more a _secondary_ action. Use _flat buttons_ if you need less prominence and _raised buttons_ for more prominence.

With material design 1 we had flat buttons and raised buttons. In combination with the primary or _secondary_ color a distinction was easy to make. But sometimes we wished for a “in-between” button to display a special use case. That’s what’s new!

They renamed flat buttons to text buttons and raised buttons to contained buttons. And they called the “in-between” button outlined button.

![](https://cdn-images-1.medium.com/max/720/0*F5RubobFy7Pn00YU.png)

This will make different emphasis easier to display and gives designers more options to work with.

[Buttons](https://material.io/design/components/buttons.html)

#### Sheet

Oh the lovely sheet. Drawers’ little brother. It is basically just a paper element which would raise from the button to display beautiful actions or details. In some cases it is even persistent and provides actions used in media playback.

Some designs needed to display options on the side. Like filters, sort options or additional details. We had to build this ourselves. But no more my friend. I introduce the sheet on the side!

![](https://cdn-images-1.medium.com/max/1024/0*KEAQYW0XO_7u8zeO.png)

It works just like the bottom sheet but now on the side. Use it in a persistent state or like a modal and let it overlap your content.

[Sheets: side](https://material.io/design/components/sheets-side.html)

#### Backdrop

This is a completely new component. It combines the content displayed in the front layer with details, filters or other actions related to that content in the back layer.

![](https://cdn-images-1.medium.com/max/1024/1*IXPbQbUpJ5QNfnTwn9ruVA.gif)

[Backdrop](https://material.io/design/components/backdrop.html)

#### Text fields

Input fields just had a label, its input area and an underline. Now there are two options to use. Filled text and outlined text.

![](https://cdn-images-1.medium.com/max/1024/0*hOHC2MVbQlqiY754.png)

Filled text fields carry more visual emphasis, making them stand out when surrounded by other content and components.

Outlined text fields have less visual emphasis than filled text fields, which helps simplify layout in places like forms, where many text fields are placed together.

[Text fields](https://material.io/design/components/text-fields.html)

### Conclusion

Many subtle but very important changes for achieving the new goal towards more customization. Also really cool new additions which will address past confusion.

These changes will lead to different variations and adaptions of the standards while still look and feel different.

For me as a developer and designer it’s still a big pill to swallow as I just thought I mastered material design 1. But change and progress is good for everyone.

* * *