Get to Know Material Design — Part One: Styles
Understanding the Basics of Material Design Styles
Welcome to “Get to Know Material Design “. In this blog post series, we will dive deep into the world of Material Design, exploring the various elements and principles that make up this great design system. In this first chapter, we will be focusing on the styles of Material Design, which include: color, elevation, icons, motion, shape, and typography. These styles are the foundation of Material Design and are essential for creating visually appealing and functional user interfaces for Web, Flutter, and Android devices. Whether you’re a designer, developer, or just someone interested in learning more about Material Design, this series of posts is for you. So, let’s get started and discover the magic of Material Design styles.
Get to Know Material Design — Part Two: Foundations
Material Design Official Website
Toools.design: The Ultimate Collection of UI/UX Design Resources
Styles are the base of Material Design and are critical in producing aesthetically appealing and practical user interfaces. They are the visual components of a UI that give it a distinct look and feel, and they can be customized by changing to a different Material theme. Color, elevation, icons, motion, shape, and typography are the six key elements that make up Material Design styles. These elements work together to produce a uniform and consistent design that improves the user experience.
Color is used to communicate information and express style. Elevation adds depth and dimension to surfaces and components. Icons are little graphics that are used to represent typical actions, files, devices, and folders. Motion is used to make a user interface expressive and simple to use. Shape is used to create a visual hierarchy and emphasize important elements. Typography is used to make text legible and visually appealing. To properly comprehend and use the potential of Material Design styles, it is necessary to go further into each of the six key elements. So without further ado, let’s get started!
All image credits belong to Material Design
1. Color:
Material Design uses dynamic color to allow designers to create a more personalized and adaptable color experience for users. The M3 color system and custom schemes form the foundation for this dynamic approach, providing default values for color and type as a starting point for customization. It’s designed to be used with both Material components and custom components.
It also ensures accessibility for all users by meeting color contrast requirements regardless of changing hues.
To read more visit: Material Styles — Color
2. Elevation:
1. One surface at 1dp elevation and another surface at 8dp elevation, as viewed from the front.
2. The difference in elevation between the two surfaces is 7dp, as viewed from the side.
Elevation is the relative distance between two surfaces along the z-axis. It is an important aspect that gives surfaces and components a sense of depth and dimension. All surfaces and components have elevation values, which can be used to create visual hierarchy and emphasis. It is important to keep the elevation story simple by not overusing different elevation values. Also, while the background color remains consistent, the surface color changes with elevation which helps create a sense of depth and dimension in the design.
In the latest version of Material Design, there are some new changes related to Shadows, Colors, and Levels.
1. Shadows: Instead of applying shadows by default to all levels, they are now used only when required to create additional protection against a background or to encourage interaction. This allows designers to use shadows more selectively and effectively.
2. Color: New color mappings and compatibility with dynamic color have been introduced in GM3, which allows for more personalized and adaptable color experiences for users.
3. Levels: Elevation is now described in terms of levels which makes it more clear and easy to understand. This allows designers to create visual hierarchy and emphasis more effectively.
To read more visit: Material Styles — Elevation
3. Icons:
Icons can be used to represent common actions. Material Symbols are a set of variable icon fonts created at seven weights across three different styles.
These icons can be dynamically customized, including weight, fill, optical size, and grade. They are available as SVGs, gstatic, and icon fonts and can be accessed via the Material Symbols Figma plugin or on Google Fonts. They are used as small graphics to symbolize common actions, files, devices, and directories.
To read more visit: Material Styles — Icons
4. Motion:
Material Design emphasizes the use of motion to make a UI expressive and easy to use. The concept of easing is meant to be expressive and emphasized easing is used as the default. Motion tokens for easing and duration have been introduced to help with consistent motion implementation across the product. Transitions, which are the most common type of motion and are closely tied to usability, should be a top priority in the design and implementation of the product. It’s also important to consider implementing a reduced motion setting to accommodate accessibility needs for users who may have difficulty with motion.
To read more visit: Material Styles — Motion
5. Shape:
The shape scale defines the style of container corners, offering a range of roundedness from square to fully circular. The default shape family is rounded. In M2 there was only a Three-level shape scale based on the size of the component container. With M3, shape scale levels are updated to Seven-levels based on the roundedness of shape corners.
To read more visit: Material Styles — Shape
6. Typography:
In Material Design, typography is used to make writing legible and beautiful. The default type scale includes contrasting and flexible styles to support a wide range of use cases. Material Design’s typography system provides a consistent visual hierarchy and helps create a sense of hierarchy and emphasis in the design. It’s recommended to use specific typefaces such as Roboto and Noto, and specific font sizes for different elements in the app.
· Variable fonts:
Updated considerations for using variable fonts and their customizable axes include Grade, Width, and Optical Size. Roboto Flex and Roboto Serif have a fluid range of weight, from extremely thin to extremely bold styles in larger optical sizes.
· Five type styles:
M3 has five distinct type styles: Display, headline, title, body, and label.
· Typography tokens:
Typography tokens describe scalable size that adapts to devices or settings.
To read more visit: Material Styles — Typography
Consider reading and following the guidelines provided by Google in the Material Design documentation to achieve consistency successfully.
Tips and Best Practices for Implementing Material Design Styles in your projects:
· Use dynamic color to create a personalized and adaptable color experience for users.
· Use elevation to create a visual hierarchy and emphasis.
· Use icons to symbolize common actions, files, devices, and directories.
· Use motion to make the UI expressive and easy to use.
· Use shapes to create visual hierarchy and emphasis.
· Use typography to make writing legible and beautiful.
· Follow the Material Design guidelines and principles to create a cohesive and consistent design.
· Customize your Material theme to match your brand and style.
· Test and iterate on your design to ensure it enhances the user experience.
· Consider accessibility when implementing Material Design styles.
· Utilize the resources available, such as tutorials, case studies, and examples of apps that have effectively used Material Design.
In conclusion, Material Design styles are essential in building aesthetically appealing and useful user experiences. Color, elevation, icons, motion, shape, and typography are the six main elements that work together to produce a uniform and consistent design. Material Design M3, the most recent version, contains upgrades and enhancements to these styles such as the addition of dynamic color, additional elevation levels, Material Symbols, and more. Designers and developers must remain current on Material Design changes and best practices in order to build designs that are not only visually appealing but also improve the user experience.
If you enjoyed reading this blog and want to stay updated on the latest tips and strategies for success in the UI/UX industry, be sure to follow me, and let’s reach 100 followers together! And don’t forget to join me on Instagram and Twitter for daily doses of tips and insights to help you stand out as a UX/UI designer.
