Adobe Systems Incorporated

Animagraffs: Education Animated by Jacob O’Neal

Animagraff Part tutorial. Part infographic. And part animated GIF.  Animagraffs. It’s the name Jacob O’Neal assigned to the animated infographics he began working on in 2012. When he told us that he used Creative Cloud, we wanted to know more so we caught up with him to ask about his concept, his tools, and his process.

Jacob talked to us about his toughest critics, making (some) decisions based on art rather than function, how creativity is fueled by excitement and wonder, and, of course, the beauty of Creative Cloud.

You’re a designer, so designing information probably comes naturally to you, but where did this idea originate? Was it an offshoot of another project? I’ve always been fascinated by animation. I used to draw entire flip-book scenes in the margins of old paperbacks or on sticky note pads. I’ve also always loved optical illusions and visual tricks that appear simple yet manage to boggle the mind.

A couple of years ago I began to see entire movie clips, in animated GIF format, being shared all over the web. While I had seen very simple usage of animated infographics in the wild, I hadn’t seen anything on the scale of Animagraffs.

It seemed like a fitting challenge: Could I make a meaningful infographic within a limited image format as the endlessly looping animated GIF? I had a lull in projects for month or so when I decided to make the first Animagraff. As a freelancer I try to keep a nice savings cushion since things can fluctuate, but even so, when there’s a lull I get antsy. There was a strong temptation to seek out the same old easily-procured but passionless work that “pays the bills.” But creativity is fueled by excitement and wonder and mechanically “paying the bills” is neither of those. I remember distinctly the moment I chose to act based on courage and create a passion project, not knowing what the result would be, or if I’d ever see money from it.

Quite frankly, I have no idea why I was an “early adopter” of the animated GIF infographic; the technology’s been there all along, and there are many, many brilliant designers out there who could pull it off. Stroke of good luck maybe?

What was your first topic? How has your process evolved since that first piece? The first animated graphic I did was Cheetah: Nature’s Speed Machine I just wanted to test out the limits of what could be done, and I was still a little intimidated by learning 3D software, so I made a flat graphic (non 3D). I sketched the main cheetah illustration in Illustrator and the animated graphs and lines in Flash. My process is still very similar, but now I have a better idea of what kind of illustrations fit the GIF format best. Some things just look gimmicky in an endlessly looping image and other elements really shine.
Animagraffs_1

Who was your first Animagraff client? The first glimmer of a “result” I saw was an offer to work on a Super Bowl commercial project for Skechers. Their agency saw my Cheetah graphic and called me directly, offering a tidy sum to work on a project I would never have dreamed about before. Getting the motivation to make Animagraffs became a lot easier after that!

GIFs are for fun. Infographics are (mostly) for dispelling information. Beyond being cool viewing, Animagraffs have to strike that fine balance between entertainment and information. How much time do you spend getting that balance right? With my Animagraffs, the education IS the entertainment. That’s the whole point. I “came up” in the marketing world where the cart is perpetually before the horse—where everyone fearfully worries about “the results” and focuses all energy on hype instead of caring for the heart and soul of the project itself (hypnotizing entertainment without substance).

I decided to do everything the opposite of what I experienced working for marketing agencies. The product should “sell” itself through its quality. All I have to do is focus inward, and the outward results follow. Not the other way around. Animagraffs entertain to the exact degree of sincerity, hard work, and the quality of research I put into them. There’s no room for any kind of trickery, hype or fine print.

Infographics are compressed information distilled into easy-to-read bits. How many “pages” of content does each Animagraff contain? I go until the subject has been covered. I try to avoid disputable elements that might be distracting while still going deep enough to educate. The time involved varies but in general Animagraffs take anywhere from 20- to 80-hours of solid research, writing and design.

At what point do design decisions (type, color, layout) factor in? Animagraffs, especially my 3D projects, have a propensity to be manual-like. It’s actually difficult at times to make things original and fresh while maintaining a comfortably readable graphic. I’m an artist at heart, not an engineer, so I try to stay abreast of current design trends, and I make some decisions based more on art than function (though that line is hair thin). Decisions support the subject matter as far as possible. For the How A Car Engine Works graphic, for example, I used a typeface for the main titles that has strong automotive ties.
Animagraff_2

