Skip to Content
Main Content

Hiker Looking Out Over Mountains

8 Minute Read | January 27, 2017

Everything You Need to Create an Infographic

People love infographics. They read them avidly and share them readily. Infographics are hot.

But don’t make them just because the cool kids make infographics. Do it because text and images combined convey your information clearly and comprehensibly. Or do it because it’s a fun way to tell a story.

Don’t let Photoshop or Illustrator illiteracy hold you back. You can design your own infographic without them by following these steps.

1. Outline your story

Infographics turn data into memorable stories, but they don’t create data. Before you design, know your topic and exactly what you want to say. Organize your information in a logical way that will be useful to your audience. For example, I created an infographic on the user experience. It puts my readers in the shoes of a user navigating a poorly designed website and demonstrates the problems that user encounters. It tells a story with a beginning, a middle and an ending, in which the user decides that the website isn’t worth the hassle of trying to navigate through it. The story even has a moral: Always make your website user-friendly.

2. Reduce the word count

Some of my first infographics embarrass me now. I can’t believe how much text I crammed into them. Remember, infographics differ from traditional articles because they focus on the visual and are easy to skim. The fewer words, the better. Big blocks of text scare readers off. Let your visuals tell your story.

3. Choosing a Color Palette

A style guide governs your website and makes it coherent. Make a guide for your infographics, too.

Once you have a style guide for your website, making a style guide for your infographic design should be easy. Use the same color palette as your website, but add a few accent colors that look good with your brand. I use Adobe’s color wheel to help me pick a good collection.

Do include some darker shades. This gives you more flexibility in your design without straying from your branding scheme. For example, I use eight different colors for our infographics. (You probably won’t need that many. I do because I create my own illustrations from scratch and need slightly more variation.) You can see that I have selected lighter and darker versions, within a narrow range, of each color. This is handy when adding shading, shadows or subtle patterns.

Northwoods color palette

4. Choosing Visual Aids 

Visual aids carry the information load and make that load comprehensible and fun for your readers. Your infographics should harmonize with your website design, but feel free to stray from your website style guide and give your infographics a new look.

Illustrations give you more flexibility in choosing colors that match your palette and can give your infographic a unique look. For example, check out this infographic by Microsoft Azure. They created a character with orange hair and a mustache. But the look of their character (on the left) differs dramatically from a character I created with the same features.

Both Microsoft and I intended these images to add fun to the infographic design. Some companies prefer a more serious tone. You can establish that tone in several ways.

  1. You can use photography, as in this infographic. Just make sure that your images are cohesive and flow well together. Photography can eliminate the cartoony feel of illustrations, but you will probably spend a little money for high-quality images that work for your design. It is also harder to match photography to your color scheme, which is easy with illustrations.
     
  2. Charts and graphs convey a great deal of information and promote a serious tone, as in this infographic. Charts and graphs can work with illustrations and photographs. The mix can make large amounts of data easier for your readers to grasp. Don’t overwhelm them.
     
  3. Icons add visual elements that promote a clean, simple look, as in this example. Icons provide a quick solution for smaller infographics, but don’t work for longer content. An excess of icons can confuse readers and clutter your graphic.

5. Consider your layout

Infographics come in all shapes and sizes. However, 81% are vertical. This orientation works better on a phone or tablet. I also find it more intuitive to read than short, wide or square infographics. Wider infographics offer the eye too many possible paths and thus demand too many decisions from the reader. Don’t make them work so hard.

However, wider infographics work well in the case of a large image with a list of facts. If your infographic isn’t data heavy, a wider infographic can fit the information a little easier, per this example.

Regardless of layout, leave room at the bottom to cite your sources. Citations lend credibility.  

6. Love Those White Open Spaces

Respect the power of white space. (Take one look at this infographic to see what I mean.) Space helps content feel more digestible and eases navigation around the infographic. You want users to skim your infographic easily. Clutter prevents that.

7. Design your own infographic using online tools

Online tools can help you avoid learning such programs as Photoshop, Illustrator, or InDesign. I surveyed online tools and recommend three of them.

  1. Canva

