Downton Abbey infographic

Informal infographic

Initially my idea was to focus on the scandals of Downtown throughout the series. However, there were just too many to include, so then I focused on just those concerning the family who lived above stairs. Even those were too numerous! I eventually chose to focus on the loves of the three Downtown daughters, Lady Mary, Lady Edith and Lady Sybil.

I wanted to make it interesting to people who hadn't followed the whole series, or to those like myself that had watched every episode but forgotten lots of the detail.

The infographic is sized for iPhone 5 and above, at 640px wide, as this kind of trivia is most often viewed on mobile devices while passing the time.

I researched colours used in the 1920s in interiors, and found the following image, along with the typefaces and glyphs (Nouvelle Vague Black,  Diehl Deco, Gill Sans and Nouveau Rocco Deco - glyphs).

The colours and imagery will reflect the era (from 1912-1925), embracing the Art Nouveau, but also the stately home feeling, but also incorporating a lot of typography and modern language. I used photographs as a useful reminder of the characters over the last 6 years.

All my information came from here: http://downtonabbey.wikia.com/wiki/Downton_Abbey_%28programme%29

My finished infographic:

Infographics - when not to use pie charts

Pie charts

Pie charts can make data really difficult to interpret, particularly when 2 sets of data need to be compared, when shown as a 3D pie, or when too many figures need to be shown.

This image below is a good example of when not to use pie charts. It needs a key, and is difficult to compare the data from both years.

http://io9.com/these-charts-will-make-you-want-to-throw-your-televisio-1741802688 (article) and original source http://variety.com/2015/tv/news/diversity-directors-tv-amc-fx-hbo-netflix-showtime-1201633122/

The data relates to the number of programs produced by each TV network over 2 years, and whether they were male or female, white or non-white.

Style and tone

Questions to answer before designing:

1 - What is the information trying to show? (factual)

Highlight the vast differences between men and women, white and non-white directors for the US TV networks.

2 - What is it trying to say? (emotive)

That these differences are wrong, there should be much more of a balance. It is trying to make people agree with the author's point of view and make them feel angry or appalled.

3 - Is there a hook?

I decided to use the heading "Racial and gender inequality in US TV networks". Words highlighting the emotive subject of gender and race will automatically draw attention.

4 - How else can you visualise the data?

I wanted to make the actual figures virtually unnecessary, and make it easier to compare the figures at a glance.

Choosing colours to represent white and non-white people is quite emotive in itself. I didn't want to choose white and black, as not everyone who is non-white is black. I thought about using grey for non-white, however this could infer that non-white people are grey/dull in personality, which I wanted to avoid. I therefore decided to use shades of grey for both categories. I wanted the inequality of both sex and ethnicity to be the defining feature of the infographic, so used flat bright colours with lots of contrast.

The typeface choice was easy - Helvetica. I selected this ubiquitous font as it did not want anything to distract from the shocking data.

I wanted to represent the data with icons, so created them in Illustrator with shape, shape builder and pathfinder.

I created the first set of icons with the height being mathematically proportional to the figures, by creating the icons and changing the height in pixels to the number of directors. When all were created, I then selected them all and scaled them to size as one, thus maintaining their proportions. 

When I began creating the next section, the absolute numbers were smaller. I could have used percentages, but that would have distorted the figures, making the small networks appears as it they had the same numbers of directors as the smaller ones, which I wanted to avoid. I therefore decided to represent the directors with an icon per director.

For the final section, I used area so used the square root of the number of directors, creating blocks for each one, before scaling them all together, to retain proportionality.

Final complete infographic is shown below.

Infographic design

I chose to design an infographic called sourcing sustainable fish. I researched the sort of information that is readily available online regarding this subject so I could decided which aspects to include.

I found links to various useful websites:

http://www.kensingtonfinefish.co.uk/guide-to-sustainable-fishing/

The Marine Stewardship Council
https://www.msc.org/cook-eat-enjoy/fish-to-eat

Infographic with relevant information on from Sainsbury's http://www.j-sainsbury.co.uk/media/784088/our_future_with_fish_infographic.jpg

Which supermarkets are best at supplying sustainable seafood: http://www.mcsuk.org/what_we_do/Fishing+for+our+future/Supermarket+survey/Supermarket+Seafood+Survey+-+full+story

Pocket Good Fish Guide http://www.mcsuk.org/downloads/fisheries/PocketGoodFishGuide_2015_high.pdf

Sales revenue of sustainable fish in the UK 2003-2013: http://www.statista.com/statistics/282514/sales-revenue-of-sustainable-fish-in-the-united-kingdom-uk-since-2003/

However, against the major driver of health, there are several reasons cited for not eating fish. Most commonly mentioned is price, with 33 per cent of UK adults in our survey saying that ‘concern over the rising price of fish’ had encouraged them to eat less fish in the past year, and 46 per cent saying that cost is a barrier to eating fish in general. Other significant barriers to eating fish are lack of recipe knowledge (34 per cent), lack of availability of fresh fish in local shops (28 per cent), lack of time to prepare from scratch (28 per cent), ‘not liking the smell it makes’ (24 per cent)1 and difficulties planning ahead for meals (17 per cent). - See more at: http://www.thefishsite.com/articles/1488/uk-fish-consumption-trends-and-predictions/#sthash.YVIYT8GJ.dpuf

