Drop a line

Have a tip, or just want to say hi? Just use the form to the right!

           

123 Street Avenue, City Town, 99999

(123) 555-6789

email@address.com

 

You can set your address, phone number, email and site description in the settings tab.
Link to read me page with more information.

All

Why things look "Googley" - Google's visual asset guidelines explained

Liam Spradlin

Google's visual asset guidelines, or at least the set updated in early 2012, are available to the public on Behance (part 1, part 2). They've been available for a while, but it may be worth taking a closer look at them for those who haven't explored the Behance collection before. These guidelines are what make Google's products look "Googley," and they're also a great example of cohesive guidelines that keep things looking consistent, but allow for a huge range of flexibility.

Product Icons

There are several main tenets that determine the aesthetic of Google's product iconography. Here they are:

  • Reductive, minimal approach - This means reducing forms to very basic, yet still easily readable forms. Remove overt thickness, obvious gradients, and other unnecessary fluff.
  • Front-facing, geometric shapes - Geometric shapes are easy to read, but they're even more readable if they're front-facing. Adding angles or thickness to a geometric shape can clutter the design, while looking at things face-on with minimal perspective provides a more recognizable object.

geo.png
  • Straight, Hard Shadows - This is something we've discussed before. To add just a little bit of depth to otherwise nearly flat designs, Google prefers hard shadows. Ideally either straight or diagonal, the shadows are around 30% opacity black.


  • Colors - Google uses a broad palette for its products. Here is a download link for the full palette. When Google's primary brand colors are used together, the sequence is blue - red - yellow - green, repeating as necessary (except, paradoxically, in Google's own logo). Otherwise, Google recommends simple pairings. Do what makes sense. There are lots of colors available, but not all of them make sense together.
  • Pixel Perfection - For product logos and icons, Google recommends aligning objects to the pixel grid. Illustrator can do this automatically, and it makes sense for the web - as assets are viewed at different sizes, you want them to be able to render in a way that doesn't destroy their shape.
    Google also has its own Pixel Perfect typeface which is specially designed to scale down. Way down. In other cases, it recommends Open Sans Semibold.

The rest of part one goes on to detail the proper arrangement of logo lockups, usually product names arranged next to the product's icon or logo. Following strict spacing rules keeps lockups looking as consistent as the products they represent.

Interface and Illustration

Google's interface and illustration guidelines begin with the same core values as those for the product logos - take a reductive approach to interface icons, but be sure to design them to work in one color, as that's how they'll ultimately appear. Likewise, geometric shapes are an absolute. The pixel perfect rule also applies, and the color palette linked above holds the same.

Google also distinguishes between "fun" illustrations and business illustrations. Obviously business illustrations are focused on architecture, technology, and product connectivity, making heavy use of stylized buildings, computers, and other such objects, with hard shadows thrown in for depth.

Obviously, the rules for designing specific objects are not laid out. The best approach, as a designer, is to think of what you want to represent, and reduce elements of it until you have a flat image that communicates your idea as succinctly as possible, but is still readable. The use of objects in an illustration is unrestricted - the approach is playful and free-spirited.

That said, Google does represent humans and other objects in a certain way. You will notice that humans have largely oval heads and bodies, with clothes applied directly, flatly to the shape.

Items like trees or other round objects that require some semblance of dimensionality can be represented as split in half, with a lighter tone on one side and a darker tone on the other. In other cases, like with flower pots, when the object is comprised of two elements that both require dimensionality, a hard shadow can be used to separate the two pieces. See the examples below for more, and check out the full Behance set for the full picture.