Google’s Own Icons Don’t Follow Their Own Guidelines

Some of you might have seen a new blog post from the Android team, which have been, on the whole, doing great work, what with the Android N developer preview out and Android development as a whole really hitting its stride. Just yesterday another announcement was made: the new Google Play app icons.

 

google_play_icons_blogpost

Most people have said they look quite good, and I would agree on the most part. It sets apart the Play Store apps from the rest of the stock Google ones (which is not a good thing, I’ll explain later), and the new Play Music logo hopefully hints towards an app update. Which would be amazing, considering how awful the whole Play Music system is.

But there’s a small problem. Although these new icons look nice, they don’t follow Google’s own guidelines. Specifically, the guidelines outlined here. Google has created a massive library of guidelines, including loads of information on making icons, in this case “Product Icons” specifically. And they’ve ignored almost every rule in the book.

 

One of the first things that Google talks about is the ability to make the icon out of paper. You should be able to create a physical mock up of the final product. They show this with the Gmail logo, describing the four stages of converting a physical prototype to a final “colour study”: the physical prototype (a mockup using paper), the lighting study (examining how lighting affects the physical prototype), the material prototype (converting the physical prototype into a design on the computer, complete with the lighting effects observed earlier, and finally a colour study, adding the final colours to the material design icon.

Physical Prototype

Physical Prototype

Lighting Study

Lighting Study

Material Prototype

Material Prototype

Colour Study

Colour Study

As we can see above, the gmail logo translates from a physical prototype to a final icon quite well. The idea is this process can be applied behind every single icon, so that one can relate to the icons they’re seeing with physical objects in their mind. Unfortunately, this doesn’t work with the current icon set. The way the objects are layered means it would be very difficult to create a paper or cardboard prototype, especially with the lighting that is shown on the icons (remember that the lighting comes from the physical prototype, if the paper version is unable to reproduce the same lighting effects that you want then you haven’t created a proper physical prototype, or your icon doesn’t follow the guidelines).

Next, Google provided a grid that all icons should align to. It contains various squares and rectangles which should provide a guideline to the geometric shapes that are used in the icon design (“establish a clear set of rules for the positioning of graphic elements.”). This is all great, but the grid obviously doesn’t align with the icons themselves. Unfortunately, the icons that have been provided in the preview are very low quality, so this probably won’t mean much, but here’s the Play Music overlaid on top of the grid that Google provides.

playmusicgrid

The centre of the circles align with the centre of the grid, and as you can see the triangle itself is definitely off centre (it’s slightly too far to the right). the whole icon is off centre, and it doesn’t help with the fact that a triangle is, well, a triangle, so even if it is centred it still won’t feel centres due to there being so much substance on the left hand side. Using a triangle as a background of the image will always feel wrong. It goes against the “keyline shapes” that google has set: square, circle, horizontal rectangle, vertical rectangle. You can see those shapes outlines in the grid anyway, and these are meant to be the foundation of the grid. To quote Google on this, “By using these core shapes as guidelines, you can maintain a consistent visual proportion across related product icons.” Welp, seems like Google didn’t use those core shapes as guidelines. Additionally, slightly further down the page Google goes on to say that

Screenshot 2016-04-05 at 10.44.15 PM

Again, triangles are mentioned nowhere on the page. Although orthogonals are the perspective lines pointing to the vanishing point (which look a lot like a triangle), I don’t think they envisaged an actual triangle like in the new icons, although that’s only speculation on my part.

The next item on the list of guidelines is something called “Product Icon Anatomy”.

style_logos_product_anatomy_components_perspective

  1. Finish
  2. Material background
  3. Material foreground
  4. Colour
  5. Shadow

The material background and foreground are pretty self explanatory. The background is the back-most element, while the foreground is simply raised slightly above the background. For each raised element there should be a soft “contact shadow”, just to make it obvious to the viewers that that particular element is raised above the background. This just doesn’t happen in the new icons. There’s no shadow onto the triangle (assuming the triangle is the background element) from the elements that theoretically should be raised above it (the film reel in Play Movies, the controller in Play Games, e.t.c. Not only that, but it looks like the foreground items go underneath the triangle in the bottom right hand corner. That’s a huge no-no. In fact, Google specifically states “Don’t crop elevated material elements within another shape.” Which, obviously, is exactly what Google did. It goes further. The following pictures are screenshots taken directly from the Google guidelines webpage. It’s not all of the guidelines, but it’s all of the guidelines that Google directly went against and contradicted with these icons.

Screenshot 2016-04-05 at 11.35.05 PM

Screenshot 2016-04-05 at 11.34.19 PM

Screenshot 2016-04-05 at 11.34.43 PM

 

 

There’s more, but I’ll cover the last couple separately as I can’t show a picture of the rule as with the others. The first one (cropping foreground layers under background layers) I already talked about. The second one, about colour elements being flush with the surface, as opposed to protruding certainly applies to the new icons. This can be seen most of all on the Play Newstands icon.  The lines of text that are protruding are coloured elements, and as Google stated above they shouldn’t be embellished with edges or shadows. However, one might argue that these aren’t colour elements (which in my opinion they definitely are), in which case I’d refer them to the third point. Don’t have too many layers. What Google did was take the standard Google Play icons and add another layer to them, at the bottom. All of these icons have enough layers to be described as cluttered, and it just makes everything seem as chaotic.

I’d like to bring attention back to colours used in the icons. This is part speculation, so take what I’m about to say with a slight grain of salt. Within the guidelines, Google lists two options for colours in the icon. Spot colour, where colour is simply applied to a small portion of an element (normally the foreground material) and flooding, where colouring is applied edge-to-edge of an element (normally background material). If we look at the past icon set (and the current icons for Google Apps) the foreground materials and elements and the background materials and elements have distinct colours. A lot more distinct than the new icons they have been announced. Sure, it’s a bit of a stretch, I’ll admit that, but I think that making the background Play triangle a similar colour to the foreground elements would not be considered particularly material design.

googleappicons

I’ll finish off on a strong point, and that’s the finish, number 1 of the product icon anatomy that I mentioned earlier. What is the finish? Well it’s the application of a 45 degree light source in the top left to the rest of the icon. As you could see in the second image of the Gmail icon mockup (and all images onwards) there’s a light source in the top left pointing 45 degrees into the icon.

style_logos_product_lighting_finish

If you look back to the Google Apps icons above, you can clearly see a 45 degree light source acting on the icons. This is something I noticed before I looked through the Material Design guidelines, it can be seen everywhere, even (and this surprised me) on the sun when all your emails are cleared at inbox.google.com.

inboxsun

None of the new icons have the virtual light source applied anywhere. It’s just nowhere to be seen. It appears almost everywhere on all the other Google apps (and even in most places outside of those apps!) but completely disappears on the new apps. It’s probably the most material design-y material design element that there is, and they just completely got rid of it. A bit disappointing to be honest.

Material Design was introduced to unify OS design across all platforms, and it seems like Google are taking a step backward. Towards the beginning of the article I mentioned that it sets apart the Google Play icons from the rest of the Google ecosystem. That’s exactly the opposite of what Material Design is meant to achieve. It’s even said when Google are talking about the product icon grid:

Screenshot 2016-04-06 at 1.01.58 AM

Consistency. Standardisation. All words that the new icons go against. Taken completely out of context the new icons look not bad at all, but when you look at the guidelines that Google themselves specifically set it’s ironic to see them going against their own word. I doubt they’re going to backtrack on themselves and not introduce the icons now, but I just hope they don’t go any further than this.

nexus2cee_Google-Play_New-Logos

You may also like...