Change everything the way your product needs it: how Google designers themselves apply Material Design guidelines

The Material design style (material design in the Russian version), having gained incredible popularity, remains an incomprehensible and unknown object for most. We will use simple and clear examples to understand what material design is and how to use it.

Initially, Google designers set themselves three global goals:

  • Create not just a new style, but an entire design system in which the principles and rules will be clearly stated;
  • Update existing styles (FLAT/Metro, minimalism and others), relying on new technologies.
This design system was required because mobile applications and sites have evolved from some addition to regular websites to an integral part of them.

Where did Material Design come from: mobile internet statistics

The small screen of a mobile phone places much higher demands on usability, forcing developers to carefully consider all the mechanics of an application or adaptive website. A new style Google was created, among other things, to unite “mobile” and “desktop” sites, coming up with a single concept for them.

“Material” in design: what is it?

The basis of the style was the concept of material. This is the basic “building block” from which the functional design blocks are assembled. Briefly it can be described as follows:

  • You should want to touch it;
  • It is interactive, and on the monitor screen it behaves in the same way as some physical object would behave in life;
  • It looks like paper;
  • It creates shadows, bends, moves like a real one.

An example of overlaying layers of “digital paper”

These conditions are quite understandable: you’ve probably noticed – more than once – that more often than not you want to click on a “tasty”, voluminous button that behaves like a real one when pressed. Since the computer screen transmits only visual images, people with a different perception system (auditory and kinesthetic) find themselves deprived and do not receive the sensations to which they are accustomed. The designer can only simulate: make the button such that this image evokes in the visitor’s imagination a feeling as if he is touching this button and feeling its roughness, angles, volume. This is important for kinesthetes, for example - these are people who are especially susceptible to tactile sensations.

Of course, such properties have been used in design before: for example, large glossy buttons with highlights were popular in the Web 2.0 style. But in the material design the properties are clearly stated. In particular, all elements have the same “thickness”: there are no more web buttons that stand out from the rest of the page blocks.

Style button material design and Web 2.0 button

In addition, according to the rules that Google designers came up with for material design, individual elements “lie” close to each other, and do not hang in the air. As a result, shadows are always small and have clear contours (instead of shadows from nearby diffuse light, for example).

Other important difference the new style is its dynamism. The reason here again lies in mobile phones and tablets: the limited screen size does not allow you to accommodate all necessary information and the controls are visible, and the user has to move, scroll and click a lot. Google has provided clear schemes for material design: any movement has its own meaning - this is either a sliding menu, or an element that can be removed by sliding a finger, and so on.

Errors and misconceptions

First. To create a material design, it is enough to replace all the elements and backgrounds on the site with textures. No! If you do this, you will end up with a dirty and ugly site that will not even reach the level of web-based ones.

Second. Realistic materials should be used in design. Not necessary! It is important that they behave like real people. It doesn’t matter whether it’s a real wood texture or a “synthetic” texture created in Photoshop using the Noise tool.

Third. The material and its interaction are the only things that distinguish this style. No! To achieve a “canonical” material design, like Google’s, you need to follow other principles:

  • Pictures are drawn without gaps, edge to edge;
  • Large, easy to read sans serif fonts;
  • Color coding;
  • Icons made according to the same material design principles;
  • Adaptive layout.

A complete list of rules can be found in the official Google section about material design.

Android material design

The application of general rules to mobile applications also has its own characteristics. Remember we talked about shadows? Initially, material design elements for Android really lie on top of each other, like pieces of paper. But with interaction, every element, be it a dialog box or a navigation button, rises to the top. This is the way in which this style stands out active blocks. It uses the same principle that has been embedded in the technology of pop-ups since Web 2.0.

Now “the layered principle has moved from pop-ups to the entire interface

Interestingly, the developers of material design at Google even clearly defined all the parameters for each of the possible interface elements!

Colors in material design

