Designing for Animation | Part I

By 2017-04-24 Blog

This is part 1 of a new series of posts for designers who are not animators about how to design for animation. If you are a web designer who is looking to add some new skills to your repertoire or an illustrator who has been asked to create assets for an animated video, we hope this guide will be helpful. Enjoy!

We interact daily with content that is designed. Everything from the label on your morning coffee cup to your favorite social media sites. When something is well designed, it communicates a clear level of idea or function. When that content is animated, it really takes the design to another dimension. Specifically the fourth dimension: time! Just take a look at what a difference animation makes in our logo.



Video in general is an amazing medium to communicate information, and these stats back it up.

  • On Facebook, the average organic video reach is around 8.7%, whereas just an image only reaches 3.7% (That’s a 135% increase!).
  • Videos on Twitter are 6X more likely to be re-tweeted than photos.
  • 4X as many consumers would rather watch a video about a product than reading about it.

Think about how you interact with animated content. Is it more fun to express yourself by sharing a static image, or an animated GIF?


This collaboration of design and animation is something that we’ve done quite a bit at The Duke & The Duck. While each video we work on can have a different process, here are a few examples that we’ve done in which we’ve taken content that was designed for a certain purpose, and we used that to create an animation to accompany it.

Example 1 : Science of Science Communication

We were contracted by the National Academies of Sciences to make an animated video. This video was to be based off the cover for The Proceedings of the National Academies of Science (PNAS).




A lot of the videos that we create, assets are usually provided, but for this video all we had to go off of was the cover. Using it as the source for the artistic direction, and combined with a stellar script we wrote, we created storyboards to visually show how we planned to tackle the animation.

One of the first challenges when taking already designed content, is thinking “How does this move?”. Obviously there is reference to look at for how the video could look visually, but taking that and thinking what the motion will be like is a challenge. Something that helped was having the designer and our animator sit down for a quick chat. Going over the design, what the elements meant, and talking about possible motion choices helped start the project off on the right foot.

Example 2: HPE Social GIFs

The animated GIF series we have done for Hewlett Packard Enterprise (HPE) in partnership with Edelman is another great example of showing design turned into motion. This GIF was made from a design on an HPE article.

With this process, putting together the pre-production work was a bit easier since the client had provided an huge asset library. This included not only the graphic assets, but color palettes, fonts, as wells as “do’s” and “don’ts” on branding. But critically, these assets were not designed with animation in mind, which would cause problems later. For the GIF in question there was no script, and the storyboard process mostly entailed recreating the original image.




How we came up with the motion direction for this video relied heavily on the stroke-styled assets. This allowed us to in a sense “build in” the assets in animation. We did have a few hurdles with this video. The main hurdle was how the asset content was created in Adobe Illustrator. In the video, the main motion of the design is the lines basically animating themselves on. In Adobe After Effects there’s a technique that makes animating lines very easy, but it relies on having the stroke data. The assets that were provided, even though they looked like strokes, were really solid shapes. That meant that we had to add an additional step in the animating process since there was no stroke data. We’ll go over more tips and techniques in Part II  of this series that are similar to this.

Using motion to bring life to design is a no-brainer online, especially on social media. It lifts the restrictions of seeing a design solely as a two dimensional layout, and allowing it to have depth, story, and feeling. Be sure to stay tuned for the second part of this series where we’ll go into more depths about the do’s and don’ts of setting up design files for animation.


Author Hannah

More posts by Hannah