A practical introduction to Google's Material Design Lite. Change everything the way your product needs it: how Google designers themselves apply Material Design guidelines

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 user interfaces future. Material Design is 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 the advent of the 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 they now? Google services for people? 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's future will no longer be perceived simply as 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 the computer, the screen of which will immediately display the body of that 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 plane of the screen, but with all the advantages that a virtual environment can provide. 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 preserve 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 real-world rule violation. 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, Google team decided to use the real world as a basis for her concepts.

If there is a sufficiently clear system of rules, it becomes possible to add new materials. Paper was an obvious choice due to its ease of display on 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 it seems rather shallow. 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 with digital world completely possible in 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 exactly how, without imposition or pressure, the company simply creates technologies based on key principle“focus on the user and everything else will take care of 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?

• Tutorial

“Is this boring dialog really necessary?”

In this article I outlined the main Material principles Design and gave advice on their implementation. The text was written in the wake of a master class for developers, which we, Robots, organized together with the Russian office of Google (Think Mobile).

Once upon a time, all Google products looked bad in different ways. Even one product per different platforms looked inconsistent.

Everything began to change in 2011, when Google began working hard to unify the visual part of the ecosystem of its products and called it Project Kennedy.

What does Kennedy have to do with it?

The legend is this: President Kennedy initiated the program to fly a man to the Moon (if you believe that this flight ever happened). And the big boss at Google, Larry Page, professes the principle that there is no point in improving products by 10% - they should be 10 times better than those of competitors. If you’re going to launch a product, then go straight to the moon. Here, too, it was decided to radically redo everything.

The result primarily affected the web, but also affected some mobile products. At the same time, separate work was underway on the design of Android - Holo, which replaced the not very aesthetically pleasing interfaces of the old Android.
But there was one problem: Holo was still different from Project Kennedy.


Users had to adapt to new interface when switching, get used to it appearance, location of controls, and so on.
Therefore, at some point, a group of designers from different parts of Google got together and began to wrestle with this problem in order to solve it once and for all.

In 2014, at the I/O conference, a new design system was presented, an approach called Material Design. The new design system allows you to create consistent user experience on all screens: desktop, smartphone, tablets, watches, TVs, cars. For Android Applications Material Design represents the evolution of Holo's visual language and design guidelines. In many ways it's a more flexible system, designed with the expectation that other designers will use it - Google was just the first user.

Material Design allows you to take a more objective approach to making design decisions: how something looks, how something works, how animation is done, and so on. It sets reasonable limits, but not unnecessary restrictions.

4 Principles of Material Design

Material Design is based on four main principles:

1. Tactile surfaces. In Material Design, the interface is made up of tangible layers of so-called “digital paper”. These layers are located at different heights and cast shadows on each other, which helps users better understand the anatomy of the interface and how they interact with it.
2. Print design. If we think of layers as pieces of “digital paper,” then when it comes to “digital ink” (everything that is depicted on “digital paper”), the approach taken from traditional graphic design is used: for example, magazine and poster design.
3. Meaningful animation. In the real world, objects do not appear out of nowhere and do not disappear into nowhere - this only happens in movies. That's why at Material Design we're constantly thinking about how to use animation in layers and digital ink to give users hints about how the interface works.
4. Responsive design. It's about how we apply the previous three concepts to different devices With different resolutions and screen sizes.

So, let's move in order.

Tactile surfaces

Let's start with tactile surfaces. These are the same pieces of “digital paper” that, unlike regular paper, have superpowers - they can stretch, connect and change their shape. Otherwise, they behave in full accordance with the laws of physics and the legislation of the Russian Federation.

Surface

What is a surface? Basically it is a “container” with a shadow and nothing else. But this is quite enough to distinguish one object from another and show how they are located relative to each other. The Material Design philosophy strives for simplicity and “clean” design.

