A semi-academic and practical approach to the planning and design of infographics. A lecture for the multimedia programme at EASJ / ZIBAT Campus Slagelse. http://easj.dk/?p=1142 Enjoy :-)

1. Infographics Design
Best Practice Approaches

2. Infographics Design
1 The Content > Formalities of Codifications
2 The Grid > The Style of the Space
3 The Typography > The Style of the Form

3. Infographics Design
1 The Content > Formalities of Codifications
Examples > ask and find out:
1 · a What is the objective of the information?
Boil down the facts. What is need to know/nice to know?
1 · b What are the codifications of references
Always state the source of your information. I could be displayed in
small text next to your infographics design.
1 · c Can people understand your graphics?
Test if people can read and understand your graphics.

4. Infographics Design
2 The Grid > The Style of the Space
Examples > ask and find out:
2 · a How to make a well defined layout grid?
2 · b What is the best information structure?

5. Infographics Design
2 The Grid > The Style of the Space
2 · b How to make a well defined layout grid?
From
Sketch
To Grid
Picture Source: http://www.planetdamage.com/2012/07/30/infographics-how-to-markets-tablets-and-whatnot-tablet2cases/

6. Infographics Design
2 The Grid > The Style of the Space
2 · b What is the best information structure?
Edward
Tufte
is a famous
expert in
information
Design
(see link)
Picture Source: http://www.edwardtufte.com/bboard/q-and-a?topic_id=1

7. Infographics Design
2 The Grid > The Style of the Space
2 · b What is the best information structure?
Small
Picture Source: http://www.smashingmagazine.com/2009/09/11/25-useful-data-visualization-and-infographics-resources/

8. Infographics Design
2 The Grid > The Style of the Space
2 · b What is the best information structure?
Big
Picture Source: http://www.smashingmagazine.com/2009/09/11/25-useful-data-visualization-and-infographics-resources/

9. Infographics Design
2 The Grid > The Style of the Space
2 · b What is the best information structure?
With a twist
Picture Source: http://www.smashingmagazine.com/2009/09/11/25-useful-data-visualization-and-infographics-resources/

10. Infographics Design
2 The Grid > The Style of the Space
2 · b What is the best information structure?
Simple and
elegant
Picture Source: http://www.behance.net/gallery/Drunk-Driving-Infographic/361689

11. Infographics Design
2 The Grid > The Style of the Space
2 · b What is the best information structure?
Simple and
elegant
Picture Source: http://www.behance.net/gallery/Drunk-Driving-Infographic/361689

12. Infographics Design
2 The Grid > The Style of the Space
2 · b What is the best information structure?
Applied to
the graphic
design of
the media
Picture Source: http://www.behance.net/gallery/Fedora/88934

13. Infographics Design
2 The Grid > The Style of the Space
2 · c What is the best information structure?
Let
magazines
inspire you
A bit risky
with black
backdrop,
But for
some info
pages it
adds a
break to
the flow of
the text.
Picture Source:
http://vi.sualize.us/annual_2007_catapult_design_typography_grid_annual_report_picture_xirT.html

14. Infographics Design
3 The Typography > The Style of the Form
Examples > ask and find out:
3 · a Benefits of serif fonts vs. non serif fonts?
3 · b The variation of the font family?
3 · c The connotation of the font?

15. Infographics Design
3 The Typography > The Style of the Form
3 · a Benefits of serif fonts vs. non serif fonts?
Picture Source: http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/

16. Infographics Design
3 The Typography > The Style of the Form
3 · b The variation of the font family?
Picture Source: http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/

17. Infographics Design
3 The Typography > The Style of the Form
3 · c The connotation of the font?
Picture Source: http://blog.typekit.com/category/new-fonts/page/3/
& http://typographica.org/typeface-reviews/expo-serif/

18. Infographics Design
Content
Grid
Typography

19. Infographics Design
Good Resources
Kim Pedersen & Anders Kidmose (1993): David McCandless (2010):
In Black and White. Information is beautiful.
An r&d Report on Typography and Legibility. Collins.
The Graphic College of Denmark.
(A publication in both Danish and English. Orig.: Sort
på hvidt. En udviklingsrapport om typografi og læselighed. Links:
Den Grafiske Højskole 1993)
http://www.smashingmagazine.com/2009/09/11/25-
Hartmut Stöckl (2005): useful-data-visualization-and-infographics-
“Typography: body and dress of a text – a signing resources/
mode between language and image.” In Visual
Communication 4, 2005. http://www.digitalartsonline.co.uk/tutorials/adobe-
illustrator/create-cool-infographics/
Edward Tufte (2001):
The Visual Display of Quantitative Information.
Graphics Press USA. 2nd edition. And for web:
Robert Bringhurst (2008 ed.) http://www.smashingmagazine.com/2010/02/09/apply
The Elements of Typographic Style. ing-mathematics-to-web-design/
Hartley & Marks Publishers.
http://webtypography.net/
http://fontdeck.com/