I want to discuss the basics of designing an infographic [IG] for someone who may be new to the niche. This will also be helpful to arm some non-designers with what types of decisions they’ll need to make down the road or issues they may come up against.
When printing, a good standard type size for paragraph text would be 9 – 10 pt. On the web, however, your standard size would start at about 14 pt. Trying to put anything 12 pt or under on an infographic could become hard to read or unreadable. Basically, balloon everything and forget all the type restrictions you learned for print design.
Instead of the standard CMYK [Cyan, Magenta, Yellow and Black] you use for print, you’ll be working in RGB [Red, Green, Blue] the standard color system for your computer. In the Adobe Suite, note that Photoshop automatically works in RGB but other programs like Illustrator and InDesign automatically work in CMYK. If you are working in one of these other programs, don’t forget to change your color mode to RGB for best viewing when your file is up on the web.
When creating a new document in illustrator, you can find Color Mode in the advanced settings of the new document pop up screen. If you miss this step, however, you can also change it in your already existing document by going to File > Document Color Mode and selecting RGB.
Save your finished file as a .png or .jpg for web viewing. I personally recommend .png. It seems to have a crisper quality and allows transparencies [good to note for any design you may be doing.]
It would also be prudent to follow the program’s “save for web” option.
Raster vs. Vector
Some programs are raster based and some are vector based. Knowing the difference is vital. It’s all about how a program handles pixels or dots [referred to as ppi—pixels per inch, and dpi—dots per inch. They are essentially the same thing.]
To visualize how a program that works in one of these terms operates, imagine you’ve drawn a shape in the center of your canvas. Say it’s a square. That square is actually made up of tiny dots [pixels] and there are maybe hundreds or thousands of them that make up your shape.
Now, in vector, you can take that shape and upon enlarging it, the pixels will “multiply” to fill up the space. This makes it so that no matter how you maneuver the shape, it will always have sharp edges and fine clarity.
Now let’s imagine we’re working in raster. When we enlarge a shape in a raster based program, the pixels do not multiply, they simply “get bigger” to fill up the new enlarged space. This can be disastrous as you’ve all seen something look “pixelated” or fuzzy before. This can happen for a number of reasons but is usually because an object was enlarged outside of the size it was originally created in.
Both Photoshop (raster) and Illustrator & InDesign (vector) have their strengths and weakness, which is why I’ve always found harmony in utilizing all three for what they’re best at.
My personal recommendation is to design IGs in Illustrator.There are bound to be edits and using a program that allows you to resize without consequences will be your saving grace. Also, I’ve had clients that wanted to blow up the IG and print it or use various graphs/charts/images I’ve created in printed documents and a vector based image’s quality when going to print just can’t be argued against.
Here’s an example of an up close and personal difference between raster and vector.
Horizontal vs. Vertical
The most common type of IG you will see are in a vertical orientation. Vertical orientations seem to naturally assist you in making the content flow better, especially for a quick, easy read. Horizontal IGs can make it hard to follow the flow of the information and one’s eye could easily get “lost” in all the content unless the user interaction is expertly controlled by well-thought out content mapping by your designer. Also, it seems to be more innate to scroll downward to view more information than sideways, and with some horizontal IGs you can be scrolling sideways and downward depending on browser/monitor size. When in doubt, go vertical.
Both horizontal and vertical IGs come with their sizing considerations. Unless you already have a sizing restriction, a vertical IG should typically be within 800-1000 px wide, with the length variable based on the content. For horizontal IGs it’s just the opposite, the width is variable but the length should remain >800 px to display best on a 800×600 monitor.
Hierarchy will be your biggest and most important design principle to remember. Online readers want their information fast. What you want them to know most needs to stand out so they don’t have to think about your design and what to take away from the information. They want immediate gratification and should be able to quickly digest your data.
Here are two example of IGs I think are using hierarchy well and are quickly and easily readable, just like we want! (Click on the image to see the full IG.)
Follow all these steps and you’ll be on your way to IG design success!