Animated content has come a long way since the super aggressive Flash animations of the early 2000s. (Remember “it’s peanut butter jelly time”? You totally do…) Today’s HTML5 web experiences are much more subtle, sophisticated, and powerful; they use dynamic elements to enrich content rather than distract from it.
Whether you have a platform to create animated content on your own, or you work with a skilled front-end developer, the sky’s the limit when it comes to bringing stories to life. But, as with any design element, just because you can animate something doesn’t mean you should. It takes time, testing, and restraint to learn how to create a beautiful and effective animated experience.
These 6 inspiring examples show how to do animation the right way. Be sure to share your favorite examples in the comments!
The Guardian, 100 Years of Aviation Article
The Guardian has experimented with multimedia journalism for years. Their 100 Years of Aviation experience from 2014 combines animated maps, data visualizations, and longform editorial content to explore how aviation has changed over the past century.
eFront, Investor Cloud Infographic
This animated infographic from financial software provider eFront clearly explains how their Investor Cloud product works. It also brings the information to life with fun and engaging visual elements like the sliding businessman (my favorite part!).
Species In Pieces Interactive Exhibition
This online exhibit highlighting 30 endangered species caught my eye a few months ago. The animation effects and art styles are fantastic; the information is also broken up nicely in different modules that make it easy for viewers to explore what they’re interested in.
Fox, Witness Gotham Microsite
If you haven’t been watching “Gotham,” Fox’s dark Batman origin series, you’re missing out. To promote the show, Fox worked with agency Active Theory to create an animated microsite that features biographies of each of the key characters and some fantastic 3D modeling.
Fruit of the Loom, The Tuck Effect Report
You might not think that an underwear company would invest in animated digital content, but Fruit of the Loom is full of surprises. Not only is this microsite nicely designed—it also features some pretty clever stats around “the tuck effect” (what happens when you tuck in your shirt).
Alfred, Company Website
When learning about a new laundry service, you don’t usually expect to be taken on a magical journey. Somehow, Alfred’s company website manages to both clearly describe their services and delight the viewer with fun animated content (Exhibit A: crying unicorn, shown above).
The Key Takeaway
No matter what your subject matter, audience demographic, or format, animated content can be a highly effective way to bring your designs to life. These examples show just how versatile—and fun!—animations can be.