Motion – Creative customization

Creative customization

Animation may be used in a wide range of scales and contexts to unite beauty and function.

Icon types

System icons may perform dual functions.

Product icons should demonstrate polish.

Icons Expand and collapse content An arrow that points down when collapsed and points up when expanded.

System icons

An icon may serve dual functions. For example, a menu icon may smoothly transition to a playback control, and back again. This effect both informs the user of the button's function while adding an element of wonder to the interaction.

Transforming the menu icon into the back arrow signifies that the two actions are connected, and that one cannot exist while the other is present. The back button must be pressed in order to return to the top-level view with the menu icon.

Transforming the play button to a pause button signifies that the two actions are linked, and that pressing one makes the other one visible.

When pressing this floating action button, the plus sign transforms into a pencil. This indicates that the pencil is the primary creation method.

Product icons

Animated product icons should demonstrate polish and refinement from the moment the app launches.

The Inbox product icon animation displays when the user opens the app for the first time and is asked to sign in.

The Calendar product icon animation displays when the user’s calendar data is loaded for the first time.

The Photos product icon animation displays when the user opens the app for the first time and enters the warm welcome.

The Gmail product icon animation has a slightly more playful personality while still keeping a similar reveal, and is also displayed when the user opens the app for the first time and is asked to sign in.

Illustrations Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Subtle animation in imagery and illustrations can add a sense of playfulness to the user experience.

When displaying an unexpected error, use it as an opportunity to delight with animation.

Animating the bicycle while Calendar schedules a goal helps entertain the user while the task finishes.

Rewarding the user with an animation when they accomplish personal goals, like reaching Inbox Zero, can create deeper engagement with app features.

Animating an illustration for a new feature can educate the user about the feature in a memorable way.