You're reading for free via Danny Sapio's Friend Link. Become a member to access the best of Medium.

Member-only story

10 Key Takeaways from Google’s Material Design Guidelines

UI & UX best practices from Google’s design system documentation.

Danny Sapio
UX Collective

Google is one of the biggest and most influential players in the tech space, so it’s no mystery why their design system has a tremendous impact on how digital products are designed. The company’s Material design guidelines outline worthwhile principles for every designer to follow — regardless of whether they’re designing for iOS or Android.

In this piece, I’ll share key takeaways that I found while reviewing Material’s guidelines and provide my take on how best to execute their rules and methods. I’ll review best practices as laid out in the Material guidelines and share my own experience and tips for best practices when applying them to your products.

1. Signifiers & animation to communicate gestures

Example from Material

In The Design of Everyday Things, Don Norman, known as the father of human-centered design, defines signifiers as anything that indicates what actions are possible and how they should be done. In designing digital products, we don’t always need to be explicit with our signifiers and say things like “swipe left to view more.” Simple elements like icons, elevated containers, or colors can act as signifiers to prompt different gestures and actions.

If we want to achieve a minimalist look, then we can get creative with animations to signify actions that users can perform. Occasionally, we can get away with no signifiers at all. Instead, we can show how to interact with an element by showing a quick animation. This practice should be used in a calculated way, but if used appropriately, it can greatly simplify an interface and even improve the experience.

2. Animated Icons

  • Animation reflects the action an icon performs in a way that adds polish and delight. Transitions connect animated icons between two visual states. Transitioning between two icons signifies that they are linked. — Material Animated Icons Guidelines

Adding icon transitions indicates the relationship between two actions. A popular example is a play/pause button animation. When you click play, the icon turns into a pause button and vice versa. This change indicates the relationship between these two actions in a subtle but intuitive way.

That’s a simple example, but imagine how subtle animations can be used for more complex experiences like an add to cart interaction or displaying that functions are disabled. Creating animations between icons doesn’t need to be overly time-consuming, either. In Adobe XD, we can achieve a similar effect by using auto-animate and fading icons’ opacity in and out.

  • Animated icon transitions can use either simple or complex motion based on the level of emphasis preferred. Icons that aren’t prominent use a simple shared motion. Icons that are an important part of an app can be emphasized with complex motion. — Material Animated Icons Guidelines

Bear in mind that if elements and icons are constantly animating, we risk overwhelming the user. Overuse also deadens emphasis, so we should use complex animations sparingly.

3. Material Color Palette Generator

Material Color Tool

Trying to create a color palette from scratch can be tedious and often less effective (since you’d have to calculate the values yourself) than using a tool like Material’s Palette Generator (located near the bottom of the page).The best part is that the colors generated already meet accessibility standards, so you’re spared the hassle of checking your palette against WCAG guidelines. You should still probably double-check your designs with a plugin like Stark, though.

4. Color

As you’re considering colors and how to use them, Material also has strong tips and tools for using color in an interface.

Think of your brand colors like salt and pepper on a plate of avocado toast. Too much and it overpowers the natural flavors, too little and it’s bland. When adding colors to reinforce your brand to the interface, be thoughtful about when and where they’re added.

By limiting the use of color in your app, the areas that do receive color — things like text, images, and individual elements like buttons — will get more attention. You’ll notice that apps like Instagram and Twitter that feature many colorful posts and unpredictable content tend to have a pretty plain interface. This design element is subtle, but it takes the focus away from the interface in favor of the content.

  • Color indicates which elements are interactive, how they relate to other elements, and their level of prominence. Important elements should stand out the most. — Material Color System Guidelines

When an element’s appearance contrasts with its surroundings, the user understands that it has greater importance than its surroundings. We can use color and color weight to establish a hierarchy within an interface. The weight of a color refers to how saturated that color is. More saturated colors will appear more vibrant and bold, thus giving them a greater visual weight.

More prominent, bolder information will draw the user’s eyes first, and then they will move on to the supporting information below it. If one element is more important than another, it should be of a greater visual weight. Thus, the user can quickly skim the page and distinguish between the various levels of importance.

5. Material’s type scale generator

