Material Design
Google first showed it’s vision for the next UI principles in 2014.
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 first-class input methods.
If you want to read more about the first version, head over to the archived guidelines.
Introduction - Material Design
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.
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
Color - Style - Material Design
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!
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.
Shape
Up until now we had round buttons, slightly round corners and hard corners. Now we can have every combination with various settings involved.
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.
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.
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.
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.
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.
This will make different emphasis easier to display and gives designers more options to work with.
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!
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.
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.
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.
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.
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.
Top comments (0)