The Internet is full of useless information, disguised in beautiful and pseudo-scientific visuals. Search for “infographics” on Pinterest and this becomes

Information visualization 101 – What you need to get started - Reaktor

The Internet is full of useless information, disguised in beautiful and pseudo-scientific visuals. Search for “<a href="https://www.pinterest.com/search/pins/?q=infographics&amp;term_meta%5B%5D=infographics%7Ctyped">infographics</a>” on Pinterest and this becomes very apparent. It’s kind of sad, because succeeding in information visualization is not that hard. You’ll just need to keep a few things in mind. This article is a quick beginners primer to get started with the art of meaningful information design.

Cosmetic decoration, which frequently distorts the data, will never salvage an underlying lack of content. — Edward Tufte

Your message needs to be relevant for the user or target group. Otherwise your commucation is wasted. So before you fire up Illustrator, devote some time answer these five questions:

What are the real goals of the communication?

What is the core insight you’re communicating

Why is your insight relevant to the target person or group?

Where, when and how the communication occurs?

Good design is a lot like clear thinking made visual. — Edward Tufte

Bar chart is a stronger tool for comparison than pie chart. Our brains are more suited for comparing lenghts than areas.

Choose the tools and level of visuality to suit the context. If you want to provide accurate information, don’t push too much visual eye candy. If you’re designing an engaging ad, you’ll probably need some kick-ass graphics.

If you want to communicate, think of your visualizations not as art, but as tools for understanding. — Alberto Cairo

<img decoding="async" loading="lazy" src="https://www.reaktor.com/wp-content/uploads/2016/02/charts1.png" alt="charts1" width="896" height="183"><a href="http://en.wikipedia.org/wiki/Bar_chart" rel="nofollow" data-href="http://en.wikipedia.org/wiki/Bar_chart">Bar chart</a>,&nbsp;<a href="http://en.wikipedia.org/wiki/Histogram" rel="nofollow" data-href="http://en.wikipedia.org/wiki/Histogram">Histogram</a>,&nbsp;<a href="http://en.wikipedia.org/wiki/Line_chart" rel="nofollow" data-href="http://en.wikipedia.org/wiki/Line_chart">Line chart</a>

<img decoding="async" loading="lazy" src="https://www.reaktor.com/wp-content/uploads/2016/02/charts2.png" alt="charts2" width="896" height="184"><a href="http://en.wikipedia.org/wiki/Graph_of_a_function" rel="nofollow" data-href="http://en.wikipedia.org/wiki/Graph_of_a_function">Function graph</a>,&nbsp;<a href="http://en.wikipedia.org/wiki/Area_chart" rel="nofollow" data-href="http://en.wikipedia.org/wiki/Area_chart">Area chart</a>,&nbsp;<a href="http://en.wikipedia.org/wiki/Scatter_plot" rel="nofollow" data-href="http://en.wikipedia.org/wiki/Scatter_plot">Scatter plot</a>

<img decoding="async" loading="lazy" src="https://www.reaktor.com/wp-content/uploads/2016/02/charts3.png" alt="charts3" width="896" height="183"><a href="http://en.wikipedia.org/wiki/Bubble_chart" rel="nofollow" data-href="http://en.wikipedia.org/wiki/Bubble_chart">Bubble chart</a>,&nbsp;<a href="http://en.wikipedia.org/wiki/Cartogram" rel="nofollow" data-href="http://en.wikipedia.org/wiki/Cartogram">Cartogram</a>,&nbsp;<a href="http://en.wikipedia.org/wiki/Flowchart" rel="nofollow" data-href="http://en.wikipedia.org/wiki/Flowchart">Flow chart</a>

<img decoding="async" loading="lazy" src="https://www.reaktor.com/wp-content/uploads/2016/02/charts4.png" alt="charts4" width="894" height="183"><a href="http://en.wikipedia.org/wiki/Venn_diagram" rel="nofollow" data-href="http://en.wikipedia.org/wiki/Venn_diagram">Venn diagram</a>,&nbsp;<a href="http://en.wikipedia.org/wiki/Pie_chart" rel="nofollow" data-href="http://en.wikipedia.org/wiki/Pie_chart">Pie chart</a>,&nbsp;<a href="https://en.wikipedia.org/wiki/Radar_chart" rel="nofollow" data-href="https://en.wikipedia.org/wiki/Radar_chart">Radar chart</a>

Gestalt psychology holds a set of descriptive principles about how we visually perceive objects. These principles are in action in nearly everything we do graphically as designers.

