Shape as expression

Shape can communicate an element’s state or help express a brand.


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

Read More

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.

Do.

Shape changes should be clearly linked to a user interaction or other obvious cause. This list item’s shape changes upon passing a gesture threshold, eventually giving its left edge a rounded corner.

Don’t.

Don’t communicate state with shapes that are too small to be noticeable.

Don’t.

Don’t communicate state with a shape large enough to provide a tap target if it’s not interactive.

Caution.

A shape can be used in ways that makes it unclear whether it’s expressing a state or branding. These folded card corners don’t make it clear if the cards are selected, favorited, or simply expressing brand – because cards can express all of these states. To make meaning clearer, either:

  • Clearly connect the change of the corner shape with a user action, like selection or favoriting
  • Remove the folded shape, but keep the corner angle, to reduce the appearance that the folded shape is interactive

Do.

Use shape consistently, so that each shape expresses a single meaning. The rounded corner on selected cards helps the shape develop meaning.

Caution.

The inconsistent shapes on the corners in this card collection make it unclear if each shape represents something different (such as distinct groupings) or is simply brand expression.


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

Read More

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.

Do.

Consistent use of shape throughout a product contributes to a brand’s visual language. This product’s components use a shape based on its logo (1, 2).

Do.

This product’s components use a geometric shape based on its logo (1, 2, 3).

Do.

The curve of the corner reflects the color and curved edge of the logo, without affecting usability.

Don’t.

Don’t reduce the usability of a component when using shape to express brand. The size of this shape interferes with the usability of the list.

Caution.

Overuse of a single shape makes that shape common, and thus less noticeable, which reduces its impact on branding.

Don’t.

Don’t use shapes that don’t reflect a product’s shape family.