Shaping material

The Material shape customization tool can be used to generate different shapes for various individual components. A table of shape value ranges indicates recommended value ranges for each component.

Components are organized into three categories, based on their relative size. Components linked to their category will inherit the shape values assigned to the category. Alternatively, individual component corners can be shaped independently of their category’s values.

* Small components
* Medium components
* Large components

Shape Customization Tool

Shaping components: Shape both helps users identify components and affects how usable they are. The degree to which components can change their shape depends on:

* If a component relies on its shape for identification
* If it has ergonomic requirements, such as a minimum touch target size

Components and Shape

- Communicating Meaning:
- Do and Don'ts

- Shapes can be used to reflect a specific purpose or meaning. 
- Text or icons can help reinforce that meaning when the shape of a surface alone could be ambiguous.




Shape and Meaning

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

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

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

Color

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

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