Do you remember the bright and bold colors introduced by Material Design? well, they are gone — at least on Wear 2.0

Luigi Notaro

·

Follow

Published in

Prototypr

·

8 min read

·

Aug 18, 2016

--

4

Listen

Share

At the latest I/O, Google unveiled the Material Design specifications for wearables — showcasing an intriguing implementation for Android Wear 2.0. Since Material Design is much more than a simple Visual Language [1], this implementation will radically change the wearable experience for Android Wear users — from the app structure to new standard components through patterns, style and much more, Wear 2.0 is actually a revolutionary shift from the previous iterations.

Did you think that a stream of cards was enough to call it a day for Material Design on smart watches? Nope. Actually, the cards as we know them seem to be completely gone — but this is another story, for another article.
Here I will focus on a fundamental element of Material Design: color.

Color is one of the peculiar aspects of Material Design, one that takes part in the expression of its bold, graphical, intentional style. The ink that ripples through Google’s quantum paper is vibrant, saturated, part of a simple but strong palette composed of a primary color — distilled into two accessory shades to differentiate without adding visual noise — and an accent color, usually contrasting with the former to direct the attention to key UI elements.

“Color in Material Design is inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights […] Color should be unexpected and vibrant”

Material Design specs on Color

So, what happened to color on Material Design for Wearables? It joined the dark side. Literally.

Dark is the new bold

At Google I/O 2016, JP Gil — the designer on the Android Wear team that lead the process of bringing Material Design to wearables — listed three key areas that define Material Design for Wearables: vertical layouts, dark colors and a set of UI components and app design patterns.

Yes, dark colors are listed as a Material Design pillar when being applied to wearables. Say goodbye to our beloved Pink A200 and Indigo 500, because they have been replaced by much darker siblings. The contrasting accent color? that’s gone too, leaving us with a monochromatic palette [2].

Here you have an example of a typical Material Design for Wearables palette, based on the well known Material Indigo: yes, when Google said darker colors he really meant it.

The rationale behind

It seems that the Android Wear team had done some exploration about the use of light colors on wearable UIs — did someone mention white cards on bright, illustrated backgrounds? — and the results were not good for two main reasons:

• First, light colors are not battery efficient on OLED displays — the reason being the need to light pixels with brighter intensity;
• Second, light colors can be potentially interruptive when the screen is active — watches are visible on the user’s wrist at all times and a bright display may disrupt a pleasant atmosphere with an incoming notification, especially in a dark ambient like a restaurant or a theater.

On the other hand, the use of dark colors could solve or at least reduce these pain points:

• Dark colors are less aggressive toward battery life, cause the display doesn’t have to light its pixels at high intensity — of course, this solution is valid only for OLED screens;
• Dark colors make the screen less bright when it’s active, and that could lead to a more discreet device.

That’s why Material Design for wearables advocates for dark colors: to enhance the user experience, being that having a longer battery life or a more deferential device. And the whole OS embraces this principle, shifting from an immaculate UI made up of white and greys to a darker, muted palette — using a color schema a lot like the one used by the Settings app on Wear 1.x.

A unified palette system for a coherent experience

But Material Design for Wearables does more than whining about whites and greys: it offers a complete system to build a dark palette made up of five different shades of any original Material 500 color (or any app primary color, for that matters); each shade has been labeled and is intended to be applied to a certain family of UI components — and the overall palette is supposed to cover most of any apps needs.

The same app-specific palette is used by the OS when serving notifications to the main stream: the background color of the card is applied by Android Wear itself — hands off, developers! — and it is simply the darkest shade of the palette derived from the app’s primary color. This way, color is used to create a coherent experience through the whole system.

Anatomy of a dark Material palette: meet the fabulous five

As I mentioned earlier, a palette built for a Material wearable apps derives directly from an original Material 500 color chosen as the app primary color and contains five of its shades — the primary color is not consistently used as part of the palette itself. Each shade is named after the UI region that’s designed to fill: color is then even more informative on Wear, because it defines not only some key UI components but every UI region’s function.

