Problems with new Google app logos

If we look at them from a different angle, it becomes clear why many people do not like the new logos: they should be treated as icons because that s how we use them most of the time… For example, to quickly find the desired browser tab. Unfortunately, they do not meet the fundamental requirements for good (usable) icon design:

The main purpose of an icon is to quickly convey a concept. – 7 principles of icon design

When it comes to a set of icons that are often used together with each other, then differences between them are critical!

How to create great icons?

Let s take a closer look at why the new icons do not serve their purpose and what we can do about it. We have several tools at our disposal to create unique icons for each application:

• Shape and proportion
• Colors
• Familiar concepts
• Visual style

We still want all icons to reflect the Google brand, so they should have a consistent visual style… However, we must not lose sight of their main purpose. If the style cannot be changed, we need to create a clear distinction in the other characteristics of the icon: the form or Colour… This is extremely important, because such icons will most likely be used in close proximity to each other!

Below is an attempt neat optimizationwhile trying to preserve the new style of Google icons as much as possible:

At first glance, they look relatively similar (there is an even bolder version at the end of this article!), But let s see how changing small details can lead to important usability improvements:

The form

As pointed out in one of the tweets above, all of the icons mostly look like hollow squares, making it nearly impossible to distinguish in shape.

I tried to make minimal adjustments to the aspect ratio of each app s logo to make them more distinct, while still maintaining the Google style: thick outlines with negative space in the middle:

These are small but noticeable changes, especially in common use cases such as browser tabs where the icon size is very small.

Colour

The easiest way to see how different the colors of the icons are, is to blur them so that the dominant color is visible. Not surprisingly, apart from the logo Gmail, all icons turn into indistinguishable rainbow soup.

I tried to give the logo of each application a different color, while maintaining the corporate “rainbow” Google. I tried:

• return the main green color to the logo Meets,
• basic blue with a red accent (more on this below) for the logo Calendar,
• leave only application icons colorful Disk and Documents… They are essentially the same application and the application icon Documents never used on browser tabs, so I found it prudent to make them look similar:

Compare them to Microsoft s app icons, which are easy to recognize by color but have a consistent branding look:

Familiar concepts

Design does not appear from scratch. We use hundreds, if not thousands of apps and physical items every day. For icons to be instantly recognizable, they must borrow familiar concepts.

Let s take a look at the new app icon The calendar: it is just a square, which – with the exception of the number in the center – has no visual resemblance to an actual calendar. To make matters worse, it is very different from the old logo that users are familiar with in both shape and color.

Here s an attempt to make the new icon more meaningful while adhering to Google s new style:

The cause of the problem is a very strict design system

After spending time trying to create user-friendly icon designs within the Google framework, I realized that it was too limited for this purpose. Icons are often used in small sizes. For example, only 16 x 16 pt in case of an icon in a browser. Therefore, the icon design system should leave enough flexibility to create clearly recognizable icons that differ in at least one of the categories listed above. Let s take a look at the problems with Google s approach:

Problem 1: uses all colors at once

Most brands use colors to differentiate their apps. Each application receives one primary color. Google is missing out on this opportunity by forcing every use icon everything primary colors. It s almost impossible to personalize icons when they turn into rainbows.

Google could fix this by improving the color distribution by assigning a foreground color to each app, which should be about 80% of the icon s colors.

Problem 2: always uses outlines

Each icon should be created using thick lines, and they should all have negative space in the middle. How many shapes can you create in the limited space of an icon using this approach? You will always end up with something square or round. Little variety.

Google may be able to fix this by adding more variation in stroke width, applying sharper shapes (as seen in the icon Gmail), creating a finer mesh for better color distribution, etc.

The crux of the problem: brand is more important than usability

Icon design system is designed so that users can easily distinguish any application Google from someone else s application. It is not intended to differentiate between different applications. Google…

I think this is the wrong approach. Usually, users prefer one provider. Google users will primarily use Google tools, so it is important to distinguish between Google applications and not distinguish them from, say, Microsoft Office applications.

Such a mistake is not typical of Google, which usually puts usability above everything else (besides profit?). It goes so far that even the shades of colors are tested and not chosen by the designer. Therefore, it is extremely surprising that Google did not test this solution and did not find problems with new icons before their release.

Even more problems: frame within frame

Unfortunately, there are even more problems with the new icons. Google is very conservative in placing its app logos on iOS: within the Apple frame, Google creates a huge protective zone around its icons, instead of taking full advantage of the available space. This often results in Google icons becoming unrecognizable. Just take a look at the icon Calendar in the notification:

Let s get more creative

I couldn t help but experiment a little more, showing more freedom with Google s new icon style:

• I have tried to give each application a distinctly dominant color.
• I wanted to create icons that are more recognizable in small sizes.

So here s a third, bolder option:

Key findings

• When designing “logos” it is important to understand their context. App package logos Google Workplace are mostly used as icons rather than brand logos, so they should be designed with usability in mind.
• Icons that are used together with each other must have clearly visible shapes and one dominant color for each icon.

I wonder what you think of the new Google icons and my quick attempt at optimizing them!