- Don’t use shapes in ways that create ambiguous meaning. 
- This Cancel button’s label text implies that it will return the user to a previous point in the flow 
- The arrow-shaped button points forward, as though it continues the flow’s progress.


Communicating Meaning: Don't

The menu has an arrow-like corner that points toward the navigation drawer, reinforcing that these components are connected.


Communicating Meaning: Do

- 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.




University of Michigan - Ann Arbor

Arizona State University

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

Material Design Documentation

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

Learn Before

Related

Learn After