4 Lessons from Google’s Material Design Documentation

August 8, 2015

9:00 am

Material Design, a visual language created by Google, was launched last year and was created to unify the interface of its products, especially its apps. When Google announced the concept of Material Design, it also released a complete set of documentation, allowing curious eyes to navigate through the the guidelines of this new visual trend.

The Google Material Design documentation is a wonderful reference on how to deal with interface design. The document developed by Google is great for new designers who want to learn how the visual aesthetics of a market leader are designed and implemented. And it is also a great guide for experienced designers to understand how Google thinks.

While there are several sources for Material Design tips online, this is a well structured document, which brings insights from Google’s designers as well.

The material design documentation includes a series of important lessons:

Using movement to construct meaningful relationships

Material Design puts a lot of emphasis on movement and animations in its design. The major reason for this is to allow the user to clearly see that his action impacts the interface. Google uses the example to add an image in an album – watching the example, we note that the overlay image brightens and darkens gradually (fade-in / fade-out).

This happens for two reasons: clarity and surprise. First, it establishes a visual hierarchy for the user, noticing which of the interfaces is overlapping another. Although this is not technically true, since interfaces do not work in layers, this allows the user a more simplified understanding of the interface use: that is clarity.

Typography is very important

The Material Design Visual Guide has an extensive section on typography. The obvious tip here is to pay attention to typography, in order to provide the best possible reading experience. This is a notion that makes the experience as a whole is better.

materialdesign-typography

Several designers focus on other interface details such as buttons, but few actually care about typography. This is an important caveat. In the typography section of the document, it is possible to see how much work has been done by Google design team to deliver the best possible reading experience.

Taking advantage of colors

One of the first things noticeable right away on Material Design is its bold and bright color scheme. If we take a look in the color section of the documentation, it is possible to notice a rich selection of nuances that can be adopted.

materialdesign-color

This is great for several reasons. First, the bet in strong colors was an amazing way to give personality to any Google interface. There is nothing too interfacing with a fantastic color scheme; and this is a nice change as well as when the iOS7 came out with its neutral color scheme and light gray scales. Additionally, Google not only established clear guidelines for the use of color, as well as reference how to apply them in the best way.

Everything is usability

One of the last sections of the Material Design guide seems to be, perhaps, the most important. The section of Usability and Accessibility mentions several issues on which designers need to reflect in the design of your applications or interfaces. This section serves as a reminder that its interface needs to, primarily, be accessible.

This section of the document sets restrictions on navigation specifications, readability and guidance, as well as comments to give us a clear idea about the care we must have with our applications. Some of the issues raised are obvious things, like make sure that the touch screen element has at least 48 × 48 pixels for a typical human finger can interact with the element, but some are more specific, like how to make sure that links have an appropriate and meaningful title.

To conclude, the Material Design documentation is an incredible source of advice and tips, and serves as a learning tool for new designers as well as anyone interested in learning more about interface design. It is also a great input for experienced designers who like to sneak peeks from the minds of designers working for a giant like Google.

Did you like this article?

Get more delivered to your inbox just like it!

Sorry about that. Try these articles instead!

25 y/o, born and living in Portugal. Majored in Biology, but tech and computers were always a passion. Wrote for sites like Windows.Appstorm and MakeTechEasier.

  • Shares

Leave a Reply

  • (will not be published)
Startup_Mixology_300x250
Enqos – Tower V3