Canva

With a whopping 800% increase in search traffic for the word “infographic” between 2010-2012, it is no surprise that infographics are a hot ticket item in 2015. Online applications like Piktochart, Easel.ly and Canva are capitalizing on this infographic trend and making sharing information easier than before.

A few weeks ago everyone was talking about THAT infamous “dress”. For anyone who was away from Earth recently and that missed the biggest controversy of 2015, don’t panic! We’re going to put you “in the know” by creating an explanatory infographic in Canva.

That Dress and the Raw Numbers

Before we can start creating an infographic of any type we need to gather our data. The following statistics come from the good people at Facebook Data Science.

According to Facebook:

  • 58% of Facebook users saw The Dress as white and gold
  • 42% of Facebook users saw The Dress as black and blue
  • Men were 6% more likely to see The Dress as black and blue
  • More mobile users saw The Dress as white and gold
  • Facebook users between the ages of 13-17 were more likely to declare The Dress as black and blue
  • Facebook users between 55-64 were more likely to declare The Dress as white and gold
  • By 12AM EST more users saw The Dress as black and blue as opposed to earlier in the day more than likely due to the dilemma being solved

Getting Started

For those who are not familiar with Canva, it is a free online web app that can be used to design all sorts of graphic design materials. From presentations to menus to social media headers, Canva makes designing a lot easier especially for non-designers.

Signing up for Canva really takes only a minute. You have the choice of either logging in via your Facebook page or creating a quick account.

Canva Login

Once you have registered and activated your account through the e-mail you were sent you will be taken to the main dashboard. Here you can see some of the design formats you can create.

canva2jpg

Because Canva as of right now doesn’t have a design template designated for creating infographics you’ll have to settle for the Blog Graphic template. Don’t worry though because this template is more than doable to create most infographics you need to make.

canva2-1jpg

Designing in Your Dashboard

canva3jpg

Unlike a lot of web apps, Canva doesn’t give you a pop-up walkthrough but everything is pretty self-explanatory. The dashboard, you will come to find out is very easy to navigate for all your designing needs. To the left you will find 5 tabs that offer various designing elements and customizations for you to work.

Search

The Search tab will be your go-to area for most of your design elements. You will find various sub-groups like lines, illustrations and photos which will typically make up the basis for your design.

canva3-1jpg

Layouts

Depending on the template you choose after login you will find different pre-made layouts for you to use and build upon if you choose to use them.

canva3-3jpg

Text

Here beneath the Text tab you will find preloaded text options and layouts but can also customize how certain text formats will appear.

canva3-3jpg

Background

With the Background tab you can very easily change the color of your canvas or add the textured or patterned backgrounds that are provided.

canva3-4jpg

Uploads

The Uploads tabs allows you to upload your own resources from either your computer, Facebook or Google Drive if you find that Canva doesn’t have something you are looking for.

canva3-5jpg

Setting Up Your Infographic

Now that you’ve gotten the layout of Canva it’s time to actually make our infographic. To get started we need to create our background by clicking on the Background tab. For this particular design I want to keep to a subtle look so that all the information is easily readable. The fourth background design will act as a nice backdrop and offer contrast between all the elements.

canva4jpg

To add more contrast and interest to the background I’m going to add shapes. By clicking on the Search tab and the Shapes sub-group you can make your selections. For this design I am simply going to use triangles.

canva4-1jpg

I’ll continue placing my shapes and modifying colors and transparencies until I get something I like. Here is what I have now.

canva4-2jpg

Adding Elements

With the background done it is time to start fleshing the infographic out a bit more. We will start first by adding in the visual elements such as a title, sub-text and the key visual graphics. I have created various versions of the dress in both the black and blue form, the white and gold and of course a mashup of the two.

By placing these elements down first it allows me to get a better idea of how my infographic will eventually look before I start adding the important information to make the infographic a true infographic.

I’ve used the Text, Search (Icons) and Upload tabs in order to get these specific elements on my canvas.

