First look at Google Chrome's UI design refresh

Martin Brinkmann
Apr 23, 2018
Updated • Apr 23, 2018
Google Chrome
|
51

Users of Google Chrome Canary, the cutting edge version of Google's web browser, have a chance to get a sneak peek of a user interface design refresh that Google may plan to launch in all versions of Chrome eventually.

The feature is hidden behind a flag currently but that is a common practice by Google; the company uses flags to hide future features from the general population. While there is no guarantee that features will land in Chrome one day, it is often the case that Google uses experimental flags to prepare the wider release.

Chrome's user interface has not changed all that much throughout the years. Google started a Material Design refresh of internal Chrome pages in 2015 and the process is still ongoing. The company changed the design of the Settings page in mid-2017, and the flags page in the end of 2017.

Google Chrome's UI design refresh

chrome new ui material design

The screenshot above shows the new refreshed Material Design front user interface of Google Chrome. The very first thing you may notice is that Chrome's tabs are slightly rounded now instead of sharp edged.

Tabs retain the rounded look even if you create a tab overload situation in Chrome when you open too many tabs so that each is displayed without any site indicator (as Chrome does not use scrolling in the tab bar).

The tabbar itself has a white background now. Inactive tabs are displayed with gray text on a gray background, the active tab with gray text on a white background.

There are other changes:

  • The design of the New Tab button changed to a plus icon.
  • The Chrome address bar has round edges, and its background is set to gray and not white anymore.
  • The profile indicator was moved from its original position near the window controls to the main Chrome toolbar.

How to enable the design refresh

chrome design refresh

You need to run Chrome Canary (version 68 or later) on Windows right now to enable the refresh. If the design refresh is not pulled again, it will become available for Mac or Linux as well in the future.

  1. Load chrome://flags/#top-chrome-md in the Chrome's address bar. The address opens the experimental page of Chrome.
  2. The preference UI Layout for the browser's top chrome determines the user interface design. Click on the menu next to it and select Refresh.
  3. Restart Google Chrome.

You can undo the change at any time by setting it to the default value. Other values that are supported:

  • Normal -- clamshell devices.
  • Hybrid -- for devices with touchscreen.
  • Touchable -- new unified interface for touch and convertibles.
  • Auto -- unclear.

Closing Words

The UI design refresh of Chrome is a work in progress. While it is likely that Google is going to launch a refresh of the design eventually, it is possible that it will look different from the first version that popped up in Chrome Canary in the past days.

Mozilla, maker of Firefox, moved away from rounded tabs with the release of Firefox 57. Firefox users who want curved tabs can check out Photon Australis, a collection of userstyles for Firefox that changes the squared tabs of the browser to curved ones.

Now You: what is your take on the new UI design?

Summary
First look at Google Chrome's UI design refresh
Article Name
First look at Google Chrome's UI design refresh
Description
Users of Google Chrome Canary, the cutting edge version of Google's web browser, have a chance to get a sneak peek of a user interface design refresh that Google may plan to launch in all versions of Chrome eventually.
Author
Publisher
Ghacks Technology News
Logo
Advertisement

Previous Post: «
Next Post: «

