Motion design informs users by highlighting relationships between elements, action availability, and action outcomes.
Motion focuses attention on what's important, without creating unnecessary distraction.
Motion celebrates moments in user journeys, adds character to common interactions, and can express a brand’s style.
Motion helps orient users by showing how elements in a transition are related.
Motion is used to express a brand’s personality and style.
Transitions can be customized to match the style of a brand. Transitions can be customized to express your brand’s style. Related Article arrow_downward
Transitions can be customized to match the style of a brand.
Basil’s brand of stylized recipe content is communicated with customized transitions that include parallax and emphasized easing. Transition adjustments are discussed further in the customization section of the motion system.
Icons and illustrations
Subtle animation in icons, illustrations, and product logos can add polish and playfulness to the user experience. Motion can be used to emphasize key points...
Subtle animation in icons, illustrations, and product logos can add polish and playfulness to the user experience.
Animating icons can playfully reinforce or add to the icon’s meaning.
The icon animations in Owl, an educational app, are designed to reflect its colorful brand.
Crane’s animated logo adds polish and an extra moment of delight.
Character animation can make system errors more palatable.
Motion can be used to emphasize key points in a user journey.
An animation to reward the user for a task can make key moments in the user journey more memorable.
Feedback and status
Motion provides timely feedback and indicates the status of user or system actions.
Animated elements responding to keypad input provide feedback to show if the action was successful.
Animated list items are placeholders that convey content is loading.
Motion of a card makes selection, positioning, and release visible.
Motion helps users understand how to perform actions.
The swipe-to-open action is animated to invite and encourage the necessary gesture.
The motion path of an item into a shopping cart teaches users the location of the selected item.