Approach to color scheme reminiscent of FLAT-style. These are quite bright, rich, natural colors. Material design involves the use of three main types of colors:

  • The main color that dominates all interface screens;
  • An additional color that usually denotes blocks that are related to, explain, or complement the main content. Often it is simply a lighter or darker shade of the main color.
  • An accent color that serves to highlight buttons, conversion elements and other important things.

Material design colors: Google palette

June 25, 2014 Google company presented to the public its new vision for the design of interfaces of the future - a whole set of rules and conditions according to which the interfaces of all the corporation’s products will henceforth be built. Why was all this needed? Just five years ago, all Google products were very different from each other, including different versions one application per different devices. The developers thought about creating special rules for the construction and unification of all developed applications and services, which were later united under the common name “Project Kennedy”. It was this project that later developed into Material Design (material design).

Material philosophy

Thanks to the Kennedy project, all major services and Google services received common features of interface design and construction. This made it possible to unify approaches to creating web interfaces, and later mobile application interfaces.

One of the features of the unified design were cards with information that could be placed in any part of the work area. While exploring them in the Google Now app, the developers asked themselves the question: “What is under these cards?” According to the Vice President for Google design Matias Duarte, this “innocent question lit a powerful spark.”

The design team began to view design not as a collection of planes and pixels, but as an actual physical object. They wanted to convey the same thing to the user, so that he would have a feeling of tangibility of the interface, that what is happening on the screen looks as believable and logical as possible.

After total dominance skeuomorphism(an exact imitation of real objects of the physical world in design) everyone moved sharply in the opposite direction - . It was this that Google took as a basis when inventing “ material" At the same time taking a small step back towards realism.

Quantum paper

The main element of material design is physical object metaphor similar in properties to paper and possessing most of its properties - size, color, thickness. Each layer of this metaphorical material is located in three-dimensional space and obeys all physical laws, therefore, unlike the classic flat style, it can cast a shadow on the lower layers. All layers are placed on the main bottom material.

Due to its paper-like properties, the material was originally called “quantum paper.” This is the same paper as in the physical world, but it has a number of “magical” properties, for example, it can change its size and move smoothly in space, combining with other “leaves” or breaking into several. Quantum paper is located just above the background, which is most often colored White color. The shadow moves depending on the movement of the material itself, and decreases or increases depending on the height of the material above the background.

Digital Ink

If "quantum paper" is intended to reflect the physical properties of an object, then everything that is on the surface of this paper - colors, images, text, icons - is formed using " digital ink" - another unique object of material design.

Material design uses all the developments of printing in interface design. But here too there are signature Google features. For example, the main font to be used in material design– this is Roboto. However, nothing prevents companies from using their corporate font to maintain their identity. Guidelines for using material design provide examples for using different font styles and sizes in interfaces.

But the most important thing in material design graphics is color. Color is basic expressive means on quantum paper and therefore plays a very important role. It is common for material design to use basic And accent colors. As well as several shades for different situations.

Usually primary colors used for coloring large areas such as headers, action bars, status bars. Used to highlight important elements accent color. For example, for a material design business card - floating action buttons.

Basic principles of material design dictate the use of images. This is such an important element that it is recommended to use images maximum size no frames. Moreover, the action bars become transparent to maximize the view of the image.

Android supports special library Palette, which is capable of extracting the main and accent colors from an image and dynamically changing the design of the application, adapting to the active image (example above).

The Importance of Animation

Continuing to draw analogies with the natural world, it should be noted that nothing disappears into nowhere, just as nothing comes out of nowhere. Thus, in material design it is necessary to smoothly change the existing interface in response to all user actions so that all transitions are logical and obvious. Thus, in material design, animation is a consequence of the interaction between the user and the interface.

