Google moves Material Design from a design language to a flexible design system and address some longstanding issues.
It was not a surprise that Google had announcements about Material Design at the Google I/O 2018 developer conference. Hints, clues, and evidence pointed to a mild “refresh” of the four-year-old design language. And the internet talks about that stuff.
What was surprising about the conference was how little talk there was about the expected stuff, and how much talk there was about additions and changes that attempt to mitigate some of the problems of actually dealing with Material Design.
Common problems with Material Design
As Rich Fulcher (the Google guy, not the comedian) noted at the Developer Keynote, Google has heard two main complaints from product teams and developers over the years:
- Material isn’t visually flexible enough; different brands’ apps look too similar
- Engineering support is lacking
These were familiar sentiments.
Visual monotony certainly cuts both ways. While designers on Material UI projects feel hamstrung, users have to live in a world of same-y looking apps and websites.
“Engineering” support affects both designers and developers. Lack of official support for design tools and development libraries has made dealing with Material Design more difficult.
As a designer I was not too surprised when I had to rummage for Material symbol libraries, or roll my own in a particular design tool. But I was surprised when one of the developers on my project informed me that implementing one of the standard Material components would actually require a bunch of custom control development. Not fun for him, nor for me, who had to provide a bunch of extra specs to support that custom development.
Changes to the Material Design ecosystem
Design refresh
Yes, there was a refresh of the Material Design standards. The differences are not very significant in appearance or approach. If you hated Material Design before, you still will.
There are new components like the Bottom App Bar (maybe that’s the only new component?), and tweaks and variations on existing components, like the addition of outlined text fields, and the banishment of plain non-filled text fields.
For all the speculation ahead of the conference, Google did not actually take much time to talk through their changes to the Material Design standards. That is, except in context of the other things that Google was clearly more excited to talk about, like…
Material Theming
Material Theming is based on the notion that teams should make apps that display a more distinctive style… without straying too far from the core principles of Material Design.
Google seems eager for app makers to lean toward their own look and brand, and away from Google’s. Resources and case-study examples on Material.io offer implicit guidance and encouragement about which aspects designers should feel free to change, and which should remain standard.
Material Theming attempts to make it easier to create visual themes for your apps that deviate from Google’s standard theme. Changes you make to color, typography, shape, etc. are automatically (or more easily) spread across the entire app design. Importantly, Material Theming is made real via tools and source code Google recently released for designers and devs.
In addition, Google now provides 5 icon style sets: Filled, Outlined, Rounded, Two-Tone, and Sharp. They are not wildly different from one another—it’s just about how the icons are filled in and what their corners look like.
Material Theming is an attempt to solve a design-monotony problem while still encouraging us to color inside the lines, as it were. We’ll see what actual teams do with it.
Material Components
Material Components (or MDC, for Material Design Components) is a code library to help developers implement web and mobile applications using Material Design UI. MDC is a replacement for previous Material support libraries from Google, but it can be imported into existing codebases without having to start your app from scratch.
MDC supports Material Theming. For example, on a web project, a developer can modify a few MDC-provided Sass variables to intelligently affect the visual theme across the entire application, while still being able to override individual components as desired.
Google says MDC is what they use in-house for development.
Material Components are available for:
- Web
- iOS (Objective-C, Swift)
- Android (Java, Kotlin)
- Flutter, Google’s cross-platform development framework to build native iOS and Android apps
Tools
This part is bittersweet for those of us who can’t/don’t use Sketch.
Google has released Material Theme Editor:
The Material Theme Editor helps you make your own branded symbol library and apply global style changes to color, shape, and typography. Currently available for Sketch, you can access the Material Theme Editor by downloading the Material Plugin.
It looks pretty cool. But whatever.
Google has also updated Gallery, their tool to help teams share and collaborate UI design work. The big deal is the new Inspect mode. Material elements in artboards uploaded from Sketch are inspectable. Team members can click on individual components and view its width, positioning, font size, etc.
Seems like that might be useful.
*sigh*
Learn about how BetaTesting can help your company launch better products with our beta testing platform and huge community of global testers.
BetaTesting Blog 