Infographics seem to be a real trend today, with new ones popping up daily on all sorts of subjects. From mortgages to ice cream, estimating software to infographics about infographics, there is very little now that hasn't been 'visualised' in some form. Many people don't realise that the term information graphic, or 'infographic' was first coined over 100 years ago, with the Coxcomb chart by Florence Nightingale in 1857 being one of earliest recognised examples. They have existed in many forms since then, but only in the past few years have infographics developed into the art form we know today.
However, they suit the information heavy world we live in as they give an easily understandable visual snapshot of something that may otherwise be plain text, and can help to widen the audience of a subject. Many of the infographics we see have been created for the purpose of marketing, branding or SEO, and the explosion of SEO services in the past few years has driven the huge range you see today. They have become especially important since the latest Google algorithm update, nicknamed Panda. The emphasis of SEO has swung towards quality links, as well as links from social media accounts (likes, shares, tweets, diggs etc), and infographics fulfil both of these criteria. They have therefore become much more popular in the past year or so for linkbuilding purposes.
But do you have to be a graphic designer to design infographics? In the past, graphic design was the preserve of the professional, but with the amount of online tools available today anyone can have a go. There are a whole arsenal of different programs online that will help you with anything from layouts to data, and all of these can be utilised by a layman with no previous design experience.
Best Practice Process
But before you look at any online tools, you should have an idea of the best practice process for any kind of design, be it graphic, product or anything else:
Research
Before you begin anything, you need to decide what your subject is going to be and do some reading. There is nothing worse than an infographic that presents stale, old information or worse, nothing at all!
Brainstorm
Once you have some hard data to work from, you need to begin to consider the design. Infographics often work best when the graphics reflect the subject of the data, so try and let the data inform and drive the design. In this part of the design process as many avenues as possible need to be explored.
Brainstorm / Form Concepts
Once you have outlined your ideas, try and work them together into several more coherent concepts. This is best done with at least one other person to act as a sounding board for your ideas, and to add another perspective.
Refine Down To 1 Concept
Continue the refining process through sketching and iterations, and gain feedback from as many people as possible. You should begin to see the finished product coming into shape.
Finalise
Now you have your final concept you can go about putting the finishing touches in, as well as any last minute refining that needs to be done. With infographics this usually means adding highlights/textures to really make the graphics pop.
Best Online Resources For Infographic Design
So now you know the rough process you can get the sketchbook out and start thinking about your first project. And to help, below is a list of some of the best online resources for creating whole infographics, or smaller parts that you can combine to make a larger overall graphic:
- Charts.hohli.com
Charts.hohli.com - A very simple and easy to use graph and chart generator, Hohli is perfect for making up parts of a larger infographic. A good amount of options and a great interface mean this is the place to start on your infographic journey.
- Visual.ly
Visual.ly - This recently launched site is a massive infographic resource. Firstly it acts as a search engine for infographics on the web, however the selection is still slightly limited as they have to be submitted and approved (but with time this will improve). Secondly it allows designers exposure, as they can upload their own work for promotion and commenting. The ranking systems allows users to vote for the ones they like best. Thirdly it offers a DIY infographic service, which sadly is currently in beta testing. You can try out their 'Twitterize' twitter visualiser, which pits you against another username in infographic battle, but other services are not currently live. All in all though a pretty darn good place for infographic lovers.
- Creately.com
Excellent graphing tool with lots of different types and display options. A great start if you're looking for some simple data display options. Creately.com/diagram-examples for examples.
- Daytum.com
Daytum.com - collect personal data over time and display in a variety of different formats. For example www.daytum.com/boilermaker, displays of alcoholic drinks consumed. Nice clean designs.
- Tableau Software
TableauSoftware.com - make use of publicly uploaded data to create infographics. Done either by you with raw data or with the help of their visualisation engine. Tableausoftware.com/public/gallery for examples. Wide range of options and styles.
- TouchGraph
TouchGraph.com - simple graphing tool for showing relationships. Works Facebook and Amazon to map your contacts, but also with any keyword and can give an SEO based view of the sites linking to it. Touchgraph.com/seo for examples.
- Wordle
Wordle.net - clever tool that allows you to enter or upload a collection of words and then massages them to fit into a range of different shapes. Wordle.net/gallery for examples.
- IBM
Many Eyes - an experiment by IBM Research and Cognos to develop a data visualisation tool. It can be used to create infographics from your own data, or data sets available on the site, then can be uploaded to a public gallery for comment. Some interesting visualisation tools but a bit basic.
- Google Public Data
Google Public Data Explorer - an excellent and in depth tool that allows the visualisation of thousands of sets of public data of all kinds. Great not only as a source of information but as a visualisation tool as well.
- StatPlanet
Stat Planet - pretty much what it says on the tin, if you need world statistics, visualised or not, this is a great resource.
- ProgrammableWeb
API's - these are an invaluable source of data, and today are released by hundreds of sites. Whilst they are intended for developers to produce and test applications for that particular site, they can also be used as a goldmine of data. If you have a bit of programming know how, you can write scripts to access the API for all kinds of stats and info.
- Inkscape
Inkscape.org - a powerful open source vector graphics editing program, Inkscape is free to use. It has many of the capabilities of Illustrator and CorelDraw so is an excellent free tool that can be used. The interface is quite simple and basic, but for many this is all that is required.
Lastly...
Whilst all of these tools are useful in helping to design an infographic, they don't do the whole job for you. Unless you have some kind of experience with image editing software and a vague eye for design you're not going to be able to do this very well. Even then, if you want a final product like some of the more complex work referenced above, you may well have to look to a professional designer. This will cost you, but ultimately you need an infographic to look good and stand out, and that's what you'll get...
Flexislider is the new breed of slider which adapt itself with the width/size of the webpage. Cut it short, it's responsive. It's free to use in private and commerical projects. The plugin includes fade and slide animations, customizable options as well as all the navigation options you would expect in such a plugin — touch gestures inclusive!
The Pagination plugin creates touch-drag navigation between separate HTML pages. Simply add this plugin to your page and link together documents via ordinary HTML anchors. The linked pages will pre-fetch, and in browsers that support touch events, you'll be able to drag between the linked pages, while desktop users can navigate with mouse or keyboard. !
This is a prototype/proof of concept which gives a good idea of how to implement pull to refresh in javascript. It uses no javascript libraries so you could easily port it over to your favorite. I haven't tried this but it seems to be a rough implementation. Worth to mention as you will able to know how to build and perhaps enhance it to perfection.
iScroll is the ultimate scrolling plugin you need for your mobile website. It's a complete rewrite and now it’s smoother than ever and adds some new important features: pinch/zoom, pull down to refresh, snap to elements and more custom events for a higher level of hackability.
These neat little plugins works on mobile web browsers using device acceleromter and touch-cable devices. WKShake is quite a cool implemetation and trigger an event once "shake" is detected, it works just like the undo feature in iOS deveices.
VideoJS is a HTML5 video player that compatible with wide arrray of platforms. It degrades gracefully back to flash player if there is an unsupported source.
This little plugin detect swipe gesture. For example, you can make a 400x400px div with swipe gesture (left or right) and execute an event when the correct gesture is detected.
Touch-gallery brings the look and feel of native photo-viewing apps to your mobile browser. It is a lightbox gallery with touch support. For some reason, it works a little bit too slow
audio.js is a drop-in javascript library that allows HTML5's tag to be used anywhere. It uses native where available and an invisible flash player to emulate for other browsers. It provides a consistent html player UI to all browsers which can be styled used standard css.
Image gallery for mobile and touch devices. iPhone, iPad, Android, Blackberry 6 and Desktop all supported. PhotoSwipe is a self contained JavaScript library that can be easily integrated into your mobile websites. It is heavily optimized for mobile webkit browsers. However, if you need wider desktop browser support or you are using jQuery Mobile, PhotoSwipe comes packaged with a jQuery implementation as well.
Diapo slideshow is an open source project. You can suggest changes or improvements if you want. You can download it and use for free, you can also include it in your projects and sell it as part of a bigger work (in this case please consider a donation). Diapo slideshow requires jQuery 1.4+ and other jQuery plugins are necessary if you want to use some functionalities: jQuery Easing, jQuery HoverIntent, jQuery Mobile