Comments

  1. kebman said on September 24, 2018 at 12:24 am
    Reply

    Looks like they wasted a ton of space at the top. That dark backdrop can be cropped to the bare minimum. My screen real estate is more important than Chrome’s design teams dreams.

  2. Milosh said on September 23, 2018 at 7:52 pm
    Reply

    Seriously, this?

    What’s the point of making a change just for the sake of it?

    The new UI looks bland, unimaginative and dated. What exactly did you improve?

    Chrome’s signature trapezoid tabs replaced with something that looks like a Firefox from 2012; prominently round, gray omnibar in combination with semi-rounded bordered tabs and sharp single-line tab dividers; like, how does this make any aesthetic sense?

    I’d always welcome any UI change if it results in a better experience/aesthetics/usability, etc. but this is simply a big, BIG step back.

  3. Mick Russom said on September 10, 2018 at 12:55 am
    Reply

    chrome 69 looks terrible – how to get it to look more like it was before version 69 made it all worse:

    chrome://flags
    #top-chrome-md
    NORMAL

    #enable-tab-audio-muting
    ENABLED

    #omnibox-ui-hide-steady-state-url-scheme-and-subdomains
    DISABLED

    this undid a lot of the damage they did.

    hopefully these flags stick around

  4. Dubifty said on July 20, 2018 at 1:26 am
    Reply

    I created a YouTube tutorial on how to get the new design :)
    https://www.youtube.com/watch?v=SDmUNDP4Tgg

  5. Lord Lestat said on April 26, 2018 at 11:54 am
    Reply

    Now that is irony….

    If Firefox developers are allowed to shamelessly steal and copy, Google Chrome dev team does have the right too.

    So the Firefox crowd is to be forced to swallow their own medicine

    Must suck to accept that ;)

  6. Anonymous said on April 25, 2018 at 12:44 am
    Reply

    Clearly I’m missing something because I’ve changed to refresh and relaunched twice and it still looks the same?

  7. Anonymous said on April 24, 2018 at 7:46 pm
    Reply

    I don’t understand what’s “Material Design” about this redesign. All the parts that are faithful to Material Design, have been like that before.
    The rounded tabs and address bar completely break with the straight edges of Material Design.
    And the near-invisible new-tab-button completely breaks with the really prominent, generally layered above buttons in Material Design.

    Like, I get it, the new-tab-button looks kind of awkward there, you don’t want it to be the focus of the eye.
    And triangular tabs are not Material Design either, which they couldn’t make rectangular along with the address bar, as they then might’ve actually gotten a copyright notice from Mozilla.

    But you know, just don’t call it Material Design then.

  8. Steve said on April 24, 2018 at 7:28 pm
    Reply

    Doesn’t do anything for me on Mac High Sierra, Canary Version 68.0.3405.0

    I change the setting and it still looks the same.

  9. Kubrick said on April 24, 2018 at 5:15 pm
    Reply

    Ironic really that the so-called “inferior” browsers offer all this customisation and more without all the hassle.
    With chrome its take it or leave it and we google decide how a browser should look.
    Number one browser in the world and it cannot even offer the user such a simple choice.
    Sorry state of affairs indeed.

    Browser interface contains tabs,URLbar and this is unlikely to change.

  10. nttee said on April 24, 2018 at 1:14 pm
    Reply

    It looks convincing. Ok, I’ll install it and use it sometime to reminisce about the old Firefox.

  11. Anowar hussain said on April 24, 2018 at 11:13 am
    Reply

    Great

  12. Anonymous said on April 24, 2018 at 3:50 am
    Reply

    Let’s play a game: which browser am I using?

  13. yourkindaintwelcomeroundhereboy said on April 23, 2018 at 10:48 pm
    Reply

    We are literally going full circle.

  14. Darren said on April 23, 2018 at 9:50 pm
    Reply

    Firefox and Vivaldi. Best duo since Electra Woman and Dyna Girl.

  15. Anonymous said on April 23, 2018 at 8:35 pm
    Reply

    Great. Now you can’t tell which one is Chrome and which one is Firefox. In the future all web browsers will have the same interfaces.

  16. Anonymous said on April 23, 2018 at 7:01 pm
    Reply

    Looks awkward since the rounded interface in the experimental UI contrasts heavily with Windows 10 and other Windows versions (where the interface is more sharp)

    Also, compared to the softer light gray on Chrome’s current UI, the whiteness used after enabling Canary’s experimental flag is quite blinding and less easier on the eyes, especially during nighttime browsing.

    Finally the borders of the tabs should be more slanted. A curve followed by a vertical line downwards followed by another curve doesn’t really look natural. A curve followed by a slope followed by another curve would look a lot better.

  17. Remus said on April 23, 2018 at 3:32 pm
    Reply

    Should “Chrome is just a Firefox clone” then be the new motto of people who pass judgement on first glance ?

    I like the light coloured tabs on dark background concept. Other than that, I prefer Firefox’s default theme (Photon), but that’s just personal tastes. I actually removed the tabs bar on Firefox, so nice light tabs on dark background I don’t even get to see and my “Photon” UI doesn’t look anything like the default one. I’d argue it looks less good, but it’s superior in all other ways for my needs and doesn’t look half bad at all, so I don’t care.

    1. Remus said on April 23, 2018 at 3:35 pm
      Reply

      Also I prefer the old Chrome tab shape than these oddly curved ones, but that’s again personal tastes and since I’m not using Chrome until hell freezes over, my opinion doesn’t matter.

  18. Richard Allen said on April 23, 2018 at 3:17 pm
    Reply

    I like the new design but don’t really care for the profile button wasting space in the address bar. Since I only sign into Chrome Sync once every month or two I would like to be able to hide it in the Chrome menu. And when is the empty space above the tabs going to be removed if the browser window is not maximized?

    In Chrome Dev, if using the flag, the new UI layout can be enabled in the address bar but the tabs and new tab button still have the old UI.
    “https://s17.postimg.cc/4s6voiujz/UI_Layout_in_Chrome_Dev.png”

  19. Yuliya said on April 23, 2018 at 3:09 pm
    Reply

    I get something that’s in between your screenshot and older look. It’s pretty much the new look with older style tabs: imgur.com/a/H1rK9eb
    Ugly regardless. That rounded address bar looks horrible. And the tolbar instead of being gray it is now white. As if the previous UI wasn’t bright enough. This is also coming to Android Chromium, btw.

    1. Richard Allen said on April 23, 2018 at 3:26 pm
      Reply

      I just installed the theme I use in Chrome Stable into Dev and it’s more better!
      “https://chrome.google.com/webstore/detail/silver-carbon-aero-theme/apjkmgldmoagjjjjfmhlahffiofpcipo”

      Screenshot:
      “https://s17.postimg.cc/to0bbsz5r/Partial_New_UI_with_theme.png”

  20. Stevey said on April 23, 2018 at 2:35 pm
    Reply

    Google are just messing with Mozilla’s heads now haha.

    1. yourkindaintwelcomeroundhereboy said on April 23, 2018 at 10:46 pm
      Reply

      Alpha male google developers stepping on toes.

  21. MdN said on April 23, 2018 at 1:33 pm
    Reply

    Looks like Opera before the redesign.

  22. Denizhan said on April 23, 2018 at 1:03 pm
    Reply

    even martin uses ublock for ghacks :( also new chrome style kinda sucks. you cant even see new tab icon.

    1. Martin Brinkmann said on April 23, 2018 at 1:19 pm
      Reply

      Just in Chrome Canary and just for that screenshot ;) I don’t use the browser that often.

  23. Ben said on April 23, 2018 at 1:00 pm
    Reply

    The probably should write “Chrome” somewhere in the corner or so.
    You could have told me it was FF and I would not have bat an eye.

  24. dog said on April 23, 2018 at 12:31 pm
    Reply

    It looks nice. I never liked the material design..it looks tacky like a cheaply made webpage kind of look. But the difference is that this is a webbrowser not a webpage.

    1. Anonymous said on April 23, 2018 at 7:55 pm
      Reply

      I’m also not a fan of this kind of design but I ended up enabling most of the material design features in chrome://flags. I did this because I want to get used to Chrome’s material design now rather than get frustrated later on when Google officially rolls out these changes to users.

      1. John Fenderson said on April 23, 2018 at 9:41 pm
        Reply

        That makes sense if you’re intending to continue using Google software. Personally, I don’t use much of Google’s offerings anymore, so my exposure to their design aesthetic is limited. Fortunately.

    2. John Fenderson said on April 23, 2018 at 7:16 pm
      Reply

      I don’t think it looks nice to begin with, but I agree that it’s also made worse by the “material design” aesthetic.

  25. Johnny said on April 23, 2018 at 11:40 am
    Reply

    Finally chrome catches up to firefox’s Australis, a few more years and maybe they catch up to Quantum…

  26. Jessica said on April 23, 2018 at 11:28 am
    Reply

    Chrome has some nice improvements security-wise that Firefox still doesn’t have but Firefox has always been where the fun is at, even UI-wise. Australis was cool and this sounds like an ugly bootleg.

    1. Lord Lestat said on April 26, 2018 at 11:51 am
      Reply

      @Jessica ….Does the Mozilla representative or Mozilla developer say.

      So, how does it feel Jessica now where the Chrome developers also get inspired by an element in Firefox and not the other way round this time?

      If Firefox developers are allowed to shamelessly steal and copy, Google does have the right too.

      Must hurt to be pwned by Google :D

      Must hurt a lot?

    2. Anonymous said on April 24, 2018 at 7:28 pm
      Reply

      What security improvements are you talking about?

    3. JessicaJ said on April 23, 2018 at 4:13 pm
      Reply

      Hey Jessica, security-wise improvements aren’t all of the picture, you should remember that Chrome is the most used browser so black hats target it more than anything else – even if there’s no doubt that their sandboxing work is pretty good compared to other browsers (but Firefox is catching up and even using MEMORY SAFE Rust for some parts of their engines – Stylo and WebRender and …).

  27. Weilan said on April 23, 2018 at 11:21 am
    Reply

    I can’t say it looks good at all. But I guess I will have to roll with it when it’s officially released. Of course it’s possible that they will make adjustments before the final version. After all, since its launch, Chrome’s UI hasn’t evolved that much, the changes are so subtle that many non-tech-savvy users probably haven’t even noticed them.

  28. jupe said on April 23, 2018 at 10:02 am
    Reply

    And people say Mozilla copies Chrome with the Firefox UI…..

    1. Lord Lestat said on April 26, 2018 at 11:56 am
      Reply

      Maybe Google has been thinking it would be only fair if for once they are the ones to rip of stuff from the competition. Is only fair.

    2. Weilan said on April 23, 2018 at 11:27 am
      Reply

      It’s not the tab shape that matters, it’s that Chrome was the progenitor of putting tabs on top and everyone copied it.

      Of course everyone made their own tabs:

      Chrome’s were like real folders
      Firefox’ original ones were rectangles without the last pixel that gave them a slightly curved look
      Opera 13 started with tabs similar to the original ones of Firefox, but slightly more curved
      Edge is just all about ugly blocks an squares and … ughleh

      1. Redsandro said on July 17, 2018 at 2:23 pm
        Reply

        Actually Opera, back when it was still Norwegian and innovative, invented tabbed browsing.

        https://www.google.com/search?safe=off&biw=1423&bih=674&tbs=cdr%3A1%2Ccd_max%3A12%2F31%2F2008&tbm=isch&sa=1&ei=2N5NW8aBDcTKwAKWkLLoDg&q=opera+tabs&oq=opera+tabs&gs_l=img.3..0j0i24k1l6.23078.23964.0.24312.10.9.0.0.0.0.116.698.7j2.9.0….0…1c.1.64.img..1.9.696…35i39k1j0i67k1j0i30k1j0i8i30k1.0.bJzIpj5YVtE#imgrc=0Patd_a58RZ7LM:

      2. Jessica said on April 23, 2018 at 11:32 am
        Reply

        Tabs on top precede Chrome if you ignore the standard OS title bar and menu bar widgets.

      3. Weilan said on April 23, 2018 at 12:28 pm
        Reply

        @Jessica I personally looked it up:

        https://www.google.com/search?q=tabs+on+top&biw=1366&bih=633&source=lnt&tbs=cdr%3A1%2Ccd_min%3A%2Ccd_max%3A12%2F31%2F2008&tbm=isch#imgrc=HlIEOzEv4CTKYM:

        This is a custom search set to show only results prior December 31 2008, about the time before Chrome showed up.

        While it’s true that the concept had existed long before Chrome, I’m pretty sure Chrome was the first browser to implement this feature and frankly it’s a very good one. For one, it allows you to click on tabs by dragging the cursor to the top edge of the screen while still keeping your focus in the middle of the screen and not having to look away. Whereas on Firefox 3.6 and prior, you had to focus your eyes on the tabs so you make sure you click on them on the first try.

        Also from design philosophy tabs on top looks like the tab contains the address bar and the page content inside itself, whereas if tabs are below the address bar, it feels as if the address bar is absolute and it adapts to tabs when being switched. Hard to explain really, but tabs on top is the way to go.

      4. John Fenderson said on April 23, 2018 at 7:13 pm
        Reply

        What do you mean by “tabs on top”? Do you mean the tabs are above the page contents? That was common before Chrome existed.

        Do you mean the tabs are on top of the title bar? Well, then, I know who to blame for that bit of nastiness.

      5. Finvana said on April 23, 2018 at 3:14 pm
        Reply

        I don’t agree. The address bar right now shares horizontal space with navigation buttons, add-on and user icons that are no directly related to the page in any fashion so there is not a single reason for them to be below the tabs. This way looks that every tab has its own set of icons wasting resources they shouldn’t.

  29. Sebas said on April 23, 2018 at 9:51 am
    Reply

    Nothing exiting to see. No improvement of the bookmark manager?

    1. beergas said on April 25, 2018 at 8:53 am
      Reply

      That’s my first, fast take too. Too busy to run around messing with meh.

    2. Mnemnic said on April 23, 2018 at 11:10 pm
      Reply
      1. ge0h said on April 26, 2018 at 7:02 pm
        Reply

        Thanks they look great!

  30. Anon#657653 said on April 23, 2018 at 8:24 am
    Reply

    Mozilla called and wants the australis interface back.

    1. Lord Lestat said on April 26, 2018 at 5:03 pm
      Reply

      haha.. yeah. And all the simplicity and minimalism lovers and haters of customization – who never ever had an issue with Mozilla adopting Chrome elements for themselves – are now complaining because Google is “ripping and stealing now” :D

Leave a Reply

Check the box to consent to your data being stored in line with the guidelines set out in our privacy policy

We love comments and welcome thoughtful and civilized discussion. Rudeness and personal attacks will not be tolerated. Please stay on-topic.
Please note that your comment may not appear immediately after you post it.