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

Apple Opts for AR over VR at WWDC

An Apple VR headset has been one of the most widely-rumored devices of the last few years, and it was finally settled a…

Exciting New Tools for Designers, June 2023

We’re halfway through 2023 already, and the number of incredible apps, tools, and resources for designers is mounting.

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…