Select Page

Infographic layout

Layouts can mean the difference between someone having a pleasant reading experience and someone not bothering to read your infographic. A big reason for using an infographic is to make information more readable and accessible. If you don’t implement a good layout, you throw all this away and make something that is possibly worse to read than a block of text.

A common, and one of the most basic layouts is a stacked layout. This is primarily suitable for the tall, slim, web-based infographics I mentioned earlier. Sections are layered below one another, letting the viewer follow from top to bottom. This is good for many large graphics where the order of reading is important. This is not to say it can’t be used for unordered content.

The layout I chose for a recent infographic was the radial pattern. The main graphic in the centre with secondary graphics around the outside. When using this layout, it is helpful to give context to the secondary graphics using the primary, centre graphic. This layout is a good option for ‘A standard’ infographics.


Radial layout

The common pattern for scanning information on a page is left-to-right, descending the page. We can take advantage of this by arranging content in two staggered columns. This can be used on ‘A standard’ infographics but is better suited to tall graphics.

Staggered layout

English syntax is read from left to right, top to bottom. We can structure our graphics in a similar way. When doing this it is important to clearly separate your lines. If not, the reader is more likely to get to the end of a line and jump down rather than back to the start of the next line.

Layout with lines

Similar to a book layout, we can use a snakes and ladders style, where the reader reads to the left, then down and to the right, then down and to the left etc.

Snakes and ladders layout

Using these basic layouts, you can mix, match, and combine to your heart’s content. Even beyond these layouts, you can be as creative or as safe as you want to be. A tip if you’re finding your layout hard to follow: use a path line. Give the reader a line to follow. This not only ensures your content will be read in order, it also ensures none of your points will be missed.

Here is my first blocking draft for the infographic. It is anything but concrete and final, but it is a general guideline on how I think my graphic will play out. Each section or row will summarise each section of this blog. The first row is ‘When to use an infographic’, the second ‘Things you’ll need’, the third ‘Early decisions to make’, and the last two are ‘Basic design principles’ but I wanted to divide this section further into layout and styling principles, and content and display principles.  


blocking draft

If you enjoyed this blog or found it useful, keep and eye out for part 5 where I will cover some basic design principles to keep in mind when designing your infographic.

In the meantime, we have another blog on infographics by Kathryn Greenbrook – How To Make an Infographic. You can also read Part 1, Part 2 or Part 3 of this series if you haven’t already.

From hard data to fluid design – Scott.


Scott blogs about how design can make data consumable and therefore valuable

Want to read more? Try … Colour Blindness and UI Design or more from Scott

We run regular Agile courses with a business intelligence slant in both Wellington and Auckland, you can learn more about these here.

%d bloggers like this: