In recent years, designers have been hard at work making the transition from print to digital media. This has required teams of designers to approach their systems as wireframes of reusable assets – such as with style guides, snippets of code, and design tokens. This involves the formal documentation of these reusable components.
Motion, however, is largely overlooked during discussions about this documentation and systemization of the components designers work with. But designers who leave motion out of their systems risk lessening their systems’ purpose. Today, let’s explain why and how designers can add motion to their design systems and improve their users’ experience.
Why it’s important to add motion to design systems
One of the most important responsibilities of UX design teams is to engage or communicate essential information to their users. Here’s how motion helps with that goal:
- Motion engages users – Motion can turn moments that bore into moments of delight. Take loading animations, for example. A fun loading animation takes away the pain of waiting, reducing the risk that users will navigate out of your site or app.
- Motion provides context – Subtle animations give you context to help navigate a site. For example, it can tell you if an action has successfully taken place. Think of any time you’ve ‘liked’ something on Twitter, Instagram or TikTok – the heart icon animates, letting you know that you’ve engaged with the social media post.
- Motion tells a story – Is your brand fun and playful, or is it formal and serious? Like other elements of design – such as your logo, colors and typography – animation can help convey these characteristics, helping you show off your brand story or personality.
When you include motion into design systems, you won’t just get the benefits above. It also gives everyone on your design team a handy reference for how to incorporate animation, allowing everyone to work faster. Besides that, it helps keep the animated elements on your site and app look and feel consistent.
Audit your system for motion patterns
Designers frequently audit their system’s UI patterns to uncover repetition and areas for improvement. It’s a good idea to apply this same line of thinking by auditing your system for motion patterns. So, before a design team begins making something new, it’s a good idea for them to first start with an audit that lets them discover redundant components, ideas for new additions, and potentially unnecessary motion patterns.
As you begin your audit, pay particular attention to animations lacking enough motion or, conversely, that feature motion that’s simply too heavy. Additionally, keep an eye out for motion patterns that may share similar intentions (trying to inform the user of something or draw their attention toward something, for example) and see if you can cut out redundancies.
The overarching goal of your audit should be to establish consistency across the components – without taking away from the user experience.
Settle on usage principles
If you’re going to add motion into your design process with repeatable strategies, you need to develop guiding principles to which you can adhere. It’s not enough to simply want to include motion in your designs; you can only achieve product consistency if you have clear and well-defined guiding principles that dictate when and how you should best implement motion design.
To create unambiguous guiding principles, approach them in the same way you would approach implementing enhancements to your user experience. Consider where your design system would best benefit from feedback, where users may get tripped up as they navigate your system, and where motion would be best to direct users to another part of your system.
Ideally, you should predicate your guidelines on the three main principles of being focused, expressive, and informative:
- Focused motion draws the user toward important elements without distracting them.
- Expressive motion elicits an emotional reaction from the user, such as being joyful or impressed by their interactions with your design system.
- Informative motion indicates to your users the relationships between the different components of your system and how they can be interacted with.
Ultimately, designers should strive to balance that joy their users feel from motion with the practical usability that motion provides.
Ideas for adding motion into design systems
Need some inspiration for adding motion to your design systems? One of the most innovative ways to implement motion is by using it to manipulate your brand logo. Logo manipulation is a quick and simple way to add motion to your designs without introducing more clutter that can potentially confuse and distract your users. Your logo should be something that your users enjoy seeing and remember for a long time. We recommend adding motion that rotates, expands, and transforms your logo to instill a lasting sense of excitement in your users.
Other popular ideas for adding motion include using kinetic typography (moving text) and hover effects that occur when a user moves their mouse cursor over an element. Play around with these methods to avoid having a lifeless design system that is unable to convey the meaning and purpose behind your brand.
Motion doesn’t have to be hard
Although adding motion to your design may seem daunting, it becomes much less so if you follow the techniques outlined in this article. Once you have the right building blocks in place, you’ll be amazed at how innovative and exciting you can make your system through the implementation of motion animations.
