Infographics are being used by tons of businesses. They display data in a visual way to keep readers engaged. According to visual.ly, infographics started about 32,000 years ago from cave paintings, displaying representations of animals and other resources around the area of the painting. From there, they emerged in Egypt where people illustrated hieroglyphics to communicate life stories and other events.

Other spots in history include 1786 from William Playfair who innovated the first statistical graphics, in 1857 Florence Nightingale used infographics (mostly on the Coxcomb chart) “to change history and persuade Queen Victoria to improve conditions in military hospitals”, in 1933 Harry Beck created the first map of the London Tube with simple lines to display public transportation system routes, and so on until 1975 where Edward Tufte, also known as the ‘father of data visualization’ created a seminar with John Tukey who was a ‘pioneer in the field of information design’ about statistical graphics. Later in 1982, Edward Tufte self-published ‘Visual Display’ which established him as an infographics expert. 

Fast forward to today when marketing agencies, TED presenters, and graphic designers use infographics to make occasionally mundane data, fascinating to the layperson. When you think about it, infographics are a completely new hybrid of a marketing tool.

The New & Improved

While static infographics are have virtually saturated the market, advanced styles of infographics are being created and published. These infographics, named Interactive Infographics and Motion Graphics are the newer designs being displayed. Interactive Infographics rely on the user to scroll, click, or hover over elements to activate the infographic by interaction.

These actions are executed by web code such as HTML, CSS, Java, or another scripting such as D3 (a library of JavaScript documents using HTML, SVG, and CSS commonly used by designers). These can be displayed as a separate web page or as an embedded section of a web page. The other style of newer infographics are Motion Graphics or Animated Infographics, which are videos created to animate data. 

These interactive infographics are used to convey information that is rapidly changing or to draw the reader’s eye to a specific morsel of information. At Red Branch Media, we like them because they’re cool! 

Which Style Can Be Implemented at the Lowest Amount of Time and Stress?

Both new styles of infographics are more appealing than standard static infographics, but Motion Infographics can be more time-consuming and require some video editing software to create. SocialMediaToday predicts Single Page Websites and Interactive Scrolling as 2 of the ‘Top 5 Web Trends of 2015,’ which are both elements of Interactive Infographics.

Though Interactive Infographics rely on coding to animate the actions, there are many ways to create them. You can use Adobe Edge or Adobe Muse to create the entire infographic with coding, Adobe Photoshop or Illustrator to create the infographic in layers and export to a web page to manually code the actions, or you can use these online services to create them.

If you have the software to do so, creating the infographic in layers first and uploading it to a separate web page to be coded is the best way to create the infographic for a designer. By doing this, you have 2 separate elements to work with that can be easily modified or changed. You can easily re-upload different infographic elements, and you have full control of code on the separate web page that can be modified at any time without changing or damaging anything in the original infographic file.

See a really cool example of an interactive infographic here.

How to Create an Interactive Infographic from Scratch & Send Animation Instructions to Your Developer

First, create your entire infographic in Adobe Photoshop making sure each object and element are in a separate layer. Photoshop will automatically generate a new layer for each element created but make sure you label them with a specific name to each layer/object.

It’s important to label each layer so you or the developer will know which elements to animate via HTML, JavaScript, or CSS. Here’s an example of a Photoshop file from designmodo (left). For all graphics that may be illustrated as vector graphics, make sure they are condensed into a single layer in Photoshop as a “Smart Object.” Have the extension open up in Illustrator just in case the developer needs to change anything in the original file.

After the infographic is created, save the .PSD file. From here, document how you would like each animation to happen. This is another reason why each layer was labeled, so you can specify which object animates at what time, and how. After creating your instructions for your infographic, send your developer the Photoshop (.PSD) file and instructions. For more information on how SVG animation works with these infographics, check out this page to understand a little about how SVG is coded.

Creating infographics might take some time…

but the bottom line is that it’s worth it. You will appreciate the look and experience of it after you create it, and your audience and/or client will as well. They’ll be more engaged, and will be more likely to read the entire infographic because according to Creativebloq, even something as little as some scrolling effects that trigger animation “…creates somewhat the same need for completion as a Jack-in-the-box; users feel compelled to finish what they’ve started.” What are you waiting for? Seize the opportunity to be a part of this growing design trend and make yourself stand out and have a more engaged audience.

Maren Hogan

Maren Hogan is CEO of Red Branch and general Bad@$$

Maren Hogan is a seasoned marketer and community builder in the HR and Recruiting industry. Maren started Red Branch Media and, before she hired all the smiling faces you see below, she ran it on her own. In marketing for over 15 years, she has deep experience in strategic campaigns and a long-term, results-based operational approach.