What we can learn from Google's new UI (pictures and text)

The most significant website change in 2011 was Google, which launched a new user interface for a series of its products. This article will explore the thought process behind Google’s user interface design, and perhaps we can learn some valuable methods and design principles from it.
Google User Interface Reform History 1998
What can we learn from Google's new UI?

Google original homepage 2012

Updated interface "Google's mission is to organize the world's information and make it universally accessible and useful."
Unified Google experience
Google's web page has evolved radically since its early days. Users have more ways to experience the web than ever before and can watch and experience it on different devices. Google has made changes to reflect these changes. The changes are also being made to unify a range of Google products, integrating them so that users have a smooth experience switching between products. Google's explanation is:
"Our goal is to give you a more seamless and consistent online experience, no matter which Google product you use or what device you use it on."
Google's new experience is based on three key design principles. Let’s look at these three principles. yixiieshi
Focus
Focus is about allowing users to focus on the task or work they want to accomplish quickly and easily. Clear away the clutter and keep your key content and frequently used tools front and center. At the same time, add simple things like using bright colors to highlight or hide unused navigation features.
In these ways, Google’s UI helps users subconsciously focus on the tasks they are trying to accomplish and reduces the user’s experience of failure.
Elasticity
The biggest change since Google began to change is the way its users access the web.
Not only on desktop computers, we will see Google products appear more and more on mobile devices such as smartphones, high-resolution tablets and TVs. The purpose of "flexibility" is to allow users to maintain a consistent visual experience when switching between different devices.
Effortless - ease of use <br />Although the technology and products used by Google are quite complex, they do not want to portray this complexity in their design. The idea of "ease of use" is to keep the product simple, clean and consistent.
"Google's new brand will be rooted in trust, beauty, technology, and innovation." - Larry Page
Google Navigation Bar

