Introduction to Infographic Design and Using Piktochart

This tutorial is an introduction to Piktochart, a popular online tool used to create infographics. This exercise will illustrate some infographic design principles and specific features of Piktochart to create an infographic about comparing housing in Vancouver vs Toronto.

  1. To begin, go to the Piktochart website: (www.piktochart.com). Click on the sign up button on the top right. Note that at this point you can choose to create an account or sign in through an existing Gmail/ Facebook account.
    Image of the Piktochart home screen, with log in option in top right corner.

    If creating an account, fill in your name, email and choose a password. Then click create account. Piktochart should send you a confirmation email. Once you receive that email, just click on the Confirm email button. This link should take you to the log in screen where you can then log in. When you first set up an account, you may be asked a few questions about yourself. Having logged in, you should end up in your account dashboard screen (yours is likely to be fairly empty).

  2. Before we start working with Piktochart, we need to gather our data, come up with our story, and design our infographic. First let's look at the data. Download the WorkshopFiles.zip file: (http://maps.library.utoronto.ca/workshops/IntrotoInfographics/). You will need to unzip/extract the file using a tool like 7-zip (https://www.7-zip.org/) - normally by right clicking on the file and selecting extract or unzip from the menu. The result should be a number of files that will be referred to throughout this tutorial. In particular, you should see 3 Excel files – let’s check out CensusProfile.csv first. This is census profile data from the latest census (2016) for the cities of Toronto and Vancouver.
    Image showing three Excel files downloaded as part of data package.

  3. From this file, you can see that there is information about how many people fall into many different demographic categories, based on how they answered particular questions in the census. You can see that these answers are categorized by general topic. Most questions start with a “total” that describes the question and then the indented information are the subcategories that people fall under. You can see, for example, that starting at row 43 there’s data on what type of housing people live in, with different categories such as single-detached house or apartment. You can see that 269,675 people in Toronto and 41,330 people in Vancouver live in single-detached houses. That will be useful.

    Further in the file (around row 1619), there is more data on household characteristics, such as home type (condo vs non-condo). 

    And median value of a home, as estimated by the resident. There's a big story there - median values for Vancouver are much higher when compared to Toronto! So that will be the climax of our story.

  4. Going back to the condo/non-condo question information, it might also be useful to describe the housing mix in both cities - condos vs houses (i.e., single-detached houses). Not what is available, but where people live. I have separated some of the relevant housing-related census data into two new excel files called TorontoHousingMix.xls and VancouverHousingMix.xls and calculated the percentages. Let’s take a look at those files. Based on a quick visual scan, I can see that Toronto has a pretty even mix of housing types, but for Vancouver there’s a higher percentage of people living in condos vs. houses. These two data files will also be used in our infographic. Note: Normally, I would make comparisons of categories within the same question, but I feel pretty safe in my assumption that single-detached houses are not condos, so there's no overlap, and I can make these comparisons.
    So let's go with using the data on the number of people living in single-detached houses vs condos, as well as the median value of dwellings in our infographic as some ways to compare the cities' housing landscape. We'll also include some context at the beginning of the infographic to set the stage for the story, so including information on population and location within Canada.
    Note: This is a simplified example of finding a story in the data. We could have used different variables in this census profile (there are many) or other datasets, such as real estate prices and availability, for example, to tell our story in this infographic.
    Image of Excel sheets that have data about housing in Vancouver and Toronto.

  5. The next step in the process is to sketch out the layout of the infographic (with paper and pen works well). The overall design that we'll do for this one (which you'll see as it develops), will be to start with a big, bold title setting up our question - "Where Should You Buy Your Home?" The subtitle sets up the comparison - "Vancouver vs Toronto." Then the infographic will have 4 blocks/sections after the titles. The first block will set the stage - providing context by showing a map with the two locations, and some info on their populations. The second block will have a subheading asking if they prefer condos vs houses, followed by some explanatory text and some bar graphs to display the data on the housing mix info we calculated earlier. The third block will have a subheading and text discussing cost, and then display a comparison of the median values using special text treatments to make them stand out. The final block will have a conclusion with where they can go for more information, plus sources and footnotes at the bottom.

  6. Next, we need to decide what fonts and colours to use in our design. Let's start with fonts. The first resource I’m going to use is an article on how to choose fonts: (https://venngage.com/blog/how-to-choose-fonts/) as there are example font pairings. As we're just looking for a maximum of 2-3 fonts, font pairings work well. Browsing the article’s suggestions, let's go with the final pairing – Poppins for the title and subheadings, and Roboto Condensed for the body. To keep track of these font choices, we can add notes to our design sketch.

  7. Next I need to decide on font sizes and how use these to create the text hierarchy. For this, I’m going to use this website: https://www.modularscale.com/?12&pt&1.5. For this tool, we need to first decide on the size of our body text. The font pairing suggested 16pt, which works well with the accessibility advice of using between sizes 14 and 18pts for on screen body text. So let's go to the Modular Scale tool and put in 16pt as the base. It then displays appropriate larger and smaller sizes from that point to use for headings. We want our title to be large and fill the top of our infographic, so I’m going to go with 81pt and make it bold. For the main subheading, we can take the next step down and select 54 and not bold. For the rest of our subheading questions, we can take another step down to 36pt. We finally then end up at our body text. As we don’t have large chunks of text, we might be okay to take it up a step to 24pt. We’ll give it a try and see how it looks. We'll use a slightly larger font for the special text treatment on the median values, maybe 40pt and bold, and a slightly smaller size for the sources and footnotes, maybe 14 or 16pt.
    Image of the Modular Scale website with several font sizes displayed and highlighted.

  8. Finally, our last major design decision will be colour. Common design advice is to use 2-3 colours at most. We will use ColourLovers (https://www.colourlovers.com/) to choose some nice colour palettes. From the home page, select palettes and then most loved to find some options that might be appropriate.


     

  9. The colour options in the palette, Ocean Five, look like they might be a good fit. Let's click on its title. The Blue and Orange would be good contrasting (complementary) colours (to represent Vancouver vs Toronto information), and the brown in this palette is a nice, neutral colour for text. So let’s click on it to get more information.
    Image showing the Ocean Five palette.

  10. One thing we would want to check is that this how well this palette works for people who may be colour blind. You can download the palette as an image by going to the left under palette image, and clicking on one of the sizes – let’s pick 800x600.
    Image showing more details about Ocean Five palette.
    Then go to Coblis, a Color Blindness Simulator: http://www.color-blindness.com/coblis-color-blindness-simulator/. We can drag and drop this palette image that we just downloaded. Now if we try out the different settings, keeping an eye on the blue and orange, we see that differences can still be perceived, which is great. Let's depict information about Vancouver with blue and use orange for Toronto. 
    Image showing palette as it would be perceived by people who see colour differently.

  11. Our design is ready to implement in Piktochart now. Let’s return to the dashboard screen, where we left off. We’re going to create a new infographic, so let’s select that option on the left. As you can see there are a number of free templates you can use, if you wish. We are designing our infographic from scratch, so select the Create a new Infographic option.

  12. At the top of the webpage, you can give your infographic a name – let’s call ours “Housing – Vancouver vs Toronto”. As you can see, Piktochart autosaves periodically, which is great. But you can also force it to save anytime by clicking on the Save button at the top. It is important to save frequently when working in browser tools. Next to the save button is a preview button (for testing how it looks), a download button to download it as an image (we’ll use this later), and a share button (which we will also look at later). The bell icon is a ‘Help’ chat, and you can also ask for help by clicking on the ‘Need help?’ button at the bottom right. Finally, the person icon can be used to access your account settings.Image showing the top-of-screen ribbon with several different options visible.

  13. Using Piktochart’s Infographic tool, we’re going to start building our infographic in chunks (which works well if we want to present it later in presentation mode). Go to the settings icon (a gear), select custom for canvas size, input a height of 300px. Click the settings icon again to clear the pop up window.
    Image showing the option to change the "canvas size" of our infographic block.

  14. Let’s add our title. I’ve provided all of the text for this infographic in a word document called TextForInfographicActivity.docx in your data download package. If you open it up, you can then copy/paste the text into Piktochart to save time and make sure we’re using the same text throughout this tutorial. First, let’s click on the Text icon from the left menu and then click on title. Double click on it to edit it and then press the CTRL key and the letter A key at the same time to select all the text to replace it. Copy/paste our title from the word document (item 1) – delete the “1)” if it also copies over.
    Image of screen while adding text, with the "Text" and "Title" buttons highlighted.

  15. Select all the text again and pick Poppins for the font, size 81, and bold our title. Then go to the colour bucket to select our colour – we need to add our brown from the colour palette to use for our text. Go to our colour lovers palette and copy/paste the hex value. In the Piktochart colour selector, replace the numbers before the number sign with the hex value for our brown colour. Don’t press Enter (although tempting) as that just replaces your title text with an enter sign. Once you copy in the number for the colour, the title should now be that shade of brown. Also, that colour will now be found in our recent colours, so we don’t have to add the number every time we want to use that colour. Just click away to close the window.
    Image of our colour palette, with the hex number for brown highlighted.

    Image showing the hex number being entered into Piktochart's colour selector.

  16. Our title box is a bit big, so resize it, fitting the edges within the edges of our infographic and position it near that top, but leaving a bit of white space. With text boxes the first time you click on them, the outline turns black, and then you can move or resize them. If you double click on them, you can edit the text. You can see that as you try to re-position the box, orange lines appear. They help you with alignment. If you see an orange line appear down the middle, it is telling you that it is centered. Our title is done. Great!

  17. In a similar way, let’s add the subtitle below the title. Click on the Text icon from the left menu, and then on subtitle. Let’s move it down so we can see what we’re working with. Double click on it, select all the text, and then copy/paste the subtitle from our word document, item number 2 (remove any numbering that might come up). Again, let’s apply our font and colour specifications. First, highlight everything, pick Poppins and size 54. For the colours, we’re going to use the blue and orange to contrast these two cities. So it would be good to put their names in these colours to link the colour to the city, using the subtitle as a legend. Highlight Vancouver, then select the colour bucket icon, then copy/paste the blue hex value in to change the text to blue. Do something similar for Toronto, but with the orange colour, and make "vs" brown. Now resize the subtitle, pulling the edges to the edge of the infographic board and positioning it below the title with some white space.
    Image showing our font type, colour, and size selections for the first block.

  18. Let’s add a horizontal line to separate our sections. Click on the Graphics icon from the left menu, and then Lines, and add a line. Position it below your subtitle and expand it to the edges of your subtitle. Click on the colour bucket and colour the line brown.
    Image demonstrating how to add a dashed line to infographic.

  19. Finally, let’s add a neutral background to our infographic. Click on the Background icon from the left menu. You can chose a solid colour at the top or pick a more textured background. I’ve chosen a neutral, tan-coloured background, which is past the watermelons and just before some wood paneling in the list of options. It is neutral, but with a bit of a graph paper texture to it. I think it goes nicely with the brown text and provides good contrast for readability. Pick this if you like, or another background of your choice. Every block that we now add will have the same background by default.
    Image showing some background options.

  20. Now we’re going to add a new block for the next section of our infographic. Let’s pull up the grey bar to just under our line to make our first block compact, then click on the plus sign on the left to add our new block.
    First block shown with "Add Block" option highlighted.

  21. Next we’re going to add a bit of context for these two locations. Let’s start with a text box for each city with their province and population. Add a text box, as we did before, but pick body text. Copy/paste the text from item 3 in the word document into the box (make sure there is a new line before "Population" and no leading numbers). Then let’s apply our font and colour rules here. We’ll use Roboto Condensed here and 24 size, and the brown colour. In this case, we’re going to left justify it (and for Toronto’s box we’ll right justify it) to create a visual contrast of comparing two items side by side. After setting up the box for Vancouver, copy/paste the entire box and then modify the text by copy/pasting in the Toronto info (right click and paste as plain text or for a short-cut, use CTRL + SHIFT + V). But this time right justify it. This is a quick way to use the same font size and colour for similar text boxes – we will do this again later on. Make sure each text box is only two lines. Leave the boxes off to each side for now.
    Image of full infographic with text options highlighted.

  22. These two text boxes are ultimately going to be shown next to a map with icons pointing out where Vancouver and Toronto are. So first let’s add a map to our Infographic. Click on the Tools icon in the left menu, and then click on Maps. Here we can search for Canada. You can see that the map provided here is distorted, with the arctic looking huge and stretched. This doesn’t look right and because it is stretched it would take up a lot of room on our infographic. Instead, I’m going to find and upload a different image of Canada to use – press cancel here.
    Image of the "Insert Map" function, with a vertically stretched map of Canada displayed.

  23. One good website to go for images that have licenses allowing for reuse is Wikimedia Commons. Google that. From there, search for “Canada blank map svg”. I’m searching for an SVG image – where SVG stands for Scalable Vector Graphics. These are great for icons/simple images in infographics. You can stretch them without them looking pixelated, and can easily change their colours. The fifth option from our Wikimedia search looks like a good map to use. You can see how the projection used here makes Canada look less vertically stretched. Let’s check its reuse permissions. It says it is creative commons attribution-share alike license and then explains what you can do with it. Basically we can use it and alter it, but we have to cite it and share it under the same license if we distribute our infographic. Okay, great, let's use it. Back at the top, click on Download, right click on the full resolution file, and save it in your workshop folder.
    Wikimedia Commons webpage is shown. Search terms and our chosen map are highlighted.

  24. To use this file in Piktochart, click on the Upload icon in the left menu, browse to the file and select it. When it is loaded, you’ll see a little thumbnail of the map. You can click on the image to add it to our infographic. Unfortunately, here is where Piktochart is lacking. Normally, you might expect to be able to change the colour of an image (I want this to be brown to match the infographic), but here there is no option. But I have a workaround! Let’s delete the image from our infographic. Click on it and hit the delete key.
    Image showing the SVG image being added in Piktochart.
     

  25. We are going to use a different application to quickly change the colour of our image. Go to the file we downloaded and right click, then select Edit with Notepad++ (or open up the file in another text editor program). As you can see, SVG files are really a text file. So we can edit the part where it specifies the colour – near the top it says id=”Canada” and style=”fill:#” with a hex number for the grey colour. To change the image’s colour, we can replace that hex number with the hex number for the brown. Let’s do that and then save the svg file.

  26. Now if we upload it, you should see the thumbnail is showing a brown map. If we add it to our infographic, it now fits better with our design. Let’s resize it by holding down the shift key (this ensures that we don’t accidently distort or stretch the map) and centre it on our infographic. This might involve making the block a bit larger by pulling down the grey border. Size the map so it is about a third of the width of the infographic. Drag the Population text boxes so they are nicely arranged around it. You can also make it asymmetrical for a more dynamic look.
    Image showing the SVG being added back to the infographic, this time in brown.

  27. Next let’s search for a map “pin” icon we can use. Click on the Graphics icon. Close the lines section and open up the Shapes & Icons section. Search for “map icon.” You can use the mono filter to pick simple ones that we can colour to match our colour scheme. Pick the icon just below the world map icon. When you click on it, it inserts it into the infographic. Let’s change the colour to the blue for Vancouver. Shrink it down to a smaller size (again using the SHIFT key to avoid distorting it) and place it over the map, pointing roughly to Vancouver. Then copy/paste the icon, change the colour to orange for Toronto, and place it in the appropriate point on the map to point out Toronto. If it is a bit hard to see where you’re placing it, you can use the arrow keys for finer movement and the zoom tools on the bottom right.
    Image of a blue-coloured pin being added on top of the map to mark Vancouver.

  28. One thing to point out here is that when you’re layering images one over another, sometimes one might be blocking another. If that happens you can select one and then either bring it forward or send it back to fix it. That arrange option is in the menu at the top. If you regret that decision (or anything you've done), you can always use the undo or redo buttons at the top left of editing screen. Finally, copy the horizontal bar separating your first two blocks, then paste it into your current block to finish the second block. Make sure it is centered. Adjust any grey block borders to just under the lines, if needed.

    The final version of this block should look like this:

  29. Okay, let’s add our third block to the infographic. Here, we will use a header to ask a question, so insert a text box for subtitle, and copy the text from item 5 (clean up if needed). Then apply the font and colour – Poppins, this time 36pt, and brown. Stretch the text box to the edges and centre it. Then add another text box with our body text (item 6) about this topic. Copy/paste in the text and again, set the font and colour, this time Roboto Condensed, 24pt, brown. Stretch to make the text read on two lines, fairly even on both lines (if it isn’t working, backspace over the line break to fix it). Just to note, an orange outline around a box means that it is centred.
    Complete infographic shown with third block in place and new text added.

  30. Next we will add some bar graphs that compare the condos vs houses data. To do so, click on the Tools icon in the left menu, and then select Charts. Click on Import Your Data and select the VancouverHousingMix.xlsx file. (If asked, say “yes” to the overwrite warning).
    The "Insert Chart" option is shown and the overwrite option and Excel file selection are both highlighted.

  31. You can see that along the left are the different chart types we could pick. For this case, let’s pick the horizontal bar graph. Bar graphs are a great way to compare numeric data that is split into categories, such as the data we have now, and are a common chart type for infographics. I’m going with a horizontal bar graph so that the labels are easy to read. As you can see, one problem I have with Piktochart is that it writes the labels vertically, which misses the point of why people often use horizontal bar graphs. However, we can make some changes to the chart by clicking on the gear to get to the chart options menu. As you can see there are a number of settings we can change.Our bar chart is previewed, with the axes and "settings" button highlighted. 

  32. In this case, we don’t need a legend, so I will toggle that to off. Unfortunately, there are no settings to change the orientation of the labels. And the only options to change the axis and label colours are black, grey or white. However, the value of the bar appears as a pop-up when I hover over the bars, and there is an option to have the pop-up be part of the image when I export the infographic – that is the meaning of the static value on image export option. We will turn this option on, and turn the axis option off. You won’t see the popups unless you hover during the editing or preview phase, but they’ll be there in the final version once it’s downloaded. We can also change the bar graph’s colours to match Vancouver's blue. As you can see we’ve really simplified the graph. Next, we’ll create our own labels that are in the colour scheme we want. Once we're done with these changes, we’ll click on insert chart.
    Image of "Insert Chart" settings with our desired options highlighted.

  33. Our chart is a bit big, so let’s resize it to about a fifth of the width of our infographic. You can see that we don’t need to use the shift key here, as it won’t let us distort the data, which is good. Next we're going to manually create labels for the bars. To do so, insert a text box – body text. The text is "Condos" and the font is Roboto Condensed, 24pt. Line it up with my bar. Then copy/paste it to create a second label called "Houses."
    Cropped image of the completed bar chart for Vancouver data.

  34. Now you can create a second bar graph using the Toronto data, similar to how we did it for the Vancouver graph, but colour it orange, and copy/paste the accompanying labels. Line it up with the Vancouver chart, leaving a similar amount of space on either side. Finally, add in a brown ‘vs’ if you like and copy/paste the horizontal line at the end of your block.
    Image of the completed third block, with charts for Vancouver and Toronto.

  35. The next few steps just involve copying/ pasting text and then adjusting fonts/ colours, which we’ve already done several times now. We are going to skip ahead here and look at the sources & notes section for the bottom of this infographic. You are welcome to come back and complete the infographic later – all the necessary text is in the word document we have been using. The final version would look something like this:
    The full infographic is shown, including new sections like an attributions section and a Piktochart banner.

  36. To cite the map we used in our design, if we go back to the Wikimedia commons page where we got it and click on “use this file on the web,” we can see the information in the Attribution field to create the reference. To cite the data we used, if you go to the very bottom of the census profile excel file, you see information on how to cite it. Finally, there are some notes to clarify the data. For example, I explain that houses are defined as single-detached houses, and describe my assumption that these single-detached houses are not considered condos, so there is no overlap in the categories. Adding references and notes about the data can ensure your infographic is perceived as more trustworthy and accurate. Readers can then also go to the data sources listed to learn more.

  37. Now let’s look at a few other features you can use in Piktochart once your infographic is done. Click on Download at the top – you’ll see our only option is to download it as a PNG file. If we wanted it as a PDF, we’d have to upgrade to the PRO version. But PNG is fine for now. We can also set the quality to normal or medium. There is also an option to download each block as a separate image. This is useful sometimes if you want to use parts of your infographic on social media – you post one part as the image for a post, but when they click on it, then they see the full infographic. Let's increase the quality to medium and leave the rest of the defaults, then click on download as PNG. It takes a minute. Let’s open it up. There it is, including the values for the bars on the graphs that were only pop-ups upon hover before. That is how you would save it as an image. You may notice that it says powered by Piktochart at the bottom. Unfortunately, that is Piktochart’s watermark. If you don’t want that there, you can pay for the PRO version so that it doesn’t show up. Otherwise, part of the terms of use is that in order to be able to use this tool for free, they get to put their name at the bottom of what you create, to market themselves. So that’s something to consider when deciding on what version to use.

  38. Your other option is to publish it on the web through Piktochart. Let’s close the download window and instead click on Share at the top. Here you have the option of getting a sharing link that only you can view online. If you select make this link public, then everyone will be able to see it online when you give them the link. You can only password protect with the PRO version of Piktochart. It also gives you the option to share directly on various social media platforms or embed it in your website. Let’s just leave it as is and enter our link in a browser to see what our infographic looks like online. If you then click on Show Presentation, we can see the infographic presented to us in sections, which is why we created it using blocks. I sometimes get questions about how to include infographics in presentations, and this is one great way to do that. Use the arrow keys to progress through the blocks and click escape to get out of presentation mode.
    Image showing the "Share" and "Presentation" windows, with several possible options highlighted.

  39. And that’s it! This is just a simple example of what you can create using Piktochart. I encourage you to play around more with this tool, and go through all of its features. Creating infographics with this tool and others is a great way to get a feel for the design process. Good luck with your infographics!

Data format: 
Technique: 
Utilities: