30.7 F
Denver
Thursday, May 28, 2020
  • News

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

Must Read

With $84 million in new cash, Commonwealth Fusion is on track for a demonstration fusion reactor by 2025

Commonwealth Fusion Systems closed on its latest $84 million in new funding two weeks ago. The U.S. was still very much in the lockdown phase and getting a deal done, especially a multi-million dollar investment in a new technology aiming to make commercial nuclear fusion a reality after decades of hype, was “an interesting thing”…

Bionic eye with better vision than humans coming in five years

The world's first 3D artificial eyeball -- capable of outperforming the human eye in some ways -- may help droves of people who are partially or fully blind in as little as five years, according to experts.Researchers from Hong Kong University of Science and Technology have devised an electrochemical eye whose structure and performance mimic those of…

U.S. strikes at a Huawei prize: chip juggernaut HiSilicon

SHANGHAI (Reuters) - The latest U.S. government action against China’s Huawei takes direct aim the company’s HiSilicon chip division—a business that in a few short years has become central to China’s ambitions in semiconductor technology but will now lose access to tools that are central to its success. FILE PHOTO: The U.S. flag and a…
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

With $84 million in new cash, Commonwealth Fusion is on track for a demonstration fusion reactor by 2025

Commonwealth Fusion Systems closed on its latest $84 million in new funding two weeks ago. The U.S. was still very much in the lockdown phase and getting a deal done, especially a multi-million dollar investment in a new technology aiming to make commercial nuclear fusion a reality after decades of hype, was “an interesting thing”…

Bionic eye with better vision than humans coming in five years

The world's first 3D artificial eyeball -- capable of outperforming the human eye in some ways -- may help droves of people who are partially or fully blind in as little as five years, according to experts.Researchers from Hong Kong University of Science and Technology have devised an electrochemical eye whose structure and performance mimic those of…

U.S. strikes at a Huawei prize: chip juggernaut HiSilicon

SHANGHAI (Reuters) - The latest U.S. government action against China’s Huawei takes direct aim the company’s HiSilicon chip division—a business that in a few short years has become central to China’s ambitions in semiconductor technology but will now lose access to tools that are central to its success. FILE PHOTO: The U.S. flag and a…

Alabama 1 of 3 states to sign on with Google, Apple for coronavirus contact tracing app

Alabama is teaming with Apple and Google on a new coronavirus tracing app. (AP Photo/Kiichiro Sato)APAlabama is one of three states to sign on with Google and Apple for a new contact tracing app designed to slow the spread of the coronavirus.Alabama, North Dakota and South Carolina have signed agreement with the tech giants to…

AI Supercomputer

An illustrated Kevin Scott, Microsoft’s chief technology officer, talks about building one of the world’s largest, cloud-hosted supercomputers and the benefits of it to accelerate projects large and small at Microsoft Build 2020.Learn more: https://news.microsoft.com/build2020/Art by Craighton Bermanhttps://studio.craightonberman.com/Subscribe to Microsoft on YouTube here: https://aka.ms/SubscribeToYouTubeFollow us on social: LinkedIn: https://www.linkedin.com/company/micr... Twitter: https://twitter.com/MicrosoftFacebook: https://www.facebook.com/Microsoft/ Instagram: https://www.instagram.com/microsoft/For more…
- Advertisement -

More Articles Like This

- Advertisement -