Similarity: Elements that share similar characteristics are perceived as more related than elements that don’t share those characteristics.

Proximity: Objects that are closer together are perceived as more related than objects that are further apart.

Connectedness: Elements that are visually connected are perceived as more related than elements with no connection.

Continuity: Elements arranged on a line or curve are perceived as more related than elements not on the line or curve.

Closure: When looking at a complex arrangement of individual elements, humans tend to first look for a single, recognizable pattern.

Common fate: Elements that move in the same direction are perceived as more related than elements that are stationary or that move in different directions.

Symmetry: People tend to perceive objects as symmetrical shapes that form around their center.

Good shape: People will perceive and interpret ambiguous or complex images as the simplest form(s) possible.

Decide what, why and to whom you want to communicate

Learn what went wrong with failed visualizations

Study the basics of visual design: composition, typography and color

Remember the principles of Gestalt psychology

Don’t use graphic design for pointless eye candy

One or two different fonts are usually enough

Guardian:&nbsp;<a href="http://www.theguardian.com/news/datablog/gallery/2013/aug/01/16-useless-infographics" rel="nofollow" data-href="http://www.theguardian.com/news/datablog/gallery/2013/aug/01/16-useless-infographics">16 useless infographics</a>

Business Insider:&nbsp;<a href="http://www.businessinsider.com/infographics-must-die-2013-6" rel="nofollow" data-href="http://www.businessinsider.com/infographics-must-die-2013-6">11 Reasons Infographics Are Poison</a>

Information Aesthetics:&nbsp;<a href="http://infosthetics.com/archives/2009/12/most_ugly_useless_infographic_the_winners.html" rel="nofollow" data-href="http://infosthetics.com/archives/2009/12/most_ugly_useless_infographic_the_winners.html">Most Ugly &amp; Useless Infographic Winners</a>

7 Rules for Creating Gorgeous UI:&nbsp;<a href="https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda" data-href="https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda">Part 1</a>,&nbsp;<a href="https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-2-430de537ba96" data-href="https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-2-430de537ba96">Part 2</a>

Steven Bradley:&nbsp;<a title="Read 'Design Principles: Visual Perception And The Principles Of Gestalt'" href="http://www.smashingmagazine.com/2014/03/design-principles-visual-perception-and-the-principles-of-gestalt/" rel="bookmark nofollow nofollow" data-href="http://www.smashingmagazine.com/2014/03/design-principles-visual-perception-and-the-principles-of-gestalt/">Design Principles: Visual Perception And The Principles Of Gestalt</a>

Colin Ware:&nbsp;<a href="http://www.slideshare.net/elsavonlicy/visual-thinking-colinwarelectures20134patterns-29446091" rel="nofollow" data-href="http://www.slideshare.net/elsavonlicy/visual-thinking-colinwarelectures20134patterns-29446091">Representing Data using Static and Moving Patterns</a>

Visyal.ly:&nbsp;<a href="http://visual.ly/users/accurat?tab=submitted" rel="nofollow" data-href="http://visual.ly/users/accurat?tab=submitted">Works of Accurat</a>

Transport for London:&nbsp;<a href="https://londonist.com/2016/05/the-history-of-the-tube-map" rel="nofollow" data-href="http://homepage.ntlworld.com/clivebillson/tube/tube.html">A History of the London Tube Map</a>

Stephen Few:&nbsp;<a href="http://www.amazon.com/Information-Dashboard-Design-At-Glance/dp/1938377001" rel="nofollow" data-href="http://www.amazon.com/Information-Dashboard-Design-At-Glance/dp/1938377001">Why Most Dashboards Fail</a>

Stephen Few:&nbsp;<a href="http://www.amazon.com/gp/product/0970601972/" rel="nofollow" data-href="http://www.amazon.com/gp/product/0970601972/">Show Me the Numbers</a>

Wikipedia:&nbsp;<a href="http://en.wikipedia.org/wiki/Gestalt_psychology" rel="nofollow" data-href="http://en.wikipedia.org/wiki/Gestalt_psychology">Gestalt psychology</a>

Graphic design basics:&nbsp;<a href="http://en.wikipedia.org/wiki/Composition_%28visual_arts%29" rel="nofollow" data-href="http://en.wikipedia.org/wiki/Composition_%28visual_arts%29">composition</a>,&nbsp;<a href="http://en.wikipedia.org/wiki/Typography" rel="nofollow" data-href="http://en.wikipedia.org/wiki/Typography">typography</a>&nbsp;ja&nbsp;<a href="http://en.wikipedia.org/wiki/Color_theory" rel="nofollow" data-href="http://en.wikipedia.org/wiki/Color_theory">color theory</a>

