Group Created with Sketch.
Curated Resources

7 Resources to Enhance Audience Engagement with Animation

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.


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 

• Transparency and Your Project’s Success: 5 Resources

• 6 Resources to Turn Your Strategic Plan into Design 

About the Author

Doug Knapton

Doug Knapton

Doug is a visual and UX designer who is passionate about creating positive brand experiences for mission-based businesses and nonprofits. He specializes in interactive data visualization, mobile design optimization, and long-form editorial storytelling. After graduating with a BFA in Graphic Design from Pratt Institute in 2015, Doug joined TIME, where he specialized in creating long-form digital experiences and cross-brand native advertising campaigns. At Constructive, Doug collaborates with clients to create user-centric UX and visual design—working closely with team leads to ensure that design execution is aligned with strategic priorities. In his free time, he enjoys illustrating absurd compositions.

More about Doug Knapton
Copied to clipboard http://...