Smart Person's Guides

Google Material Design: The smart person's guide

This comprehensive guide covers must-know Google Material Design details, including features, core principles, components, and and an introduction to best practices.

materialdesign.png
Image: Google

First announced at the 2014 Google I/O conference and later making its maiden voyage with Android 5.0 Lollipop, Google's Material Design represented a mobile-centric shift in the company's approach to design. Taking cues from paper and ink, Material Design uses shadows and edges to create a minimal experience that is scalable across all major platforms and devices.

To help developers, designers, and IT leaders get up to speed on Material Design, we've compiled the most important details and related resources on Google's new design language into this living guide, which we'll update periodically as new information becomes available.

Executive summary (TL;DR)

What it is: Material Design is a design language developed by Google to provide continuity across its web and mobile products.

Why it matters: Material Design provides a uniformity of experience that Google products have been lacking. It's mobile-centric focus also represents an important shift in the company's approach to design.

Who does this affect: End users will likely notice changes in the UX of many Google products. Developers and designers will need to slightly alter their approach to take full advantage of the Material Design.

When is this happening: The source code for Material Design became generally available on November 3, 2014 and over the air (OTA) updates began on November 12, 2014.

How to take advantage of Material Design: Google has provided best practices and guidelines for proper implementation of Material Design.

What it is?

Initially announced on June 25, 2014 at the Google I/O developer conference, Google's Material Design is a design language that seeks to unify the user experience across Google products and across platforms.

Material Design was originally known by the codename Quantum Paper. One of the first implementations of the design was present in the "cards" associated with Google Now. According to the Google website for Material Design, it's goal is to blend many principles of classic design with the innovations we've come to expect from science and technology.

Conceptually, Material Design is based on just that—real world materials. Using shadows and lighting to create depth and edges, elements respond in a similar way to how we would expect them to in real life. Again, Google said that Material Design is based on paper and ink and print-based design.

According to Google, there are three core principles at work:

  1. Material is the metaphor
  2. Bold, graphic, intentional
  3. Motion provides meaning

While its foundation is rooted in what is known as flat design, Material Design is more of a hybrid with its addition of drop shadows and gradients to convey physical space. Flat design exists primarily within a 2D environment, while Material Design utilizes a 3D environment with each object having dimensions on an X, Y, and Z axis.

3dmaterial.png
Image: Google

Material Design uses bold colors and both the Roboto and Noto typefaces. Lastly, specific rules for motion and animation of design elements are key to maintaining proper relationships between elements and functionality.

Read more:

Why it matters

There are a few main reasons why the introduction of Google's Material Design truly matters. It begins with the realization that a good product will only get you so far without good design.

Good design matters. And, when a big portion of your business relies on outside designers and developers to build third-party application on your platforms and frameworks, there is a lot that can go wrong. With Material Design, Google is better protecting the sanctity of its brands by delivering a design language that is both modern and practical.

In addition to protecting its brands, Google is setting the stage for a better play at the enterprise as well. The search giant has been making strides toward the enterprise for the past few years, and eliminating the "clunky" aspects in its previous design will win it more fans among business users.

It also shows that the company truly cares about design, which was a major mark against Google for a long time. One of the biggest selling points of Apple products has been their focus on design, and Material Design could be the foundation on which Google could eventually compete on that plane.

Almost as equally important as the quality of the design is the consistency that Material Design provides. Especially with its recent split into Alphabet, the ability to keep design consistent across the brands will be paramount to the success of the new corporate organization.

Material Design is mobile-centric, and the fact that a company as large as Google is centering its entire design philosophy around the mobile experience adds weight to the idea that mobile will continue to take precedent as our preferred way of access the web.

Read more:

Who does this affect?

Android users will be the most affected by the influence of Material Design, as the principles in the design itself greatly affect the UX of the OS. However, as Material Design continues to spread throughout the Google ecosystem it will, however slightly, affect any and all users of Google products and services.

For developers, Material Design provides new tools that will make it easier to build usable apps that also look good. Outside of application development, professional web designers and hobbyists alike will also be able to use Material Design Lite to add the look and feel of Material Design to their websites.

Read more:

When is this happening

After it was originally announced in the keynote address of the 2014 Google I/O conference, Material Design was first available through the Android L preview the same week. On November 3, 2014 the source code was made available before the official OTA updates were first sent out on November 12, 2014 for select devices.

daveburke.jpg
Dave Burke showcasing Android L and Material Design at I/O 2014.
Image: Sarah Mitroff/CNET

New design specs are added each month and can be viewed on the Material Design website. In May 2017, for example, Google introduced a library of Material Components for application building, along with a new Material Design Color Tool.

At this point, the majority of Google's core apps should have received a Material Design makeover.

Read more:

How to take advantage of Material Design

To make the most out of Material Design, you'll want to start by reviewing the specification guide that Google has laid out for Material Design. Google has put together some very specific rules and guidelines.

Material elements can vary in their height and width (X and Y), but they are always express a uniform thickness as 1dp (density-independent pixels). While Material elements can grow and shift along their X and Y axes, but they can never pass through another Material element.

Each element has its own level of elevation (also measured in dp) relative to the type of component it is and how it interacts with other elements in the design. Google addresses the elevation rules and object hierarchy in its Material Design guide.

Android developers will want to take a look at the Material Design for Android developers site to fully grasp all of the tools and features.

Read more:

About Conner Forrest

Conner Forrest is a Senior Editor for TechRepublic. He covers enterprise technology and is interested in the convergence of tech and culture.

Editor's Picks

Free Newsletters, In your Inbox