Download - Infographics design
Infographics Design
Best Practice Approaches
Infographics Design
The Content > Formalities of Codifications
The Grid > The Style of the Space
The Typography > The Style of the Form
1
2
3
Infographics Design
The Content > Formalities of Codifications
Examples > ask and find out:
What is the objective of the information? Boil down the facts. What is need to know/nice to know?
What are the codifications of referencesAlways state the source of your information. I could be displayed in small text next to your infographics design.
Can people understand your graphics? Test if people can read and understand your graphics.
1
1 · a
1 · b
1 · c
Infographics Design
The Grid > The Style of the Space
Examples > ask and find out:
How to make a well defined layout grid?
What is the best information structure?
2
2 · a
2 · b
Infographics Design
The Grid > The Style of the Space
How to make a well defined layout grid?
2
2 · b
FromSketch
To Grid
Picture Source: http://www.planetdamage.com/2012/07/30/infographics-how-to-markets-tablets-and-whatnot-tablet2cases/
Infographics Design
The Grid > The Style of the Space
What is the best information structure?
Picture Source: http://www.edwardtufte.com/bboard/q-and-a?topic_id=1
2
2 · b
Edward Tufte
is a famousexpert in
informationDesign
(see link)
Infographics Design
The Grid > The Style of the Space
What is the best information structure?
Picture Source: http://www.smashingmagazine.com/2009/09/11/25-useful-data-visualization-and-infographics-resources/
2
2 · b
Small
Infographics Design
The Grid > The Style of the Space
What is the best information structure?
Picture Source: http://www.smashingmagazine.com/2009/09/11/25-useful-data-visualization-and-infographics-resources/
2
2 · b
Big
Infographics Design
The Grid > The Style of the Space
What is the best information structure?
Picture Source: http://www.smashingmagazine.com/2009/09/11/25-useful-data-visualization-and-infographics-resources/
2
2 · b
With a twist
Infographics Design
The Grid > The Style of the Space
What is the best information structure?
Picture Source: http://www.behance.net/gallery/Drunk-Driving-Infographic/361689
2
2 · b
Simple and elegant
Infographics Design
The Grid > The Style of the Space
What is the best information structure?
Picture Source: http://www.behance.net/gallery/Drunk-Driving-Infographic/361689
2
2 · b
Simple and elegant
Infographics Design
The Grid > The Style of the Space
What is the best information structure?
Picture Source: http://www.behance.net/gallery/Fedora/88934
2
2 · b
Applied to the graphic
design of the media
Infographics Design
The Grid > The Style of the Space
What is the best information structure?
Picture Source:http://vi.sualize.us/annual_2007_catapult_design_typography_grid_annual_report_picture_xirT.html
2
2 · c
Let magazinesinspire you
A bit riskywith blackbackdrop,
But for some info
pages it adds a
break to the flow of
the text.
Infographics Design
The Typography > The Style of the Form
Examples > ask and find out:
Benefits of serif fonts vs. non serif fonts?
The variation of the font family?
The connotation of the font?
3
3 · a
3 · b
3 · c
Infographics Design
The Typography > The Style of the Form
Benefits of serif fonts vs. non serif fonts?
3
3 · a
Picture Source: http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/
Infographics Design
The Typography > The Style of the Form
The variation of the font family?
3
3 · b
Picture Source: http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/
Infographics Design
The Typography > The Style of the Form
The connotation of the font?
3
3 · c
Picture Source: http://blog.typekit.com/category/new-fonts/page/3/ & http://typographica.org/typeface-reviews/expo-serif/
Infographics Design
Typography
Grid
Content
Infographics Design
Good Resources
Kim Pedersen & Anders Kidmose (1993): In Black and White. An r&d Report on Typography and Legibility.The Graphic College of Denmark.(A publication in both Danish and English. Orig.: Sort på hvidt. En udviklingsrapport om typografi og læselighed. Den Grafiske Højskole 1993)
Hartmut Stöckl (2005):“Typography: body and dress of a text – a signing mode between language and image.” In Visual Communication 4, 2005.
Edward Tufte (2001):The Visual Display of Quantitative Information.Graphics Press USA. 2nd edition.
Robert Bringhurst (2008 ed.)The Elements of Typographic Style.Hartley & Marks Publishers.
David McCandless (2010):Information is beautiful.Collins.
Links:
http://www.smashingmagazine.com/2009/09/11/25-useful-data-visualization-and-infographics-resources/
http://www.digitalartsonline.co.uk/tutorials/adobe-illustrator/create-cool-infographics/
And for web:
http://www.smashingmagazine.com/2010/02/09/applying-mathematics-to-web-design/
http://webtypography.net/
http://fontdeck.com/