How to cook an infographic that looks and tastes great!

Infographics aren’t new in the web. But since the launch of various data-driven websites such as Fivethirtyeight and the Vox, they are becoming more popular.

However, this time the viewers of infographics are not limited to desktops, but mobiles and tablets as well. In order to design an infographic for these channels, using HTML5 is the way to go. If you are making those graphics for a client or co-worker, it’s likely the way they will ask you to do so.

Here are the three ways that Dezine Geek practices for making an HTML5 infographic break through the clutter.

Before You Serve, See What Happens If You “FRIED” Your Infographics


Now “FRIED” isn’t some special tech process you need to do before designing infographics, this is basically an analysis that lets you consider why you’re making an infographic in the first place.

The word “FRIED” comes from the initials of five questions that allow you to think critically before you apply latest tricks to make an interactive infographics.  

Fresh – How will your infographics design stand out from the rest?

Relevant – Is your info engaging or tells a story?

Informative – Are your facts intriguing and accurate?

Entertaining – Will your infographic draw and excite the viewers

Different –Has your infographic been done before or is it new?

Designing an infographic not only demands you to be creative but also disciplined. The “FRIED” method right here will discipline your entire strategy for making one. Asking these questions before hand will also allow you to map out your objectives and make the message of your infographics resonate with your audience. Once you have FRIED your infographic, the design will draw the reader in and the data will be easy to digest.

Let It Shake, Make It Move


Interactive infographics are trending these days. You can make yours even more appealing by introducing motion to the web graphics. For this, the Adobe Edge Animate, an HTML5 animation tool might come in handy.  This tool allows you to extend your custom infographic designs with interactivity and movement. Furthermore, it also integrates other tools and provides a bridge between design and HTML that you create for the web.

To get you started here are some really great samples and templates on the showcase page. If you want to go a level deeper and add more elements such as click & touch draggable scrubbers, here is a tutorial with examples to help you more.

You can further weave in interactivity that will leverage the latest browser updates to CSS and HTML5 and make some pretty awesome effects. Check out this blog about CSS shapes which is in its last stages of specification. Consider the evolution of the web infographic as an example.

Data Here, Data There, Data Every Where


An infographic sinks if it is without powerful data sources and the tools to illustrate them. Whether it’s your own research or your client’s, data sources can vary. So invest some time so that you can get the hang of the topic as well as its sources.

We suggest you to head on to Quora that has a good list of publicly available datasets to give you some good raw data to play with.

You can also use some recommended infographic services such as Piktochart & that provide HTML 5 products for collecting and evaluating your data and building visual graphs.


The aforementioned points are the key to a successful and highly shareable infographics on any topic that you have picked. Once you have got your stats right, but you feel stuck in making illustrations for your infographic design- you can always find tremendous websites, offering free illustrations and even a pen & brush platform where you can make your own. All in all, you can always contact Dezine Geek in-case you need any help regarding creative illustrations, or a totally unique infographic design.

Need a unique “never-been-done-before” kinda infographic !we can help you!