There is no need to go too far and use texture or apply gradients to depict chiaroscuro. There is no need to give visual properties of the skin like that of grandma's apartment door - a neat shadow can express a lot. But each surface has its own height - a location on the Z axis. And each of the surfaces casts a shadow on the bottom, just like in the real world.

Depth

In the traditional " flat design“Such shadows are avoided as any manifestation of volume, but they perform an important function of indicating the structure and hierarchy of elements on the screen. For example, if the rise of an element is greater, then its shadow is greater. This increased depth helps focus the user's attention on critical things and do so gracefully.

Depth also provides clues about interaction. Here, as the user scrolls, the green patch sticks to the top layer and a shadow is added. This shows that it is not just the “ink” that is moving, but the white background is below and moving entirely.

It is important to note that depth has a “bottom”. It is assumed that it is limited by the thickness of the mobile device itself. That is, if on a smartphone it is a centimeter from the glass to the back wall, and you have a credit card in the interface, then you cannot simply turn it over - it will rest against the glass and the back wall.

NB!

1. Depth must make sense. Ask yourself the question: “Why is this and not otherwise?” If there is no answer, it makes sense to look for another solution.
2. Take care of logistics. Floating buttons, toolbars and dialog boxes are at a certain height. Sometimes they need to move along the Z axis to avoid collisions when something happens. You need to be extremely careful with this choreography.
3. No need to force the button. The floating button is a very distinctive element. Many people think that it is worth adding it to the interface: this immediately becomes Material Design. But it should only be used for a key action in your application. If you need to close a window or confirm an action, then you do not need to use a floating button. There are other elements for this.
4. Not everything needs to be on the card. If an object has many forms and contains many different content, then the card is suitable. And if not, then maybe it would be better to do it with plain text or a text list?
5. Is this boring dialog really necessary? Google designers have tried to make dialog boxes better, but Bottom Sheets are still better suited for most tasks. There are also Snackbars. Dialog boxes are needed only to ask a question to the user.
6. Use list expansion. This is an underrated pattern, but it is quite a Material and solves the problem well.

Print design

Since in Material Design we call surfaces “digital paper”, then everything that is placed on it - text, images, icons - is printed with “digital ink”. And Material Design uses classical principles printing design in interface design.

Elegant typography

IN printing design typography plays a fundamental role important role. Pick up any magazine and you'll notice that typography does two things: important functions. Firstly, the choice and composition of the font is a style-forming element of the publication’s brand. Secondly, typography sets the structure of the content.


There is quite a lot of text on this screen. But if you discard the icons and turn the text into gray blocks, it becomes obvious that the structure is quite visible.

Before us large headline and a set of smaller elements that differ in their saturation - the more important ones are darker. At the same time, we clearly distinguish the grouping due to the fact that some rectangles are located close, and there is a significant indent between the blocks. In general, everything is in the best traditions!

Font size

The website google.com/design/spec has a standard font palette that you can safely use. The palette uses the Roboto font, but can be replaced with your own signature font to support the brand. It is important to test everything carefully, as font rendering may work differently on different devices. Typically OTF fonts perform better than TTF.

Contrasting typography

Another principle from the world of printing that fits well into Material Design is contrasting typography - a really noticeable contrast between the font sizes of the title and the typesetting text. It's beautiful and highlights the main thing well.

Modular grid and guides

Now to the location of the content on the screen. In print design, modular grids are used; in screen design, these are more basic grids with very small modules. Thus, Material Design uses a grid with a step of 8dp. DP is a density-independent pixel, a unit much like the point unit in iOS.

But the main distinguishing feature of placing content in accordance with the principles of Material Design is the placement of key guides. They set indentations from the edges of the screen, structuring information and controlling the user's gaze. If you are familiar with the design of multi-page publications or have read Tschichold, then you probably know a lot about the grid and margins and understand where the legs come from.

In fact, we see a column of text in the middle and a large margin on the left, which makes it possible to focus on the main content, and provide supporting elements in the margins.

Geometric iconography

