Material design new tab

  -  
It"s been a few years now since Google gave Chrome one of its biggest makeovers to date — a perfect treat (for most) to celebrate the browser"s first decade. Its Material makeover ditched the trapezoidal shapes and drab gray for a modern, rounded look that"s more in line with Google"s updated design system. However, the lack of theming in Chrome"s system pages (settings and bookmarks, for example) is a testament to the absence of consistency in Google"s implementation of Material Design. But with an upcoming change, it seems like the company finally wants to apply its attractive design language to Chrome in a consistent manner.

Bạn đang xem: Material design new tab


We"ve been tracking Google"s efforts to redesign Chrome"s various system pages since July, and over time, more details have emerged about how developers will implement it. The revamp is part of a broader WebUI update — a term that loosely describes parts of Chrome"s interface that uses web technologies such as HTML and JavaScript. We recently unearthed a commit over at the Chromium Gerrit that adds styling updates to Chrome"s preferences, bookmarks, downloads, extensions, and history; with a new flag in Chrome and Chrome OS 93 Beta, you"ll be able to preview the updated look. Copy and paste the following URL (in bold) into Chrome"s address bar, and switch its toggle to Enabled:


chrome:flags#webui-branding-update

Changes various UI components in WebUI pages to have a more modern look.–Mac, Windows, Linux, Chrome OS


You"ll need to restart the browser to apply the changes, so make sure you"ve saved your work before doing so. When the browser relaunches, you should be able to see the new styling updates by visiting the aforementioned pages. Here"s a quick preview of the changes:


Chrome settings



Left: Old Chrome settings; Right: New Chrome settings

Whether changing Chrome"s appearance or managing search engine, Chrome settings offer plentiful customizations to tailor it to your needs. The redesigned settings page looks strikingly similar to the system preferences found on Chrome OS — it abandons the Material blue toolbar and light gray background for solid white. There"s a Chrome icon right next to the larger "Settings" header on the toolbar, and the search bar is more rounded to better fit with Google"s updated Material guidelines. The new design looks more modern and contrasty — but it could definitely be too bright for some.



Left: Old dark themed Chrome settings; Right: New dark themed Chrome settings

The old and new UI look largely the same when using Chrome with a dark theme. You will find some differences, though, like the updated header and rounded search bar in the toolbar. Settings is the only system page that gets refreshed like this using Chrome 93 — you"ll need to use 94 or later to see it applied in more places.


Left: Old Chrome bookmarks; Right: New Chrome bookmarks

It can be a hassle to remember the name of webpages or type them up manually into Google. With Chrome"s bookmark manager, you can quickly save a shortcut of your favorite websites and navigate to them in just seconds. It"s getting a fresh coat of Material (white) paint, too — its toolbar gains a Chrome logo and a bold header, and swaps the light gray background with for a white one.


Left: Old dark themed Chrome settings; Right: New dark themed Chrome settings

The bookmarks manager looks similar to the old design when set to dark mode: same dark hues, card layout, and accent color. The main differences can be found in its toolbar — you"ll see a new Chrome logo, larger header, and a rounded search bar. The updated design is definitely a nice touch, but the ancient-looking bookmark folder icons could sorely use a revamp.


Left: Old History UI; Right: New History UI

Chrome automatically records the webpages you"ve visited, including names and dates. You"ll be able to access a list of your recently visited websites directly from Chrome, where you"ll find a (now) much brighter history manager.

Xem thêm: Clip Đầu Tiên: Ảnh Chế Trào Lưu Nam Lấy Tao Khẩu Ak Meme Facebook


Left: Old dark themed History UI; Right: New dark themed History UI

Our redesign story continues with Chrome history. It sticks with the trend of applying white everywhere (or gray if dark mode is flipped on), updating the toolbar and rounding corners to make it look cleaner and easier to see thanks to the higher contrast.


Left: Old Download UI; Right: New Download UI

Like recording your recently visited webpages, Chrome can also keep track of your downloaded files so you won"t have to go hunting for them on your PC. With the flag turned on, its download page ditches the blue hues for white, again using rounded search bar corners and a tweaked header.


Left: Old dark themed Download UI; Right: New dark themed Download UI

Much like the other system pages, dark mode looks similar to the old design — the key differences can be found in the toolbar.


Left: Old Extensions UI; Right: New Extensions UI

Extensions add even more capabilities into Chrome — whether integrating a screen recorder or a note-taking app right into the browser. You"ll be able to manage your plugins directly from Chrome, which should soon get a Material makeover. Carrying over the new design from Chrome"s other system pages, Extensions is completely white (or gray if you"re using dark mode), using a larger header and rounded search bar to improve its visibility.


Left: Old dark Extensions UI; Right: New dark Extensions UI

Google has struggled to implement Material Design across its products for a long time, but these UI changes prove it hasn"t given up. The iconography in the bookmarks manager looks dated and there are some styling issues here and there — that"s to be expected since it"s still in development. But in broad strokes, these are all steps in the right direction to make system pages look consistent with the rest of Chrome"s interface — and I"m all for it.

Xem thêm: Hướng Dẫn Cài Đặt Phần Mềm Gcafe Plus, Hướng Dẫn Cài Đặt Phần Mềm Tính Tiền Gcafe Plus


Coffee snob, student, and designer. Writes for ahtq.vn. If you look hard enough, you might find him inside a chicken coop.