Home / Articles / Website Creation / How To Make Beautiful Charts And Infographics For Your Sites?

How To Make Beautiful Charts And Infographics For Your Sites?

If the Internet is one thing, it is visual.

People love quick, easily accessible information and infographics provide just that type of data visualization. Even complex data is easier to understand when combines with a pie chart, graph or photograph.

According to an infographic by Top Marketing Schools, an infographic has the potential to reach about 15 million people.

Why Infographics?

Marketing compnay, Bell Pottinger, saw a 55% increase in business budgets for digital items like infographics.

In an infographic about infographics, Unbounce states that the number of people searching for infographics has seen an 800% increase in the last two years. With statistics like that, it's hard to deny that data visualizations in the form of infographics is a good content / marketing for websites and blogs.

Benefit #1- New Visitors

Adding infographics draws new site visitors in a couple of ways.

  • Web Searches: Internet users may be doing research on the topic your infographic is on. If you are the only site to have an infographic on why blueberries make you smarter, then you’ll get the traffic from anyone searching for an infographic on that topic. Those who are searching specifically for images may come across your infographic as well.
  • Social Media: The infographic from Top Marketing Schools indicating that a traditional post gets about 75 tweets, while an infographic gets almost 600. Since people are so much more likely to share your infographic on Twitter than a simple post, your potential to reach new visitors via social media is enormous.

Nielson/Norman Group estimates that the average page visit lasts under a minute. Unless you grab the reader’s interest, she will glance over your page and move on to the next site.

Site visitors are in the habit of scrolling for information and news. This is another reason why infographics work so well to grab the reader’s interest. A visual representation of an interesting fact is a faster way to present information than paragraphs of text. Readers can skim your infographic quickly, absorb the information needed and will stay a bit longer to check out what else you have to offer, or may bookmark your site for later use.

The technical challenge of serving info-rich infographics

However, another thing to keep in mind is that while infographics add value, heavy images that take a long time to load may serve to drive visitors away. Research by Pew Internet estimates that the average site visitor expects a page to load in under three seconds. The faster your site loads, the better your conversion rates will be.

It is quite the balancing act to make sure that your site offers a visually rich experience while still loading lightning fast. The best way to accomplish this is with fast servers and optimized images. You’ll notice in our web hosting reviews, we emphasize a lot on speed and do numerous speed tests when rating a web host.

Benefit #2- Retain Visitors

Nielson/Norman Group estimates that the average page visit lasts under a minute. Unless you grab the reader’s interest, she will glance over your page and move on to the next site.

Site visitors are in the habit of scrolling for information and news. This is another reason why infographics work so well to grab the reader’s interest. A visual representation of an interesting fact is a faster way to present information than paragraphs of text. Readers can skim your infographic quickly, absorb the information needed and will stay a bit longer to check out what else you have to offer, or may bookmark your site for later use.

However, another thing to keep in mind is that while infographics add value, heavy images that take a long time to load may serve to drive visitors away. Research by Pew Internet estimates that the average site visitor expects a page to load in under three seconds. The faster your site loads, the better your conversion rates will be.

It is quite the balancing act to make sure that your site offers a visually rich experience while still loading lightning fast. The best way to accomplish this is with fast web hosting servers and optimized images. You’ll notice that we emphasize a lot on speed in our hosting reviews – see A2 Hosting review for example or check out our other reviews to see which web host best meets your need for speed.

Benefit #3 – Add Authority

50% of our brain is involved in visual processing (source).

Most people are visual learners. NeoMam has compiled research from sources such as Google Trends, Nielson and Pearson that suggests 70 percent of sensory receptors are located in the eyes and people can take in and comprehend a visual scene in just under 1/10th of a second.

People tend to believe what they see because they comprehend it better. Doing research and backing it up in your infographic can add authority to your brand. Be sure to:

  • Offer solid statistics
  • Add well-respected resources at the bottom of the infographic
  • Add graphs and charts that show those statistics in a visual way

When you combine the visual senses with interactive features, such as the NeoMam infographic these statistics came from, you not only capture your reader’s interest but you engage it.

What do you notice more? Do you notice a plain graphic on the page or one that moves, flashes or perhaps starts a video?

 


 

What Makes A Good Infographic?

