Infographics: making complex things simple

In short: an infographic makes processes, comparisons, quantities and relationships understandable at a glance. It pays off when the message has a shape, such as a sequence, a difference or a development. Good infographics show exactly one key message, choose the right form, label directly instead of using a legend, and work without colour and with a text alternative.

Infographics are a branch of graphic design, more on the bigger picture in the article professional graphic design. As of October 2026.

When a graphic says more than text

Not every piece of content gets better as a graphic. A good rule of thumb: if the message has a shape, it can be shown.

• Processes: from first conversation to installation, in five steps.
• Comparisons: three materials, three packages, before and after.
• Quantities and shares: how something is made up.
• Developments: how something has changed over time.
• Structure: which layers a product consists of, where which part sits.
• Places: service area, locations, directions.

For reasoning, trade-offs and exceptions, text remains better. And anyone who wants to look up exact values is often better served by a table than a chart.

Choosing the right form

• Bars for comparisons between categories. The eye compares lengths very reliably.
• Lines for developments over time.
• Pie or donut for shares of a whole, but only with few parts. From around five slices the differences become hard to read; bars are better then.
• Step sequence or flowchart for processes and decisions.
• Labelled illustration for structure and components, such as a cross-section of a film or a vehicle with marked areas.
• Map for anything location-related.

Five rules for clear infographics

1. One key message. What should the viewer understand in three seconds? That message belongs as the title above the graphic: not just "Revenue 2016 to 2026" but, for example, "Revenue has doubled since 2016".
2. Leave things out. Frames, shadows, 3D effects, gridlines and decoration distract. Whatever doesn't support the message goes.
3. Label directly. Labels belong next to the line or bar, not in a legend the eye has to jump back and forth to.
4. Use colour deliberately. One accent colour for what matters, grey for the rest. Ideally in your brand colours.
5. Be honest. Axes that don't start at zero, distorted areas or cherry-picked periods can create a false impression. A graphic that exaggerates costs trust.

Designing for accessibility

Infographics should be understood by everyone, including people with low vision or colour blindness. The Web Content Accessibility Guidelines (WCAG) offer three good reference points:

• Text alternative: non-text content on websites needs a text alternative that serves the same purpose (W3C: non-text content). For an infographic, that means the key message and the main values as text, not just "chart".
• Not just colour: colour must not be the only means of distinguishing information (W3C: use of color). Add labels, patterns or shapes, and the graphic works in black and white too.
• Contrast: parts of graphics needed to understand the content need a contrast of at least 3 to 1 against adjacent colours (W3C: non-text contrast). Light grey on white usually isn't enough.

Text in the graphic follows the same rules as any text, more in the article typography.

Where infographics help a business

• On the website: the course of an order, a material comparison, a service area.
• In quotes and presentations: what's included in the package, what the schedule looks like.
• In brochures and catalogues: as anchors between text pages. More in the article editorial design.
• On social media: a clear graphic with one message, in the right format for the channel.
• In physical spaces: on trade fair stands, display boards or in the showroom, where people read from a distance and in passing.

An example

The case is constructed, but typical. A business explains on its website in one long paragraph how an order proceeds: enquiry, site visit, quote, approval, production, installation, follow-up check. Hardly anyone reads it to the end, and the same questions keep coming on the phone. It is replaced by a horizontal step sequence with seven numbered stations, each with an icon and one line of text. On a phone the same sequence runs vertically. A short text below remains for details. The process is now clear at a glance.

Our view

The most common weakness of infographics isn't the design but the lack of a clear message. Before designing a graphic, we therefore ask: what should the viewer know afterwards? Then we choose the form, and only at the end colours and details. Infographics are part of our design services, more under services. To make graphics fit the rest of your presence, a consistent look helps, see corporate design & logo.

Checklist: your infographic

• Does the graphic have exactly one key message, and is it in the title?
• Does the form fit the data: bar, line, pie, process, map?
• Has everything superfluous been left out?
• Are the values labelled directly?
• Does the graphic work without colour?
• Is the contrast sufficient?
• Is there a text alternative with the key message on the website?
• Is the presentation honest, without distorted axes?

Frequently asked questions

When is an infographic better than text?

When it comes to processes, comparisons, quantities, developments over time or spatial relationships. For arguments, reasoning and nuance, text remains better. For exact values to look up, a table is often the better choice.

Which type of graphic suits which data?

Bars suit comparisons, lines suit developments over time, and a pie or donut chart suits shares of a whole if there are only a few. Processes are shown as a sequence of steps or a flowchart, places on a map, and structure or components as a labelled illustration.

How do I make an infographic accessible?

On websites, provide a text alternative that conveys the essence of the graphic. Don't use colour as the only distinguishing feature; add labels or patterns. And make sure there is enough contrast: WCAG requires at least 3 to 1 against adjacent colours for parts of graphics needed to understand the content.