Google has made huge strides in design over the past few years, establishing a shared language that has brought new consistency to its many products. These guidelines show some of the details involved in keeping things uniform.

The "Visual Assets Guidelines" were posted on Behance by Roger Oddone, a senior graphic designer. Mainly they focus on iconography.

The first principle imparted is one of simplicity.

Next comes a lesson in the geometric basis of the icon design.

The guide calls for front-facing icons; the z-axis should be resisted at all costs.

This section shows how Google has kept things looking fresh and light while Apple got bogged down in fake felt and leather. It encourages straight, hard shadows over drop shadows, glossy textures, and eye-catching effects.

Details related to the company-wide color palette are laid out …

… as are acceptable color combinations.

Pixel-level scrutiny of the icon design is encouraged, quite literally.

Open Sans Semi Bold, the default Google typeface, gets a shout-out.

Grid-based proportion and spacing details are also delineated.

After exhausting the finer points of the icon design, the guideline moves on to the logo lockup--the "brand ambassador" for the product. Check out the full guides here.

Co.Design

A Rare Peek At The Guidelines That Dictate Google's Graphic Design

A pair of "Visual Assets Guidelines," posted by one of the company’s senior graphic designers, outline precisely how Google designers are supposed to sweat the small stuff.

In April 2011, Larry Page took the reins as Google’s CEO. He didn’t waste any time getting down to business. On his very first day on the job, Page launched an incredibly ambitious effort to redesign the company’s main products, including search, maps, and mail. He wanted them to be beautiful--Google had never been known for its visual polish--but he also wanted them to be cohesive, more like a true software suite than a jumble of disparate digital tools. In the years since, Google’s products have improved leaps and bounds, aesthetically speaking, largely while working within the same shared design language. Here’s how they’re doing it.

The rare glimpse into the company’s design process comes in the form of two documents--"Visual Assets guidelines"--freshly shared on Behance. Compiled over the last 18 months by senior graphic designer Roger Oddone and art director Christopher Bettig, along with designers Alex Griendling, Jefferson Cheng, Yan Yan, and Zachary Gibson, the guidelines focus on iconography, covering both broader principles and pixel-level details as they relate to both app icons and UI elements. The aim, an introductory blurb notes, is to set down the "solid, yet flexible, set of guidelines that have been helping Google’s designers and vendors to produce high-quality work that helps strengthen Google’s identity."

The more exciting of the two covers product icons. Google’s, it tells us, are "simple, modern, friendly and sometimes quirky … highly simplified, exaggerated, and caricatured." The following pages illustrate the main tenets of their design.

Google encourages its designers to take a "reductive approach" to product icons. Instead of a stylized map with an embossed pin on top, the guide encourages something more restrained: a simplified version of the pin itself. The next section establishes the importance of basing the icons on simple geometric shapes.

The next few parts deal with perspective. Icons should be front-facing, represented entirely on just two axes. Hard, straight shadows are encouraged over drop shadows, gradients, and lighting effects. The document then lays out the details on the precise color palette that should be used for all icons--the exact values for the blue, red, yellow, and green we now immediately read as Google. Next comes typography, a section showing a preferred "pixel perfect typeface for small sizes" as well as the company-wide default for product name text: Open Sans Semi Bold.

With the icon guidelines thus established, we move on to logo lockups, the icon and product name combos that serve as the "brand ambassadors" for the company’s products. Precise guidelines for the spacing, sizing, and typesetting are delineated for the three main components: the product icon, Google logotype, and product name. We learn, for example, that the designated typeface for the product name changes depending on the size at which the mark is being rendered. If the Google logotype is 60 pixels or larger, the product name gets Open Sans Light. If it’s smaller, the go-to is Open Sans Regular.

The second document, in addition to showing examples of the flat, Charley Harper-esque illustrations Google’s been using in its product videos, covers iconography as it relates to UI design, spelling out details like proportion, sizing, and padding.

These are small, dry details. But they’re precisely the sort of small, dry details that Google totally ignored, at least in terms of any sort of company-wide agreement, until just the last year or two. It’s not especially surprising that Google has documents like these. The company’s graphic designers, spread across heaps of products on several different platforms, have to have something to reference when they’re nailing down things like app icons. But it’s nice to actually see the guidelines laid out so clearly, if for no other reason than a bit of proof that Google’s continuing to sweat the details.

Checkout the guides in full here and here.

Add New Comment

29 Comments

  • Octopus Creative Design

    Sweating the small stuff indeed...graphic designers everywhere, take note!

  • Slygsc

    Love this! I wish more of our customers submitted brand criteria this detailed.

  • Mg

    Google uses graphic design? Seriously, this style guide is beautiful...but in application, there's a lot to be desired.

  • Russell Hall

    It's tragic but I really do love a good set of brand guidelines that go beyond the 'don't put our logo over a multicoloured rainbow' etc. All comes down to considered design and highlights the little touches you don't see at first glance, I find them fascinating. 

  • Andrei

    This is very good work. I disagree to anyone saying this stuff is boring. It's not meant to be judged as art. It has a purpose, it serves it well, it looks good and there is a reasoning behind it. I care more about good balance, than bringing something extraordinary to the scene. It's something I think they would have done if it were the case. Only thing I never quite felt comfortable with is the shadow in the Gmail envelope. Why?

  • Irene Velveteen

    I agree Andrei. With your initial point that this design serves its purpose perfectly. And the GMail envelope makes no sense to me either. 

  • Anonn

    Drives me nuts how I seem to find a Dig at Apple in almost every article I read on this website. I get the point - I don't disagree either. I'm just really tired of reading about it. 

  • Irene Velveteen

    Don't resist Apple's deflating design popularity. They'll be going flat soon as well.

  • Fabian Galon

    Umm, paranoid much? I don't see any mention or hint at Apple or their OS...

  • Seth

    I had to run a Ctrl+F to find Apple or something related to them in this article, because I thought I had read it pretty thoroughly and never saw them mentioned. And I was right, there was no mention of apple in this article; what were you referencing exactly?

  • Christopher Bettig

    Thanks to FastCo for the positive post on our work.
    I just wanted to make sure that the credit for the design style goes to ECD Chris Wiggins & designers Jesse Kaczmarek, Nicholas Jitkoff and Jonathan Lee. cb

  • Andy Tervit - Bright Black

    Nice, clean work. Love how the palette has evolved over the years, works really well throughout the interface.

  • Tommy Hood

    I LOVE seeing this! Anytime we get a peek behind a successful brand and the guidelines that define it, helps to foster more great design.

    Especially love the clean affinity towards hard shadows and simplicity instead of the trend of digital skeuomorphic design, and glossy "web 2.0" effects. Trends are NEVER a good idea when it comes to design.

  • Andy

    Special kudos deserved to Jesse Kaczmarek, who designed almost all of the product and ux icons shown in the guidelines.

  • karoliskj

    As far as user-friendliness goes Google totally nailed it, and it doesn't matter if it's boring or not, if it's flat or 3D, if it's plain or skeumorphic - it just works. Well at least for me...

  • rmintzes

    I know it often comes down to aesthetic preference, but I love flat icons.  I think the UX design field has evolved past the point where gradients, textures and accurate shapes to represent tangible objects are necessary for icon design.  It was a good jumping-off point to create user comfort via familiarity in the beginning of these new mobile interfaces, but now the element of flexibility of scale and function has become more important, so reducing complexity and adhering to the KISS rule is paramount in my view. (Plus I must admit that I always love seeing these explanatory geometric drawings...one of the things my classmates and I did A LOT of in architecture school.)