If we talk about iconography, then simple icons have been used in Android for some time, but in Material Design they have become even simpler and friendlier. On the unofficial resource materialdesignicons.com, designers can find icons for their purposes and contribute where possible.

Color

As in print design, color is an important means of expression in interface design. In the old Android, color was something extra, but now it plays a more prominent role. In Material Design, the standard app color palette consists of a primary color and an accent color.

The main one is used for large areas like the action bar, and the status bar is painted in its darker variation. A brighter accent color is used in spots on controls, buttons, stripes, indicators, etc. The accent color is designed to attract the user's attention to key elements, such as a floating button.

How much color to use? Accents are placed pointwise, in small quantities. To colorize the rest of the interface there is a simple basic rule. When there is a lot of text, for example, this is a mail list, you should leave the app bar standard size and color it to allow the user to focus on the content. If there is not much content, for example, detailed viewing individual element, photo or calculator, then this is an excellent opportunity to use large colored dies - 2x or 3x app bar height.

Android supports a library called Palette that allows you to extract color from photos. That is, it is possible to dynamically color the interface based on photo illustrations in the application.

We took a photo, and the algorithm identified 6 colors with different characteristics from it:
- there are 3 rich and 3 muted colors;
- they are divided into light, standard and dark tones;
- each background color has its own text color, which can also be used.

Beautiful photos

Finally, just like print design, Material Design encourages the use of photography and illustration in all its glory. Pictures are mostly placed without frames, often “right through”. Even the status bar is specially made transparent so as not to interfere. Moreover, every drop of “digital ink” on the screen has a function; almost nothing is just for decoration.

NB!

1. Brand with pleasure. Google is in a better position to use bright colors as branding, but this shouldn't be seen as a problem. You can choose colors from the corporate brand book and use the logo in general.
2. Don’t forget the indentations and “give some air.” A base grid of 8dp and a left margin of 72dp is pretty much the rule. Let the content be good and free.
3. Expressive photos make the difference. Photographs and illustrations are our choice as means of expression.

Meaningful Animation

In the real world, objects can't just appear out of nowhere or disappear into nowhere. This would cause confusion and confuse people. That's why Material Design uses meaningful animation to show exactly what just happened.

Example 1. The animation shows that this particular card, when clicked, came to the foreground, opened up, and more information became visible.

Example 2. After pressing, an event in the calendar comes off the surface, turns into a separate layer of “paper”, begins to transform and opens up as detailed information about the event.

The interesting point is that active movement attracts the eye - this is natural for our vision. Using animation, we control the user's attention.

Asymmetry

Since the depth of the interface is limited by the thickness of the device, all object transformations have to be done in the plane. This also leads to the fact that the transformation animation must be asymmetrical - that is, the change in the width and height of the object must be independent. Otherwise, the illusion of moving closer or further from the viewer arises, and by a very large amount. long distance.

Reaction

Another very important principle animations in Material Design - reaction to user actions. Where possible, the epicenter of interface changes should be touching the device screen. For example, a wave that appears and goes from the point of contact with a finger. This effect is implemented without problems in Android L.

Microanimations

In Android L, we can animate every element of the application - be it transitions between content or small action icons. Every detail of an application is important, and micro-animations add greater detail and responsiveness to every user action.

Clarity and Sharpness

And the last, key principle of animation: movement should be fast and clear. Unlike the banal acceleration at the beginning and slowdown at the end, the animation curve in Material Design is more natural and interesting. Objects react faster and reach the target state, return faster, but take a little longer to reach the resting state at the end. As a result, the user has to wait less (less annoying). At the same time, where the object has already left the sphere of interests of users, it allows itself to behave more naturally.

NB!

1. Don't leave animation for last. Animation should not be left until the very end - it can be a key factor in the user experience and should be thought through in advance.
2. Know your limits. Too much animation is also bad. Control yourself and remember that it must be meaningful.

Responsive Design

