1
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.
How to Survive a Client Meeting When They Say ‘Make It Pop’!!!!
Fear not, for this guide will arm you with the tools and humor needed to navigate these meetings with style (and sanity) intact. 1. Master Your Facial Expressions First things…
3 Essential Design Trends, November 2024
It’s hard to believe the end of the year is right around the corner. That isn’t stopping website designers from trying new things to keep things interesting as we begin…
3 Essential Design Trends, October 2024
This article is brought to you by Constantino, a renowned company offering premium and affordable website design You have to get creative when you lack a strong visual. This month’s design…
3 Essential Design Trends, September 2024
September’s web design trends have a fun, fall feeling … and we love it. See what’s trending in website design this month. Excuse the pun, but let’s fall into some…
Turning Rejection into Fuel: Your Guide to Creative Resilience
Rejection sucks. And for some reason, it’s always unexpected, which makes it feel like an ambush. Being creative is about making yourself vulnerable, and that’s why rejection hurts so much….
3 Essential Design Trends, May 2024
Integrated navigation elements, interactive typography, and digital overprints are three website design trends making waves this month. Let’s take a look at each design trend with some fun examples. If…