Active movement attracts the user's attention, so to achieve the effect of realism it is necessary to use some rules:

  • Asymmetry
    Typically, the size of objects is limited by the width of the device, so to create realistic resizing of quantum paper, it is necessary to asymmetrically change the width and height of the object independently, thus avoiding the illusion of the object becoming larger or smaller.
  • Answer
    There must be a corresponding response to any user action. As an example, Google offers the effect of a wave change in interface objects with the epicenter at the point of interaction
  • Natural authentic movements
    In nature, objects when moving cannot instantly gain speed or stop, therefore, to give realism, all animations should not be linear, but with slowdowns and accelerations.

Conclusion

Material Design– this is absolutely new way interaction and construction of interfaces, which is still under development and can be expanded at any time. However, it is already possible to predict its prospects. At a minimum, it will dominate in the development of Android applications, since the unification of all interfaces will have a positive effect on ease of use.

At Google itself, the development of material design is placed on a par with such significant events as the development of the window interface and cursor control (Xerox PARC) and the creation touch screens(Apple). Well, let's see what comes of this.


Google's new logo and identity pushes material design forward

Detailed guidelines from the material design developer can be found here -

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 want, you can prevent clickable links from appearing in Google Images search results, so full-size images won't 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 provide maximum convenience perception and search of your content, add text to the page only in 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 just as important when searching in Google Images as the visual content itself, as 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 come up with a logical pattern for your 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 relevant topic and next to the text they relate to.

The file name can serve the same function as headers with captions. That's why sobaka.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.

Use Sitemaps for Images

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

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 that you check your SDK domain name in Search Console so that we can notify you when crawling errors are detected.

Supported Graphic Formats

Google Images supports 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 usually 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 placed on a responsive page using tags or However, not all browsers and search robots recognize these tags, so we recommend also specifying 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 meanings for the same image. As a result, the browser can choose the appropriate image option based on device characteristics such as pixel density and screen size. In addition, it is convenient to use new ones with the picture element 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

SafeSearch is a feature that blocks or allows images, videos, and content sites to appear in Google search results. of a sexual nature. 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 a user has applied the SafeSearch filter, Google's algorithms use a variety of data to determine which results not to show. In the case of images, it plays a role machine learning, however, quite simple factors are also taken into account, for example, 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?

What is material design? It is a set of styles and graphics developed by Google, as well as guidelines and rules for adhering to those styles. Material design was first shown at a developer conference, Google I/O, in the summer of 2014. The style is based on the format of “cards” and “blocks” - simple and concise forms and graphic elements, as well as the overall simplicity and freshness of the design - calm, soft colors, lack of volume, small details and detailing in general. The first “release” for material design took place along with the launch of the Google Now service, and officially the style became the basis for the Android operating system quite recently, in version 5.0, also known as Android Lollipop.

In my opinion, material design has several very important advantages over all previous attempts by Google to bring the design of its operating system and programs for it to a unified form, but also some disadvantages. In this short article I will try to present my point of view on new language design from Google.

Material design – arguments FOR

The first and most important argument in favor of the new style, in my opinion, is its execution. I don’t want to sound like a hater of Apple’s technology and approach again, but in this case It’s not scary, because I’m only expressing my point of view. So, in my opinion, iOS update up to the seventh version and Android update up to the fifth version - these are, as they say, two big differences.

In the case of Apple we saw normal transfer previous graphics in flat view, no new idea, no desire to bring something fresh - they just took the existing interface, crushed it, redrawn the icons and added rainbow ones background pictures. It is the background images in new iOS 7 and the menu transparency effects are an indicator of the designers’ bad taste and unwillingness to do something good and kind, it seems to me. In the “seven” they simply showed off everyone’s eyes with beautiful animation effects and the general brightness of the new interface. It seems to me that no one really thought about whether this would be convenient, because otherwise Apple designers would have paid more attention to functional aspects rather than to the rainbow design.

The notification shade, called up from the top, and the control panel, called up from the bottom, are clear examples of a useless “upgrade” in iOS7. The first one was never made clearer - all notifications are piled up in a mess and there are too many of them, the second one was done halfway, switches allow you to turn interfaces on/off, but do not proceed to setting them up and selecting networks

