Visual language of the new Google web menu

Orde Saunders' avatarPublished: by Orde Saunders

Google are rolling out a change to the UI of their products menu which brings some of the Android visual language to the web.

The old UI has the user information on the right and a bar across the top of the screen with access to a selection of products as shown below:

Old Google web UI

[The above image has been altered to reduce the horizontal whitespace.]

The new UI recesses the products menu behind an icon as shown below:

New Google web UI

This new UI borrows heavily from the Android design language, menus on Android use squares as their visual key and the application icons are identical or very similar. Shown below is an Android home screen set up with the same icons as the web UI which highlights the similarities in visual language.

Android home screen with Google apps


Brian Rieger pointed out that Chrome OS has a similar menu:

Chrome OS launcher