Alberto Cairo:&nbsp;<a href="http://www.thefunctionalart.com/" rel="nofollow" data-href="http://www.thefunctionalart.com/">The Functional Art</a>

Nicholas Felton:&nbsp;<a href="http://feltron.tumblr.com/" rel="nofollow" data-href="http://feltron.tumblr.com/">Feltron</a>

<a href="http://www.densitydesign.org/blog/" rel="nofollow" data-href="http://www.densitydesign.org/blog/">Density Design</a>

Nathan Yau:&nbsp;<a href="http://flowingdata.com/" rel="nofollow" data-href="http://flowingdata.com/">Flowing Data</a>

Hilary Sargent:&nbsp;<a href="http://chartgirl.com/" rel="nofollow" data-href="http://chartgirl.com/">ChartGirl</a>

Kaiser Fung:&nbsp;<a href="http://junkcharts.typepad.com/junk_charts/" rel="nofollow" data-href="http://junkcharts.typepad.com/junk_charts/">Junk Charts</a>

Edward Tufte:&nbsp;<a href="http://www.amazon.com/Envisioning-Information-Edward-R-Tufte/dp/0961392118" rel="nofollow" data-href="http://www.amazon.com/Envisioning-Information-Edward-R-Tufte/dp/0961392118">Envisioning Information</a>

Edward Tufte:&nbsp;<a href="http://www.amazon.com/The-Visual-Display-Quantitative-Information/dp/0961392142" rel="nofollow" data-href="http://www.amazon.com/The-Visual-Display-Quantitative-Information/dp/0961392142">The Visual Display of Quantitative Information</a>

Colin Ware:&nbsp;<a href="http://www.amazon.com/Visual-Thinking-Kaufmann-Interactive-Technologies/dp/0123708966/" rel="nofollow" data-href="http://www.amazon.com/Visual-Thinking-Kaufmann-Interactive-Technologies/dp/0123708966/">Visual Thinking for Design</a>

Jacques Bertin:&nbsp;<a href="http://www.amazon.com/Semiology-Graphics-Diagrams-Networks-Maps/dp/1589482611" rel="nofollow" data-href="http://www.amazon.com/Semiology-Graphics-Diagrams-Networks-Maps/dp/1589482611">Semiology of Graphics</a>

Alberto Cairo:&nbsp;<a href="http://www.amazon.com/gp/product/0321834739/" rel="nofollow" data-href="http://www.amazon.com/gp/product/0321834739/">The Functional Art</a>

Stephen Few:&nbsp;<a href="http://www.amazon.com/Information-Dashboard-Design-At-Glance/dp/1938377001/ref=pd_sim_b_1?ie=UTF8&amp;refRID=1N9A6H83FVD6DK4NF4PD" rel="nofollow" data-href="http://www.amazon.com/Information-Dashboard-Design-At-Glance/dp/1938377001/ref=pd_sim_b_1?ie=UTF8&amp;refRID=1N9A6H83FVD6DK4NF4PD">Information Dashboard Design</a>

John Maeda:&nbsp;<a href="http://www.amazon.com/Laws-Simplicity-Design-Technology-Business/dp/0262134721" rel="nofollow" data-href="http://www.amazon.com/Laws-Simplicity-Design-Technology-Business/dp/0262134721">The Laws of Simplicity</a>

Don Norman:&nbsp;<a href="http://www.amazon.com/Design-Everyday-Things-Revised-Expanded/dp/0465050654" rel="nofollow" data-href="http://www.amazon.com/Design-Everyday-Things-Revised-Expanded/dp/0465050654">The Design of Everyday Things</a>

<a href="https://www.apple.com/mac/keynote/" rel="nofollow" data-href="https://www.apple.com/mac/keynote/">Keynote</a>

<a href="http://www.adobe.com/fi/products/illustrator.html" rel="nofollow" data-href="http://www.adobe.com/fi/products/illustrator.html">Illustrator</a>

<a href="http://bohemiancoding.com/sketch/" rel="nofollow" data-href="http://bohemiancoding.com/sketch/">Sketch</a>

<a href="https://www.nodebox.net/" rel="nofollow" data-href="https://www.nodebox.net/">Nodebox</a>

Thank you for your ideas: Hannu Oksa, Johan Himberg, Esa Hallanoro, Mathias Lindholm, Mikko Romppainen, Tuomas Husu, Oskar Ojala and Karri-Pekka Laakso.