However, against the major driver of health, there are several reasons cited for not eating fish. Most commonly mentioned is price, with 33 per cent of UK adults in our survey saying that ‘concern over the rising price of fish’ had encouraged them to eat less fish in the past year, and 46 per cent saying that cost is a barrier to eating fish in general. Other significant barriers to eating fish are lack of recipe knowledge (34 per cent), lack of availability of fresh fish in local shops (28 per cent), lack of time to prepare from scratch (28 per cent), ‘not liking the smell it makes’ (24 per cent)1 and difficulties planning ahead for meals (17 per cent). - See more at: http://www.thefishsite.com/articles/1488/uk-fish-consumption-trends-and-predictions/#sthash.YVIYT8GJ.dpuf

Statistics to use - factors impacting the amount of fish people eat (use for IG), and projected increase in fish consumption.
http://www.thefishsite.com/articles/1488/uk-fish-consumption-trends-and-predictions/


I decided the areas I wanted to include in my infographic would be:
Fish in danger and alternatives
Best supermarkets for selling sustainable fish
Increase in sales of sustainable fish
What stops people eating fish

Infographics styles

We were asked to consider how we would format 4 styles of infographic.
1 What to do when you wreck your car
2 The science of sleep
3 The internet of things
4 Sourcing sustainable fish

For each infographic, you need to consider the audience, the format, the purpose, any existing house style, tone of voice, colours, grid, image style, hierarchy, typography and colours. My artboards, below, were created in Illustrator and show colour swatches, typefaces for 3 levels of hierarchy, and the style of imagery to be used in a mini style guide format.

Infographics

Analysis

We were asked to review 5 infographics, in a variety of styles.Whist searching I found what is potentially a really useful tool from The Guardian:

http://www.theguardian.com/global-development-professionals-network/2014/aug/28/interactive-infographics-development-data

Example 1: The Guardian - The world's top 50 banks

This infographics (ROGERS 2007) represents a serious subject for a serious readership and is presented in a formal manner. It has a standard colour scheme across all colours, and a business like serif font (the same one the Guardian uses, I think). It includes source information (in very small print). No key is necessary and it is very easy to understand and compare the data, as the size of the circles relate to the amount, and countries are displayed in a single colour. The audience is the readers of The Guardian newspaper - I'm guessing they would be well educated and interested in a factual analysis. This infographic would look better in print as the writing is too small to read on an iMac, let alone on a tablet or phone. There is no hierachy involved as all the information is equally important, which makes the eye flit around looking for somewhere to settle, which is perhaps a weak point of the graphic.

Example 2 - The Guardian (Culture supplement) - Fact-checking the famous: Beyonce

This tongue-in-cheek infographic (Dee, 2013) contrasts in style with the previous example from The Guardian. This is aimed a less serious reader, or the same reader who expects something more light-hearted from The Guardian's culture supplement. No sources are referenced, because to be honest its unlikely that Beyonce has "the world's most powerful thighs'. There is a clear hierarchy in the information, with the dominant pink colour drawing your eye round the page with its repetition. The typefaces are straightforward sans serifs making it a very quick read. The simple doughnut graphic is the only formal element, even that is used to show trivia. It serves its purpose well though and would appeal mostly to teens or someone looking to fill a spread 30 seconds.

Example 3 - UK road sign

This infographics is a very straightforward road sign (Traffic road signs giving directions, ND). Signs like this are directed at the road driving public who would be very familiar with them. They are in standard colours, in the same standard typeface, Transport, that was introduced in the 1950s. It is large and easy to read from a distance with a large x-height. The pictograms representing airport and motorway would be recognisable to any driver from anywhere in the world. The graphic representing the roundabout is standard and straightforward. This is obviously a serious, if simple, infographic.

Example 4 - London's Literary Haunts

This piece of art shows the places that characters from famous novels visited (Dex, ND). It is a fun piece and is on display at The Literary London Art Collection. Presumably the more famous the character, the larger the type. The river Thames is clear to see. This is informal but eye-catching in black and white, with a variety of hand drawn typefaces and a few pictograms thrown in. I'm sure this piece is stunning in real life, but on screen it's a hard read.

Example 5 - Preserves

Preserves (Wildish, ND) is a lighthearted infographic representing the ingredients of various preserves (except The Jam!). It is straightforward and to the point, with different colours relevant to the colour of the ingredient they represent, and consistent in each jar. The typeface is a clear sans serif, which goes well with the informal and quite retro tone and subject matter. It is simple enough to be clearly legible on a smartphone. As Wildish is a graphic artist, it goes well with the other work in his portfolio and would suit many applications.

References