Let’s meet these five, from the darkest to the brightest:

1. Dark background
2. Lighter background
3. UI element
4. Lighter UI element
5. Accent

The names are quite self-explanatory, but let’s explore further how they are applied to the UI.

• The Accent color is the only one in the series brighter than the primary color; it’s used very sparingly through the interface to highlight bits of content that should immediately pop.
• The Lighter background color is used to tint most of the UI backgrounds.
• The Dark background color is used for some sections of the UI background; for example, an IM app could use it to differentiate the latest message (Lighter background) from the old ones (Dark background). This should also be the shade used by Android Wear to fill the app’s notification cards background, at least according to the explanatory text on the Material Design for Wearable sticker sheet and the slides used at I/O; unfortunately, the images shown in the same context tell another story —or, better, another shade.
• The Lighter UI element color is applied to interactive components of the UI, like buttons and other components introduced as part of the new UI kit — namely, the Action drawer and the Navigation drawer.
• The UI element color is used almost as an intermediate background color and it’s applied to UI regions containing an actionable component (like the new Primary Action Button) or to highlight the background of title and subtitle headings.

The extraction process

So, how do we derive our dark palette from a given color? The extraction process is actually fairly simple and it begins by looking at the chosen primary color through the HSB notation. Unlike the RGB notation that describes a color as an additive mix of Red, Green and Blue lights, the HSB notation uses Hue, Saturation and Brightness to define a color.

Each color of a dark Material palette is derived from the given primary color by simply manipulating its brightness value according to a precise scheme, leaving the hue and saturation values intact [3]. The brightness value is expressed as a percentage in the HSB notation and here we have the scheme describing each derived color’s brightness:

1. Dark background: 15%
2. Lighter background: 30%
3. UI element: 40%
4. Lighter UI element: 65%
5. Accent: 100%

Yep, the darkest color of each series is really dark.

Exceptions: color correction

For some hue ranges, however, the extraction process require some additional touches besides the brightness value manipulation to generate a usable palette on wearable devices:

• Blue hues between 190° and 300° on the color spectrum need to increase the saturation value to 100% when generating the Dark and Lighter backgrounds colors; for the Accent color, these hues also need a 50% Saturation value. Material Purple, Deep Purple, Indigo, Blue and Light Blue colors are included into this hue range.
• Yellow hues between 45° and 75° on the color spectrum are the hardest ones to manipulate: they need to use specific hue and saturation values when defining the Dark background color, according to a schema reported on the specs. Material Lime, Yellow and Amber colors belong to this hue range.

Enjoy the dark side

At this point, the new Material color scheme for wearables has no more secrets for us and we can enjoy the new palettes defined in the specs.

It’s worthed to point out that the specs themselves are still a draft for the developer preview of Android Wear 2.0, so some details could change before the final release; and to be honest, at this stage it’s easy to spot some inconsistencies between what’s written and what’s shown by the screenshots or what was presented at I/O — the main problem here is the discrepancy about the use of the palette for some components.

However, the core concept of darker colors on wearable devices and the main process to extract a dark palette from a given color should remain as they are.

Material Design is a living system, and this wearable implementation is another tangible proof of its flexibility and its user centric essence. Material is here to stay, for sure. Even if it joined the dark side!

References

• Android Wear 2.0 | Building Apps with Material Design @ Google I/O 2016 (here’s a link to the YouTube video)
• Material Design for Wearables specs about color
• Wear components sticker sheet for Sketch

Would you like to dig even more deeper into Material Design? You can read my Eight don’ts for your Material Design app — where I explore common Material bad practices to avoid at all costs. Here’s the link for you:

Footnotes

[1] Of course Material Design is also a Visual Language, but that’s just part of the story: the other goal of Material is to “develop a single underlying system that allows for a unified experience across platforms and device sizes” (see the Material Design specs at Goals).

[2] To be fair, the original Material Design specs already provided an examples of the primary color being used as accent color as well, but that was limited to scenarios with white backgrounds.

[3] Well, for the most part; see Color correction below.