With animated infographics, you’re basically designing in layers. How does that make you job easier or harder? One-second decisions at the beginning of a project become two-day fixes at the end. The more intricate the assembly, the more critical it is to get things as right as possible from the start. By the time an Animagraff is compressed into its final GIF form, it’s traveled through two or three different software applications. At that point, fixing a misplaced apostrophe could take ten minutes as opposed to a mere keystroke while the script was in a text editor. I suppose it makes the job harder to have to design things in layers, but then, the difficulty of producing Animgraffs means I’ll have a little less competition in the field—I can’t complain about that.

Do you have a “test audience”? A person or people who try to learn something from your content? I’m passionate about my interests and hobbies and I assume others are as well. It’s unfortunate when an entity misrepresents something you know and care about. Since the public at large is unaware of inaccuracies on most subjects, it’s tempting to disregard small groups of highly devoted fans. But there’s incredible power in gaining the loyalty of those who won’t be fooled, who don’t click on every trifling bit of online clickbait, who seek out the highest quality information. When they share your work it’s often to their esteemed colleagues, and then you find yourself getting the kind of front-row attention money can’t buy. My Car Engine graphic was featured as a blog post on the New York Times Autoblog and Jalopnik.

So, my test audience is the toughest of critics—when researching a graphic I tend to post it to forums or other specific places where the most educated disciples of any given subject are prone to congregate.

How a Handgun Works: 1911 .45 is a good example: I’ve been continually flattered by the many messages of thanks from gun enthusiasts, law enforcement personnel, gun instructors, and other professionals. These people are far more conversant with guns than I, and they’re actually using this graphic as an educational asset. However, I’ve also received harsh feedback about its inaccuracies. I have to take it all in stride because, even though I consider it my duty to try, there would be no end in attempting to satisfy the core disciples.
Animagraff_3

You mentioned that you use Creative Cloud apps almost start to finish. Briefly walk us through your process. I begin in a simple text editor, pasting research from all over the Internet with links to sources. With that file open, I create a new document by its side to write the script. The script condenses all the fragmented information into a compelling story in which every sentence is as efficient as possible with no wasted words.

If the project uses a 3D model, I begin modeling at this point, with research imagery and text all prepared. I use Blender 3D (which I’ve really enjoyed learning) to craft my own models; I’ve been temped at times to download ready-made assets, but that would hobble progress the day I want to do a subject for which I can’t find suitable models. Also, for education it’s best to have simple models without all the indents, holes and pipes, of actual mechanical objects. So I craft everything from scratch myself.

With the script written and 3D model created (if needed), I begin laying out blocks of text in Illustrator CC. This is generally when I start to see what visuals I need and what will fit where. It’s a giant puzzle board. You might think I start with grandiose sketches of intricate objects but it’s really with blocks of content scattered around the page that I start to see where the big visuals will go.

I use Flash (since that’s the animation timeline software I know best) to assemble the animated assets over the top of the Illustrator CC-made layout (After Effects CC and Photoshop CC both have timeline elements that I imagine could be used for this, but I haven’t experimented with either). If it’s vector illustration I might draw the frames directly in Flash Professional CC (the Cheetah frames were drawn in Illustrator CC since there are better brush and line quality options).

I export the finished project from Flash CC into Photoshop CC (which has the best compression ability when it comes to the animated GIF format). In Photoshop CC I try to get the file as small as possible, often limiting colors to do so. The cheetah graphic has dimensions of 1400 x 1890 with 18 total frames and rings in at a nimble 500KB. That’s much smaller than many static graphics of the same pixel dimensions; I purposely kept the project to a two-color scheme; as I progress with these projects, I’m getting more adventurous with more colors and weightier file sizes.

You mentioned After Effects. Do you see yourself trying it out down the road? I haven’t actually tried After Effects with these animated infographics so I have no idea what to expect. Also, it looks like Flash is starting to incorporate some HTML5 stuff so I’ll probably stay in Flash since it’s more web-centric and that’s my playing field.

Since you use a range of CC products to make Animagraffs, we have to ask, how are you liking Creative Cloud? I’m loving it—synced settings, seamless upgrades—it’s the kind of functionality I’ve always wanted!

What’s your next topic? I JUST finished Inside a Jet Engine. I hope it’s as well-received as my other projects have been.
Animagraff_4

COMMENTS

  • By rahul bhadauria - 3:59 AM on July 10, 2014  

    This new infographic design is awesome and visually interactive and engaging. Thanks for the new idea. I usually design and do animation in photoshop or flash so aminagraffs will give us more possibility to design and discover.

    Thanks a bunch Jacob