The last major aspect of Material Design is the concept adaptive design. That is, how can we apply all three first concepts on different devices and screens in different form factors.

From general to specific

The most common technique is to reduce the amount of information displayed on the screen along with making the screen smaller. If on big screen we can afford to show both a list and detailed information on the selected element, while on smartphones the list is first displayed, and for details a separate screen is needed. In the case of tablets, the app bar can sometimes be enlarged to at least slightly cope with excess free space.

Indentations

Placing content using blocks greatly simplifies the work with free space on big screens. We know the contents of each block, we understand how wide it can be so as not to lose readability, and also how narrow so as not to be too crowded. On wide screens, blocks are stretched to their readability limits, and then margins are added from the edges, which may well be large. They can be filled with a floating button and colored dies.

Whiteframes

Ideas for organizing space and spacing for different screens can be viewed on the website google.com/design/spec in the Whiteframes section. This is a great place to start, understand general meaning and then continue your own experiments.

Guides

The guides give us indents for the “ink” on separate sheets of “paper”. On a smartphone we have one sheet and one good indentation on the left, but on a tablet there are two of them and in both cases there is an indentation. It is important that the indentation will be different for these two form factors. On a tablet it is 80dp, and on a smartphone it is 72dp. The margins from the edges of the screen are also different.

Dimensions

It is recommended to take multiple proportions for all elements. In particular, choosing the app bar size is much more convenient if you make it a multiple: 1x, 2x, 3x. This size is different on smartphones and tablets, but the application adapts without problems.

Blocks

Thinking in blocks can generally be helpful. If you set such a modular grid of blocks divisible by 8dp, you will get an excellent visual rhythm and it will be more convenient to make decisions. Go to the site with whiteframes and look at the materials.

Toolbar

Action bar is one of the most important parts of the interface. It contains the header, action buttons and navigation. IN Android Lollipop The action bar has turned from a constrained strip at the top into a full-fledged widget - functional and beautiful block application management. This became possible due to the fact that now the toolbar can accommodate a lot of functional elements, which we had never dreamed of before:
- input fields, forms;
- floating main action button;
- the toolbar is hidden by the extended navigation, but here we see a completely functional widget;
- the toolbar is convenient to manage if necessary.

NB!

1. A navigation drawer is not always needed. Google uses slide-out navigation in its apps very often, so you may see it in different examples. But Google has a lot of problems that can be solved with its help: posting help, settings, login/logout, user information, and so on. If you have similar tasks, then everything is OK, but if you are making a simple tool, then it’s not worth it.
2. Be bolder and wittier with toolbars. The ability to change the size of the toolbar dynamically, making it double or triple size is very cool and convenient. Most designers are afraid to deal with this and choose one size once and for all, but here you can and should be bolder.
3. There is no need to make a ghetto out of the bottom corner for a floating button. A floating button can be anywhere: bottom, top, right, left. Of course, in a corner it may be convenient to reach it, but this is not the only option. The button can be moved from place to place depending on the task.
4. Both smartphones and tablets; both vertically and horizontally. The range of Android devices is large, and this does not make life easier for developers. But the truth is that users do have all these devices that they turn this way and that (even if we are talking about smartphones). This moment needs to be worked out.

This is Material Design. Don’t be afraid to experiment and make mistakes: don’t get hung up on copying existing solutions. Try it!

Tags: Add tags

Tag the post with your own tags It is better to separate labels with a comma. For example: programming, algorithms

Comments 121

• • • • • • • • • • Do you, like Google, only hold your phone horizontally?
                    

                    In vertical only 50-70% of the screen is used

                    
                    

                    • There is quite a lot of text on this screen.

                      Is this a lot of text? What has Twitter done to people...

• Tutorial

Can buttons be hexagonal?

Google I/O 2018 left huge 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 is more pleasant to comprehend slowly and in small portions. This portion is about design.

After four years, I got pretty fed up with Material Design. According to Google, 1.5 million applications have been created using this design system. Why? After all, it was originally created for Google’s internal needs.

