In the past few years, infographics have evolved from static pictures to rich interactive experiences with animations and videos tailored to unique content. It is no longer limited to pre-prepared, universal templates. And today's compilation contains the best infographics that showcase what an interesting and informative experience looks like.
Most of the infographics in this list have been chosen to show various ways, with which designers approach data visualization. However, there are also several hybrids here, illustrating the blurring of boundaries between infographics and rich multimedia experiences while creating engaging content and compelling stories on landing pages. Deviating from traditional forms means we are entering more complex media territory, and it is these kinds of experiments with technology and storytelling that will be critical to shaping the future. graphic design.
1. Wind map
The Wind Map is a breathtaking design that shows wind direction and speed over the United States. This design has an artistic rather than a utilitarian purpose, which is great: it's very nice to just sit and watch how thin, thin threads wind around the map. A simple yet well thought out example of how an infographic showing the paths of shapes can benefit from animation and moving images.
2. In flight
In 2014, The Guardian launched the In Flight infographic showing real-time commercial flight data (seems not to be updated right now, which is a pity), as well as a lesson on aviation history. The hushed conversations between the air crews at the beginning of the interactive show create a special atmosphere. It looks like infographics are slowly turning into a cinematic experience these days. At least "In Flight" points in that direction...
3. Dial the Moon
Not much happens in the Dial A Moon infographic, but it serves its purpose pretty well. In 2015, thanks to NASA, the moon phases infographic was updated every hour, and you could not go to Google in search of this mysterious information. Now you can view the pictures by manually entering the month, day and time.
4. Day with Pluto
Nature magazine publishes many interesting infographics for its science-minded audience. Among them was one about the famous flyby of a spacecraft near Pluto (24 Hours Of Pluto). The infographic included many text information, but the visuals provided an easy understanding of the most interesting, from the structure of a dwarf planet to the formation of its moons. Now the text part is available on the Internet, as well as two animated videos from the infographic.
5. How American houses have changed
Take a journey through the great American dream, reflected through the evolution of house styles. This well-illustrated infographic lets you get behind the wheel of a car (also changing as you scroll to keep up with the era) and make your way from the 1900s to the 2000s, passing buildings popular for decades. Along the way, you will meet many useful materials(including the socio-political conditions of the time, as well as trends in fashion), and it all ends with a question that encourages you to imagine the future of the American home. The Decades Of American Homes infographic is a great example of horizontal scrolling, and it fits right in here.
6. The evolution of marketing analytics
In its Evolution of Insight infographic, intelligent user research company Vision Critical tracks the evolution of the marketing technology market around the world from the 1890s to the present day. It functions similarly to the How American Homes Have Changed infographic, and thus allows you to compare the effectiveness of using an interactive timeline for two very different stories. The Decades Of American Homes infographic has the advantage that viewing homes as you drive is much more intuitive than traveling through the great American analytics. Good infographics are created around content, not around it.
7. Rights of the LGBT community around the world
The Guardian takes another spot on our list with this elegant infographic explaining the legal situation for LGBT rights on a range of issues (marriage, workplace discrimination, hate crimes, etc.) in every country in the world. Moving in a semicircle provides a quick and easy way to compare statistics between different countries, and the infographic composition maintains its global status in the foreground in the center. There is also a powerful call to action that aims to bridge the gap between mere awareness and activism.
8. Inequality is fixable
Another wonderful example of interactive infographics, Inequality Is Fixable, invites the audience to dive into the issue in a deeply personal way. The viewer is guaranteed not to lose interest in the material telling him or her how much his/her boss is underpaying and why. By making the user part of the story, the developers fuel curiosity and guide the user through all the necessary steps right up to the Call-To-Action at the end.
“We let it happen—how can we fix it now?”
9. Draw Yourself: How Household Income Predicts Your Child's Chances of Going to College
Many of the infographics on this list use animation and interactivity to provide a rich experience. Visually, this infographic from the New York Times (You Draw It: How Family Income Predicts Children’s College Chances) follows the classic chart format, but it also uses an understanding of user behavior to expand the scope of infographic design, such as a lookahead and interactive visualization. By asking readers to draw their own curve, they introduce an element of self-interest and thus give people really valuable information.
Not the worst result! The vertical axis is the percentage of kids going to college. The horizontal axis is the percentile of parental income
10 How Americans Die
With the exception of the title image, this example uses mostly good old-fashioned charts to render content. But this is not boring at all, since users can independently move through the data by moving the cursor along the graphs. This makes it much easier to compare, for example, the number of suicide-related deaths in the 70s compared to today (hint: it's on the rise now), a static chart wouldn't do it so neatly.
11.
Ever since Snowfall debuted to worldwide attention and praise, The New York Times has maintained its reputation as cutting-edge multimedia journalism. The publication team uses a combination of infographic design and in-depth storytelling to create an impressively interesting experience. They have more striking examples, but The Russia Left Behind is a work that has caused a certain resonance. The infographic functions like an interactive trip through Russia (you navigate your way on a map).
12. Bond cars
If you ever want to get to know the history of James Bond by looking at his cars, then thank the British car dealer Evans Halshaw - he gave you such a chance. Its interactive Bond Cars infographic lets you explore the make and design of each of the Bond cars, plus a few extras. interesting facts. Using the ubiquitous slider tactic, you can also "reveal" the car in all its metallic glory (by default, only a single color is given). So the authors creatively solved the problem of having to include photos that do not quite fit the aesthetics of infographics.
13. Movement colors
The Colors Of Motion is an infographic series that analyzes films based on their color palette alone, derived from the combination of all frames. If you've ever wondered, now you have the answer. Can't find the title in the database? Just send a message to the developers - they accept requests.
14. Royal tomb in Peru
National Geographic has a fairly impressive collection of what they call "interactive graphics" (most of which are accompanied by detailed text descriptions, as in the case of, for example, Trajan's Column), but we chose this relatively simple example to highlight the application of which methods are really effective in interactive infographics. "The Royal Tomb in Peru" (Peru's Royal Wari Tomb) reveals the features of the burial of a noblewoman of those times. The focus shifts from the wrapping of the mummy to its decorations and position. By dividing information into smaller chunks and allowing the user to move between them, interactive graphics avoid the most insidious pitfalls of data overload and visual effects. What's more, each subsequent interaction expands the experience, making it much more rewarding than if everything were presented at once. Our brain has a mechanism that rejects inhibitory stimuli, and given type interaction becomes a great solution for the user, making it easy to absorb information.
15. What is the "Scottish referendum"? Explanation for non-British
The Guardian, like the New York Times, relies on multimedia journalism, and their video does a great job with one of the main functions of infographics: to give cumbersome information an acceptable form. For many of us outside the UK, the referendum is a very confusing topic. Fortunately, this video (Scottish Referendum Explained For Non-Brits) will help you quickly learn about its important aspects without requiring a deep dive into the story.
16. Public health
The task before The Atlantic was to develop the concept of improving the health of society. It commissioned Truth Labs to write a 3-part series on Population Health as a digital narrative. The main goal of the performer was to preserve the natural scrolling of the document and the user's usual reading conditions, while creating an experience that differs from the visual perspective. To bring their vision to life, they borrowed tools and strategies from cinema, but also relied on a set of design principles to support readability as a key rule.
17. Joho's grains
Austrian coffee producer Joho's created an impressive multimedia experience Joho's Bean to tell the story of the origin of coffee beans. the sound of birds chirping, the sound of roasted coffee beans packed in bags, and the noise of busy streets and traffic in the city.
Joho's takes you on a journey explaining the origin of their coffee beans
18. Primordial road
The Wild Path is an interactive journey story experience created with Canvas. The main element is the map, which animates the path on the map as the page scrolls. The project may not work in all browsers. It does, however, come with an accompanying article explaining all the behind-the-scenes infographic technology.
19.
The Guardian's (Live Election Results) coverage of the 2016 U.S. presidential election brought a fun element to the serious business of interest and polling stations. An interactive infographic tracked votes in four states. By default, the graph showed results for the entire country, and if the user hovered over any area on the map, it showed which numbers the candidates scored there. The presidential candidates were presented as funny pixelated avatars. As the infographics were updated in live time, the little men tinted the states in which they won. From time to time, a quotation in a bubble appeared next to the candidate.
Reflection of election results in real time
Chip virtual reality that to others you will look like an idiot
Google's Cardboard Design Lab is a good "textbook" for beginner VR designers
Infographics - like a rpg game
The problem with Unity is that it's not so easy to do a good thing on the web.
Virtual reality is like headphones for your eyes
Virtual reality requires a safe environment, you cannot go into it on the go. It limits the possibilities of VR
Closed the session in the morning Archie Tse from The New York Times with the provocative theme "Why the NYT is doing less interactive work."
The work of NYT is based on three rules of visual storytelling:
- If the reader needs to click rather than scroll, then something out of the ordinary must happen.
- Assume that tooltips and any other hover effects will never be seen by anyone. If the content is important, make it so that the reader immediately sees it.
- If you want to make something interactive, remember that it will be expensive to make it work on all platforms.
You will have to redraw your graphics 2 or 3 times to make it work on both desktop and mobile
How these rules changed the NYT's approach:
- Most visualizations are now static
- More texts
- If you need movement in the picture, it appears during the scroll
(Point four says they still do interactive work. But now the occasion has to be VERY meaningful.)
We did "multi-steps". Users stop at step 3. Readers just want to scroll, not click
Archie Tse: Scrolling Vs. clicking
For 18 weeks, Andy Kriebel has been posting an infographic and the data it's based on on VizWiz every Sunday night. The task is to allocate about an hour of time during Monday, quickly analyze the visualization and make your own version.
Below we publish the results of last week - Slavery in the XXI century.
#MakeoverMonday by Andy Kriebel. Detailed description and interactive - on Andy's blog:
#MakeoverMonday by Andy Cotgreave. Detailed description and interactive - in Andy's blog:
I also found out that 51% of people in the world are younger than me, and 63% in Russia are older, and that my chances of dying right now are not that great. The numbers suddenly ceased to be "statistics" and touched me to the core.
Data visualization - uses big sets data with less manual design work; based on algorithms. For example, the interactive work of the New York Times.
visual art - unidirectional coding. Beautiful but hard to decipher visualizations like Kunal Anand's computational art.
What is the problem?
As a result, many works attract only sophisticated users, but do not allow uninitiated readers to delve into the essence of the issue, thereby harming the purpose of visualization - to inform the public. That is why it is so important to recognize and understand the problem of visual literacy in the context of visualization.
A New "Visual Grammar" of Journalism
Here are three works that experiment with ways of presenting interactive journalism. They look impressive, but their interpretation can be a difficult task for many.
Gay rights in the US, state by state
The number of data sources and data processing tools available today is in itself a clear indication that never before have so many people tried to get comfortable in the world of data visualization. And when there are so many materials available for study, there is only one question "Where to begin?" can scare every newbie. So what are the best libraries and what do the pros recommend? This will be discussed in this article.
Talking about data visualization and not mentioning it is like talking about the history of creation personal computers and never say a word about Steve Jobs. D3 (from the English. Data Driven Documents) is, without exaggeration, the most important and dominant in the market JavaScript library open source code, which is commonly used to create SVG charts. SVG (from the English. Scalable Vector Graphics) is, in turn, a format vector image, which is supported by web browsers but little used in the past.
The D3 library owes much of its popularity to the sudden interest in SVG on the part of web designers, which is largely due to how vector graphics look on screens with high resolution (in particular, on Retina displays used in Apple devices), which are becoming more common.
“Let’s be honest, if the task is to visualize data based on SVG, then all the other libraries were not even close to solve it,” says Moritz Stefaner, an independent data visualization expert and owner of the company Truth & Beauty. “There are also quite a few interesting projects based on D3, such as NVD3, which provides standard graphics components - ready to use, but customizable; or, say, Crossfilter is simply an outstanding data filtering tool.”
Scott Murray, programmer-designer and book author Interactive Data Visualization for the Web, agrees with the previous opinion: “D3 has an extraordinary power, which lies in the fact that it uses everything that browsers have to offer. Although this has a downside: if the browser does not support something, for example, 3D images based on WebGL (from the English Web Graphics Library), then D3 will not support it either.
And although this library is truly universal, it is still not ideal solution for any task. "The main drawback of the D3 library, so to speak, is that it does not prescribe or even suggest any particular approach to visualization," adds Scott Murray. "So it's really a tool for loading data into the browser and then generating DOM components based on that data."
While D3 is a great tool for custom images, if you want to create a standard graph without much visual work, then a tool like Vega. Being a framework developed on top of D3, Vega provides an alternative for displaying graphical components. Using Vega, you can visualize data in JSON format The European Journalism Center and the Data Driven Journalism Project. The exact date of the course is not yet known, but you can register now.
In five days, course participants will be able to learn what data journalism is, how it works, and what key skills should be mastered in order to become a specialist in this field. Figure out where to look for data to support your stories and how to find new insights from existing data. Learn the art of turning boring data into a compelling story, infographic, or even interactive visualization. Get acquainted with the basic principles of graphic design that a journalist needs to know.
The course instructors are five of the world's leading experts in data journalism and visualization.
The future of data visualization is interactive.
But how do you create a truly stunning interactive infographic?
Infographics are everywhere, and more and more often they are becoming interactive.
In today's article, we will share with you the secrets of creating interactive infographics, as well as links to useful resources.
1. Understand psychology
Before making an infographic interactive, it's important to understand why you want to make it that way.
As detailed in this infographic, people are better at absorbing visual information. We are much more likely to read, understand, and remember a presentation if it has engaging visuals. is an effective learning tool, but it can get even better.
Kinetic learning is a great alternative as people learn better through physical actions.
That's why adding interactivity to the perspective realm of your visualization will help you create even more memorable and effective infographics.
This combination of visual and kinetic approach makes animated infographics the content of the future. Of course, for some themes it is better not to use interactive elements, but in most cases they will only improve the content.
Motion adds meaning to information, allows the user to control the experience, and engages the imagination in ways that static infographics can't.
2. Add scrolling effects
You've probably noticed the massive shift in the online world from text-based content to visual content.
There is no denying the power of visuals on the Internet and in our daily lives. YouTube and Instagram are dominated by visual content; YouTube is the 3rd most visited site on the web, and Instagram has over 80 million photos uploaded every day.
Blog posts and articles are 80% more "consumable" if they have color images, headings or thumbnails, and people will spend no more than 15 seconds on a site if it doesn't grab their attention from the first seconds.
Infographics are a favorite among audiences and merchants, and people are 800% more interested in them today than they were in 2012.
On top of that, content is being created at an alarming rate - 60% of marketers create at least a small portion of new content every day! You can find out more in the review article.
As more and more people start creating content, something is becoming clear: in order to be seen, you need to stand out.
Naturally, content marketers are already thinking about the future of visual content, looking at what they can do now, what they can implement, and what new technologies are on the horizon. This forward thinking is what can make or break all your content marketing efforts; you must adapt or you will drown.
With visual content like infographics, marketers have a unique opportunity to see the future as it approaches. Companies, graphic designers, and marketers are all starting to use infographics to update them to make them even more appealing to the audience. Even if you're already "just posting" infographics regularly, it's never too early to learn about trends that are just starting to take off, just as it's never too early to learn how to incorporate them into your content marketing strategies.
If you want to get a glimpse into the future, and maybe even learn a few tricks before everyone else, now is the time!
Here are three types of infographics that will be the most common in the (near) future.
If you're looking for a cool infographic tool, I recommend Visme. For starters, they offer a free account and great convenience features for non-designers. You can get a free account now.
1. Interactive infographic
While we see the beauty of interactive websites and easy-to-use games, interactive infographics are still quite new in their field. Like infographics, they obviously contain some information, and they are usually dynamic. But using interactive elements gives users the ability to connect with information and create their own.
Whatever your business, product, service, or message, you can create interactive infographics that allow people to rate themselves (e.g. "calculate your BMI here"). Users can also click on relevant information, which will take them to a more deeply targeted resource, or back to a landing page, thereby generating traffic. This is a very adaptable and fun way to engage your audience.
Many marketers have already adapted to this kind of infographic and it transfers quickly. But at the same time, many, nevertheless, take as a basis simple infographic:
….just imagine what else you can do with interactive infographics.
You can try:
- Using scrolling techniques that make images or shapes stand out from the background
- Building "pop-ups" that expand text areas
- Pop up images or statistics when you click on them
- Turning your infographics into multiple pages that users can view
For more detailed example interactive infographic, look at this one:
To make infographics highly interactive (with scrolling, popups, etc.) you need to learn a little about HTML5 or CSS, or hire someone else to figure it out for you.
Despite the extra effort, you will be rewarded with a piece of content that is unique, engaging, and effective.
Why should you try to implement infographics in the near future?
- It inspires your audience to engage with and share your content
- It generates traffic (via links)
- This proves to your audience that you are innovative, resourceful, and committed to delivering timely and interesting content.
- There are levels of interactive infographics that make its development manageable.
2. Embedded video and GIF
This is a different type of infographic that we see more and more often today. Infographics that offer short videos or even GIFs (Graphic Data Interchange Format) are a great way to grab attention and make your infographic stand out from the crowd. While this limits platforms, you can share your infographics in real time.
Many simple infographic tools, such as Easel.ly, offer an "Embedded YouTube Video" option, or you can add a video to an infographic you create in Photoshop using a video layer. You can even add a video to a Powerpoint slide, which you can also turn into an infographic.
What's more, you can find millions of GIFs on the web and paste them in the same way. The catch here is that you'll have to distribute your infographic as a URL to make sure it's properly embedded on your site. You may not distribute or save such infographics in .jpeg or PDF format. Undoubtedly, as it becomes more and more popular, other video and GIF insertion tools will appear to make the process even easier.
But if you want to use this type of infographic before everyone else, even their dogs, has learned how to do it, start now with the tools you find online.
If you want to take it to the next level, you can make a video from the infographic you already have. This is a great opportunity to be seen on YouTube, Instagram, and even video platforms like Vimeo, Snapchat, and more. The video below is a great example of how to turn an infographic into a video.
Why embed a video or GIF in an infographic?
- This gives you the element of surprise - people don't expect the picture to move!
- It's very fun and original, which increases the chance that people will interact and share your infographic.
- it good way show everyone the uniqueness of your brand
3. Animated infographic
Animated infographic has great amount visual models and requires a lot of attention. When a user views a page, they usually don't expect anything to move, so it's a good idea to learn all of these techniques before everyone else does.
Because many animated infographics are quite complex, and may require some sort of graphic design, coding, and/or software knowledge, they are highly valued.
Here's an example of what I'm talking about:
If you want to learn more about how to create animated infographics, check out this infographic from Tabletop Whale. You can also find various services to help you create infographics of this kind. In any case, this is one of the most complex processes in the evolution of infographics.
Why should you spend your time, energy and/or money creating animated infographics?
- It will actually make you stand out from the crowd because not everyone has access to this kind of software or content
- In a couple of years this will be commonplace - you will be one of the first to do it!
- Animation will make the information inside the infographic more memorable.
- It will inspire your users to work with you
None of this is science fiction.
It may sound too technical and seem like something beyond your capabilities now, but it is likely that these types of infographics will become very commonplace in 2-3 years. We can already see a major breakthrough in animated infographics and gif infographics, especially as gifs continue to grow in popularity. Infographics are becoming one of the most consumed and most frequently created types of content on the Internet. Why? Yes, because the brain needs only 250 milliseconds to accept and process the meaning of the symbol.
If the average person spends about 15 seconds on a site and then gets bored, then you naturally want to pull out anything on the screen that can delay them - or at least get a message in 15 seconds or less. Some studies have even proven that people can focus on anything for no more than 8 seconds, and this figure is decreasing every year.
This is the cause and perhaps the by-product of our constant need for information. We live in the information age and all information is available to us. But it also means that the more people try to share messages and answer every possible question, the more content being produced becomes background noise.
If the presence of infographics today is an indicator, then soon it will be everywhere. This means new changes in your work. No marketing campaign in history has succeeded by doing the same thing all the time.
The idea here is to see the infographic as something more than a .jpeg image. Infographics can be adapted to different environments and used on a huge variety of platforms. Entrepreneurs and marketers have already seen the potential in this. And you?