Canva is a great resource for making quick infographics. The drag-and-drop interface is intuitive and you can add your own custom colors. Canva offers a handful of free graphics and many more options for $1 each. You can change the colors of some of the illustrations they provide to make them better match your brand. You can also upload your own images free of charge. The infographic below took me 15 minutes to put together and did not cost me a dime. 

  1. Piktochart

Piktochart offers fewer template options than Canva but somewhat more flexibility in designing your own template. Tips and tricks pop up as you work within the tool, which makes it very easy to use.  Chat live with an expert if you get stuck. You have the option to upload your own graphics, but Piktochart provides the best graphics of the three tools and great ease in finding the graphic you want. Here’s my 15-minute Piktochart infographic (again, another freebie):

Piktochart Infographic Example

  1. Venngage

Venngage offers little in its free package, which pushes you toward the paid options. Check out their pricing here. They offer a very wide range of templates, ranked as beginner, intermediate, and advanced. You can ease your way into the harder templates as you become familiar with the tool. However, this tool is the least intuitive of the three. I had to turn to their online chat feature for help. That said, they were very quick and helpful when I got stuck. The infographic below took 20 minutes to prepare and that includes my quick online chat.

Venngage Infographic Example

8. Optimize your Infographics for SEO

People love infographics, but search engines don’t. Search engines cannot read or interpret any content on images, and infographics are images.

So how are you supposed to optimize your infographic for SEO? I thought you might ask that.

Help both people and search engines find your infographic by writing content to introduce it and summarize its purpose. Include keywords in this copy, but don’t try to rank for too many. Focus on one or two. (Check out our SEO Writing blog for more information on how to write data-driven content.)

Inbound links boost your search ranking. You can acquire them by allowing others to share your infographic to their websites. Embedded codes come in handy with this. Don’t worry if you don’t know any code; this website makes it easy. Just fill out the form and copy the code into your website.

Finally, make sure to optimize for SEO the webpage where the infographic resides. This means filling out the meta data, alt text, having a friendly URL, and a quick load time. 

9. Include a PDF Version of Your Infographic

You might have resized your infographic to fit your website. This could make some of the text hard to read. A downloadable PDF file gives users access to the infographic in its original size. They just might attach it to an email and send it off to all their coworkers and friends. That’s the dream!

10. Share Your Infographics on Social Media

Infographics can become social media stars. People love sharing them. Pinterest is one of the best platforms for sharing infographics. Pinterest enforces no height restriction, so it will display your entire infographic with ease.

Infographics on Pinterest

Other social media platforms aren’t as accommodating.

Wait -- you spent all this time creating the perfect infographic, and now you can’t even share it on Facebook?

Fortunately, you can. Simply reuse an important part or key statistic from your infographic. Place it into a separate image that meets any size restrictions. When you post this new image, be sure to link back to the infographic on your own website. Along with shares on social media, you’ll get traffic to your site. Win – win.

Sharing Infographic on Facebook example

Bonus Tip: You can even use different sections of your infographic to create more than one image to use on social media. This gives you the ability to create multiple social media posts with just one infographic.

 

Want to go custom? Contact Northwoods and we will create a custom infographic to match your brand and that stands out from a templated look.

 

 

Authored By

Jenna Dehn

Jenna Dehn

UX Design Lead

hand-drawn owl

Get Expert Tips

