6 animations tell you exactly what Google has changed

Every change in Google's brand image affects the hearts of users around the world, and is undoubtedly the result of the powerful influence of the technology giant. With the latest Google Visual image release, The Spit and praise has not stopped, but now we might as well fill out the brain hole first, to see what the new design behind Google has to consider. Special thanks to @-Chuan-classmate, the original video was he personally suppressed into GIF animation!

Google is not a traditional company. Our mission is to integrate information from around the world, make them easier to access and benefit users, and we have been pushing this thing forward. Last year, we launched the material design, so that designers and developers have a more aggressive, easy to embrace this multiple-screen, multi-device world. Therefore, today is very happy to share with you our new brand image, hope that the new Google whenever and wherever can make users more convenient.

Since the inception of Google, Google.com's web design has been kept surprisingly simple: strange and colorful logo in a simple and intuitive input box, the entire page background is pure white. With the development of technology, the design begins to change, and the demand and investment become more and more diverse. New device types and diverse interactions and communications are combined with wearable devices, voice technology, and smart hardware, and it's not uncommon for us to be around. Today's users are carrying Google's services through a range of different devices, and we should embrace every opportunity and every screen with a new posture, with a more contracted and pleasing brand image, with a fresh gesture of recognition and expectation.

Next, let's take a look at some of the designs that are accepted and liked, and push the entire brand image toward more dynamic rather than traditional direction.

　Joint design

Earlier this year, designers from around the world, together with Google's Creative Labs and the material design team, worked together in New York for a week-long sprint, and we drafted a short list of the four key challenges we were going to address:

1, it needs to be an extensible identity, in a limited space to convey a complete information and image

2, it needs to be a highly integrated dynamic image, the different stages of user interaction are integrated together

3, it needs to be a system of methods, not only to facilitate the brand of our products to promote, but also to ensure that users in the daily contact with Google products have a consistent experience and feelings

4, it needs to be the achievement of Google style of all elements of the refining, the user likes to be interested in the Google elements to integrate into, and with the changes in user needs to upgrade and adjust

So, we began to abstract our brand image, refining into the most basic four colors, and placed on a white background, as a backup. Identified the problem, the idea was fixed on the whiteboard, animation also by the Bezier curve outlined. After hundreds of hours of design, we had different designs on the floor, and several exciting design directions were identified.

We shared ideas with the entire team, engineering, research and development, product and marketing teams participated in the testing and feasibility analysis, and hashed the design plan deployment and strategy. This collaborative process brings a flexible enough system that allows marketing materials and products to be applied to any platform and integrates three different state design elements into one logo.

　　Elements

Google logo Style

Make sure it's a text-free logo with a significant number of colors

　　Point

Interactive, auxiliary and transitional condensed dynamic image

　Google G

　Compact version of the Google logo image

Understand this system

For this system of thinking and design is much more than the core elements so simple, our team set a set of specifications to ensure its wide application and consistency. The following example is not complete, but it can show a part of our system thinking.

Logo style

Google's logo has always been a simple, friendly and approachable style, we hope that through the high purity of mathematical characteristics of the geometric image and textbook-style letter image, to maintain the simple logo child-like characteristics. The new logo incorporates a geometric-style sans-serif design, combined with colorful and highly interesting rotations (letter E).

By rigorously testing in different digital environments, we determined the size and thickness of the font in the final logo style. In order to ensure the screen display and printing effect of the logo, we set the standard to cover the rules of spacing and clearance, product locking rules and the exclusion rules of product handling.

　　The construction of G logo

The Google G logo is designed to be based on the image of the letter G, but in order to increase its visual weight when used in small size, it needs to be shared with other elements. The design of the G-Letter logo is the same as the grid system used by Google logos, because of the existence of the middle horizontal line of the letter G, in order to ensure the overall visual balance when using the four-color fill, and to adjust the region and order of the color according to the visual characteristics of the eye.

　Google dot-like action

Google's dot-like logo has been a vibrant state of movement. It represents the smart way Google operates and the attitude that serves you. We carefully scrutinize these unique and artifact moments, and develop a variety of dynamic identities that contain the very, the thinking, the reply, the confusion, the understanding and so on. Although the whole effect seems spontaneous and not decorative, but in fact they follow the same path and the same change time, radian, length and other geometric features are followed by the same standards.

　Color

Thanks to the white leaves, Google logo in the different letters on the visual balance and not conflict, but when these colors mixed together into the letter G LOGO, the visual mix will make the color will look dark, so we make G LOGO when it is actually the color of appropriate adjustments, Make sure it looks lively and natural.

　Final implementation

Typesetting

To complement the brand new logo, we have also redesigned a dedicated sans serif font to facilitate the use of products and related materials. We refer to this set of fonts as product Sans. This set of fonts also draws on the print style of the textbook font, but the design details are more or less the natural features of the geometric sans serif font. In this way, we can ensure that the Google logo and product fonts between the differences and recognition. The entire font contains all the numbers, logos, Latin letters, Greek letters, and Cyrillic letters.

　　Products

Google's entire product line will gradually complete the new logo update upgrade, but because of Google's first contact with most of the search, so the change will start with Google search. Both the UX team and the development team are currently committed to updating the brand image of text search and voice search, thereby highlighting the overall brand upgrade.

　　Widely distributed

With the gradual increase in design and development-related material, versioning and self service are gradually extended to the entire code base. such as pixel-perfect SVG format footage, the system automatically generates thousands of variations of different sizes to meet the needs of different sizes, colors and backgrounds. Subsequently, the relevant source code is controlled in a relative specification position, avoids duplication, and ensures that team members and products are using the most correct and updated material.

Under this mode of operation, we can use the new material in any place more quickly and conveniently, think the new logo is only 305 bytes compared to the size of the previous logo 14000 bytes. The new version of the logo because of the reduction in complexity so that users around the world can be faster to load the use of it.

　　Outside the design

Design is just a part of what we are trying to do. The new logo allows hundreds of of Google employees across different organizations and different jobs to work together, and the final harvest makes these huge investments seem invaluable.

We will continue to build better products and experience, we hope that our efforts to meet your expectations, so that you can better use Google's services and get paid.