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



How to make a well defined layout grid?

What is the best information structure?

2

2 · a

2 · b

Infographics Design


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



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



Picture Source: http://www.smashingmagazine.com/2009/09/11/25-useful-data-visualization-and-infographics-resources/

2

2 · b

Small

Infographics Design




2

2 · b

Big

Infographics Design




2

2 · b

With a twist

Infographics Design



Picture Source: http://www.behance.net/gallery/Drunk-Driving-Infographic/361689

2

2 · b

Simple and elegant

Infographics Design



Picture Source: http://www.behance.net/gallery/Fedora/88934

2

2 · b

Applied to the graphic

design of the media

Infographics Design



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



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


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 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 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/

infographics design

Design

infographics design2

infographics design3

infographics design1

best information structure

space2 b

elegant picture source

twist picture source

big picture source