Google material design in Russian. What is Google Material Design and how it will change our lives. Surfaces, their properties and functions
What will happen if a person’s childhood is spent listening to films where smarter computers inevitably kill all of humanity, and when he grows up a little, this same person reads about the NSA and other villains who read his SMS messages around the clock and send them to the USA? He will be wary of Google.
Not long ago, Good Corporation showed the world its vision of user interfaces of the future. Material Design- a unified concept for constructing the logic of operation and appearance of services and applications, unifying all Google products in order to make them as easy and intuitive as possible for users to perceive.
The idea is so big that it will transform not only the appearance of all Google products. With coming new concept The role of the company itself in people's lives will change.
What will Google become?
Yes, for now Google is just a bunch of services. However, with material design, the company is actually creating a second reality inside our computers and mobile devices. With its own logic, with its own rules and laws, with its own physics.
When you create physical things, you draw on thousands of years of human experience. But software design is just in its infancy. We looked at everything we had software and asked ourselves, what is it made of? John Wiley, Google Search Design Lead
What are Google services for people now? Is it a search bar that lives in the browser? Or is it your Android mobile device?
Google can be defined in many ways, and many of them will be true. This company created a system of services that became the foundation of our digital infrastructure.
But in the near future, Google will no longer be seen as just Chrome or Android.
Individual Google services and products are evolving into a single information channel, where human-relevant data simply appears on desired screen at the right time.
When you look at your watch while standing at a train station, you see on the screen the arrival time of your next train. However, this same watch will alert you to an important letter from management if you look at it at work. This watch will replace your password for logging into your account on a computer, the screen of which will immediately display the body of that person. important letter from the boss. Do you need to leave urgently and don’t have time to finish the text of the answer? No problem, because your smartphone or tablet has already opened the mail interface with half-printed text, and even the cursor is in the place where you left off.
The work day is over and you are going home. The same screens now perform completely different functions. They will remind you to pick up the children, buy groceries for dinner and notify you when you leave new series favorite series.
Such an incredible variety of functions and tasks performed will work in a single digital environment that is intuitive to the user, gradually merging with the real world.
One of the key ideas of Material Design is to create an intuitive feeling for the user to work with real physical objects within a digital environment. Essentially, this is an emulation of three-dimensional space on the screen plane, but with all the advantages that it can give virtual environment. The buttons and windows here, similar to cardboard cards, can grow and shrink, fall apart and rearrange themselves.
The most impressive thing about this concept is that the properties and behavior of objects on the screen will be as predictable and understandable to humans as any simple event in the physical world. Unlike existing interfaces, where pressing a button does not cause any changes to the rest of the screen, any action in Android L causes a corresponding effect that affects the entire interface. Tap on a specific day on the calendar, and it will increase, pushing the rest of the days with its growing volume and mass. Press the play button in the player, and it will unfold like a candy wrapper into the control panel.
This concept is the result of the company's careful study of how paper works in reality. The team working on the project created physical app icons from real paper. They wanted to see how light and shadow could interact with a flat (like a screen) but real material.
The virtual environment, in turn, allows you to break the rules. It is unlikely that anyone has seen paper splitting into parts, the pieces of which rearrange and merge again into a single object. This gives additional features, but there is a risk of creating a too unrealistic system, too far from physical laws. In order to maintain the natural intuitiveness, all typography, images and colors were thrown out during the development process. The team focused exclusively on the performance of the miracle paper.
You don't have to be a designer to spot a rule violation from real world. Does the paper fall onto the table like a piece of rock? Obviously, something is wrong here, and it will be clear to anyone.
Based on such obvious and understandable laws to everyone, the Google team decided to use the real world as the basis for their concepts.
If there is a sufficiently clear system of rules, it becomes possible to add new materials. The paper was obvious choice due to the simplicity of its display on the screen. No pronounced texture, practically no volume. But try to imagine, for example, fabric or liquids.
The philosophy of skeuomorphism, which Apple actively used and ultimately abandoned, immediately comes to mind, doesn’t it? Apple's approach was also aimed at making the digital world more user-friendly, but compared to Google's decision it looks rather superficial. Apple's skeuomorphism only hinted at the app's similarity to its real-life counterpart.
Google doesn't just want to draw some analogies for better perception. Their goal is to explain to users what happens when a particular interface element appears or disappears from the screen.
Material Design is not just an attempt to create identically designed services for various devices. Google is creating a parallel world, each particle of which is a fragment of something material. When you receive a message on your smart watch from a smartphone, you see not just a dead piece of text. It's a piece of cardboard with a message on it, and that message comes from your smartphone to your wrist.
Interaction digital world completely possible different ways. It could be something round on our wrist or something rectangular in our hand. Material Design aims to ensure that access to relevant and relevant data is guaranteed, regardless of the combination of devices a person uses.
This is how, without imposition or pressure, the company simply creates technologies based on the key principle “focus on the user, and everything else will come by itself.”
We are interested in your opinion. Do you consider such a concept to be evil or do you perceive such initiatives as a promising way of interacting with the information environment in the future?
Material Design is a design concept created to unify services, interfaces and other products. The concept was developed by Google and presented to a wide audience on June 25, 2014 at the Google I/O convention. At the core of development color scheme, properties and elements of design objects. Material Design is regularly supplemented and updated by developers. Speaking in simple language, the basic idea is a block-like design that opens and folds into cubes like cards, using a shadow effect. The cards themselves should switch smoothly among themselves.
The strategy of this design is based on creating a holistic user experience, the ability to penetrate services into the most different areas life activity of a PC user.
When creating objects, we proceed from centuries-old experience and rely on it. But software design- this is still just a nascent and systematic developing product. Looking at it completely, we asked ourselves: what does it consist of?
- John Wiley, Chief Design Officer, Google Search
Main principles
The main principles of Material Design include tactile surfaces, printing design, meaningful animation, and adaptive design.
Tactile surfaces. The interface consists of "digital paper". Layers of this “paper” are placed one above the other and cast shadows. Thanks to these shadows, PC users better understand the basics of working with the interface.
Print design."Digital paper" displays "digital ink". For digital ink images, the approach of traditional magazine or poster design is used. The main elements of print design are scale, grid, color and space. From these, focus, hierarchy and meaning are created. Thanks to color, fonts, sizes, background and other elements, the interface design itself is created. Using it focuses attention on the main functionality, key points of product or service management.
Meaningful animation. The clarity and understandability of application animation directly affects the user's time spent personal computer to understand the results of the actions used in this program. Animation is a kind of hint for managing the Material Design interface.
Adaptive design. One of the features of Material Design is its versatility, that is, the possibility of using the three components described above on different devices ah, such as a computer, phone, tablet, etc.
Tactile surfaces
Tactile surfaces are those same pieces of “digital paper” that, unlike regular paper, have superpowers - they can stretch, connect and change their shape.
Surface
A surface is the part of a design element that casts a shadow that makes one element different from another. Material design strives for maximum simplicity and “clean” design.
“Pure” design is usually called the ability to convey the properties of an object through a gradient or shadow, without using structure. All surfaces have their own shadow and a certain height.
Depth
IN " flat design“Try not to use shadows that show volume. At the same time, shadows are set a certain hierarchy and the structure of interface elements. Deep shadow highlights the key subject and focuses attention on it in a subtle and elegant way.
Depth is a clue about how objects interact. At the moment of user scrolling, the green plate is attached to the top layer and forms a shadow. This clearly demonstrates not only the movement of the “ink”, but also the movement white background located below.
The bottom layer of depth is the "bottom".
- Remember logistics. Various dialog boxes, floating windows, toolbars have a certain height. To avoid collisions, they periodically need to move along the Z axis.
- Don't force the buttons. You should use a floating button only in case of urgent need, since its use immediately brings the Material Design effect to the design. You should not use it to confirm any actions or close windows.
- Not everything needs to be on the card. It is appropriate to use a card only when the object contains many forms and a large amount of content. For other options, it makes more sense to use traditional text or lists.
- Minimalism in dialog boxes. Dialog boxes should only be used to confirm user actions when questions arise.
Print design
All objects located on the surface of the material design are applied with “digital ink”. These objects are images, test, pictograms. The arrangement of these objects follows the principle of printing design.
Elegant typography
Typography is important in printing design. It sets the structure of the content and influences the formation of the style of a particular brand.
Typography forms a structure of elements that have their own size, font, hierarchy. With their help, we visually understand which elements are more significant and why some of them are key and others are secondary.
Contrasting typography
One more important principle printing is a contrast of typography. It's easy to see that a large headline and dark font mean something important and basic, while smaller text and a lighter tone mean secondary information. Contrast allows you to highlight the main points, giving the overall aesthetics of the content.
Modular grid and guides
While screen design uses basic grids, print design uses modular grids. For Material Design, a grid with a step of 8dp is used.
A distinctive feature of content placement in Material Design is the placement of basic guidelines. Thanks to them, indents are created from the screen borders, affecting the structure of the page content and the control of the user's gaze. As a result, in the center of the screen we see the main text, and additional elements located outside it, at the borders.
Geometric iconography
The simplest icons have long been used on the basis of the Android system. In Material Design they look even simpler and more visually pleasing.
For example, indicators and buttons are highlighted in rich, bright colors. Thanks to these colors, they place emphasis on the main control elements (floating buttons, etc.). If it is necessary to introduce additional colors into the design, it is recommended to use basic, discreet shades.
Download icons on the topic:
Color
Color in design is responsible for expressiveness. Previously, in Android the color scheme was secondary, but now it is assigned one of key roles. In Material Design, the basic color palette consists of accent and primary shades.
The action bar is painted with the main color, and status bar highlight it in a more saturated tone. Accent color is used for stripes, indicators, floating buttons. It draws attention to key elements of the board.
Accents are placed pointwise and in small quantities. For the rest of the interface, colors are used in accordance with the rule: a large amount of text (a list of mail letters) is left standard size and add color to attract the attention of the PC user; a small amount of text (calculator, photo) is increased 2-3 times in size and colored dies are added.
In the Android system, you can color the interface dynamically, that is, highlight the main colors from the overall photo.
Beautiful photos
In Material Design you can and even need to use various photographs and illustrations. Often pictures have no frames. The status bar itself is made colorless so as not to distract attention from the images. “Digital ink” is always used not only for beauty, but also for the functionality of the design.
- Branding is recommended.
- We must not forget about indents and free space (for the base grid 8dp, for indents - 72 dp).
- Use bright images.
Meaningful Animation
Material Design, like the physical world, uses meaningful animation to show the user what has happened in the moment. That is, the user should see that not a single object comes from nowhere and disappears into nowhere.
Example 1. The animation shows that this particular card, when clicked, came to the foreground, opened up, and more information became visible.
Example 2. When you click on a date in the calendar, an event pops up, which is smoothly torn off as a layer from the general calendar, turns into a separate block and is revealed in a detailed separate block with a description of this event.
Animation helps to concentrate the user's attention and focus his gaze on the actions of the interface.
Reaction
One more key point animation in Material Design is considered a reaction to certain actions PC user. Changes in the Android L interface occur after touching your fingers. These changes are reflected in a wave-like action.
Microanimations
Micro-animations are extremely important. They are used as a response to all user manipulations. This makes the interface more detailed and responsive.
Clarity and Sharpness
The final principle of animation is clarity and sharpness of action. Material Design has an interesting animation curve. All objects quickly respond to user actions, return sharply, but take a little longer to freeze and transition to the final calm state. Ultimately, the user does not waste time waiting, which means he does not get annoyed or experience negative emotions when interacting with the interface.
- Think through the animation in advance.
- Use animation optimally (excessive use is discouraged, as all animation must be meaningful).
Adaptive design
The final key aspect of Material Design is the concept adaptive design. This means options for applying the other three aspects on different device screens (phone, PC, TV, etc.).
From general to specific
The most popular method is to compress the amount of information along with compressing the screen itself. You can fit a lot of content on your TV. The phone first displays a list, which can be clicked to reveal detailed information.
Indentations
On large screens, content is placed using blocks. They fill free space and can be stretched in width. Stretching occurs with readability of the content in mind. On the remaining part of the screen, indents are created on which floating buttons or tiles can be placed.
Guides
Indents are set using guides. The width of indents for smartphones, tablets, computers and TVs will be completely different. So, for a tablet it is 80 dp, and for a smartphone screen it is only 72 dp.
Dimensions
All interface elements must have multiple proportions. The screen sizes of tablets and smartphones differ from each other, but applications using elements with multiple parameters adapt to any device size.
Blocks
Modular grid, consisting of blocks, helps set a visual rhythm for optimal decision making.
Toolbar
Action bar- one of the main components of the interface. It contains action buttons and headings. In Android L, the action bar has become an attractive and functional control unit. This was achieved due to the fact that forms, floating buttons, and pull-out navigation with convenient controls can be placed in the Toolbar.
- You should not use navigation drawer for simple tools. It is recommended to use navigation only for multiple tasks in the application.
- Be bold with toolbars.
- Place the floating button in the most optimal location. Don't snap strictly to the bottom corner.
- Practice interface elements both vertically and vertically horizontal screen devices.
Material as a metaphor
Google developers have managed to combine good, attractive design with the innovations of modern technology and science.
Materialism in digital sphere This is not the first time they have been used. Thus, Apple recently used the philosophy of skeuomorphism (imitation of the perception of visual objects from the material world around us) in interface design.
A good example of this is the Newsstand app. Here we visualized objects familiar to us: newspapers, magazines that stand on shelves. By flipping through these magazines, we simulate real flipping through an ordinary book from Everyday life. Thus, traditional real life is duplicated in “digital”.
Development of digital design
The vast majority of users interact with the digital environment every day. They no longer require exact similarities between virtual objects and the real world. The sooner all users get used to this moment, the sooner digital design can begin to actively move forward.
Based on this, Material Design is no longer so influenced by skeuomorphism. Now this is just a new step in the evolution of virtual objects.
Visibility as a fundamental basis
The surfaces and edges of the various controls in Material Design create cues in how to navigate and manipulate the interface, similar to actions in real life.
Tactile characteristics of objects help to distinguish key objects from additional ones and determine the relationship between them.
Material design fundamentals also include print design principles. Emphasis is placed not only on aesthetics, but also to create a special structure, hierarchy, and create a simple management system.
The visual component of Material Design is based on: rich colors, crisp edges, large typography and large indents between different elements.
Meaningful dynamics
The main attention is focused on the behavior (actions) of the user. His interaction with design occurs on the basis of accumulated user experience, and nothing else.
Examples of websites in the Material Design style
As soon as the concept was released online, many representatives of Material Design appeared online.
The example sites are created in strict accordance with the basic principles of Material Design. They are simple and clear, contain floating buttons, shadows, bright colors And visual effects, smooth navigation. All of this adds up to a great user experience.
Videos
Material Design has attracted a huge audience. He demonstrates how to correctly create a UI so that it is absolutely understandable and clear to the user, just like a familiar object from the real world that you can touch with your hands.
Roman Nurik, one of the designers Google Teams, described how the I/O 2014 application changed during development to comply with the principles of Material Design. We translated his video especially for you.
Video from the Google Design channel.
At the conference for Google developers I/O 2018, except updated Android and deeper integration artificial intelligence to your services, Google company presented new standard in system design and mobile applications- Material Design 2.0. What's new?
White space and translucency
One of the most noticeable changes The new material design has a minimal amount of saturated colors and gray backgrounds, only solid white space and translucency. In my opinion, this looks very fresh, thereby bringing the operating system and software to new level visual perception. From now on, stock Android P, without graphic add-ons from third party manufacturers, I rightfully consider it the most beautiful solution among interfaces. IMHO.New developer tools:
Material Theme
The Material Theme plugin for Sketch is essentially a library of fonts, icons and corporate colors provided by the new Google guidelines in Android P. Also, when developing with its help, you can edit the shape of components and typography in your project in a couple of clicks.
More roundings and minimalism
As many have noted, the appearance has become very similar to Apple iOS 10 and 11, but definitely this step was taken by the company specifically for manufacturers and owners of frameless smartphones, the number of which is inexorably growing every year, because this appearance of the system and software goes much better with their rounded displays.
New fonts
In the new design of logos and branded services developers and Google designers We used the Product Sans typeface. A special branch of Google Sans has been created for them. It is based on the aforementioned font, which replaced the standard Roboto.
So soon we can expect a large-scale redesign of all web and mobile Google services. At the moment, one of these first-borns in the application store is Google Play Games, Google Tasks and an app for Google I/O 2018 conference participants.
- Updated style of corporate illustrations
- Using the logo's four primary colors as a visual language
Example, a new version Gmail:
Material Design 2.0 Concepts
Of course, the design community responded to the upcoming design changes from Google, and exactly a month ago, Reddit user under the nickname Morphicsn0w presented his vision of the Google Play site.
Except visual changes in the form of rounded cards presenting applications, the author abandoned unnecessary, in his opinion, sections such as recently downloaded applications, thereby making the store interface simpler and more informative.
On app description screens, Morphicsn0w has focused on app descriptions, shifting the focus away from information about download numbers and user ratings.
The designer also redesigned the search system in Google Play, adding sorting of the results found by price, update date, rating and number of downloads. The presence of such sorting would greatly simplify the search for the necessary software in the store, I am waiting and hoping for the implementation of such from Google.
The beloved YouTube, the author of the portal 9to5Google, and part-time good designer Alex Brooks, also fantasized about what could be changed in the existing video hosting client, was not left out. The result personally inspired me very, very much.
The first thing Alex changed was navigation bar main screen, painting it in bright, cheerful colors. Following the first point there is a redesigned search line, now it is not displayed separate button, but occupies the entire useful area of the top part of the application, thereby simplifying access to it. And the bar with the number of subscribers, a button to subscribe to the channel and return to the previous level in the author’s view is located at the bottom, which is also a useful solution from the point of view of ease of use.
The designer combined the library section (history of videos watched, managing downloaded videos, liked videos, etc.) with the user profile settings section; now both parameters can be accessed by clicking on the userpic. In my opinion, although this is controversial, it is still to some extent correct solution, as it simplifies user interaction with the service and makes the application more understandable for new users who are just getting acquainted with the world mobile technologies.
More detailed information Read about the YouTube concept from Alex in the original article.
Google Play Music concept in Material Design 2.0
Inspired by the presentation and dozens of works by other designers, I decided to try and do something of my own, using one of the current Google services as a basis, my choice fell on Play Music. I had never worked with this service before, specifically as a streaming platform, but out of duty I had to. The service generated extremely positive impressions, if only because the application itself works adequately and does not crash, unlike Apple Music, which I have been using since its release on Android.
In general, the services are similar, and both perform their primary task - playing music. And both have complaints regarding the interface, but since today we are talking about Google, we will consider their service accordingly.
Main screen
The first complaint about the main screen is that I don’t like what it is huge space, exclusively occupied search bar and covers of playlists with selections. Actually, first of all, I decided to fix this.
In my concept, the main screen is the same, but slightly rethought feed with selections of albums, songs, playlists based on the user’s tastes, only now to view the content and go to play the desired track, you don’t have to make an extra click and leave the main screen, the same applies to the transition between sections (home, recent, hit parade, etc.), which can now be done using swipes across the screen.
Player
The second point that is unsuccessful in design, in my opinion, is the player. IN official application Google Play Music song covers stretch across the entire diagonal of the smartphone screen, which is why on devices with high-resolution displays they look very sloppy and smeared. I presented the solution to the problem as follows:
Now the covers are neatly placed in the middle, and a preview of the previous and next tracks is shown on the left and right edges, as if hinting at the possibility of switching them with a swipe.
Media library
The third thing I don’t like about Play Music is the layout and decoration of the media library. In my opinion, its structure is too complicated. For example, to access this section from the main screen, you need to perform as many as four actions: swipe to call sidebar; click to select the “Music Library” section; swipe through the list to select the desired tab (playlists, radio stations, artists, albums).
Therefore, I moved the button with access to added tracks to the lower dock, and when it opens, by default the albums tab will be displayed with the ability to sort them by release date, addition and alphabet.
Menu/Side Bar
In accordance with the new principles of Google application design, I moved the usual menu with access to settings to the upper right corner.
Presentation of the Google Play Music concept on Behance
Conclusion
To summarize, I want to say that I am very pleased with the path that Google is trying to follow. In addition to a major leap in the development and convenience of its services, the company is moving forward with its design code. Writing six months ago an article about the experience of using iOS 6 in 2018, I caught myself thinking that over the years, the mobile operating systems Android and iOS have not evolved much in terms of visual and conceptual design of the interface, but now I am completely unconvinced of my position , at least in relation to Android.
Thank you for your attention!
- Tutorial
Can buttons be hexagonal?
Google I/O 2018 left great amount material for comprehension. What's new? How to live further? Is my application out of date? Can buttons be hexagonal? Are designers no longer needed again? It’s more pleasant to comprehend slowly and in small portions. This portion is about design.
After four years, I became quite fed up with Material Design. By according to Google, 1.5 million applications have been created based on this design system. Why? After all, it was originally created for Google’s internal needs.
It solved the problems of heterogeneity of design for Android and the lack of any system
- It was universal for different devices: tablets, smartphones, web.
- It is designed from the user's point of view and is intuitive.
The system was accused of being inflexible and, as a result, receiving a carbon copy design. If you design a service strictly following the guides, then visually the applications really turn out characterless. On the other hand, why blame the system? Guidelines have never been the bible; one could deviate from them. Maybe you only chose the color for your application in the Google Color palette? I hope not.
On the other hand, by adding custom elements, you risked meeting your Android developers in a dark alley and listening to a long speech about why and how wrong you are. These were dangerous times.
All Material Design Award winners took the same risk. Have you noticed how custom the UI of these projects is? But Google encouraged them, and everyone was surprised.
Now it's obvious: Google wants us to customize our apps. Products should be beautiful and different. The updated MD is an attempt to show designers and businesses how to customize the UI without fear of being scolded by developers.
material.io – Design, Develop, Tools
You can start learning the design system from the website - not only some of the content has been updated there, but also the visual style. Now even the 404 screen will teach you, and by clicking on an element from the guides, you will see its specification with all the distances, fonts and links to download from the Google library.
The result is not impressive yet. The biggest benefit should have been the ready-made code for native elements, but the GitHub link is not that cool. It’s also too early to ask developers to add new elements to your application - the code for them has not yet been provided.
What if your elements are not native? You can see the markings, but you won’t be able to get the cut icons. So it’s too early to talk about replacing Zeplin. 
Google design evangelist Mustafa Kurtuldu on the use of their technology in the development of the Keep and Inbox applications.
To bookmarks
The translation was prepared by the team of the Skyeng online English school.
Material Design provides a set of tools and rules that help you consciously approach UX design when creating an application interface.
But what if these principles don't work for a certain product? And what do Google designers do when they develop a product that goes beyond the classic guidelines?
Material guidelines are adaptive. In this article, we'll look at two Google apps, Keep and Inbox, to understand how they not only deviate from some rules, but also form new ones. Material principles Design.
Inbox: Modular grid
Development of new postal service- a very ambitious goal for Google, given the presence of Gmail already entrenched in the market. Inbox's goal was to add depth to interface design and create a unique user experience and brand identity, playing by the new rules of Material Design.
When the Inbox team was collating preliminary designs, the Material Design concept was still in development. This gave Inbox a great opportunity to set the standards for Material Design while addressing the challenge of depth and volume in the UI.
Depth
Inbox's original design wasn't flexible enough—the grid space only allowed seven emails to fit on a 13-inch screen. This was too little, especially compared to Gmail, which fits 16-20 letters.
If you open Gmail and Inbox in adjacent windows, you can see a big difference in visual weight. And one of the most complex tasks was to find the right balance between content and white space.
Tim Smith
Chief designer at Inbox
By changing the grid settings, line heights, and how the font looks, Inbox designers were able to achieve optimal depth in the interface while still displaying 12-17 letters, each inside a Material Design card. The application interface adapts to the user's device. For example, the font in the “Subject” line changes depending on the screen size.
Colors, images and icons
Using contextual images in email groups is another distinguishing feature service. For example, if a user is planning a trip to New York, he will see the Manhattan sky on a card with the corresponding letter.
There are many icons on the left navigation bar, their colors correspond to their functions in the application. When the user clicks the green Completed button, the background top panel also turns green, indicating that the context has changed.
Top panel
Another important task for the team was to develop the top bar of the application. The initial idea was to create a transformable panel that would not stretch across the width of the browser window, but would change depending on the content.
We worked about a dozen various options this concept until we eventually came to full screen mode, which you see now. We also created several search bar concepts before choosing the best style.
Tim Smith
Chief designer at Inbox
Cards in Inbox expand and contract, meaning the title format changes depending on how the user interacts with by email. The top bar also displays a search bar and a menu with other Google apps. This approach allows Inbox to remain adaptive without complicating the interface.
Keep: Responsive Navigation Samples
Keep is a cross-platform note-taking app that expands and collapses cards on the screen, focusing the user's attention when adding a new note. The bottom navigation bar allows you to quickly create a new note in one click.
Engagement, blank screens and animation
Typically, the user is faced with a blank screen when there is no content on the page. In Keep, this screen looks like a blank canvas where the user can quickly jot down their ideas.
White space encourages the user to explore menu items in a panel that expands to display various filters represented as icons; a layout menu that lets you switch between list and grid, and a left navigation bar where you can change basic app settings.
We worked a lot on animation - how notes are displayed as a stream, how they move when you open and close them.
Genevieve Cuevas
Selecting the Right Material Elements: Bottom Navigation or Floating Action Button
Conciseness and ease of use are the key features of Keep. During the app's redesign, the developers studied Material Design patterns and ultimately chose cards that help differentiate notes from each other, a left navigation bar that makes it easy to customize the app, and a context menu that changes depending on the type of note - like notes with checkboxes that display a menu to check and change the elements in the list.
Taken together, these elements create a clear and functional interface, adapting to a specific situation. In redesigning Keep, the creators experimented with some of the app's basic navigation elements - in particular, they tried replacing the existing navigation with a floating action button.
The original navigation allowed you to create a new note with one tap, and the floating action button required two clicks: one to show options and a second to create a note.
When we introduced the floating button, some of our users complained that creating a note in two clicks was not as convenient.
Genevieve Cuevas
Software Engineer Google Keep
Many users who used the app before and were used to one-click navigation did not approve of this change. By testing and ultimately rejecting the floating button, the Keep developers were able to choose a solution that best suited the interests of their product.
A guide, not a set of rules
The Keep and Inbox teams used the guidelines as the basis for their applications. When they encountered a user scenario that didn't work, they were able to adapt their design to the users' needs.
Material Design offers guidance based on years of Google experience, but with its help it is impossible to solve absolutely any problem. The Keep and Inbox examples show that you can use Material Design guidelines, changing them as needed for your product.