DEE, J (2013) Fact-checking the famous: Beyonce [online] The Guardian. Available from http://www.theguardian.com/culture/interactive/2013/feb/15/infomania-beyonce [Accessed 24 October 2015]
DEX (ND) [online] http://www.stipso.com/blog/2014/10/16/infographic-of-the-week-whats-killing-james-bond [Accessed 24 October 2015]
FERGIE'S DRIVER TRAINING (ND) Traffic road signs giving directions [online] Available from http://www.drivinginstructorm44.co.uk/learning-to-drive/learnig-to-drive/uk-road-signs/traffic-road-signs-giving-directions [Accessed 24 October 2015]
ROGERS, S (2007) The world's top 50 banks [online] The Guardian. Available from http://www.theguardian.com/news/datablog/2009/mar/25/banking-g20 [Accessed 24 October 2015]
WILDISH, S (ND) Preserves. Available from http://stephenwildish.co.uk [Accessed 24 October 2015]

Infographics for entertainment

Great British Bake Off

We were asked to produce an entertainment based infographic for The Great British Bake Off. After brainstorming the statistics available to include, I decided on:

Age, gender, occupation, average viewing figures and subsequent book deals.

I sourced my research as follows:

Age, gender and occupation:

https://en.wikipedia.org/wiki/The_Great_British_Bake_Off#Series_6_.282015.29
accessed on 09/10/15

Average viewing figures:
http://www.theguardian.com/media/2015/oct/08/the-great-british-bake-off-final-nadiya-jamir-hussain-gbbo (the Wiki ones were different)
accessed on 09/10/15

Book deals:
http://www.google.co.uk/url?sa=t&rct=j&q=&esrc=s&source=web&cd=7&ved=0CFAQFjAGahUKEwiW8ei6tLXIAhVBiw0KHWo6Ca4&url=http%3A%2F%2Fwww.lovefood.com%2Fguide%2Fchefs%2F17807%2Fgreat-british-bake-off-winners-where-are-they-now&usg=AFQjCNG6xVchC-0ZpIcU3ZZM7HXDP--tZw&sig2=pxXylYpkJNmKQiJ-kSMqgw
accessed on 09/10/15

I looked at other infographics about Bake Off, and particularly like this one:

The colours are very inkeeping with the series, and the imagery used fits well (bunting, tent, cakes!). It is not overloaded with information and contains factual information such as viewing figures, and more light-hearted stats like number of cup cakes.

Source:
http://infographicjournal.com/wp-content/uploads/2015/06/The-Great-British-Bake-Off-Infographic1.jpg accessed on 09/10/15

Considerations when creating an infographic are:
Audience
Format - screen, print, landscape, scolling?
Tone of voice
Colours
Grid
Image style - type, format
Charts, graphs
Hierarchy
Typography

We started out by drawing some roughs and thumbnails and getting feedback from our peers:

I compiled by figures into an Excel spreadsheet, and used it work working out average ages (I could have just used a calculator...). I then looked at the type of imagery I wanted to include.

The feedback I got from the group was:

Consider using a story book theme with a fairy tale script in a drop cap, keep it simple, use pastel colours.













I created all elements of the design in Illustrator, including the graph and cupcakes.

When scaling the cupcakes part of the infographic, I sized them in mm according to their viewing figures in millions, e.g. 12.3mm = 12.3 million. Then, providing they are all scaled together, their sizes are all mathematically proportional.

My final design is for A3 print. The idea was to represent the contestants' journey from prior to the series, to what happened beyond it. The cream line is the path, supposed to mimic butter cream icing piping. The outside pattern was created to look like a polka dot table cloth. I chose to put the elements inside a carrier bag, a mixing bowl, an Aga and a cake, designed to infer the journey of the cake, mimicking that of the contestant. The colours are ice-cream shades which I felt were appropriate for this informal infographic. I chose an informal hand drawn typeface for the titles, and Helvetica Neue for the rest. I think they complement each other well. Helvetica Neue works well at small sizes due to its large x-height.

In hindsight, I don't think the age graph fits very well with the rest of the design as a bar graph is too formal. A pie chart would have worked better - one for women's age ranges and one for men's.

Class feedback was as follows:
Make the path element more obvious by perhaps a reflected s-curve
Show numbers with proportions, professions could have been shown like this

Making sense of data for infographics

Basic techniques

We were tasked with extracting some figures from data.gov.uk and making sense of it visually.

I copied figures from the Dept for Education spend over the last 4 years, added them up in Excel, divided by 1,000,000 and then showed them based on how much it would cost one UK resident (divide by 65 million), over the last 4 years. The idea was to relate the data to something more meaningful. Initially I thought I might illustrate the costs in terms of where you could go on holiday with the same amount of money, but the costs of holidays seemed too variable. I decided to scale the £ sign in line with the amount as this makes an instant impact, allowing you to compare years easily. I have referenced the data source, and included graphics to enable the reader to view more detailed information.

The years on my graphs are shown in reverse order, so this should have been changed.

Following group feedback in class, I made the following changes to my infographic: