Motion design helps create easy to use, enjoyable user interfaces. Animation plays an essential role in enhancing the user experience and adds a powerful option for visual storytelling. However, taking control of animations and transitions as part of interaction design gradually increases the complexity of the user interface and demands more of the designer’s time.
The proper implementation of motion design helps ensure better quality user experiences for your brand. Leveraging motion design aligns with user desires and improves various aspects of user interactions. Motion design demonstrates the relationships between an application’s UI elements, enabling easier navigation. Designers can use animated icons, illustrations, and logos to communicate with users.
Let’s begin by focusing on the design of navigation transition patterns, which provide a strong foundation for motion design. Simplicity and consistency are key to designing navigable transitions. There are two types of motion patterns that UI designers and developers can employ in implementing transitions.
- Transitions based on a container
- Transitions with no container
Transitions Based on a Container
If an application’s user interface consists of buttons, cards, or lists, transition design is based on animating the container. Usually, it’s easy to spot containers because of the visible edges of their separators. However, sometimes containers are invisible until a transition takes effect. That is, until a transition occurs, there are no visible dividers or containers.
Here is an example of a transition based on a container: Material Design’s deceleration easing allows scaling animations to begin at peak velocity, then gradually slow down until they become static. In the end, the screen display simply fades out, with no scaling. Therefore, exits from animated containers are subtler than entrances—for which transitions focus the user’s attention on the new content.
Transitions with No Container
For screens whose transitions are not based on containers—for example, when the user taps an icon at the bottom of the screen to navigate to a new destination page—transitions follow a two-step pattern:
- The initial display fades out as the next display fades in.
- Using Material’s deceleration easing, the new display can also scale up subtly as it fades in. Scale applies only at the beginning of the transition to draw attention to the new content that displaces the old content.