Image credit : Behance

Design systems are getting adopted extensively in organizations, be it creating a style guide or full design operations teams. Designers and developer are communicating more effectively to overcome the gap that slowed down productivity.

As a part of design system animation is highly ignored and always comes as an afterthought once all the static components like color, typography and buttons are in place.

Benefits to include animation as a part of design system

Motion or animation should be an integral part of interface design which creates opportunities to make interfaces better at every level. It should exist under the same ecosystem of product decisions and goals, making interface easier to understand, more pleasant to use and more interactive to work with.

There should be an established structure to approach motion which empowers the team to animate, makes implementation faster and improves overall usability.

While creating a design system for one of our clients, I and my team uncovered that there are certain building blocks that one must keep in mind while considering motion or animation for their interface design. These building blocks provide a rationale for every decision one must take while applying animation to their designs.

Building blocks for an animation style guide

1. It should fit into the defined design principles. There is a huge difference between a product that is mainly focused on being ‘friendly’ than the product whose primary goal is focused on being ‘efficient’.(In case you have considered animation as an afterthought in your design system you can still turn the existing principles into motion/animation properties.) For example, an efficient product can have shorter, snappier animations whereas a playful product can have more bouncy animation.
2. It should add or reflect the brand personality and should be able to convey the overall brand tone. This helps to create a sense of trust with your users. For example, if your brand personality is sophisticated you can’t include a bouncy animation. (Tip: tweak the easing curve in your animations it helps to add the personality in it).
3. Your animation is not a standalone hero but like the seven samurais, fighting as a team playing on each other’s strengths. Never let animation take the center stage. It should enhance and improve usability rather than just jazz up your designs. Good animation is the one that users don’t even notice.
4. Along with not being a standalone hero, animation should not waste the user’s time. The animation is used to tweak the user’s perception of time, so use it to your favor. ( Anything below 0.1 sec will seem instantaneous and below 1 sec will seem seamless.) Break down any process into parts that take more time than 1 sec and create few separate animations. This would make the process feel a lot faster and keep your users engaged.
5. The animation must serve a logical purpose -

• Setting the context of your UI elements. When introducing a certain object, provide a clue of the object’s property to the user.
• Animation can help the brain understand how the information flows. The user can also be oriented as to how the objects appear or disappear from the screen making them comfortable in using the interface.
• Provide feedback to the action the user performs. Animation plays a huge role in reassuring the user about their actions, making it rewarding to perform the same action again.
• Animation can also help the content feel alive. For example, if you have comments, images or some sort of counter, you can have smooth additions of those new elements or buffer the loading of these elements to signify real-time updates.
• Last but not the least, animation can be used for storytelling. If you’re introducing a new feature or want to help users fix an issue. Illustrations play a huge role in helping the user understand new features or fix a problem.

Let’s look at a few examples that have included animation as an integral part of their design system.

Salesforce (Lightning Design System)

Salesforce includes an animation style guide as a part of their design system. It focuses on the benefits of motion design (effectively communicate content hierarchy and spatial relationship, along with accessibility benefits to reduce cognitive overload ) considering timing, effects, and dimension.

Apple (Human interface guidelines)

Apple’s human interface guideline includes motion under visual design to guide developers on how to use animation. They have animation guides for four different platforms macOS, iOS, watchOS and tvOS. Each focusing on different logical purpose that are relevant to that platform.

For example, in macOS there are subtle animations that convey status, provide feedback and help users visualize their overall actions.

Where as, in iOS they convey a visual sense of connection between users and content onscreen.

Audi Design system

UI Animation is a key part of the Audi design system focusing on response effect, functional animation and transitions. Their animation basics talk about an animation curve inspired by the dynamic performance of their cars, it is based on a powerful acceleration in the start and a fast deceleration in the end.

Google (Material Design)

The material design had initiated the push toward implementing design systems, and the same is the case for their motion design. Countless designers and developers have learned how to use motion in an impactful way through material design. They have used number of examples to explain it’s principles of being ‘informative’, ‘focused’ and ‘expressive’.

Once you have your building blocks in place to create the style guide that effectively integrates both static and motion elements, consistently evolve and improve upon them. The best way to achieve it is by sharing these considerations and how it can be implemented with your team via visuals and text.

To sum it up, I would like to conclude animation style guide acts as a tool to communicate product features, functionality and personality to users. By including it in the design system, both, the teams building product and the people using it benefit from it.