Moving forward, we will be looking into some of the best resources and tools for data visualization today. No matter you are a casual blogger who simply wants to create some beautiful infographics for branding purposes or a career graphic designer who need to dig deeper into this field; I am sure you will find this post useful.

Information Architecture

In general, a good piece of data visualisation consists of three main elements:

  1. Meaningful data,
  2. Proper information designs, and
  3. Beautiful graphics.

Bear in mind that although infographics and charts tend to attract attention from the blogsphere and social media users; they should do more than just brand promotion – Infographics and charts are suppose to deliver boring and messy data in a user-friendly manner in the first place.

Hence, before creating a graph or an infographic, you’ll need to 1) Organize, filter, and refine your data; 2) Decide on how to present your data (aka, data visualizations designs).

Data Mining

Enter OpenRefine – A powerful data mining tool that saves us from organizing our data row by row on Excel Worksheet. Formerly known as Google Refine (and Freebase Gridworks), this tool helps users to explore and clean up data, transforming the data from one format into another, and extending it with various web services.

In case you are working with some massive unordered data, OpenRefine is definitely must have in your toolkit. The tool is currently hosted on GitHub, you can visit this page for all the necessary info and helps. For further followup and latest news, You should also check out its newly launched website at http://openrefine.org/

Data Presentation

Once you are ready with your data, it's time to decide how you are going to present it to the viewers.

There are countless approaches in getting this done: Pie chart, diagram, line graph, histograms, heat map, flow chart, periodic table, and so on.  Each of these approaches fits perfectly for certain type of data (and stinks badly if misused).

How should you present your data, so that your statistic is beautiful, eye-catching, and easy to understand?

On this issue, Visual Literacy built an extremely handy periodic table on all the options you can use to visualize your data (view below).

Note that the periodic table displays a number of interesting examples when you roll over your mouse, so be sure that you view the actual table on the site.

Periodic Table On Data Visualization

In case you were looking for non-traditional approaches, then you should check out this awesome article on Smashing Magazine. The post is published some time ago but still, I find it very helpful.

 


 

Infographic and Charging Tools to Use

As soon as you are done with information architecture, it's time for some real production. Making a good-looking chart out of raw data is never an easy task, fortunately there are countless tools to get the job done.

Yes, countless number of tools for data visualization. There are comprehensive tools that generates interactive graphics out of complex data; there are also easy web applications that do nothing but generate simple 2-axis line graphs.

For practical reason, we are going to look into both sides and list out multiple graphic tools for both advance and casual users.

Advance Charting Tools

First, let's look at some of the advance stuffs.

1. ggPlot2 and R

R and ggplot2

R is a computer language and an environment for data manipulation, calculation and graphical display. ggplot2, on the other hand, is a plotting system for R that helps produce complex multi-layer graphics. The HeatMap above, for example, is built using ggplot2 and R.

If you are keen on learning R and ggplot2, LearnR is a great blog for further reading (though the blog has not been updated for some time).

2. jqPlot

jqPlot

jqPlot is a plotting and charting plugin for the jQuery Javascript framework. jqPlot produces beautiful line, bar and pie charts. The tool comes with some nice features such as generating interactive points that can be adjusted by users on web browsers. However, it's worth noting that this tool is not thoroughly tested and might not be supported by certain web browsers – namely, Chrome and IE below 7.

3. JP Graph

JP Graph

JP Graph is a PHP-driven charting tool that support various plot types. In case you are writing a PHP program that needs a graph creating library, this is something that you should look into. I wouldn't say JP Graph is an easy tool for starters but the tool (or, PHP library) does come very helpful when you need to generate graphs and charts from your web server. JP Graph is free for non commercial use and you will need a web server that supports PHP 4.3.x or above.

4. JS InfoVis Toolkit

JavaScript InfoVis Toolkit

JavaScript InfoVis Toolkit is a library developed by Nicolas Garcia Belmont. The library comes with a wide range of visualization choices and it's completely free to use.

 5. IBM Analytics (previously known as Many Eyes)

IBM Analytics is a free tool that enables a user to create visualizations from almost any kind of data set.

Hosted on IBM servers, Many Eyes does more than just data visualization – it allows users to upload their own data set as well as  generate new visualization model based on any data stored in the server.

6. Google Chart

Google Chart

Google Chart is free, powerful, flexible, and is supported by lots of other developer tools.

