How to Make Infographics That Don’t Look Terrible process.st/how-to-make-infographics/
If images are the snacks of the internet, and articles are the main course, then infographics are somewhere in between. A light brunch, if you will. Packed with sustenance, but digestible enough to get down in a short period of time. I’m not going to waste time talking about how important infographics are because that’s been done to death over the period of several years. Instead, I’m going to go through some common mistakes, basic design principles and processes that teach you how to make infographics that don’t look terrible.
First things first: Formulate your data Since infographics are supposed to be scannable, you’re going to need to first break down the data into chunks, which will make up the main sections of your infographic. An important part of making a quality infographic is getting the content into place first. Design comes second to content. For a good example of how you can chunk down a big data set, check out the infographic made with Venngage for this SaaS pricing pages post. At the start of the article, I lay out the key points. At the end of the post, these key points are put into an infographic.
1/10
Action step: Extract the 5-7 key points from your data set or article, and bullet point them, like this: The average number of packages is 3.5 Only 50% highlight a package as the best option Just 69% of companies sell the benefits 81% organize prices low to high 38% list their most expensive package as ‘Contact us’ The most common call to action is ‘Buy Now’
Put the data in context with the introduction Data means nothing without context. Out of context data is the stuff of shady politicians and delibrate deception. Use the first section of your infographic to put the data in context and introduce what you’re about to talk about, just like you would with a blog post.
2/10
Action step: Describe where you got the data from. Introduce a data point that frames the rest of the infographic and shows your audience why it’s relevant.
Make a series of logical points, one by one Using illustrative icons and graphs to help visualize the data, now make the rest of your points, one by one. I’ll go deeper into the design aspects here later, but the important thing to do at this point is to sketch out the general structure. Use a notebook and a pencil, if you need to.
3/10
Action step: Organize your remaining key data into a series of logical points.
Time to apply your plan and make the infographic To make infographics, we use Venngage. It has a simple interface like Canva, but is able to make much more complex graphics. Go make a Venngage account if you’re not already signed up, then formulate your rough sketch into text and graphics. At Process Street, it’s easy to know which colors and typefaces to use because we have a solid brand style guide. If you’re not sure, there are a few things to keep in mind…
4/10
Don’t use typefaces that are too similar One key reasons design can look terrible is a poor choice of typefaces. As the old rule goes:
“When you start tweaking the fonts of your document, be sure to apply no more than three typefaces per design (or page). That’s not to say that you can’t use multiple styles within a font family (i.e. Neutra Bold for headlines and Neutra Thin for photo credits), just be mindful of not mixing too many typefaces and styles”
Here’s an example of what that exactly means:
Even though it’s not totally obvious that the 2nd picture’s fonts are different, it looks a bit off. Personally, it makes my eyes boggle a bit. For further reading, here’s an appropriate infographic on combining fonts.
Don’t choose colors at random As I said before about brand design guidelines, you won’t see companies that are trying to build a brand using colors randomly. I can’t say it better than Gregory Ciotti, writing about the pyschology of color at Help Scout. Here’s a couple of
5/10
images that help explain why you might pick particular colors to support your point.
And, obviously, some topics lend themselves well to particular colors. An infographic about the ocean might use blue as its primary color, whereas one about environmental chance might use green.
There are two main types of color palettes: one uses analogous colors (those next to each other on the color wheel). And the other uses those directly opposite each other.
6/10
Process Street uses a mixture — two analogous colors and one contrasting color.
Keep padding consistent around elements What I mean by padding is the amount of space that surrounds the text, icon, or section. Padding is an element web designers know well, and it’s easy to get right in CSS, but when it comes to infographics you need to use guidlines for assistance. Firstly, I’ll illustrate what I mean:
Even padding The spacing around the elements in the below image is relative and even, making it look clean and presentable.
Uneven padding The spacing in the elements in the below abomination is uneven, making it look awful.
7/10
It’s as simple as that! With Venngage, you can see if an element is lined up because its shows you a green line, like this:
State your points with text, illustrate with images Since infographics are a predominantly visual medium, you should use icons and charts to illustrate the points you make in the text. Here’s a prime example from Venngage:
8/10
As you can see, the designer has supported their text with a simple icon to make it easier to visualize.
Stay away from terrible stock images Refer to the below image for a full and detailed explanation.
Yeah, don’t do that.
Our tool of choice for making infographics: Venngage At Process Street, we use Venngage for creating infographics quickly. It’s a lightweight tool and set up perfectly for infographics, unlike Photoshop. The free plan is fine for hobbyists, but for teams and brands you’ll want the business plan, which means: You can save your brand colors as default color palettes You can store your brand icons and other graphical assets in their own folder You can store your brand’s selected typefaces as a default choice You can export infographics as PNGs You can control member access and permissions, which works well for managing a team of designers Venngage has put together an excellent intro video for new users to get a grip on how the platform works, so this is best explained by them: So, arm yourself with a Venngage account and march forth, creating nothing but excellent infographics for the rest of your days.
9/10
10/10