At the same time Google released their Lollipop version of the Android OS, they also introduced a new visual design language known simply as Material Design. The goal? To create a cohesive design standard that could work across all of Google’s various products. It has a set of principles and styles, along with plenty of rules to define the exact layout.
Today we’re going to look at Material Design and what it seeks to achieve. After an overview of the language, we’ll then look at five excellent examples of Material Design in action so you can decide if it’s right for your website.
What is Material Design? An Overview
The primary goal of Material Design is to create experiences that are accessible, practical, and usable. Google has an ongoing and constantly-updated document that helps designers familiarize themselves with the practice.
Looking at the document, these are the primary goals of Material Design:
- Establish a visual language that is informed by the practices of good design and incorporates the innovation brought about by technology and science.
- Develop a single system that creates a unified experience across multiple devices, platforms, and screen sizes. Mobile is key, but this also extends to touch, voice, mouse, keyboard, and other input methods.
Starting with these goals in mind, the next step is to look at the principles that Material Design champions:
- Material itself is a metaphor for the design elements. Visual cues and aspects of the design should be grounded in reality.
- Employ all major tenets of modern web design including use of typography, space, colors, images, and so on.
- Motion = meaning, which means that objects with movement or animation should never disrupt or take away from the primary user experience. Instead, they should complement it.
Overall, the principles of Material Design are informed by materials as they exist in the real world. Objects within your design should exist in a theoretical 3D space of sorts.
Next, we’ll take a look at a few of the major categories of Material Design:
Color Choices and Typography Practices
In terms of color and text, Material Design takes much of the best practices from standard flat design. In this sense, the color choices are typically bold and stand out from standard color choices. Simple, but equally bold typography is also recommended.
Here’s an excerpt from Google’s document on the subject: “Color is inspired by bold color statements juxtaposed with muted environments, taking cues from contemporary architecture, road signs, pavement marking tape, and sports courts,” according to material design documentation. “Emphasize bold shadows and highlights. Introduce unexpected and vibrant colors.”
In essence, everything we know and love about color theory is intact here, but it’s important to revisit the basics before learning something new.
Layout and Design Choices
The layout and design choices for Material Design tend to mimic those from print. Grids and structured layouts are encouraged and recommended. Google provides guidelines for where to place specific elements and how large they should be for maximum effectiveness.
The biggest risk here is following the guidelines too closely and coming across as generic or too similar to other uses of the design. There should be some variety in this regard while still staying within the general boundaries of Material Design.
The ultimate goal of Material Design is to point out and utilize patterns that allow for maximum usability and accessibility. At a quick glance, many of the provided elements will come across as too basic to veteran designers.
Even so, the principles that guide the user experience are worth looking at, regardless of your skill level. This thought process also calls to mind very real issues with accessibility. How do we design for users who cannot hear or see specific colors?
Options like high contrast, magnified screens, or even voice control can all contribute to a more universal design. In the end, Google’s approach is a little heavy-handed for designers who have experience, but whether it’s for a refresh, or to aid a beginner, there are some good ideas here.
Now, let’s take a look at some examples of websites that are adhering to Material Design principles, and how that affects the user experience.