Google Graphic Design Guide: icons and logos

Back in April 2011, Google co-founder Larry Page took Eric Schmidt's gun and took office as Google's CEO. On his first day, he announced that he would re-design the company's main products, including representative searches, maps, and emails. He wants them to change their minds to know that Google is never known for its design elegance), but he also requires close association between products, rather than a bunch of irrelevant digital tools. After that, we noticed a significant improvement in the visual aesthetics of Google products, which was achieved without changing the basic design language. Next, let's take a look at how Google's graphic designers do it.

This Guideline consists of two files, mainly focusing on icon design. Designers like Alex Griendling, Jefferson Cheng, Yan and Zachary Gibson, led by Google's senior graphic designer Roger Oddone and Director of art Christopher Bettig within 18 months, it also covers the broad principles related to application icons and UI elements and pixel-level details. The purpose of this Guide is to establish a series of fixed and flexible guidelines-to lead Google designers to strive to grow Google's identity.

The first file is even more exciting. It details the product icon design of Google. Google's product icon design is "simple, modern, easy to understand, and sometimes slightly odd ". Google encourages designers to adopt the "most simplified approach" in product icon design ". For example, in the design of map icons, they will give up the "insert a dingtalk above the map" icon design, and will encourage the use of "A dingtalk" more simple approach. The next chapter describes the importance of drawing an icon based on a simple ry.

The following sections are related to the limit method. The icon must face the front and only have two axes (horizontal and vertical). You are encouraged to use a straight line hard shadow instead of a projection, gradient, or shade effect. The file shows the details of the colors needed in the design of all icons-for example, Google represents the exact values of colors: blue, red, yellow, and green. The file also describes the font used by Google, from the perfect pixel font designed for the small text to the default font used by the company's product name: Open Sans Semi Bold.

After introducing the product icon design, let's take a look at the combination of the Logo lockups icon and product name. The company calls it the product's brand ambassador. This section clearly describes the three components of Logo lockup: The product icon, Google Logo, and the spacing, size, and typographical specifications required by the product name. For example, the font of the product name is not fixed, but changes according to the pixel size of the Google logo. If the Google logo is more than 60 pixels, the product name should use the Open Sans Light font. If it is less than 60 pixels, the product name should use the Open Sans Regular font.

In the second file of Guideline, in addition to the flat Charley Harper illustrations that Google often uses in product videos, the ratio, size, and filling details of the logo in the UI design are also described in detail.

The two files show boring design details, but these seemingly insignificant details are ignored by Google before. This design guide launched by Google is not particularly surprising. The design standards from the company Logo to the application icon are exactly what the graphic designers of Google's major platforms need. But it's really nice to see Google do this, which proves that the company is working hard.

Detailed guide: Part.1 Part.2