This comprehensive guide covers must-know Google Material Design details, including features, core principles, components, and and an introduction to best practices.
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 is a visual language 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 is Material Design? Material Design is a design language developed by Google to provide continuity across its web and mobile products.
Why does Material Design matter? 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 Material Design 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 was Material Design released? 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 do I use Material Design? Google has provided best practices and Material Design guidelines for proper implementation.
What is Material Design?
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, leveraging a specific set of color schemes.
According to Google, there are three core principles at work:
- Material is the metaphor
- Bold, graphic, intentional
- 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.
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.
- Material Design: 10 apps that show off Google's new UI language (TechRepublic)
- Google's Material Design unifies user interface for Android, Web (CNET)
- Google gives Android a facelift, enter 'material design' (ZDNet)
Why does Material Design matter?
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.
- What Google's Material Design Is Really About (Wired)
- Android's material design reaches into Linux (TechRepublic)
- Google's search for a new corporate structure ends with Alphabet (TechRepublic)
Who does Material Design affect?
Android users will be the most affected by the influence of Material Design, as the principles in the language itself greatly affect the UX of the OS and mobile app design. 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.
- Google designers had an 'almost hallucinatory moment' when Larry Page finally said that products needed to look beautiful (Business Insider)
- Top designers react to Google's new 'Material' design language (VentureBeat)
When was Material Design released?
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.
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. During the 2018 Google I/O developer conference, the Material Design team unveiled Material Theming for new branding, a theme editor, and more.
At this point, the majority of Google's core apps should have received a Material Design makeover.
- Material Design: What's New (Google)
- Google Hangouts 4.0 for Android released with improved material design interface and performance (ZDNet)
How do I use 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. Material Design principles address elements like icons, text fields (e.g. an address bar), tabs, and animation. Available typography options can be seen in the provided Type Scale here.
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 needed to bring it to mobile devices.
- Hands-on with Android's material design: App theming (TechRepublic)
- Google launches web library to give sites a material design makeover (ZDNet)
- Android Lollipop material design trick offers a more polished UX (TechRepublic)
- How to build a website using Google Material Design Lite (PC Advisor)
- More Android material design drop shadow woes (TechRepublic)
- Material Design for Android Developers (Udacity course)
- Google Material Design Spec Guide (Google)