Reviewing Gmail’s Recent Redesign

So, Google finally revamped its Gmail interface (to read more on it and get it for yourself, check this article by The Verge).

And while it’s tons and tons better than the old interface, it’s also kind of … white?

I have no idea why, but it seems to be an unspoken rule of UI design in 2018 to redesign your app to be completely white with as minimal color as possible and only use white-space as divider between important elements of your interface.

It’s not only that I’m totally not a fan of this, I find all-white UIs pretty bland and unexciting, but it’s actually harder (for my eyes at least) to scan an interface for the actually important stuff (subject line, message, sender of the mail) if the interface is just white a background with black text on it.

So I went ahead and refined the new interface, and here is how it looks in comparison:

Inbox overview (Google’s Redesign left, my refinement of it right)

A major change here is the big red bar on the top, which definitely brings some color (and fun!) back into the interface and makes it a typical Google interface for me.

Here is how the conversation view looks:

Mail conversation (from me to myself), Google’s Redesign left, my refinements right

The conversation view is actually where my biggest gripes with the redesign were; it was just a sea of white with black text and some odd padding issues between the elements.

I decided to make the subject line bigger and give it a slightly different background color to distinguish it from the mail’s actual content. The action buttons above the subject line also get more space, which is makes them easier to click.

One thing I especially liked on Google’s redesign, is the slide-out menu on the left. But even there, I found the buttons to be too close to each other. I thought that it would look better if the “Compose” button would be stretched over the full width of the panel and actually turn red when hovering with the mouse over it (it actually even does a nice little animation in my version):

Slide-out panel with compose button, Google’s redesign left, my refinement right

So if you are now thinking “Ok nice, but how do I get your version?”, I got you covered: First install this Chrome extension here (there are probably similar extensions for your browser if you’re using something else).

Then head over to the GitHub Gist I created and copy all the CSS text you see on there. Then open Gmail, click the Styler icon on the Chrome toolbar and paste the text you copied into the upper box (where it says “CSS”). Done.

Paste the CSS code here to get my version of the new Gmail interface.

Thanks for reading, comments and questions always appreciated.