Redesigning Chrome Desktop

From an engineering perspective Chrome is spread across 4 Frameworks/Codebases: views, cocoa on Macos, Java for Android, and Obj-C/Swift for iOS.

To keep our sanity and to enable better long term asset management, we try to share as much design resources as possible across platforms. For example Windows, Chrome OS and Mac share a lot of common visuals. 

If you launch Chrome on an iPad or an Android tablet, they will look very similar.

To do so, we needed two things: 

• Regular mode was initially going to be deployed on the overwhelmingly largest portion of our user base.
• A way to create, export and implement our assets that would gracefully scale in the broad layout type and PPI landscape of desktop. 

• Bring the new tab shapes to life on desktop 
• Bring a new set of icons, derived from MD using desktop sizes 
• Align and simplify our color palette and our theming system. Bonus: Bring the new “dark” incognito to desktop 
• Start the revamp of secondary UI elements such as buttons, toolbars, bubbles, etc… 
• Create a more touchable version of Chrome for convertible devices 
• Come up with a set of rules for Third party OS consistency 
• Implement MD motion when possible 

The native frame on windows is taller than its Chrome OS and Mac OS counterparts.

It makes the frame easier to click and grab at the cost of a bigger footprint. 

To achieve balance, we split the UI in half: tabs+ Window frame/ Toolbar. Tabs are 28pt, equal to the Omnibox height. We leave an 8pt top padding between the tabs and the top of the frame.

We used 16X16pt based icons to match our new normal and hybrid UI. We reduced the container from 24pt to 16pt and added some flexibility around the initial internal padding: 2pt change to 1pt to 2pt depending on the icon. 

We also made the icon line weight slightly thinner (2Px on 100% and 3Px one 200% from the initial 2Px in 100% and 4Px in 200%) this way, they are more elegant and balanced within our UI.

In normal mode, we went for 28X28pt touch targets, holding 16X16pt icons. While icons kept their 28X28pt touch targets, we increased their surrounding margin to 8pt, giving the UI more space and reducing user touch errors. 

We use 16X16pt iconography throughout. This minimizes the amount of design asset requiring maintenance, making long term scalability as well as feature iteration. Easier to maintain.

There are two tenants to our omnibox and dropdown layout design:

• Give a strong emphasis on security states.
• Fast access to the information or URL you need to go to.

The Core UI is formed of three key elements: 

• The frame, created by the OS itself, changing on a per platform basis 
• The Active tab and toolbar. Which includes the selected tab attached to the ommibox and controls 
• The inactive tab(s). 

• Hover state 
• Active state 
• Single click/tap (onClick-release) 
• Single click/tap to active 
• Long click/tap to active 

After the completion of the Implementation-Ready Specs and Mocks for the core UI, I dabbled a bit in chrome’s secondary UI.

 We include in that category every chrome element not directly visible such as menus, Dialogs, bubbles, buttons, Info-Bars, Find-In-Page and Download shelf.

As a closing note, I’d like to share some of the lessons I learned during this project as well as some release reaction, both internal and external, hoping that these will be helpful to you, in your projects.

Programmatic rendering and motion design were crucial in getting the design right. 

If you are lucky enough to be working with motivated and engaged engineer, you might realize that they can sometimes be a better designer than you.

In the present case, they were involved right away and were an integral of the design and conception process. 

Engineers' motivation to deliver better design through better engineering solution made the product what it is today. 

Maintaining constant communication was key to bring the right design to life. 

Delivering extremely precise spec work is necessary, however, in some cases, leaving your preliminary work open for feedback and new ideas can bring your design to another level. 

As long as your end design stays true to its original goal or intent, let others enter your process and improve on your design. 

I won’t lie, I do not have the miracle solution to it but there are things that you can do to minimize change aversion:

• Always have a deck ready to explain your vision to your audience.
• Stay the course. It is very beneficial to strongly believe in the choices you made. Don’t get stubborn but stay confident.
• Be prepared to back up your design decisions with facts, studies or past experiences. If you cannot answer back, you might find that their feedback is worth considering.
• The bigger the product, the longer it might take.

The biggest improvements brought by this redesign project are under the hood. Finding satisfaction in your work and the result through your own eyes is more important than seeking validation through others. 

If you are truly and honestly satisfied with what you have done. You’re good.