It solved the problems of heterogeneous 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 own Android developers in a dark alley and listen 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 advantage should have been ready code for native elements, but a GitHub link isn't 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.

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 shape new principles of Material Design.

Inbox: Modular grid

Developing a new email service is a very ambitious task for Google, given the already established Gmail in the market. Inbox's goal was to add depth to the interface design and create a unique user experience and corporate 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

Primordial Inbox design was not flexible enough - the grid space only allowed seven letters 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 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

The use of contextual images in groups of letters is another distinctive feature of the service. For example, if the user is planning a trip to New York, he will see the Manhattan sky on the 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 green button"Completed", 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 for 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.

Free 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 elements in the list.

Together, these elements create a clear and functional interface, adapting to a specific situation. When redesigning Keep, the creators experimented with some of the application's basic navigation elements - in particular, they tried to replace 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

Google Keep Software Engineer

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 Google's years of experience, but it can't solve absolutely every problem. The Keep and Inbox examples show that you can use Material Design guidelines, changing them as needed for your product.

Google Images allows you to find information on the Internet that is presented visually. New features like image captions, highly visible icons, and AMP pages in search results will help users quickly find what they need.

By providing images with additional information, you will achieve greater search accuracy and attract more interested users to your site. Optimize your pages and the images on them so that they are more likely to be found in Google Images. To do this, follow the recommendations below.

Prohibiting clickable links in image search results

If you wish, you can prevent clickable links from appearing in Google Images search results, so full-size images will not be shown on the results page.

Instructions

1. When requesting your image, check the HTTP Referer header.
2. If the request comes from a Google domain, send a response with HTTP code 200 (OK) or 204 (No Content).

Google will still be able to detect the image when it crawls the page, but search results will show the thumbnail image created during the crawl. Such a ban can be resorted to at any time, and re-processing of images on the site will not be necessary. This is not considered camouflage and will not result in sanctions.

Make the site user-friendly

To improve your content's ranking in image search results, create pages primarily for users, not for search engines . Here are some tips:

• Remember that context is important. Make sure your visual content is relevant to the topic the page is about. It is advisable to use only those images that complement the rest of the content in meaning. It is highly discouraged to display text with images on a page unless the content of either type is original.
• Be smart about your placement. Whenever possible, place images next to the text they illustrate. Sometimes it makes sense to place a key image at the top of the page.
• Don't place important text directly on pictures. Try not to use text on images, as it is not accessible to all users in this form. This primarily applies to such important text elements as page headings and menu items. Among other things, text in images is not recognized by tools used to translate pages into other languages. To ensure that your content is as easy to read and find as possible, add text to the page only when HTML markup, and also do not forget to enter descriptions for the pictures in the alt attributes.
• Create good, informative websites. The content of the page as a whole is no less important when searching in Google Images than the visual content itself, since it allows you to process it more efficiently. For example, fragments of text with specific page. Google also takes into account the quality of the information presented on the site when ranking images.
• Create sites optimized for mobile devices. Users are more likely to search Google Images on mobile devices than on desktop. Therefore, it is important to make your website easy to view on devices of all types and sizes. Checking the ease of viewing on mobile devices will help you find out whether pages are displayed correctly and whether there are any errors on them.
• Be careful about the URL structure for your images. In addition to file names, Google takes URL paths into account when processing visual content. Try to work out logic circuit for image URLs.

Pay attention to the title and description of the page

Google Images automatically creates titles and descriptions for images so that the user understands how a particular result relates to their query. This helps users decide whether to click on a result or not.

We get the necessary information from various sources, including the title and meta tags of each page.

To ensure that the titles and descriptions we create are descriptive, follow the guidelines outlined in this article.

Add structured data

If you add structured data, your images will appear in Google Images as rich results (including highly visible icons). This will give users a better understanding of your site, ensuring that those who are most interested in visiting your site will visit it. Structured data is supported for the following content types:

