Google Chrome for iOS: Material Redesign

Doney den Ouden
Aug 8, 2014 · 4 min read

When Google announced its new Material Design language at I/O 2014, I was pretty excited. The use of colour, subtle shadows, playful icons and joyful animations make it a great next chapter in Google’s design strategy.

As a full-time iPhone user, I was glad to hear that Material Design wasn’t reserved just for Android— the new design language will find its way across everything Google on every platform — so I immediately started thinking how Google might apply it to their iOS apps.

To get acquainted with Material Design, I started redesigning a couple of screens from Chrome for iOS, and I liked the result. Normally I might post a redesign to my Dribbble, but since these aren't just visual changes, I decided to write a little piece explaining some of the design decisions I made.

You can see the old designs on the left, and the redesign on the right. Enjoy!

First up is the navigation bar. I changed its dimensions and icons to be in accordance with the Material Design guidelines (like most of the visual changes you'll see). The menu button is now on the right for that reason as well. The UI font has been changed to Roboto.

The status bar has its own colour too. With Material Design this is normally a darker shade of the navigation bar colour, but I found the grey a bit dull.

This is why I picked a more blueish grey from the Material Design colour palette, which also makes the now white statusbar content clearly readable. It also fits well with the iOS keyboard colour. The result is a lot cleaner.

Tapping the menu button now opens a Material Design menu — which is regarded as a piece of paper over the navigation bar — instead of a popover.

An addition I made is the Share button. Instead of a menu item somewhere on the bottom that opens a list of Google-implemented sharing services, this button would bring up the native iOS share sheet. Just in time for iOS 8 and its sharing extensions, I’d say.

Tapping the Tabs button opens the Tabs view. Again, a darker statusbar, updated icons. The tab cards are now designed like the Android L multitasking cards. They would have a slight parallax motion effect like Safari and would be easier to swipe away (this is currently a pain).

I made some UX improvements here too: the New Tab button is now a floating Promoted Action button in the bottom right corner. This makes room for a Google search/address bar on top, making the navigation experience faster and more consistent. (Voice) search is now just one tap away instead of two.

Finally, tapping the floating New Tab button will open the New Tab screen, which would animate in from the bottom as a new card, similar to Safari.

This is the most radical redesign, because in my opinion, this screen is a mess in the current Chrome. The navigation bar and tab bar are now unified on top, and the two address/search fields are now one field. You can immediately start typing, or use the tab bar to find what you’re looking for.

The Top Sites tab is currently pretty useless and the thumbnails are always out of date anyway, so they’ve been replaced with big icons, making everything a lot more glanceable and therefore more useful.

The second tab features a list of your browsing history (currently found at the bottom of the Top Sites tab?). The third tab features your bookmarks, and the fourth tab shows the tabs open on your other devices. Again, a lot more clear if you ask me.

Thanks for watching! If you liked these concepts, please consider hitting the Recommend button below. You can also follow me on Twitter and Dribbble for more design goodness.

    Doney den Ouden

    Written by

    Let's redesign society.