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

Default avatar.
May 20, 2014
3 ways to design an infographic that stands out from the crowd.

thumbnailInfographics 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!

baseball_info

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).

evolution_web

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.

Read Next

10+ Best Resources & Tools for Web Designers (2024 update)

Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…

3 Essential Design Trends, April 2024

Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…

How to Plan Your First Successful Website

Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…

15 Best New Fonts, March 2024

Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…

6 Best AI Productivity Apps in 2024

There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…