The centerpiece of Google's redesign is its new Google Bar, which replaces the old "hard, black" navigation bar at the top of the screen. Google realized that this thing took up valuable space on our screens, so it decided to give it a new look with new design principles.
The new menu bar combines Google's navigation bar with the search bar and Google+ toolbar. All product functions in the search bar and navigation bar are retained, while simple switching between products is possible. By simply rolling over the Google logo, a drop-down menu will appear, allowing users to switch between Gmail, Docs, Maps, YouTube and other products efficiently and easily.
Eddie Kessler (Google's technical lead) explains:
“Unify, simplify, and say goodbye to the old navigation bar! Giving users a super simple navigation experience is an important part of changing Google's overall browsing experience and the direction we are working towards. That's why we are so excited about this redesign.”
Google +

Left: Google+ logo designed by Alex Alex Patrascu Right: Google+ menu and interface In order to analyze whether the UI of each Google product fully achieves its effect, in this article I will select several of the most prominent Google star products for explanation.
Google's redesign coincides with the launch of one of the most relevant web projects of the year: Google+. Google+ perhaps better than any other Google product demonstrates its new design principles. As for post-launch expectations, if there was one product that needed to be used to attract users, Google + was at the top of the list. It perfectly demonstrates Google's design philosophy, and within a few days of joining the circle, I found myself intoxicated by its simple design.
Google Plus was designed in part by Andy Hertzfeld's UI/UX team. Many people will compare Google's design style with Apple's. This controversy may be due to the fact that Andy was employed by Apple in the 1980s and participated in the Macintosh Project. All Andy had to do in the project was to explore the concept of 'circles' with Joseph Smarr.
Andy explained the thinking behind this:
"Obviously the idea was to categorize people. Secondly the core idea of 'circles' is to be fun and engaging, to be something you want to do. Because it can get boring, we reward people for what they do, put a smile on their face and try to make them enjoy what they do."
Google Plus is now an integral part of Google's overall strategy. It will be integrated into most of Google's products, and its button will be visible even in search results. Google makes it easy to share our discoveries. The term “social search” has more meaning than ever before, and I believe search is leading the way. Google said:
"Google Social Search helps you discover relevant content from your social network, building a network of your online friends and contacts. Sometimes, content from friends and acquaintances is more relevant and meaningful than content from strangers. For example, a movie review from an online site may be helpful, but it would be more beneficial if the review came from a friend of yours."
Gmail

Gmail's new layout
According to CBS, as of November 2010, Gmail had 193.3 million active users. In order to retain these users, Google simplified the design of Gmail to enhance the user experience. They made the following changes:
Simplified Conversation Mode Conversation mode in Gmail has been completely redesigned to make it easier to browse when emails are archived. Profile pictures are added to the conversation to help users better participate in the conversation. It also helps to keep track of what you say. Different from the original UI, the new design allows users to focus on communication with colleagues and friends.
Good Navigation The left sidebar navigation has been redesigned and is user-customizable. Users can change the size of the chat area to their liking, or hide it completely by clicking on a small icon below the left sidebar. Combined with all the new products, users can navigate the Google interface in their own way using the Tab or arrow keys, again providing users with the most convenient way to navigate.
Enhanced Search

Emphasis was placed on Gmail's new search feature. Email is a very important tool for web users. In fact, an estimated 29.4 billion emails are sent every day. How to find the emails scattered in our inboxes has become a top priority. Google has a way to do this that goes beyond standard searches. Users can now click on a drop-down list that hides the advanced search panel and create search filters in just a few clicks.
Phased rollout <br />Whether you like Google's new look or not, there's no doubt it's a success. In the past few months, it has become a hot topic of discussion on the Internet and has gained quite a few fans. Part of that success may be due to changes Google has already made. Google chooses phased rollouts instead of a one-time launch, as this often depends on the product. This way, they can collect user feedback in real time, decide what’s working, and re-evaluate the next phase of the project.
A phased rollout has other benefits, too. Google used the media to hype up its UI by releasing news about the release date of the UI over the past few months. From the BBC to the New York Times and other media, everyone is reporting on Google's changes, not to mention the numerous comments posted in community forums.
A Deep Dive into Google UI
Colors in Google UI

From the color examples above, we can see that Google has always kept its tonal coloring to a minimum. They use blue and red to highlight important features, both of which are colors that extend from the original Google logo.
Button

Google's new buttons and icons design <br />As part of its new design strategy, Google has launched a new series of buttons. These buttons are clean, concise, simple and clearly demonstrate Google’s “focus” design principle. They were created using HTML5 and CSS3 technologies. What surprises the user is that the button is not really a button, nor is it an anchor tag, but rather it is created using a div. This is used to indicate that a general tag acts as a standard component. This is helpful for users who browse the site using devices such as screen readers.
Google uses CSS3 to achieve a rounded and delicate gradient button effect, while adding a subtle shadow to the bottom of the hover button for an extra sense of fashion. Buttons are generally divided into two categories: "Independent" and "Left, Center, Right". Each category has 2 different sizes "Standard" and "Large". In choosing these 4 styles across its range, Google brings a unified experience to its users.
Comfortable, Cosy, Compact

One of the most important factors in promoting a good user experience in any design is visual appeal. Google allows users to customize screen display density on some products. This feature is available in Gmail, Reader, Docs, and other text apps. The options "Comfortable, Cozy and Compact" depend on the display density of the user's computer. With all the buzz in the media, I’m sure these types of screen density options will leapfrog other web products and usher in a new era.
Conclusion <br />The past six months have been quite intense in researching Google’s new UI design principles and I can share with you what I have observed and learned from them and the strategies they implemented. As one of the biggest brands on the internet, they’ve clearly understood that a simple and unified experience is critical.
“Simplicity and a unified experience is key.”
It also taught me personally to tone down the intensity of UI elements. Does the shadow really need to be 80% opacity? Can it be reduced to 20-30%? As a designer, we want people to notice the extra effort we’ve made, such as reducing the percentage of the shadow or making the transition more prominent so that it is easier to see. Sometimes, through subtle changes, better and smoother effects can be achieved, whether it is to create visual effects or grab the user's attention, the expected idea can be achieved. The same principle can be applied to border radius, try toning down from the usual 5 or 10px to 1, 2, or 3px. Of course, these practices are not suitable for every project, but when you choose to go for a "clean" design, it must be the best choice.
At the same time, we've learned that the web is a very different place today than it ever was. The latest news about Internet Explorer is that IE will automatically update the browser, and now we can start relying on the latest web technologies and work across browsers. Google may have a new approach to this, rather than any of their new product design work. Now we can design without browser limitations. Now is the time to refocus our efforts on creating websites that are compatible across devices and screen resolutions, ultimately leading to a great user experience.

<<: How to embed flash video format (flv, swf) files in html files

>>: MySQL8.0 installation process under Centos7 in VMware workstation16 and Navicat remote connection