361269/Blog/Everything-You-Need-to-Create-an-Infographic8
<p>People love infographics. They read them avidly and share them readily. Infographics are hot. </p> <p>But don&rsquo;t make them just because the cool kids make infographics. Do it because text and images combined convey your information clearly and comprehensibly. Or do it because it&rsquo;s a fun way to tell a story. </p> <p>Don&rsquo;t let Photoshop or Illustrator illiteracy hold you back. You can design your own infographic without them by following these steps. </p> <h2>1.&nbsp;Outline your story </h2> <p>Infographics turn data into memorable stories, but they don&rsquo;t <em>create</em> data. Before you design, know your topic and exactly what you want to say. Organize your information in a logical way that will be useful to your audience. For example, I created an infographic on the user experience. It puts my readers in the shoes of a user navigating a poorly designed website and demonstrates the problems that user encounters. It tells a story with a beginning, a middle and an ending, in which the user decides that the website isn&rsquo;t worth the hassle of trying to navigate through it. The story even has a moral: Always make your website user-friendly. </p> <h2>2.&nbsp;Reduce the word count </h2> <p>Some of my first infographics embarrass me now. I can&rsquo;t believe how much text I crammed into them. Remember, infographics differ from traditional articles because they focus on the visual and are easy to skim. The fewer words, the better. Big blocks of text scare readers off. Let your visuals tell your story. </p> <h2>3.&nbsp;Choosing a Color Palette </h2> <p>A style guide governs your website and makes it coherent. Make a guide for your infographics, too. </p> <p>Once you have a style guide for your website, making a style guide for your infographic design should be easy. Use the same color palette as your website, but add a few accent colors that look good with your brand. I use Adobe&rsquo;s color wheel to help me pick a good collection. </p> <p>Do include some darker shades. This gives you more flexibility in your design without straying from your branding scheme. For example, I use eight different colors for our infographics. (You probably won&rsquo;t need that many. I do because I create my own illustrations from scratch and need slightly more variation.) You can see that I have selected lighter and darker versions, within a narrow range, of each color. This is handy when adding shading, shadows or subtle patterns. </p> <p style="text-align:center"><img alt="Northwoods color palette " src="/Images/Blogs/NWS/InfographicColorScheme.jpg" title="Northwoods color palette " /> </p> <h2>4.&nbsp;Choosing Visual Aids&nbsp; </h2> <p>Visual aids carry the information load and make that load comprehensible and fun for your readers. Your infographics should harmonize with your website design, but feel free to stray from your website style guide and give your infographics a new look. </p> <p>Illustrations give you more flexibility in choosing colors that match your palette and can give your infographic a unique look. For example, check out this infographic by Microsoft Azure. They created a character with orange hair and a mustache. But the look of their character (on the left) differs dramatically from a character I created with the same features. </p> <p style="text-align:center"><img alt="" src="/Images/Blogs/NWS/Infographic-Characters.jpg" title="" /> </p> <p>Both Microsoft and I intended these images to add fun to the infographic design. Some companies prefer a more serious tone. You can establish that tone in several ways. </p> <ol> <li>You can use photography, as in this infographic. Just make sure that your images are cohesive and flow well together. Photography can eliminate the cartoony feel of illustrations, but you will probably spend a little money for high-quality images that work for your design. It is also harder to match photography to your color scheme, which is easy with illustrations. <br /> &nbsp;</li> <li value="2">Charts and graphs convey a great deal of information and promote a serious tone, as in this infographic. Charts and graphs can work with illustrations and photographs. The mix can make large amounts of data easier for your readers to grasp. Don&rsquo;t overwhelm them. <br /> &nbsp;</li> <li value="3">Icons add visual elements that promote a clean, simple look, as in this example. Icons provide a quick solution for smaller infographics, but don&rsquo;t work for longer content. An excess of icons can confuse readers and clutter your graphic.</li> </ol> <h2>5.&nbsp;Consider your layout </h2> <p>Infographics come in all shapes and sizes. However, 81% are vertical. This orientation works better on a phone or tablet. I also find it more intuitive to read than short, wide or square infographics. Wider infographics offer the eye too many possible paths and thus demand too many decisions from the reader. Don&rsquo;t make them work so hard. </p> <p style="text-align:center"><img alt="" src="/Images/Blogs/NWS/Infographic-Flow.jpg" title="" /> </p> <p>However, wider infographics work well in the case of a large image with a list of facts. If your infographic isn&rsquo;t data heavy, a wider infographic can fit the information a little easier, per this example. </p> <p style="text-align:center"><img alt="" src="/Northwoods-2020/Blogs/Everything-You-Need-to-Create-an-Infographic-bill-gates-infographics.jpg?Large" /> </p> <p>Regardless of layout, leave room at the bottom to cite your sources. Citations lend credibility. &nbsp; </p> <h2>6.&nbsp;Love Those White Open Spaces </h2> <p>Respect the power of white space. (Take one look at this infographic to see what I mean.) Space helps content feel more digestible and eases navigation around the infographic. You want users to skim your infographic easily. Clutter prevents that. </p> <h2>7.&nbsp;Design your own infographic using online tools </h2> <p>Online tools can help you avoid learning such programs as Photoshop, Illustrator, or InDesign. I surveyed online tools and recommend three of them. </p> <ol> <li> <h3>Canva </h3> </li> </ol> <p>Canva is a great resource for making quick infographics. The drag-and-drop interface is intuitive and you can add your own custom colors. Canva offers a handful of free graphics and many more options for $1 each. You can change the colors of some of the illustrations they provide to make them better match your brand. You can also upload your own images free of charge. The infographic below took me 15 minutes to put together and did not cost me a dime.&nbsp; </p> <p style="text-align:center"><img alt="" src="/Images/Blogs/NWS/Canva-Infographic2.jpg" title="" /> </p> <ol> <li value="2"> <h3>Piktochart </h3> </li> </ol> <p>Piktochart offers fewer template options than Canva but somewhat more flexibility in designing your own template. Tips and tricks pop up as you work within the tool, which makes it very easy to use. &nbsp;Chat live with an expert if you get stuck. You have the option to upload your own graphics, but Piktochart provides the best graphics of the three tools and great ease in finding the graphic you want. Here&rsquo;s my 15-minute Piktochart infographic (again, another freebie): </p> <p style="text-align:center"><img alt="Piktochart Infographic Example" src="/Images/Blogs/NWS/Pictochart-Infographic1.jpg" title="Piktochart Infographic Example" /> </p> <ol> <li value="3"> <h3>Venngage </h3> </li> </ol> <p>Venngage offers little in its free package, which pushes you toward the paid options. Check out their pricing here. They offer a very wide range of templates, ranked as beginner, intermediate, and advanced. You can ease your way into the harder templates as you become familiar with the tool. However, this tool is the least intuitive of the three. I had to turn to their online chat feature for help. That said, they were very quick and helpful when I got stuck. The infographic below took 20 minutes to prepare and that includes my quick online chat. </p> <p style="text-align:center"><img alt="Venngage Infographic Example" src="/Images/Blogs/NWS/Venngage-Infographic.jpg?" title="Venngage Infographic Example" /> </p> <h2>8.&nbsp;Optimize your Infographics for SEO </h2> <p>People love infographics, but search engines don&rsquo;t. Search engines cannot read or interpret any content on images, and infographics are images. </p> <p>So how are you supposed to optimize your infographic for SEO? I thought you might ask that. </p> <p>Help both people and search engines find your infographic by writing content to introduce it and summarize its purpose. Include keywords in this copy, but don&rsquo;t try to rank for too many. Focus on one or two. (Check out our SEO Writing blog for more information on how to write data-driven content.) </p> <p>Inbound links boost your search ranking. You can acquire them by allowing others to share your infographic to their websites. Embedded codes come in handy with this. Don&rsquo;t worry if you don&rsquo;t know any code; this website makes it easy. Just fill out the form and copy the code into your website. </p> <p>Finally, make sure to optimize for SEO the webpage where the infographic resides. This means filling out the meta data, alt text, having a friendly URL, and a quick load time.&nbsp; </p> <h2>9.&nbsp;Include a PDF Version of Your Infographic </h2> <p>You might have resized your infographic to fit your website. This could make some of the text hard to read. A downloadable PDF file gives users access to the infographic in its original size. They just might attach it to an email and send it off to all their coworkers and friends. That&rsquo;s the dream! </p> <h2>10.&nbsp;Share Your Infographics on Social Media </h2> <p>Infographics can become social media stars. People love sharing them. Pinterest is one of the best platforms for sharing infographics. Pinterest enforces no height restriction, so it will display your entire infographic with ease. </p> <p style="text-align:center"><img alt="Infographics on Pinterest " src="/Images/Blogs/NWS/InfographiconSocialMedia.jpg?Large" title="Infographics on Pinterest " /> </p> <p>Other social media platforms aren&rsquo;t as accommodating. </p> <p>Wait -- you spent all this time creating the perfect infographic, and now you can&rsquo;t even share it on Facebook? </p> <p>Fortunately, you can. Simply reuse an important part or key statistic from your infographic. Place it into a separate image that meets any size restrictions. When you post this new image, be sure to link back to the infographic on your own website. Along with shares on social media, you&rsquo;ll get traffic to your site. Win &ndash; win. </p> <p style="text-align:center"><img alt="Sharing Infographic on Facebook example" src="/Images/Blogs/NWS/InfographiconFacebook.jpg" title="Sharing Infographic on Facebook example" /> </p> <p><strong>Bonus Tip:</strong> You can even use different sections of your infographic to create more than one image to use on social media. This gives you the ability to create multiple social media posts with just one infographic. </p> <p>&nbsp; </p> <p>Want to go custom? Contact Northwoods and we will create a custom infographic to match your brand and that stands out from a templated look. </p> <p>&nbsp; </p> <p>&nbsp; </p>
/Northwoods-2020/Hero-Images/Hiker-Looking-Out-Over-Mountains.pngHiker Looking Out Over MountainsJenna Dehn/Northwoods-2020/People/Jenna-Dehn.jpgWoman in front of a log cabin wall with soft, warm lighting<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script><script>hbspt.forms.create({ region: "na1", portalId: "23630176", formId: "40c5bbae-05a2-42ea-94dd-1662181fd56e" });</script>Everything You Need to Create an Infographic2017-01-27T00:00:00/Images/Blogs/Stock/Infographic-Blog.jpg?BlogTeaserNPeople love infographics. They read them avidly and share them readily. Infographics are hot. Don’t let Photoshop or Illustrator illiteracy hold you back. You can design your own infographic without them by following these steps.3620811/People/Jenna-DehnJennaDehnUX Design Lead<p>Jenna listens closely to understand clients&rsquo; goals and uncover solutions for their marketing and design challenges. She specializes in developing wireframes and prototypes with a strong focus on UX/UI and&nbsp;collaborates with Northwoods&#39; digital strategists&nbsp;to ensure that strategy guides the design process. Jenna has a wealth of experience designing for data and creates stunning page layouts that showcase complex product information in a digestible format. She enjoys creating infographics, display ads, and illustrations that enrich marketing collateral and has a knack for using movement to bring websites to life. Away from Northwoods, Jenna enjoys downhill skiing, and her fuel of choice is Dr. Pepper. Be on the lookout for her cats Viper, Saber, and Flash, who are frequent guests during WFH calls.</p>Jenna Dehn/Northwoods-2020/People/Jenna-Dehn.jpgJenna DehnAdd-In Type - NWS Data ModulesCategory - NWS Data ModulesCommittee - NWS Data ModulesDivision - NWS Data ModulesEvent Audience - NWS Data ModulesEvent Service - NWS Data ModulesEvent Type - NWS Data ModulesLocality - NWS Data ModulesModule - NWS Data ModulesNWS Data ModulesTopic - NWS Data ModulesPackage Type - NWS Data ModulesPersonID - NWS Data ModulesJenna DehnProductVersion - NWS Data ModulesRecorded Webinar TopicsRegion - NWS Data ModulesSite Display - NWS Data ModulesSkillLevel - NWS Data ModulesTopic - NWS Data ModulesVideoAudience - NWS Data ModulesVideoClassification - NWS Data ModulesVideoStatus - NWS Data ModulesTeamAll StaffDesignersDevelopersAdd-In Type - NWS Data ModulesCategory - NWS Data ModulesCommittee - NWS Data ModulesDivision - NWS Data ModulesEvent Audience - NWS Data ModulesEvent Service - NWS Data ModulesEvent Type - NWS Data ModulesLocality - NWS Data ModulesModule - NWS Data ModulesNWS Data ModulesTopic - NWS Data ModulesUX & Website DesignPackage Type - NWS Data ModulesPersonID - NWS Data ModulesJenna DehnProductVersion - NWS Data ModulesRecorded Webinar TopicsRegion - NWS Data ModulesSite Display - NWS Data ModulesNWS DigitalSkillLevel - NWS Data ModulesTopic - NWS Data ModulesVideoAudience - NWS Data ModulesVideoClassification - NWS Data ModulesVideoStatus - NWS Data Modules02024-02-20T13:00:17.98300