Communicating state
Shape and meaning
Shape can communicate many things about an element, including its current state, the result of a user interaction, or other changes in an app. When...
Shape can communicate many things about an element, including its current state, the result of a user interaction, or other changes in an app. When used in these ways, shape should be used consistently across the same state and interactions, so that a specific shape means the same thing every time it’s encountered.
Shape and interaction
To attach meaning to a specific shape, shape changes can be expressed in tandem with a user-initiated action or state change. For example, morph a shape upon selection, or introduce the shape with an icon or other indicator, to reinforce a shape’s meaning.
Non-interactive shapes
If a shape isn’t interactive, avoid using shapes with sizes large enough to appear interactive. For example, a small triangular shape on a card shouldn’t be large enough to be mistaken for a tap target if it’s not one.
Expressing brand
Shape and brand expression
Use shape in combination with other customizations, like color and typography, to develop your brand’s visual language. Similar, related shapes help unify brand expression across...
Branding with shape
Use shape in combination with other customizations, like color and typography, to develop your brand’s visual language. Similar, related shapes help unify brand expression across your app. Your app can use a shape family – a set of similar shapes such as oval variations of a circle, or the same angled corner at different scales – across its surfaces, components, and elements. The style of shapes in a shape family, such as organic or geometric forms, should match your brand.
Mixing shapes
When expressing brand with shape, avoid shapes that:
- Imply interactivity
- Inaccurately express state
- Interfere with usability
Mixing both different shape styles, and different shapes altogether, can make it difficult to associate particular shapes with a brand.
Shape overuse
Overuse of a shape for branding purposes can make it less meaningful because that shape becomes common and less noticeable.