3 ways to design an infographic that stands out from the crowd

Infographics aren’t new. And certainly, interactive ones aren’t either—but with the launch of recent data-driven news sites such as Vox, Fivethirtyeight and The Upshot, they’re becoming more popular.

And since viewers are seeing those infographics on tablets, phones and desktops, building those graphics in HTML5 is the way to go—it’s likely the way your clients and co-workers will ask you to build!

A map of baseball fans by The Upshot

Here are three ways to make sure your HTML5-based interactive infographics break through the clutter.

1) Think about why you’re making the infographic in the first place using the FIRED method

Before you even think about the technology, it’s important to think about the graphic from the point of view of a viewer. While HTML5 gives you an entirely new medium for presenting the story of your data, it doesn’t automatically give purpose or narrative to the piece.

It’s obvious when a project was slapped together last minute, without any regard to usability or quality. How do you avoid doing that work? I like employing the “FIRED” method—an easy way to remember to think critically before you start using the latest in CSS tricks to make an interactive map:

• Fresh – How will your design stand out from the crowd?
• Informative – Are you presenting accurate and intriguing facts?
• Relevant – Does your information tell a harmonious story?
• Entertaining – Is the viewer drawn in and excited to be a part of your story?
• Different – Is your infographic new? Has it been done before?

Asking these questions will help you map out the objectives of your page and how you want your message to resonate with your audience. Ultimately your final product should frame your idea in a clear and palatable manner. Be creative, yes, but also be disciplined. The graphical art is what should draw the reader in, but the data presented needs to be succinct; don’t let the medium overtake the message. A successful infographic draws your audience in for more and is easy to digest.

2)Make it move

Adobe Edge Animate is an HTML5 animation tool that allows you to add motion to web graphics, enabling you to extend your custom designs with interactivity and movement. It also integrates with other creative tools to offer a seamless bridge between design and HTML as you create for the web. There are some really great templates and samples on the showcase page to get you started. If you want to go a level deeper and add elements like click-and-touch draggable scrubbers, here is a tutorial with assets to get you started.

You can also weave in interactive graphics that leverage the latest browser updates to CSS and HTML5 to make some pretty fancy effects. CSS Shapes is in its last stages of specification; check it out (Github repo here).

The evolution of the Web infographic.

3) Data, data, data

An infographic is nothing without powerful data sources and the tools to illustrate them.

Data sources can vary—whether it’s your own research or your client’s. There’s also a good list on Quora of publicly available datasets that can give you some good raw data to play with.

Some of my favorite infographic services, (which provide all HTML5 products, of course) for collecting and evaluating your data are:

• Piktochart — a free service (with a paid pro option) offering a wide range of customizable themes with a slick data importing utility.
• infogr.am — a free service (with paid a paid pro option) offering templates, spreadsheets and other utilities to build out visual graphs.
• visual.ly — a graphics community. While the price point of visual.ly can seem a bit steep (they’ll make you an infographic based on a creative brief starting at $999) their community is haven of inspiration when looking to start your own infographic project.

And if you’re especially ambitious and looking to really deep dive into the greater field of data science, there are a ton of resources online on the subject. There are MOOCs like this data science course from the University of Washington.

Sarah Hunt

Sarah Hunt is a Product Manager at Adobe focused on motion and interactivity. Previous industry experience includes graphic design, illustration, front-end web development, video editing, and Flash animation. All around fangirl of anything web and design.