- Usage in UI
- Top and bottom app bars
- Backdrop
- Color variations

Applying color to UI

"The Material Design color system can help you create a color theme that reflects your brand or style"

- Color Usage and Palettes
- Color Themes Creation
- Tools for Picking Colors 

The Color System

Color usage describes how color is deliberately applied in a user interface to serve four purposes: establishing visual hierarchy among elements, reinforcing brand identity, conveying meaning, and indicating the state of a component (for example, whether it is enabled, disabled, selected, or in error). Each purpose corresponds to a distinct technique for applying color with intent rather than purely for decoration.

Color Usage

"A dark theme is a low-light UI that displays mostly dark surfaces."

Dark Theme 

"Color plays an important role in text legibility."

Text Legibility

A dark theme is an option that creates a low-light UI that shows mostly dark surfaces.

Dark Theme

Color harmony refers to the technique of combining colors in a way that is visually pleasing. It involves understanding the relationships between colors and using them to convey meaning and create a specific aesthetic. One way to learn about these relationships is by studying the color wheel.

Color Harmony

The Material Design 3 (M3) system enables highly customized colors, a feature introduced in Android 12. This dynamic system can build a personalized color scheme based on a user's wallpaper or app content.

Dynamic Color in Material Design 3

- The color system
- Applying color to UI
- Color usage 
- Text legibility
- Dark theme

University of Michigan - Ann Arbor

Material Design is a system of guidelines built by Google that is focused on helping teams of designers and developers build the best regions, surfaces, and components in user interfaces. This system is the groundwork for both wide and narrow UI viewpoints that are applicable to Android, iOS, Flutter, and the web. 

Material Design System

Material Design Documentation

Material Design mirrors the material world in the way objects and elements move and interact on the interface. 

- Surfaces
- Elevation
- Light and Shadows

Environment

"Navigation is the act of moving between screens of an app to complete tasks. It’s enabled through several means: dedicated navigation components, embedding navigation behavior into content, and platform affordances."

Types of navigation:
- Understanding Navigation
- Navigation Transitions
- Search

Navigation

Sound communicates information in ways that improve the user experience

Sound

Typography can bring together a design or feel of a product.

Typography

- Confirmation & acknowledgement
- Data formats
- Data visualization
- Empty states
- Help & feedback
- Imagery
- Launch screen
- Onboarding
- Offline states
- Writing

Communication

Material surfaces can be displayed in different shapes. Shapes direct attention, identify components, communicate state, and express brand.

* Shaping material
* Shape and meaning
* Components and shape
* Shape customization tool
* Implementation

Shape

Interaction in UI

- [Material 3 Figma file](https://www.figma.com/community/file/1035203688168086460)
- [Meterial theme builder Figma file](https://www.figma.com/community/plugin/1034969338659738588/Material-Theme-Builder)
- M2 Adobe XD file (download on the [design resource section](https://m2.material.io/resources))
- M2 Sketch file (download on the [design resource section](https://m2.material.io/resources))

Learn Before

Related

Learn After

Learn After

Related