Charting on Google Chart is purely based on HTML5/SVG technology; the tool helps create charts in various formats with beautiful animation and interactive controls.

7. Axis

Axis

Axiis is an open source data visualization framework developed by Tom Gonzalez and Michael VanDaniker. The tool is specially designed for beginner and expert developers alike. Axiis provides both pre-built visualization components as well as abstract layout patterns and rendering classes that allow you to create your own unique visualizations.

Easy Infographic Tools for Beginners

Admittedly, most bloggers (myself included) do not need comprehensive charting tools above for their regular blogging operations. More often, all we need is an easy web application or a simple tool to get the job done quickly.

With that being said, here is the list of creation tools that require very little learning efforts and user friendly.

1. Visme

visme

Visme is a DIY platform that allows users to create professional presentations and infographics.

More than 350,000 individuals and organisations (including users from big companies like IBM and Disney) utilise the tool to communicate better through interactive graphics and presentations.

2.  Venngage

Venngage is an user-friendly visual tool that has been around since 2011. The tool offers an easy way to create infographic with a drag-and-drop editor, free-form canvas, and 1,000+ of examples and pre-built templates.

3. Easel.ly

Easel.ly

Easel.ly helps create and share visual data easily online. The web app comes in a simple interface with some preset templates and drag-and-drop features. Although Easel.ly is still currently in beta mode, but it already has more than 130,000 users-created visuals on its server.

4. Vizualize.me

VIsualize.me

Vizualize.me helps create beautiful infographics about individuals (yes, hence the name Vizualize Me). It's a fun tool to play around with and it creates beautiful resume or profile in just a few clicks. In case you are on LinkedIn, you should really try this out – the tool is able to link with your LinkedIn profile and generates stunning graphics based on your data.

5. Hohli

Hohli

Need a simple chart builder? Then Hohli is the place to visit. This web applications support various types of charts in twelve different sizes – all users need to go is to key in the data and design details.

6. Piktochart

Piktochart is a template-based infographic tools that help non designers to create beautiful graphics and charts.

The tool supports drag-and-drop features and it provides a wide selections in preset templates, icones, vectors, and images. If you are looking for an easy graphic tool and do not mind paying a small fees for the service, Piktochart is definitely one of your best choices.

 


 

Before You Get Started: Infographics Inspirations

So are you ready to create some of your own infographics? Wait. We still have a little more to go here.

Here are some of the most popular infographics and charts captured from the Internet.

I am pretty sure that you have seen some of them on social media networks in the past – which proves that pretty graphics with meaningful data sticks!

Also, there are reasons why infographics galleries are so heavy trafficked these days.

By referring on others' works, we get to learn what works well with the audiences.

  • What is the average size for a popular infographic?
  • What type of topic is most welcomed by the viewers?
  • Should you include as many data as you can into your charts?
  • How many bullet points should you cover in your infographics?
  • What makes this infographic popular?

Real life examples: Types of Infographic

These are the questions to ask when you are browsing around the samples.

Coffee Drinks Illustrated

Coffee Drinks Illustrated
Source: lokeshdhakar.com

Field Guide For Fan Boys 

PC World Fan Boys Field Guide
Source: PC World

The Best Beer In America 2008

The Best Beer In America
Source: Mikewithart.com

Periodic Tables Of Typefaces

Typefaces Table

Bailout Tracker

Bailout Tracker
Source: New York Times

The Evolution of the Telephone

Timeline Infographics
Source: Pow Wow Now

 

Check In Graph

graph infographic
Source: Four Square

Digging Deeper

I bumped into dozens of interesting blogs and websites related to our topic when I was doing my research for this post. Seriously, there are so much to read and learn and play with! I never knew there are so much data available freely on Gap Minder and Better World Flux; I have read a lot on informative sites/blogs like UX Booth (not entirely related to data visualization, but there are plenty of useful articles on how visualizations improve web user experience), Dynamic DiagramsFlowing Data; and I deeply admire all the stunning works displayed on Randy's Pinterest board and  Chart Porn.

If you are merely starting up on data visualization, I highly recommend you to visit the sites and blogs listed above.

If you have not leverage the power of data visualizations in your marketing campaign, now is the time to start.

Photo of author

Article by Jerry Low

Keep Reading