Google has never been a company that abides by the rules. Our goal is to help people make full use of the information in the world, benefit from it and make continuous progress. Last year, we developed Material Design to help designers and developers enter a vast, multi-device and multi-screen world. With these thoughts, we are happy to share Google's new brand image with you: No matter where you are, we hope to help you use Google more easily and effectively.
From the beginning, Google's official website design was very simple: in the middle of the white page was a conspicuous search input box, and above it was Google's unique and colorful logo. Technology is constantly developing, pages are constantly changing, and input methods and user needs are also constantly changing. New communication devices and methods are emerging, especially in wearable devices, voice technology and smart devices. Now users log in to Google with different devices, and we should also convey their simple and interesting feelings on the homepage, so that we can embrace the opportunities brought by different devices and platforms.
Now, we want to introduce our design concept to you, that is, to understand users' familiarity and love of Google, and to develop our brand on this basis, and strive to become a dynamic and unconventional company.
* * * Same design
Earlier this year, designers from different companies, including creative laboratories and materials design teams, held a week-long intense design meeting in new york, and we drafted four challenges that we wanted to complete:
Create an extensible symbol that can convey a complete logo in a limited space.
Through the combination of dynamic and intelligent concepts, we can respond to the needs of users at every stage of communication;
Brand our products in a systematic way to provide consistent services for users in their daily use of Google;
Refine the style of Google, combine users' familiarity and love with Google, and on this basis, make a detailed analysis of the changes in user needs.
We start by extracting the essence of the Google brand, find the key factors-four colors on a white background-and put them together. Although the studio was a mess, with glue stuck together and thumbtacks scattered in a pile, we still found several exciting new directions after spending hundreds of hours of design work in it.
We share ideas in the team, and the engineering department, research department, product department and marketing department repeatedly test different ideas to measure the feasibility of different ideas. This collaborative process finally completes a new system, which is flexible enough to be used for marketing materials and product tasks of different platforms: a single logo consists of three basic states.
New element
"Google" logo
Use sans-serif fonts while retaining Google's unique color order.
Google dot
In terms of interactivity, assistance and fluency, this logo has been dynamically improved.
Google g
For the small interface platform, Google also launched a "compact" version of the logo.
Understanding this system, Google's development in thinking and design goes further than some core elements, so formulating a set of specifications can help the whole team maintain consistency in different aspects. The following example does not fully explain this problem, but it also illustrates some of our thoughts on this system.
symbol
Google's logo has always maintained a simple, friendly and humanized design style. By combining the original geometric form of the logo with the new and child-friendly textbook font, we hope to continue to maintain these characteristics. Our new logo is set to a custom sans serif font, while maintaining a relaxed style of multiple colors. The letter "e" in the original logo has been rotated-this is to show that Google will always pursue the concept of innovation.
The final logo has undergone many rigorous tests, including size and clarity of different digital scenes. At the same time, in order to guide users to use and print on the screen, we have formulated standards on logo covering all fields, including the location of logo, the rules for clearing logo, the release and printing methods of products, etc.
Construction of Google G
Google G is directly developed from the "g" in Google logo, but it enhances the use of visual effects in small-size interfaces. As the product image of the same lattice design, the circular design visually prevents the problem of "focusing too much on one point", and the proportion of colors conveys the complete spectrum of the logo, and the order of colors is also conducive to the line of sight movement when reading this letter.
Google Point in Motion
Google dot is a logo state in dynamic and eternal movement. They not only show the intelligence of Google at work, but also show that Google is serving you. We think this is a unique and wonderful way to exercise. A complete presentation form of Google dot includes the following steps: listening, thinking, replying, puzzled and confirming. Maybe their movements seem to be synchronized, but their movements are based on the same path and time.
colour
Google's color logo stands out, thanks to the blank space between the letter logos. But when the colors are very close-for example, Google G-they are easily confused visually, which may affect the original idea. Therefore, we adjusted the types of colors and chose vibrant red, green and yellow to maintain the color saturation and popularity of the logo.
Realization process
In order to cooperate with the development of the new logo, we created a geometric sans-serif custom font to supplement the product logo identification and design materials. We call it "product Sans". The font design is inspired by similar textbook font styles, but adopts a consistent sans-serif neutral style. This enables us to keep a proper distinction between the Google logo and the product name. The character set consists of numbers, punctuation marks, pronunciations, alternate characters, fractions, symbols and some extended languages (such as Latin and Greek).
product
Although many other Google products will be updated, for most users, their first impression of this new logo comes from the search page. Therefore, the user experience team and the search engineer team strive to provide text and voice search's implementation plan, which improves the all-round display of products.
Wider distribution
With the development of design, the project has also developed a unique resource generation, version control and self-service distribution method according to our code base. Using SVG with perfect pixels in the basic setup, we automatically generated thousands of vector-based variants to meet the needs of different sizes, colors and backgrounds. These variants are put into the typical scenario of source code verification to avoid duplication and ensure that each team uses the most correct and up-to-date resources.
This helps us to make perfect pixel design in every aspect, and allows us to optimize the size and delay time of these resources, including developing a full-color logo variant with only 305 bytes (the full-color logo used in the past required 14000 bytes). The old logo, because of its complex serif and large size, requires us to provide a "similar version" logo based on text for users with poor broadband connection. But the new logo reduces the file size and avoids this forced solution; When we face users and want to make Google closer to users and more convenient for users to use, the consistency of products can also be fully brought into play.
Beyond design
Design is only part of our efforts. The realization of the new logo requires collective efforts and the wisdom of hundreds of Google employees with different functions. In order to build and realize this latest pixel system, they deserve complete trust.
Because Google has been committed to creating new products and new user experiences, we hope this work can convey the simplicity and fun you want to see and feel in Google-no matter where new technologies will take us.