Design
Color
Adobe Color CC
Adobe Color CC (formerly Adobe Kuler) is a great online tool for selecting colors and palettes.
Click and drag to select a new color palette based on the different options (drop down menu on left).
Upload an image to extract the colors.
Explore palettes that are already created.
Color codes
Hexadecimal codes are widely used on the web and can be used with virtually any design program. These are six-digit alpha-numeric codes that start with a hash symbol (e.g. #ffffff is white and #000000 is black).
RGB codes are also very widely used and can be used with most programs. These are three number values (red, green and blue) and are enclosed in parentheses and separated by commas: (255,255,255) is the code for white, (0,0,0) is the code for black.
CMYK is used primarily in printing and is similar to RGB but includes four values: cyan, magenta, yellow, and key (black).
There are many other color models out there to choose from, but these three are most common in creating graphics for the web or print.
Rule of three
Generally speaking, you don't want to use too many colors. With most graphics, three is a good number to shoot for. Keeping things simple is the reasoning behind the rule of three, so don't feel like you are never allowed to use more, just be aware that you should have a purpose for including more- don't just throw more color in because you don't know what else to do.
This rule also applies to fonts. If you use too many different font styles, your work will look messy.
Black and white printing and Color blindness
When you create a graphic that will be printed, consider what the colors will look like if they are printed in black and white or if the color printer isn't very good quality. Will your colors have enough contrast to stick out? If you use a B&W printer to print out a pie chart with red and black, the print will look like one big black circle.
Want to check your contrast? Use a tool like WebAim Contrast Checker to see if your color values have accessible contrast.
Data
Do your numbers add up?
If in a pie chart you have 20 percent of children who like hopscotch and 40 percent who like jump rope and 70 percent who like dodgeball...that doesn’t add up to 100. Make sure your data is accurate in your calculations.
Area and Shapes for Visualization
Example: We have a circle that represents population of squirrels in Sacramento compared to San Francisco. Let’s say there are 3 times as many squirrels in Sacramento compared to San Francisco. We could create an image with a stack of three squirrels to represent Sacramento and a single squirrel to represent San Francisco to show this difference.
What if we wanted to convey that the squirrel's habitat is 3 times larger in Sacramento? The stack of squirrels comparison doesn't quite work. Instead, we might make circles to represent habitat area.
To make our circles proportionate to the difference in land area, we will want to make sure that the area of the circle for the Sacramento is three times larger than the circle for San Francisco. We can't just make a circle with a diameter three times longer because that doesn't scale up correctly.
If you need to calculate shape areas you can use a tool like an area calculator.
Make sure you choose appropriate visualizations to match the information you are trying to share.
Cite your sources and find the original source
Citing sources helps your readers:
Find more information about your topic
Verify your data
See your infographic as a credible source and you as a credible author
Accessibility for Infographics as Images
There are a number of ways to share an infographic. If you are designing for use on the web and you post an image file type (.jpg, .png, etc. ), the text in your infographic won't be readable for screen readers. Make sure to provide alternative text, a transcript of the text linked with the image, or on the page itself as an image description.