Creative & DesignContent Creator

How to make an infographic as a shareable web page

An infographic works when a reader gets one main point and three to five supporting facts within a few seconds. Settle the message, the order of the facts and the source for each number before you choose any visuals, because layout cannot repair a message that is still open. A good infographic reads from top to bottom without needing a caption to explain it.

Format notes

Build a scroll that reads without a poster

Lead with the finding

Put the main finding in the first heading and the first sentence under it. A reader who stops after one screen should still know what the graphic claims. Content Creator presents the graphic as a web page; it is not a design tool for arranging shapes and icons.

Write the figures out in words

The page is built from the description, notes, documents and images you give it. Put each figure, its unit, its period and its source in your notes. Do not count on a chart being drawn from a spreadsheet, and treat any chart you already made as one of your images.

Give each of the five images a fact to carry

Five image slots at most, filled with uploads or Unsplash picks. Pick the product, place or process that a fact is about. An icon or texture that carries no fact still uses one of the five slots.

Test the two colors on a phone

The branding step takes two colors. Use one for headings and key numbers and the other for accents, then read the page on a phone in bright light. Pale figures on a white background are the first to disappear.

Weak and strong wording

Turn a claim into a figure a reader can check

Weak: Lots of customers love the new service.

Strong: [Number] of [group] rated the new service 4 or 5 in [survey name], collected [month and year].

A count, a group, a source and a date can be checked. Vague praise cannot. Use the strong form only with a figure you can show.

Weak: Our process is faster than ever.

Strong: A request now reaches a first reply in [number] business days, down from [number] in [year], measured from [system or log].

A comparison needs a before and an after. If you have only one of the two figures, state that figure and nothing more.

Weak: Check out the chart below for the details.

Strong: The chart shows [number] of [item] by [category] for [period]. Source: [name], [date].

Readers who cannot see the image still need the number, so state the main figure in the text and let the chart add detail.

Quality checklist

Check the graphic before the link goes out

  • The main message is one sentence, and the first heading states it.
  • Every number has a unit, a period and a named source written next to it.
  • Each image shows the subject of a fact, and none is included only for decoration.
  • The page uses no more than five images, and each image's subject is also described in the text beside it.
  • The two brand colors pass a contrast check for body text and for the key figures.
  • The dates and figures match the source you cite, including the year the data was collected.
  • The reader knows the next step, with one call to action or one contact route.
  • Someone who did not write the page has read it on a phone and traced each figure to its source.
Share the finished page

Share the approved version, not the draft

Public link

Publish a public link when the facts are final and approved for outside readers. Check that every source is named and that no internal figure has crept into the text.

Team link

Use a team link for review before publication. Ask reviewers to trace each figure to its source and to flag any number they cannot trace.

WhatsApp share button

The page includes a WhatsApp share button for sending the link to a colleague or client. Send it after the figures are confirmed, because some people forward links before they read the caveats.

Mistakes to avoid

Four habits that make an infographic harder to trust

Treating the page as a graphic file

Attain OS Content Creator does not export the infographic as a PNG or PDF. Share the link, or download the generated HTML file. If a print or slide version is needed, make it in a design tool from the same facts and sources.

Decoration in place of evidence

Icons, stock photos and gradient bars that do not represent a fact use up the five image slots and make the page look busier without adding anything a reader can verify.

Percentages without a population

A figure such as 40 percent means little without the group it describes and the period it covers. Write the population and the period beside every percentage.

Twenty facts on one page

An infographic that tries to carry twenty facts becomes a report. Keep the three to five that support the main message, and name where the longer material lives for readers who want more.

Frequently asked questions

Can I download an infographic as a PNG or PDF?

No. Attain OS Content Creator does not export PNG or PDF files. You can share the public or team link, or download the generated HTML file. For a print or slide version, make that in a design tool using the same facts and sources.

Where can I find infographic examples?

This page does not include a gallery of infographics. Look at published infographics in your field for layout ideas, then write your own message and sources. Do not reuse another publisher's figures or artwork without permission.

Is there a free infographic template?

Nothing to download is offered here. The steps above give you the order a web-page infographic needs: message, facts, sources, images and next step. Write those in your notes, then generate the page.

Can I put a chart in the infographic?

The page is built from the text and up to five images you provide. Put the figures in your notes, and if you already have a chart, use it as one of your five images. Do not expect the page to draw a chart from raw data.

Browse by category

More visuals in Creative & Design

How to build it

  1. Follow the eight-step wizard: type, assets and description, images, branding, contact and call to action, Atty Suggestions, blueprint, and generate. Atty generates one HTML page in the background. Review it, then publish and share the page link or download the HTML file.

Attain OS BETA