Principles

1. User Centric

A user-centric approach ensures that animations enhance the experience while remaining accessible to all users. Animations should be usable, making interactions intuitive and straightforward. A natural and efficient style brings a human touch that fosters fluid interactions. Educational for clear guide to users through processes, to reduce cognitive load, which keeps animations simple and purposeful, allows users to focus on their tasks without distraction.

2. Consistent

We strive for consistency in our motion design across all channels of the Unified Design System. By prioritizing simplicity in animations, we create clarity and coherence throughout the user journey, enabling users to easily understand and engage with the content without confusion.

3. Impressive and Appealing

To achieve an impressive and appealing motion design, we focus on enhancing user satisfaction and intuitiveness, resulting in a superior user experience. By crafting a cohesive and enjoyable experience, we ensure that animations engage users and contribute meaningfully to their overall interaction with the product.

4. Informative

We prioritize an informative approach in our motion design, ensuring that key information is clearly highlighted to guide users effectively. By delivering clear feedback for user actions, we enhance interactions and strengthen understanding. Animations are designed to improve decision-making by presenting information in an easily digestible format. Moreover, we focus on clarifying spatial relationships within the interface, helping users navigate and comprehend their environment more intuitively.

Key areas

1. Feedback

Provide immediate visual response to user interactions using clear animations to reinforce actions and indicate success or errors.

2. State change

Smooth transitions between different states of an element to enhance user understanding and navigation.

3. Loading

Inform users that content is being fetched while maintaining brand visual consistency.

4. Entry animations

Motion guides for component appearances to capture user attention and set the tone for the interaction.

5. Illustrations

Integrate animations into illustrations to enhance engagement and storytelling, ensuring they are aligned with the brand's overall tone and user experience.