Inspirations from Many Animated Infographics and Reread Chapter 8 of FunctionalArt

Last week after screening a bunch of animated infographics, I got some sense of what a good animated infographics should look like.

Global Air Traffic

First of all, information. Without information, the animation could not be called infographics. Information should include data, and all charts and graphs that related to that.

Second, motions. That’s the as important feature as information. Motion creates interests, draws viewers’ attentions, helps stand out the points.

Other than that, many embellishments really help. Vivid illustrations, motion types, background music, and videos do enhance the expression of the work. Here’s an animated story about NBA’s ignorance of defensive three seconds rule: https://pudding.cool/2019/05/three-seconds/

Last semester, I went back many times to read chapter 8 for inspirations of starting a brand new infographic. This time, I did the same. For my final infographic animation, I still need to go back often to see how a great and insightful infographic work should be.

Focus. What’s my story? What would my viewers take after watching my videos? A clear path from Liverpool’s first match all the way to the champion in the end.

Research. Gather as much information as I can, and record my ideas. In this case, I need to know exactly every game’s score, assistants, saves and who accomplished them the most, in the team.

Form. What’s the best visualizations for my data? Illustrations for a still player. Footage for live goals. Slope charts for game scoring data. Normal charts for groups ranking.

Sketch. This is critical. You finish your backbone and only wait for skin. For a video, that’s the very detailed storyboard and storyline, for major frames and sequences.

Finally, styles. How my animation should be? How my color palette should look like? How about the types and fonts, etc.

Other than the normal way of from story to data, it talks about from data to story, and that mimic other designers’ works.

For color and fonts part, a simple paragraph is more than enough:

Limiting the amount of colors and different fonts in your graphics will help you create a sense of unity in the composition. I usually recommend to my students at the University of Miami and the University of North Carolina at Chapel Hill to stick to just two or three colors and play with their shades. You may pick a neutral tone for the background elements (buish gray in this case), and an accent color to highlight the most relevant stuff (yellow). Do the same with fonts. Choose just one or two: a solid, thick one for headlines, and a readable one for body copy.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s