Tag Archives: infographics

Graphic notes from Jesse Pierpoint

Design elements

Entry by Yong Kim.

Simple, usable, create hierarchy, consistent

TYPE: font, size, styling, color, css
IMAGE: icon, headers, logos, background, elements, textures, buttons
MULTIMEDIA: Size, content, usable, relevant






To great graphics for news (like an infographic map)
Create a vector image: anything made in Adobe Illustrator. Vector images’ qualities do not decrease when resized. Creating or finding a JPG does not work.


Comments Off on Graphic notes from Jesse Pierpoint

Filed under Uncategorized

Brief introduction to graphics

posted by Yong Kim

Graphics is just a way to present information visually. On the Web, this refers to photos, display type, flags, illustrations, icons, navigation buttons and bars. Almost anything on your site that’s more complex than HTML text and headlines can be considered graphics.

Information graphics (or infographics) – use this when some information is better digested visually than through text.  It is the ultimate “show, don’t tell.”
Examples: USA TODAY interactive graphics, Gallup
Types of information graphics:
Chart or graph (bar chart/bar graph; column chart/column graph; line chart/fever chart; pie chart or pie graph; time chart or timeline), Table or list, Diagram, map, graphic package.
  • Remember, the goal of every news graphic is to present information with clarity, simplicity and accuracy. Avoid overloading and overly clever graphics
Avoid data distortion: (example 1, example 2)
Inconsistent units of measurement, generally start at a zero baseline
Compiling and editing graphic data
1. Collect data carefully
2. Edit carefully
3. Convert to understandable values (avoid metric system in the U.S.)
4. Simplify – avoid clutter and present points tightly
5. Keep it simple – intimidating graphics will prevent readers from reading it. Don’t cram or overwork your graphic.
6. Keep it accurate – Don’t just use statistics from Joe shmo
7. Label it clearly
8. Dress it up – proceed with caution (USA TODAY example) (NY Times example )
Don’t forget to label, source and give credit.
Tutorials using Adobe programs

1 Comment

Filed under Web graphics