Google Chrome’s major redesign shows a lighter, rounder UI

Google is planning a massive redesign of its major products this year. We’ve already seen some major changes land in the first Android P Developer Preview, and we’ve seen leaks of a new Gmail design. Next up on the docket is Google Chrome.

We’ve been unofficially calling Google’s new design effort “Material Design 2,” which is how it was first referenced in a Chrome commit from February.

“Material Design” is Google’s current company-wide design language, which first debuted in 2014 with Android 5.0 Lollipop. We’re expecting to hear a lot about Material Design 2 at Google I/O 2018, but so far we’ve seen work-in-progress MD2 changes bring a lighter, rounder design to Google’s products. Round buttons, boxes with rounded corners, and white background are usually among the changes. We also see an increasing use of the “Product Sans” font in the redesigns, which makes everything look more Googly given that it’s the same font used in Google’s logo.

For Chrome, design changes are already starting to land in Chrome Canary, the unstable, daily-build version of Chrome. A “Proj-MdRefresh” tag in the Chrome bug tracker lists lots of details related to these changes, including—helpfully—screenshots from an internal-only design document for Chrome. If you haven’t guessed from the tag, the effort is now being referred to as “Material Design Refresh” instead of “Material Design 2.”

Early Canary builds and the design document pictures line up nicely with what we’ve previously thought Material Design 2 would be. Chrome is getting rounder. There’s a rounded address bar—just like the current Google search bar on Android—along with rounded rectangle shapes for bookmark buttons, Omnibox, and text input boxes. The most striking change is the new tab bar, which moves from the current trapezoidal tab shape to a rectangle with rounded corners. The new tabs look more like they belong in Firefox’s old “Australis” interface. Chrome is also getting lighter, with a pure white active tab and toolbar color, as opposed to the current light gray color.

To the left of the address bar is the usual list of extension icons, but after that is a new vertical separator and a new, round profile icon. If you sign in, the Profile icon pulls your Google profile picture and sticks it right in the Chrome UI. This is much more standard looking than the current profile switcher, which oddly creates a profile button on the right side of the tab bar, which sits right next to the window controls on Windows.

The design documents show even more changes to the tab bar that haven’t been implemented in Canary yet. Several pictures show a new-tab button that sits on the left side of the tab bar, before any of your tabs. One even spells out the change, saying Windows, Linux, and Chrome OS will get this “left-hand side” new-tab button. MacOS, which already has left-hand-side window controls, will get a new-tab button on the right-hand side.

Another big change comes to background tabs, which won’t show as individual tabs anymore. The color swatches show that background tabs should be the same color as the window frame, which would hide the tab shape. The only separator would be a small vertical line.

There’s a new “Window teleporting” feature mentioned in the design docs. If you’re using Chrome in a multi-user mode, you’ll be able to send windows from one user profile to another. When you do this “teleportation,” the swapped-over window will be marked with the original user’s profile.

The design documents also reveal a change for Google’s increasingly used “Product Sans” logo font—they show the same font with the name “Google Sans,” indicating it’s getting a more-relevant name.

[ufc-fb-comments url=""]

Latest Articles

Related Articles