30.7 F
Denver
Friday, October 30, 2020
  • News

A Rare Look Into The Guidelines That Google’s Graphic Design Team Follow

Must Read

Hands-on with the Hyper GaN Stackable USB-C charger [Video]

Last year Hyper launched the world’s smallest 100W USB-C charger thanks to its implementation of GaN technology. Now the company is back with an even more compact and functional way to power up your devices with the HyperJuice GaN Stackable Charger. Follow along for a hands-on look as well as how to get 50% off…

Elon Musk and SpaceX launch Starlink satellite broadband amid pandemic

In vast swaths of the United States and the world, there are millions of people who don’t have reliable internet access. These unconnected people aren’t just in far-flung places like rural America or New Zealand or sub-Saharan Africa, either. There are plenty of people living in dense city centers who struggle to access affordable broadband.…

Epic Games Acquires Kids’ Technology Platform SuperAwesome

12:08 PM PDT 9/25/2020 by Trilby Beresford Rachel Luna/Getty Images; Courtesy of SuperAwesome Epic Games founder and CEO Tim Sweeney; SuperAwesome co-founder and CEO, Dylan Collins The company allows developers to create safer digital experiences for children on the internet. Fortnite maker Epic Games on Friday revealed the acquisition of SuperAwesome, a technology platform that…
Ethelyn Bryehttp://cyanosaur.com
Ethelyn Brye is an award-winning author and blogger. Growing up in Switzerland and influenced by renowned Swiss design and a lot of fresh mountain air, she attended and completed design studies in Geneva. Post graduation she moved to Washington State to work for a design firm, but her love of writing brought her to Cyanosaur. She's highly interested in strategy rpgs, mountain climbing, board games with friends and skiing. She lives in Seattle, Washington, with her lovely cat Armstrong.

1672777-slide-750-google-2

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.”

1672777-slide-750-google-1

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.

1672777-inline-750-google-4

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.

1672777-inline-750-google-5

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.

1672777-inline-750-google-7

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.

1672777-slide-750-google-16

- Advertisement -

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisement -

Latest News

Hands-on with the Hyper GaN Stackable USB-C charger [Video]

Last year Hyper launched the world’s smallest 100W USB-C charger thanks to its implementation of GaN technology. Now the company is back with an even more compact and functional way to power up your devices with the HyperJuice GaN Stackable Charger. Follow along for a hands-on look as well as how to get 50% off…

Elon Musk and SpaceX launch Starlink satellite broadband amid pandemic

In vast swaths of the United States and the world, there are millions of people who don’t have reliable internet access. These unconnected people aren’t just in far-flung places like rural America or New Zealand or sub-Saharan Africa, either. There are plenty of people living in dense city centers who struggle to access affordable broadband.…

Epic Games Acquires Kids’ Technology Platform SuperAwesome

12:08 PM PDT 9/25/2020 by Trilby Beresford Rachel Luna/Getty Images; Courtesy of SuperAwesome Epic Games founder and CEO Tim Sweeney; SuperAwesome co-founder and CEO, Dylan Collins The company allows developers to create safer digital experiences for children on the internet. Fortnite maker Epic Games on Friday revealed the acquisition of SuperAwesome, a technology platform that…

Gaming companies are reportedly the next targets in the US government’s potentially broader Tencent purge

Some of the biggest names in online gaming in the United States have received letters from the U.S. government requesting information about their relationship with the multibillion-dollar Chinese tec…

How America’s war on Huawei may boost Chinese technology

From September 15th the Chinese telecoms giant will no longer be able to buy vital semiconductorsHUAWEI IS ON the ropes. From midnight on September 14th the Chinese technology giant will be cut off from essential supplies of semiconductors. Without chips it cannot make the smartphones or mobile-network gear on which its business depends. America’s latest…
- Advertisement -

More Articles Like This

- Advertisement -