Material Type Scale Generator
  • Powered by Google Fonts, the type scale generator is a tool for creating type scales and corresponding code. Any font you choose is automatically resized and optimized based on Material typography guidance for readability.” — Materials Type System Guidelines

Typography involves much more than choosing a great font, when used effectively it can enhance usability by improving readability, accessibility, and hierarchy within an interface. Lucky for you, Google has a handy tool that will help save you time and frustration when developing your next typography guidelines — the Material type scale generator makes it dead easy to generate font sizes for paragraphs, headings, buttons, and so on.

6. Use Hero sounds & haptics to evoke emotional responses

  • Hero sounds are representations of a product and brand that highlight an important moment, evoke an emotional state, or express celebration.

They occur in pivotal interactions, such as those that:

  • Celebrate a significant positive action the user has taken
  • Welcome users to a new app or experience
  • Confirm a key moment of a product’s purpose

Materials Sound Guidelines

Sound can express a sense of success, accomplishment, or reward. Google recommends that “hero sounds occur infrequently, and because of their prominence, they should be applied in consistent ways.” By using the same success sound for each achievement, users will begin to recognize the chime and associate it with feelings of accomplishment. For instance, when someone has marked all the items on their to-do list as complete, a chime can acknowledge their success.

Whether you realize it or not, you associate sounds with feelings. Whether it’s the ding your phone makes when you have a new message or the crumpling paper sound when you’ve emptied your trash on Mac, sounds can help us become more aware of what’s happening in an interface.

  • Haptics can be paired with other audio and visual elements, or used alone. For example, haptics can be the only method of feedback when a device has the sound turned off. When paired with other elements, haptics should be synchronized to create powerful and delightful expressions. — Android Haptic Guidelines

In addition to sounds, haptics (vibration or touch sensations) can also stimulate the senses to provide a more complete and enhanced user experience. Users learn haptics over time by experimenting and engaging with a product. After a few encounters with a sensation, we begin to associate different feelings with haptic patterns.

For example, imagine that a user just submitted a payment, and it’s come back with an error. A feedback jolt indicating an error can be a learned experience that informs them of the status. If someone is familiar with that feeling from a past error, then they’ll immediately know that something has gone wrong.

Haptic feedback and hero sounds are two areas that product designers often miss. We focus heavily on the visual aspects while sometimes forgetting about the sounds and feelings that can add polish to a product.

7. Use motion to express your brand’s personality and style

Example from Material
  • Motion celebrates moments in user journeys, adds character to common interactions, and can express a brand’s style.” — Materials Motion Guidelines

Motion is a key factor in my product, Confetti, a free habit tracker for people who want to be productive every day. While designing the product, I considered ways that I could communicate the relationship between states and create a sense of satisfaction when someone completes a habit. By putting an emphasis on motion, the product really stands out with its satisfying confetti animations and smooth transitions between the various displays.

Consider how motion can be used to emphasize different parts of an experience and add moments of delight or continuity through transitions and state changes.

  • Motion design informs users by highlighting relationships between elements, action availability, and action outcomes. Motion focuses attention on what’s important, without creating unnecessary distraction. — Materials Motion Guidelines

For users, speed and efficiency are of paramount importance. They’re using an application to solve a specific job to be done. If the experience of digitally depositing a check into a bank account is enjoyable, then that’s great, but don’t let your creativity get in the way of the user’s objective.

In 2020 it only takes a millisecond to peeve your users. As Taras Skytski pointed out in “The Ultimate Guide to Proper Use of Animation in UX,”

“Numerous researches have discovered that optimal speed for interface animation is between 200 and 500 ms. These figures are based on the particular qualities of the human brain. Any animation shorter than 100 ms is instantaneous and won’t be recognized at all. Whereas the animation longer than one second would convey a sense of delay and thus be boring for the user.”

Being purposeful with animations can improve user experience, but adding unnecessary distractions and movement to elements will not. If the animations and micro-interactions add unnecessary time, then they’re not improving the experience. Being purposeful with animations can improve the experience, but adding unnecessary distractions and movement to elements will not.

8. Use imagery to communicate and differentiate a product through visuals

by Elena Petkovska on Dribbble

