Sitemap
Google Design

Stories by Googlers on the people, product, and practice of UX at Google. For editorial content and more visit design.google

Redesigning Chrome Desktop

31 min readSep 22, 2016

--

A bit of background

Timing and planning

The 1st Chromebook Pixel (2013) with its high resolution touch-screen
The first Microsoft surface and the Windows 8 “Metro mode”.

Adapting to an upcoming and growing device category: hybrids

The new Chrome MD on tablet

The Hybrid layout type

Chrome for Android and Chrome for iOS 9 (MD)
Chrome for Android tablet (MD)
Chrome for iPad (MD)

New layout type, new process

Visual consistency and design details

General layout and UI footprint

Iconography

Touch targets and layout

Omnibox, results dropdown and security indicators

Colors and accessibility

Normal Core UI coloring on macOS, Windows and Chrome OS.
Chrome macOS in 200% and 100%. Both strokes have a 1px weight.

Motion

What’s next

Preview of the new info-bar, using now deprecated buttons.
The new download shelf, available on Windows.
The new “History” inner page
The new “downloads” inner page

Lessons learned and initial release feedback

1. Engineers are great designers

2. Involve engineers early

3. Know when to be precise, learn when to be loose

4. Beware of change aversion

5. Manage your expectation

Closing notes

--

--

Google Design
Google Design

Published in Google Design

Stories by Googlers on the people, product, and practice of UX at Google. For editorial content and more visit design.google

Sebastien Gabriel
Sebastien Gabriel

Written by Sebastien Gabriel

Designer at Google. Chrome browser, Chrome OS and Android.

Responses (80)