Infographics have become an essential tool in a content marketing strategy. They’re so common now that some might even say they’re passé. So what can you do to make your visual content stand out from the crowd? One option is adding animation to your infographics to catch the viewer’s eye like I talked about here. Another option is to make your infographics interactive, allowing the user to engage with the infographic and get more details and information. If you’ve got data-centric content then creating data-driven, interactive infographics with D3.js is the way to go. But what about creating interactive infographics that aren’t data visualizations? While there are tools such as Adobe Edge Animate and Adobe Animate (formerly Adobe Flash), there’s actually a pretty basic alternative that many designers may not be familiar with – Illustrator.

Most designers should already be very familiar and comfortable using Adobe Illustrator. Taking a few extra steps in Illustrator and with some basic Javascript you can create engaging interactive infographics. I’ve outlined the basic process below. It’s not intended to be a detailed tutorial, just an overview. I’ll go into more detail in a separate article some time, but for now, here’s the basic steps in your process.

1) Create your infographic artwork in Illustrator

You’ll be working with Illustrator to create your artwork just like you would a normal infographic. The difference is, that you have to make sure to carefully name your groups since these group names will become IDs in an svg file that you’ll export from Illustrator as well as in your Javascript code. The other difference is that you’ll hide your tool tips and dialog boxes so that they won’t be visible by default. The image below shows my art board and Layers panel in Illustrator for an interactive infographic I’m working on. Notice that I’ve named all of the tool tips and dialogue boxes and that they’re hidden.


The example above is still a work in progress, but when you’re done with your artwork, save the file as an SVG.


Saving the file as an SVG results in an XML format file with IDs for the graphic elements that can then be manipulated with Javascript in an HTML file. If you were to open the resulting .svg file in a text editor, you’d see something like this:


2) Create your HTML and Javascript

Now for some designers who aren’t comfortable with Javascript this might seem daunting.  Many designers may be comfortable already with HTML. Learning a few basic Javascript commands to show and hide things on mouse over and click events will give you all the interaction that you need for a basic interactive infographic.


And here’s the result.



Hat tip to Tom Germeau for his nice tutorial. Check it out to learn more details.