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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s