In Google Images, the AMP logo helps users choose pages that load faster. Try converting the page where your images are located to AMP format. Note that the landing page is the one the user lands on after clicking on a search result.

Add high-quality photos

Users like photos more good quality. Clear thumbnail images in search results are also more likely to attract visitors to your site.

Place images correctly among the text and choose meaningful headings, file names and captions for them

Google extracts information about the subject of an image from other content on the page, including image titles and captions. Whenever possible, place images on pages dedicated to the topic and next to the text they relate to.

The file name can serve the same function as headers with captions. That's why dog.jpg as a name preferable to IMG00023.JPG.

Add image descriptions to alt attributes

Alt text in alt attributes makes content accessible to users who cannot see images on pages (for example, because they are using screen readers or have a slow Internet connection).

When determining the subject of an image, Google takes into account descriptions in alt attributes, as well as image recognition results and page content. Additionally, the alt text can be made into link text if you decide to use an image for that purpose.

Try to come up with as informative a description as possible that matches the content of the page. Do not overuse keywords, as this creates a bad impression on users and may be perceived as spam.

• Bad option ( alt attribute not filled):
• Bad option (abuse of keywords):
• A better option:
• Best option:

Use Sitemaps for Images

Images are an important source of information about the overall content of a website. You can provide additional information about images and provide Google with the addresses of images that might not otherwise be discovered in your Sitemap file.

Sitemaps for images, unlike regular files of this type, they can contain URLs from other domains. This allows webmasters to use for posting graphic files CDN (content delivery network). We recommend checking domain name SDK in Search Console so that we can notify you when crawling errors are detected.

Supported Graphic Formats

Google Images supports the following formats: BMP, GIF, JPEG, PNG, WebP, SVG and embedded images.

Inline images are a collection of bytes of graphic data in a tag . Example code for such an image:

image data…">

Instead of image data, you should substitute a Base64 encoded string.

Although inline images can reduce the number of HTTP requests, webmasters should carefully consider their decisions as they may result in significant page overhead. You can learn more about the pros and cons of embedded images on the Web Design Fundamentals website.

Responsive Images

Responsive web pages are generally easier to use because they can be viewed on a variety of devices. Tips on how to work with images on a responsive website are presented in the corresponding section of our resource "Web Design Fundamentals".

Images are posted on responsive page using tags or However, not all browsers and search robots recognize these tags, so we recommend that you also include a fallback URL as an attribute value in .

Using a tag

The srcset attribute allows you to specify in an element multiple versions of the same image for different screen sizes.

Example

Using a tag

Element Is a container with which tags are grouped with different values ​​for the same image. As a result, the browser can choose suitable option images based on device characteristics such as pixel density and screen size. In addition, with picture element convenient to use new ones graphic formats on pages that can be displayed in a simplified form if a particular client does not yet support such formats.

Optimize your images for SafeSearch

Safe Search is a feature that blocks or allows images, videos, and sites with sexually explicit content to appear in Google search results. In order for the corresponding settings to be applied properly, you need to provide Google information about the content type of your images.

Post images intended for adults only in a separate address

If your site contains visual content intended for viewing by adults only, we highly recommend place it separately. Example: http//www.example.com/adult/image.jpg.

Add Metadata to Adult Content Pages

If the user has applied the SafeSearch filter, Google algorithms Based on various data, they determine which results not to show. In the case of images, machine learning plays a role, but quite simple factors are also taken into account, such as where and in what context a certain image has been used before.

The most helpful way to differentiate adult-only content is the special markup. If you publish such content, we recommend adding the following meta tags to the code of your pages:

Many users don't want adult content to appear in search results, especially if children have access to the same device. Therefore, by using one of these meta tags, you are ensuring that users don't end up having to view inappropriate content.

Like any other algorithm, SafeSearch can make mistakes. If you believe your images or pages are being excluded from search results in error, .

And finally

Was this article helpful?

How can this article be improved?