*

Designing powerful communication with interactive infographics

2012—ongoing
Interactive Infographics / Scrollytelling

Modern interactive information design has become a prime component of communication design, helping to make content more accessible, engaging, and memorable.

Since 2012 we have designed and implemented all kinds of interactive infographics for a global audience.

Digital infographics vary from static images and galleries, to inline SVGs and custom code, dashboards with customizable data-sets, up to complex scrollytelling websites. We will now explore different kinds of approaches with real examples of work done.

 

How to start?

There are incredible possibilities in the world of modern interactive information design. A solid UX research, the right questions and a technical assessment can help you find the right direction:

What is my primary target group? What do they need? And how is their online behaviour?

In which technical framework will my project be placed? What is the expected scaleability? Which resources are available? And what level of complexity can be reached?

 

1. Dashboards

A dashboard is commonly understood as a centralized location for multiple data visualizations on the same topic. This enables users to analyse the data personally and to filter and tweak the visualizations to one’s needs. A charting library connected to a centralized data source is used to provide this functionalities.

Common frameworks are tableau, highcharts, datawrapper and d3.

 

2. Illustrative infographics

Illustrations are the main elements to help convey information visually: they vary from icons to figures and objects to complex sceneries and 3D imagery. This approach is usually best to explain processes and/or visualise categories, hierarchies and relationships to an audience who is not interested in a direct analysis, but rather wants to be told a story.

 

3. Scrollytelling

Scrollytelling refers to longer text articles with multimedia content being triggered by scrolling. It is commonly used for longer and multi faceted stories with a strong narrative. They use the default scrolling behaviour of websites to animate successive blocks of mixed media content. It is important to research possibilities and examples from around the web so you can support your developer and designer as much as possible.

Common frameworks are:

 

In the gallery at the end of the article you can find examples to the above mentioned categories.

Infographic showing 6 kinds of infographics on a scale of implementation difficulty; in ascending order: static images, social media stories, svg graphic, dynamic infographics, explanatory videos

 

Crossmediality

Interactive infographic projects have one thing in common: they are based on the SVG format. This is great news for crossmediality, allowing us to quickly adapt the product for other digital channels or for print.

If you are interested in learning more about how to make these products, we provide consultations as well as private workshops. Or you can join our next »Infografik Digital« Workshop in collaboration with PAGE Academy and Sapera Studios.


Rights of projects

Projects marked with a [1] were developed while working for Sapera Studios and are their copyright.

Projects marked with a [2] were developed while working for Lucid. Studio and are their copyright.

 

Links to mentioned projects

donortracker.org [2]

genderclimatetracker.org [2]

PeaceWomen Scorecards [2]

WPS financing slider [2]

DFB Academy staircase [1]

Code Pen: staircase [1]

Schengen interactive map [2]

StrahlenschutzFokus: Radiologischer Notfall [1]

StrahlenschutzFokus: Radon [1]

StrahlenschutzFokus: BeVoMed [1]

StrahlenschutzFokus: 5G [1]

StrahlenschutzFokus: Rückblick 2021 [1]

Red Bull Hardline [1]

*

infographic facts

Information design did not emerge from the West. Japan made some incredible contributions in the 1900s which are mostly unknown.

Japanese contributions to data visualisation

Otto Neurath is considered by many a crucial figure in information design. He invented the Isotype method of pictorial statistics and made pictogrammes famous.

Mike Bostock is one of the key figures in modern digital data visualisation. His work for the New York Times until 2015 marked a before and after in digital storytelling. He is also one of the main developers of the D3.js JavaScript library.

Check out his inspiring work. 

Alberto madly fell in love with information graphics in 2001 while watching the Röyksopp video »Remind me«

See the video on youtube

The free and open source tool RawGraphs allows you to intuitively try different data visualisation types without prior knowledge. It is the go-to tool for many designers when starting out on an infographic project.

RawGraphs.io

UX research—aka understand what they want—plays a vital role in creating a successful interactive infographic. Try it out: the following infographics use the same datasets, which one do you like best?

Occupation matchmaker or who marries whom?

Pro tip! Having an actual calculator on your desk and learning the basic formulas for areas and volumes will speed up your work immensly.

One fun fact about SVG (Scalable Vector Graphics) format is that it is actually a markup language, similar to HTML. This means that SVG images can be created and edited using code!

ChatGPT

The first infographics can be considered cave paintings and tusk engravings from the stone age.

History of infographics

»People ignore design that ignores people.«
Frank Chimero

Make your work accessible!