Motion

Principles

Motion brings life to visual design and interactions. By applying principles derived from classical animation techniques, motion can delight and bring clarity by guiding the customer’s focus before, during, and after interactions.

Smooth Movement

Usage

By using appropriate ease-in and ease-out values for each motion element, smooth movements can be created to gently point the customer in the right direction.

Example - Smooth Movement

Informative Speed

Usage

Speed of moving elements within the page should be maintained at similar speeds, giving the customer a sense of space and familiarity while reducing distractions.

Example - Small Elements

Example - Large Elements

Clear Focus

Usage

Use motion to direct the customer’s attention. Motion should emanate from the location of a customer’s interaction point, leading the eye to the following focal point.

Example