Google is one of the biggest and most influential players in the tech space, so it’s no mystery why its design system has a tremendous impact on how digital products are made. 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 my key takeaways from 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 tips for applying them to your own products drawn from my experience.
1. Signifiers and Animation Can Communicate Gestures
In the absence of other affordances, icons provide a clear indication that a gesture can be performed.
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.
Animate elements before the user interacts with them to suggest a gesture.
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 with 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. Use 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.
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.
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. Use Color Judiciously
As you’re considering colors and how to use them, Material also has great tips and tools for using color in an interface.
The Material palette generator can be used to generate a palette for any color you input. Hue, chroma, and lightness are adjusted by an algorithm that creates palettes that are usable and aesthetically pleasing.
Trying to create a color palette from scratch can be tedious and often less effective than using a tool like Material’s Palette Generator since you’d have to calculate the values yourself. The best part is that the colors generated already meet accessibility standards, so you save time on checking your palette against WCAG guidelines. Do be sure to double-check your designs with a plugin like Stark, though.
Show brand colors at memorable moments that reinforce your brand’s style.
Think of your brand colors like salt and pepper on a plate of avocado toast. Too much and it overpowers the natural flavors, but 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.
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.
4. Material’s 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.
Typography involves much more than choosing a great font. When employed effectively, it enhances product utility by improving readability, accessibility, and hierarchy within an interface. Luckily, 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.
5. Use Hero Sounds and Haptics to Evoke Emotional Responses
Hero sounds and haptic feedback 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.
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
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 consciously or not, humans associate sounds with feelings. Whether it’s the ding a phone makes upon receiving a new message or the crumpling paper sound that accompanies emptying the trash on a Mac, sounds can help users 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.
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 the mistake can inform them of the status, eventually becoming a learned experience through repetition. If someone is familiar with that feeling from a past error, then they’ll eventually know when something has gone wrong just through the haptic feedback.
6. Use Motion to Express Your Brand’s Personality and Style
Motion celebrates moments in user journeys, adds character to common interactions, and can express a brand’s style.
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.
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 just add unnecessary time, then they’re not improving the experience.
7. Use Imagery to Communicate and Differentiate a Product Through Visuals
Imagery can both enhance the user experience and express a brand’s visual language. Images help tell a story, clarify complex messages that are difficult to express with words, and to show users how to perform an action.
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 always want to read to understand the product. 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.
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 your brand and work as a storyteller for your 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 the old saying goes, a picture 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:
8. Be Mindful of Density-Independent Pixels
Material UIs use density-independent pixels to display elements consistently on screens with different densities.
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 equals screen width (or height) in pixels divided by the 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 that if we design a button asset, for example, at 200 by 50 dp, it’s displayed at 200 by 50 px on a 160 PPI screen and 400 by 100 px on a 320 PPI screen, or two times 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 two, three, or four times their original size. This makes sure that all assets maintain their sizing across different devices with varying densities.
So how does density translate to screen size? The dimensions for the iPhone XS Max’s screen, for example, are 414 by 896. But the size is in points, not pixels. In pixels, it’s 1242 by 2688 px. With that in mind, when designing for the iPhone XS Max, I would design at 414 by 896 points and then deliver assets at three times the size.
9. 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.
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 at all.
If possible, allow users to download information for offline use. A perfect example of this principle 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 a negative experience into a more positive one.
Conclusion
As these points reflect my perspective, I would recommend reviewing the guidelines yourself to see what sparks your own creativity. 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.
