Website animation has a bit of a reputation: eye-catching and trendy, it’s become a subtle and not-so-subtle staple in designer toolkits. Animated videos with a friendly style and menus that spring in and out of view have become common features of websites of all kinds. But if we take a step away from radiating icons and motion graphics, animation is a tool that–when used correctly–enhances the user experience and connects with your audience.
Motion and interactivity can transform the sea of text and images that greet visitors to most websites into a journey that nudges them gently towards areas of interest. Features like color changes over time can indicate where a user has been while subtle motion can incite curiosity in parts of the screen that they may have otherwise been ignored. By using well-placed animation to guide audiences through your site, you illuminate what you value by creating a memorable experience that amplifies rather than distracts from your message.
Though designers and web developers come to mind when we talk animation, it can and should be explored by anyone. After all, there are a number of animations to choose from, and considerations like accessibility, personality, and style will go into what’s right for your organization. So, whether you’re looking to experiment or diving into more advanced work, we hope this series of curated resources and tools sets you on your path!
-Your Friends at Constructive
Website Animation: Delightful or Distracting?
In this primer by our team, learn exactly what we mean when we talk about web animation through the lens of human perception, audience engagement, and how different types of animation can enhance the user experience.
The Role of Animation and Motion in UX
When you’re ready to grab your audience’s attention (but not distract them!), the Nielsen Norman Group lays out a series of best practices for animation and outlines how even simple animations like progress bars and color changes for text create feedback loops with your audience.
Understanding Motion
Material Design by Google is a clean, easy to understand resource that explains various aspects of user interface design including animation. This guideline article on Motion explains the different types of animation and motions you can use to express your brand’s personality.
UI Animation: Please Use Responsibly
So we know what to do with animation, but what about what not to do? This piece featured in the UX Collective describes how the overuse of animation can negatively affect a user’s experience while highlighting some design considerations.
Why Nonprofits Need Animation
And we can’t forget about video animation. Though they’re often labeled as just entertainment, they can help nonprofits specifically by sharing your message in a consistent and engaging way on your website, across social media, and more.
Animate.css
Ready to incorporate animation into your work? Animate.css is a varied but streamlined CSS animation pattern library that can help communicate between designers and developers how elements on your site should animate.
Anima [Video]
If you’re looking for something a little more advanced, check out the Anima Youtube channel! Explore dozens of tutorials and bring your animations to life.
More Constructively Curated
• 7 Resources to Embody Your Brand Values with Digital Accessibility