Android 5.0 has also been updated very seriously in terms of graphics compared to 4.x precisely in connection with the transfer of the operating system to material design. And, at first glance, the changes here are similar to those that took place in iOS - a final change in style to a flat one, a lighter overall design, external simplicity. But then the differences begin. In Android 5.0, the interface is more holistic thanks to the material design - everything is done in one calm style, nothing stands out and does not look colorful or overly bright. The basic principle of material design excludes priority graphic effects in the interface before its practicality? and that's very cool.

To sum up the first argument - material design already looks very holistic, this is exactly what the operating system from Google and CO lacked - integrity and generality. When, opening each separate program, be it contacts, browser, mail client or something else, you see the same animation, the same color palette and simply recognizable elements. Due to this, it is easier to get used to the new OS and it is simply pleasant to work with it.

The second argument is that if you have already used a smartphone on Lollipop or seen screenshots, you probably noticed that the interface has become visually larger. The interface is being enlarged in touch devices for a long time. If we compare the first Android versions with the “then” Windows Mobile - it is obvious that Android was larger and simpler, less information fit on the screen, but it was also more convenient to control the smartphone. In material design, some elements have been replaced with “cards”, fonts, icon and line sizes have been slightly increased, and the interface as a whole has become larger. I like this, probably because I’m getting old, jokes aside, but the older I get, the less desire I have to look at “millisized” icons and elements, even if good vision. By the way, this is why I don't like the iPhone 5 and anything smaller. Compactness is compact, but even on a 4.5" diagonal screen you want to see normal sizes elements, rather than studying it with a magnifying glass. This is simply more convenient in many situations, especially when working with a smartphone on the go, for example. Therefore, the general enlargement of the interface in Android 5.0 based on material design seems to me to be a good step.

The third argument in favor is that Google didn’t just switch Android to new design, but also immediately prepared the necessary visual guides demonstrating the implementation of the main elements for software developers. Simply put, if you do new program or want to convert the old one to a new design, you website and study Google recommendations.

For example, it says what colors to use. fonts and how to use them are shown. And recommendations for using the correct graphic images in a programme.

Material design – arguments AGAINST

However, the third argument in favor of material design is also an argument against it. Yes, Google was great for not abandoning the developers and providing them with comprehensive guidance on the correct use of the new design language, but in this case, let’s say, they failed to think about the users. Programs written according to all the rules of material design or externally modified according to Google management, will look very harmonious in Android 5.0 and not so much in more earlier versions systems. And vice versa - all applications that do not follow the rules of material design will look somewhat foreign on a smartphone with Android Lollipop. And in the next six months there will be many such programs, I would venture to guess. Still, not every developer of a popular program, especially if it is complex and requires constant updates and improvements, drop everything and start transferring it to material design.

A clear example of the old design in a very current program– WhatsApp. How long will the application not be transferred to md? Good question

It turns out that some developers will now really give up everything and transfer their programs to material design, while others will not. And also in Google Play There are programs in an older, let’s say, design, but also sometimes necessary in work. As a result, it turns out that Google's desire (undoubtedly correct!) is to bring Android to general appearance It's not enough, you need to do something with hundreds of thousands of programs. Question - what?

Dear readers, what do you think of Google’s idea to bring all its services and applications to a common form, using material design as a basis?

At the conference for Google developers I/O 2018, except updated Android and deeper integration artificial intelligence to its services, Google introduced new standard in system and mobile application design - 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, appearance became 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 Google developers and designers used the Product Sans font 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 services Google. On this moment in the app store one of these firstborns 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, new Gmail version:

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 the correct decision, since it simplifies user interaction with the service and makes the application more understandable for new users who are just getting acquainted with the world of 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. My impressions of the service were extremely positive, 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 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 need 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 On the display 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 bring up the side menu; 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 new design principles Google applications, 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. Having written an article about experience six months ago 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 interface design, but now I am completely unconvinced of my position, at least in relation to Android .

Thank you for your attention!