We’ve all seen overcrowded interfaces with too much text and too few visuals. In UX design, it’s always better to show rather than tell. Users don’t want to read to understand — instead, show them imagery and allow them to experience the product visually.

  • Images should be selected for their ability to express your message and reflect your product’s style. Whether you use user-generated photography, professional photography, or different styles of illustration, they should all lend a look and feel that reflects your product. ” — Material Imagery Guidelines

The images in your application are just as important as any of the other visual elements. The visuals you select can enhance your UI by making it more vibrant and lively. They can also help establish our brand and work as a story-teller for our interface.

Imagery should be used purposefully and serves as an addition to the content, not a replacement. Imagery or illustrations are best used to explain how to use an application or to communicate the system status. As they say, an image is worth 1,000 words. If you want images for your designs, here are a few of my favorite places to find high-quality imagery:

9. Material uses density-independent pixels

Density is the number of pixels per inch of a screen, also known as PPI. The unit “dp” is short for “density-independent pixel,” also sometimes abbreviated as “dip.” Screen density = Screen width (or height) in pixels / Screen width (or height) in inches.

When designing an interface, it’s recommended that we don’t design for pixels, but rather for the device’s pixel density. This ensures that our elements are appropriately scaled to fit different device sizes.

We do this, so if we design a button asset, for example, at 200 x 50 dp, it’s displayed at 200 x 50 px on a 160ppi screen and 400 x 100 px on a 320 ppi screen, or 2x the size of the original asset.

Since some screens have more pixels per inch than others, the assets aren’t displayed smaller on screens with a high pixel density; they’re rendered at 2x, 3x, 4x their original size. This makes sure that all assets maintain their sizing across different devices with varying densities.

How does density translate to screen size? The dimensions for the iPhone XS Max’s screen, for example, is 414 x 896. But tha size is in points, not pixels. In pixels, it’s 1242 x 2688 px. With that in mind, when designing for the iPhone XS Max, I would design at 414 x 896 points and then deliver assets at 3x.

10. Consider offline states

  • Offline states allow users to interact with an app without internet access. If your app has features that are available when offline, and other features that aren’t, it should indicate whether it’s current state is offline or online. — Material Offline Guidelines

Having offline access capabilities in our products is an often overlooked but immensely beneficial experience for users. Although every aspect of a product might not work without internet connectivity, it’s better to have some access than none.

If possible, allow users to download information for offline access. A perfect example of this is music apps like Spotify, which allow you to download songs so you can be prepared if you know you’re going to have little or no connection.

Alternatively, if your product doesn’t have consumable content like Spotify or Netflix, get creative with how you can turn “no connection” into a memorable experience.

Google Chrome’s offline screen is probably the most notable example with its beloved T-Rex game. By providing a touch of personality or enjoyment, we can turn an often negative experience into a positive one.

I hope you enjoyed this short review of some important points mentioned in Material Design. I have inevitably missed crucial points, so I would recommend reviewing the guidelines yourself. Check out other design systems, too, like IBM Carbon, Zendesk Garden, Workday Canvas, and Atlassian. Reading design documentation from popular design systems is a foolproof way to gain more tactical UI/UX knowledge.

I hope you enjoyed this short review of some important points mentioned in Material Design. I have inevitably missed crucial points, so I would recommend reviewing the guidelines yourself. Check out other design systems, too, like IBM Carbon, Zendesk Garden, Workday Canvas, and Atlassian. Reading design documentation from popular design systems is a foolproof way to gain more tactical UI/UX knowledge.

👋 Let’s be friends! Follow me on Twitter and Dribbble and connect with me on LinkedIn. Don’t forget to follow me here on Medium as well for more design-related content.

The UX Collective donates US$1 for each article published in our platform. This story contributed to Bay Area Black Designers: a professional development community for Black people who are digital designers and researchers in the San Francisco Bay Area. By joining together in community, members share inspiration, connection, peer mentorship, professional development, resources, feedback, support, and resilience. Silence against systemic racism is not an option. Build the design community you believe in.

Responses (2)

Write a response

Animation reflects the action an icon performs in a way that adds polish and delight. Transitions connect animated icons between two visual states. Transitioning between two icons signi...

Any tips on how to animate icons and hand it off to devs for multi purpose (web, app …)?

Animation reflects the action an icon performs in a way that adds polish and delight.

This also relates Nielsen's Heuristics - animation provides the users feedback on the system status.