The Beauty of Infographic Style Web Design

Infographics have become more and more popular over the last few years – we have finally all realised that the human brain responds easier, quicker and better to descriptive images than to pages of text. This has encouraged the emergence of infographic style web sites where they would have previously been text-heavy.

If an association, charity or, in fact, any business, has a lot of information to impart, it is more effectively done through images – and moving images through animations or scrolling effects can capture the attention of visitors even more. The improvements in CSS and JavaScript animations have also helped to increase the popularity of these site designs. Here is a selection of such sites for your inspiration.

Dangers of Fracking

No such list could miss out this site that has been around for some years now, and was probably among the first of its kind. A single page with scrolling animations that follow trucks on their way to a fracking site. Every so often along the way, a box with a factual snippet appears. When the truck arrives at the site, you then follow a droplet of the chemical mixture down a pipe. Finally you are asked to support the Fracturing Responsibility and Awareness of Chemical Act. One of the first, and still one of the best infographic style website designs.

Dangers of Fracking

Akita: Movement of Data

This site starts off with a landing page that declares: “By the end of 2014 there will be more than 3 billion Internet users in the world. The data they send travels vast distances at high speeds and across complicated routes. Allow us to explain.” You have to then click on the ‘Start the Journey’ button, then you arrive at the infographic style site. This design uses scrolling on a path, with animations and scrolling effects. You are led through the journey of writing an email, pressing the ‘Send’ button and the route that email takes to arrive at its destination in (nomally) just a few seconds. ‘Throbbing’ blue dots indicate there is a text box available by hovering the cursor over them.

Akita: Movement of Data

Let’s Make History

This is both a promotional site for a big game that the Impact de Montreal soccer team played on 3rd March this year, as well as a history of the team’s successes since 2009. Beautiful hand-drawn graphics fill this infographic style site design. The result of the game was a 1-1 draw, putting Impact de Montreal through on their away goals by holding Pachuca to a 2-2 draw at their ground previously. This result made history as Impact de Montreal are the only team to win a two-legged series against a Mexican opponent in the Scotiabank Champions League.

Let's Make History

All That Water

To give it it’s full title: Look what we could have done with All That Water. This is a fun site with a serious message about water waste. Some very surprising facts are contained in this site, sponsored by the online stock brokerage company iForex.

All That Water

Virtual Water

This site, produced by Angela Morelli, declares that we eat a ridiculous amount of water per day. Similar to the above site, it looks at the water used in food production as well as the water we use taking a bath/shower, flushing the toilet, etc., and encourages us to get involved by have one meat-free day per week and not wasting food. Nice scrolling animations help to make the large amounts of text more interesting. The site is presented almost entirely in black, white and blue.

Virtual Water

Let’s Talk Turkey

This site is presented as a slideshow that you click along manually. There are some quite disturbing facts about how turkeys make it to our dinner tables included in this infographic site.

Let's Talk Turkey

Where Does Coffee Come From?

This site with nice scrolling effects is presented by BizBrain.org, and tells the story of coffee production from seed to cup. An interesting infographic, and quite unusually, without a moral or cause, and not asking viewers to get involved – really just for the fun of it!

Where Does Coffee Come From?

Food is for Eating

This is another infographic site that points out how much food we waste, and how much water is required to produce that waste for us! It finally asks us to be more selective about the food we buy and to reduce waste.

Food is for Eating

Akita: Visual History of Computing

Another infographic style site produced by Akita, this one looks at the history of computing in the last 70 years. Their intro states: “Technological advancements over the last century have meant many of us now own multiple computers – desktops and laptops, mobile phones, tablets. The modern personal computer as we know it is only a recent invention. Scroll down to how this technology has evolved over the past 70 years.”

Akita: Visual History of Computing

Worldcup Matchballs

This site traces the history of the soccer balls used in World Cup tournaments from 1930 to 2014. It doesn’t include every tournament as it is only recently that the balls have been designed specifically for each host venue. Each year featured also gives the host country, the winners and the player (or one of the players) who won the Golden Boot for most goals scored throughout the tournament.

Worldcup Matchballs

Well Done Team GB

This is a simple site in comparison with some of the others in this feature. Hand-drawn graphics and some comical illustrations celebrate the sporting achievements of Team GB in the 2012 London Olympics.

Well Done Team GB

The Bright Future of Car Sharing

This site is quite self explanatory by the title – it looks at the advantages of car sharing and how certain countries are taking to the idea. Part of their intro states: “…Often considered the gateway to other forms of Collaborative Consumption, Car Sharing is becoming increasingly popular with its promise of personal convenience and social improvement….”

The Bright Future of Car Sharing

Interior Design: An Interactive History

This site shows the history of interior design in Britain decade by decade, starting with the 50s and ending with the 2010s. The small black circles with a plus sign in the center indicate there is a pop up text box when you click on it for further information about the aspects of the design element. This site was produced by Harvey Water Softeners.

Interior Design: An Interactive History

Under The Weather

This site shows the chilling effect of rising temperatures in Europe. With lots of interactive elements along the way, slide this, click on that, etc, it will hold the attention of most visitors. The facts are taken from the WHO and WMO’s report ‘Atlas of Health & Climate’ which highlights four main areas of emerging environmental challenges.

Under The Weather

Seize Your Power

This site, produced by the WWF, has some similarities to the Dangers of Fracking, it terms of the message it is conveying. It is promoting the use of renewable fuels. At the end of the infographic that takes you down through the layers of Earth, you are asked to ‘Take Control’ by clicking on a button. You are then taken to ‘The Control Room’ where you turn a lever and change the illustration from using fossil fuels to renewables. Then you are invited to click another button, when you will be taken to another WWF site that has much more text on the site, with even more reading material offered as pdf downloads. There is also a large, orange ‘Donate’ tab that follows as you scroll down the page.

Seize Your Power

Make Your Money Matter

This is another site that has been around a long time. It has some outstanding scrolling effects and great illustrations. It is the work of a group of credit union companies, promoting the use of putting your money into a credit union rather than a bank.

Make Your Money Matter

Anesvad: Di No A La Trata

This is the story of a young Peruvian girl who gets drawn into prostitution, and the consequences to her life. The charity Anesvad is fighting such issues.

Anesvad: Di No A La Trata

Drug Bless America

This is an infographic site relating the effect of drugs on the country. Including such information as the cost of keeping prisoners locked up, the money spent on the war on drugs and the returns, the route cocaine takes into the US, and many more facts.

Drug Bless America

5 Easy Ways to Improve Typography in Code

This site was conceived, coded and designed by Nicolas Desle, and it is based on Antonio Carusone’s ‘Simple ways to Improve Typography’. Each page you scroll down to has a different method and some example coding. Another simple infographic style website, but presented in an easy-to-learn way.

5 Easy Ways to Improve Typography in Code

Conclusion

Hopefully, if you are into vector art in web design, these featured sites will have given you some inspiration for your upcoming projects, or some ideas for new projects.

Have you come across any infographic-style websites that you think should have made it into this list? Please share your links and opinions with us in the comments section below.

Advertisement