Material Design, the unified design language that launched alongside Android Lollipop, features flat, pastel color palettes, depth, soft lighting, and realistic physics. It's meant to mimic the tactility of real-world objects without resorting to skeuomorphism; Google describes it as a synthesis of "classic principles" with "[ innovation and possibility" of technology.
Since Material Design's debut in 2014, it's spread across the Android ecosystem like wildfire — not to mention Google apps such as YouTube, Chrome, Gmail, Hangouts, and Google Calendar. Floating action buttons, pleasant colors, and elevation techniques have been made available as part of the Material Components Library on GitHub (the follow-up to Android's Design Support Library and Google's web-focused Material Design Lite), which brings Material's goodness to Android in the form of custom views, and to the web in the form of bundles that can be imported and used like standard HTML tags.
Now, on the eve of Material Design's fourth anniversary, Google appears to be prepping the next generation of its paper-and-ink-inspired aesthetic: Material Design 2. Precious little information is publicly available about Material Design 2, the existence of which was uncovered this week in new commits in the Chromium Gerrit, and we make no claims that it's a proper successor to the newest Material Design framework. But the commits point to noticeable, if subtle, changes in color palettes, iconography, and touchscreen behavior.
Material Design 2 in Chromium
In early February, new commits on the Chromium Gerrit implemented "Material Design 2" UI in Chrome's tabstrip — the draggable tabs containing webpage titles, favicons, and the "close tab" button above Chrome's address bar.
The commits aren't drastic, but make changes to the appearance of Chrome's tabs. They increase the height of the tabstrip; make unspecified tweaks to tabs' content layout, specifically to titles and alert indicators; and decrease tab touch width while increasing tab standard width. They explicitly don't modify tab alert indicator colors, tab separator colors, the "new tab" button, or any tab typography.
A collection of Chrome tabs.
Revealingly, the commits make reference to a "Material Design 2" tab close button icon and "basic color constraints required for Google Material Design 2".
Digging deeper into the commit code shows new "Material Design 2" color palettes for grey, red, and red-dark Chromium themes, and new colors for the standard Chrome toolbar and incognito toolbar. We used a hexadecimal lookup table to generate the RGB swatches:
Material Design 2's red is slightly darker than the current Material Design's Red 800 (#C62828) and Red 600 (#E53935), while the new shades of grey (#3C4043, #5F6368, #BDC1C6, #F1F3F4) have a lighter, bluish tint. Material design features traditional greys, where R=G=B, while here, B>G>R at every shade (but only by 1-4 out of 255).
Material Design 2-compliant versions Chrome will also feature a much brighter toolbar than current builds — it's nearly white compared to the current greyish color scheme.
Here's a quick mockup of how the toolbar will look with the new colors applied:
Finally, the commit adds a new IsTouchOptimizedMaterial() flag to the MaterialDesignController, which might refer to touch-optimized Material Design 2 elements. We wrote in early January about Google's effort to improve the Chrome web browser's touchscreen support on Chrome OS devices, and it appears to be a continuation of it.
The Important of Color in Material Design
So what do the new colors mean in the broader context of Material Design?
Material Design is more than just about layers, components, and elements, and how they behave in relation to one another. Central to Google's design motif are high-contrast themes, bright colors, and bold highlights — they're what make Material Design-compliant apps stand out from the crowd.
Google provides sample color palettes designed to "work well together" across platforms, and encourages developers who take advantage to source a primary app color — otherwise known as a "dominant" color — from a collection of 500 different swatches. (Think "blue", "green", or "purple", and other basic colors.) If needed, they source a secondary color from an expanded collection of 700 colors (complementary colors for the most important UI elements, and analogous for less important UI elements, and a tertiary color from a subset of 300).
Color plays an important part in Material Design hierarchy. Bright colors suggest importance — they're reserved for prominent buttons and other interactive elements. Subtler colors, on the other hand, add visual interest by accenting text fields, progress bars, links, and other parts of the UI.
From what we know about Material Design 2's color palette, at least a few of the swatches in Google's "primary 500", like Red 600 and 800, are darker than their Material Design predecessors. But others, like grey, get the opposite treatment — both the grey and white swatches shown in the Chrome tab mockup have a colder greyscale and higher blue values.
Right now, that's all we really know about Material Design 2. But the commits might be a sign that something's happening behind the scenes, and if that's true, we might learn more sooner than later. Google's expected to take the wraps off Android P, the next major version of Android, as soon as March, and Google I/O 2018 kicks off May 8. Both are prime opportunities to take the wraps off Material Design 2.
0 Response to "New Commits in the Chromium Gerrit Show Material Design 2’s New Colors CENTRiC..."
Post a Comment