Google launches experimental Material Design interface in Chrome

The most recent version of Chrome Dev, and probably other versions of the official Google browser as well, have received updates recently that introduce options to switch the interface to Material Design.

The feature is experimental at the time of writing, but it seems likely that Google will make the design the official one for Chrome in the future by switching to it permanently.

If you want to know more about material design, I suggest you check out Google's introduction to it. The company states:

We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science.

Material Design Interface in Chrome

As mentioned earlier, the new designs are not enabled by default. Google added several experimental flags to Chrome's flags page that need to be activated before the new interface design becomes available.

There are five experimental flags that you can enable independently. They enable Material Design for the Chrome header (tabs and address bar area), and the pages History, Extensions, Downloads, and Policy Page.

Here is what needs to be done:

1. oad chrome://flags/#secondary-ui-md and switch it to enabled.
2. Load chrome://flags/#enable-md-bookmarks to change the design of the bookmarks to Material Design.
3. Load chrome://flags/#enable-md-history in Chrome's address bar and enable the option with a click on the link underneath it (If enabled, the chrome://history/ URL loads the Material Design history page).
4. Load chrome://flags/#enable-md-settings and set it to enabled to turn on material design for Chrome's settings page.
5. Load chrome://flags/#enable-md-extensions in Chrome's address bar and hit enable to activate it (If enabled, the chrome://extensions/ URL loads the Material Design extensions page).
6. Load chrome://flags/#enable-md-policy-page in the address bar and click on enabled to activate the feature (If enabled, the chrome://md-policy URL loads the Material Design policy page).
7. Load chrome://flags/#enable-md-feedback and set it to enable.
8. Load chrome://flags/#enable-md-downloads in Chrome's address bar and select enabled from the pulldown menu (If enabled, the chrome://downloads/ URL loads the Material Design downloads page).
9. Load chrome://flags/#top-chrome-md in the address bar of the Chrome browser and select Material from the pulldown menu (Sets the material design elements in the browser's top chrome).
10. Load chrome://flags/#enable-material-design-user-manager and set it to enabled, to enable material design for the user manager.
11. Load chrome://flags/#show-material-design-user-menu and set it to enabled to turn on material design for the user menu.
12. Click "relaunch the browser" to restart Chrome and apply the changes.

You can undo the change at any time by resetting the values of the experimental flags. Usually, this involves clicking on the disabled link or selecting disabled from the menu.

Update: Please note that Google enabled material design for some browser elements already. You may use the experimental flags to disable the new design. It seems likely however that Google will remove those flags eventually from the browser.

Update 2: Google removed some of the options to switch back to the classic Chrome design. Material Design is now part of the browser and no longer experimental.

Advertisement