canva5jpg

Now by using elements in the Text and Search tabs I can start adding in the information from the statistics gathered earlier.

canva5-1jpg

I’ll continue adding more elements to further flesh out my infographic to map out where my statistics will be placed.

canva5-2jpg

Finishing Up

To finish up my infographic I tweaked a few things, added in the important text and a few more numbers to make my visuals make sense. Here is the final result:

The Final Infographic

Final Thoughts

Personally I really like Canva, particularly since this was the first time I’d used it. The interface is user-friendly, designing is pretty easy and best of all you don’t have to be a designer or artist in order to create something that looks pretty professional.

I would give it a solid 9 out of 10, only subtracting a mark for the fact that I found it a little tricky to grab the right element if it was too close to something else.

All in all Canva is an impressive program, especially considering it is free. Designing infographics or just doing quick and dirty mockups, no matter the project, can be done easily as long as you have your information on hand. I would definitely recommend the program for designers and non-designers alike.

Though it won’t fit every project, Canva may well deliver you a result faster than most options — and it won’t cost a cent to find out.

Gabrielle is a creative type who works as a freelance graphic designer, animator, photographer and filmmaker. She has worked doing various jobs from designing logos to filming commercials and animating music videos for both domestic and international music artists.

Get your free chapter of Level Up Your Web Apps with Go

Get a free chapter of Level Up Your Web Apps with Go, plus updates and exclusive offers from SitePoint.


Comments
MatsSvensson

Infographics are a great way to display text that you don't want people to be able to highlight and google.

alexmwalker

That just comes down to execution, doesn't it? Alt tags and written supporting content are essential to give almost any image context.

MatsSvensson

I dare you to link to even a single Infographics where that actually works.

(Cheesy Game-Show Interval Music, playing on infinite loop)

Jasmine

I quite like this one which I just came across.

MatsSvensson

Still just an image of text, nothing else.
Useless.

Say for example that i read "Mayor something bloomsometinh" in the text and wants to know what that thing is.
Normally with text, I just highlight that bit and rightclick + search google (or whatever).

How do do this, or anything at all, with the information in a info-graphics?

Note, that i don't want to type anything.
Someone already typed the text in, its done, its an already accomplished and finished task, now I just want to use it, to consume it.

When it comes to being useful for information, Info-graphics are about as useful as a tin-opener encased in Lucite.

Jasmine

While you're right, I linked to a graphic that you can't highlight text to search google, I can click on most parts of the infographic and a popup with more info appears, which is mostly the stuff that I'd want to see in a google search anyway. So it may not be completely what you've got in mind, but it seems to be halfway there.

Have you thought about creating an infographic the way you describe? It could be a good challenge smile

MatsSvensson

Aha, i didn't even notice that there was any clickable part in that thing.

Since:
1.) Nothing at all looks clickable, its just one homogenous blob of orange and red.
2.) It looks exactly as an info-graphics, and info-graphics are never clickable,

And as i try to click around, i notice immediately that there is zero connection between any clickable items, and what happens when i click it.

Most links just opens the same blurry video, some throws me at other sites at random, some leads to dead sites, some just appears to zoom in in the same crappy graphics.

I don't think something can be a "infographics" and good at the same tine, since "infographics" seems to just mean "shitty webpage".

Its simply one big chunk of mytery-meaty horrible webdesign.

There used to be rule for imagemaps on sites (when people still used them) , that you would put a copy of all the links in it as regular links at the bottom.

It worked.
This does not.

Im not even sure what its supposed to inform me about.
It's some kind of worldwide burger-chain i have never heard about?

Antonio_Livingston

Nice tutorial on Canva. One thing, and this may been brought to your attention already. Above the bottom portion that references 13-17 year-old, the info above it refers to the same 55-64 information that is on the opposite side. Probably a simple copy/paste, I've done it many times myself.

Related books & courses
The Principles of Beautiful Web Design, 3rd Ed

Available on SitePoint Premium. Check it out now!