Infographics for the web

This post is a little summary from my favourite pieces from the article 44 Useful infographics for web designers.  I chose the works featured below mostly because of visuals, but also for the way they handled the presentation of the information.  There are several examples in here I will definitely be taking guidelines from.

The Science of Colour by Paper Leaf, 2010

This is a small snippet of a much longer info-graphic, which uses lovely shading and a mix of slab serif fonts to create visuals that have a good depth and make for a read that is easy for the eyes.  The colour wheel has been seen time and time again but the way the artist has rendered the wheel gives is a fresh appeal.  Here the background has been kept neutral so that the colours can take precedence and there is no distraction.

 The type is stylish and not too restrained, with slab serif in the titling making it very legible on screen.  The type combines with the illustration to create a piece that is informative but doesn't feel "instructional".  Furthermore, the copy is worded in a way that encourages the reader, assumed to be a designer, to think about how the information can be applied to their own work - e.g "Use warm colours in your designs…" - which adds to the friendly, helpful overall tone of the info-graphic.  This is the kind of approach I am aiming for, as much of my work will feature brain science which reads like jargon to many people.

Why You Should Care About Typography by Noodlor, 2011

The vintage look of this info-graphic by Noodlor is very much a stylistic choice, but the combination of a muted palette and  a little vignette around the edges created a backdrop for a real mix of type and letters.  The vignette on this really adds to the look and makes sure that the muted colours don't get lost on the screen, as well as giving a little hint of skeumorphism which I do really like.  Had the designer used more colours or in a brighter palette, the eye would struggle to take all of this type-related info in.
  


Notice that titbits of information are usually framed in boxes, which guides the eye to certain points and anchors each section on the page.  This is helpful as in places some of the information seems a little random or unrelated to the rest of the content on the page.

Design of the Times: 2014 Web Design Trends by Unknown, 2014

I love the diagrams in here - quite similar to what I have been working on myself in terms of the basic shapes used on a circle.  The mix of neutral shades and very bright orange work together to give the information pops of colour, without being too much on the eye.  Strong colours on screen can often "vibrate" but the brightness of the oranges has been kept on the lower side to avoid this, instead using the background to contrast.  The dotted-line graphs are something I have never seen before and they are a fresh way to present the traditional pie chart as well as accentuating the image within the circle - clever!   The information around the charts could be arranged in a way that is a little more consistent as it is very left-heavy at the moment - I might have kept the diagrams in separate sections of the info graphic.



This semi-projected view makes it a lot easier, and more interesting, for the reader to understand the layout.  By literally breaking it down, the individual elements of the page and what they do can be better processed by the reader.  There is also potential here for more arrows with extra information, as my work will be.  I might alter the brain and body illustrations in this way and see how it works out.

Diagrams such as the one below show the app being used "in context", which helps the reader imagine themselves using it.

Flat vs Realism by intact Design, 2013

"Flat vs Realism" made the rounds in 2013, reflecting the two top trends of the year.  I chose it because I am still working in flat design but I have seen some lovely work that bridges the gap between the two, plus I love the way the subject matter is presented as characters as this makes the "story" so much more interesting. 

References

Paper Leaf, 2010.  The Art of Color Co-oridination [online] Available at: http://www.script-tutorials.com/infographic-the-science-of-color/
[Accessed 19th Feb 2015]

Noodlor, 2014.  A Quick & Comprehensive Type Guide [online] Available at:
http://www.fastcodesign.com/1664719/infographic-of-the-day-why-should-you-care-about-typography
[Accessed 19th Feb 2015]

Unknown, 2014. Design of the Times: 2014 Web Trends [online] Available at:
http://www.webjuicers.com/uncategorized/infographic-looks-at-web-design-trends/
[Accessed 19th Feb 2015]

inTacto Design, 2013.  Flat vs. Realism [online] Available at: http://www.flatvsrealism.com
[Accessed 19th Feb 2015]