Your Brief Here... tombryant.gdnm.org
1. Field of study // My field of study will be the London 2012 Olympics. I will be looking more spicifically into some of the statistics/data. 2. Design Problem/Question // My brief is to create an informative piece of infographics to inform people on what is going on in their capaital relating to the olympic games and also information about the tickets for each event, most popular events and so forth. I think that the people of Britain would find the information interesting and it would give them more of an insight into the main points of data mentioned above. It must be visually interesting, sometimes statistics are visual not attractive so people won’t bother to red about them, despite the fact the information inside maybe of value to them or just simply an intersting read. 3. Context // The project focuses on data communication for the public with the use of modern graphics and new media. People should be aware of these statistics as this is a major event in the countries history. 4. Rationale // The project is important to me as someone who is a resident in the UK and somenoe who has an interest in some of the sports in the Olympics, athletics, cycling and weightlifting, not to mention a respect for all the other games. Not only this but I want to see our countries athletes do well and represent Britain. The fact that it is on home soil also means the event as a whole needs to impress and satisfy the rest of the world. 5. Methods // I will need to research into the Olympics, the games themselves and research to find my data. It is also worth lookng at and analysing existing examples of infographics for inspiration. 6. Skills Evidence // I will be using research skills to find my evidence and data that I will use to analyse. Idea generation is also another factor, this will come into play once I have conducted some research into the subject area. Other skills will be in developing my ideas using new media tools. 7. Predicted Resolutions // This will be some sort of information leaflet or poster that people can use. An idea that is created and development though research and my own personal creative visual process of how I feel the artefact will look. I will need to ask myself questions through development, such as is it visual attractive? Does it draw your attention and make you want to read into it? Is the information easily understood and digested.
Reverse Engineering Reverse engineering is analysing the structure, function and operation of a human made device, object or system. It often involves taking something (e.g., a mechanical device, electronic component, or software program) apart and analyzing how it works in detail. The purpose’s are, to be used in maintenance, or to try to make a new device or program that does the same thing without using or duplicating (without understanding) any part of the original design. Initial Ideas? Images made up of type. Edits of own photographs. Billboards or posters with miss spelt words. Survey of how many people notice as an experiment. Showing data. Possibly in a typographic form. Ludic or Abstract way. World energy or other energy data shown as a map. IDEA Web Browsers? What are the most common browsers? What are the most common operating systems? What are the most common screen resolutions and color depths? Browsers Internet Explorer: Microsoft’s Internet Explorer (IE) is one of the most popular browsers today. IE was introduced in 1995 and passed Netscape in popularity in 1998. Firefox: Firefox is a browser from Mozilla. It was released in 2004 and is one of the most popular browsers today. Netscape: Netscape was the first commercial Internet browser. Netscape was introduced in 1994, but gradually lost its popularity to Internet Explorer. The development of Netscape officially ended in February 2008. Mozilla: The Mozilla Project has grown from the ashes of Netscape. Browsers based on Mozilla code are the largest browserfamily on the Internet today. Opera: Opera is a fast, small, and standards-compliant web browser. Opera is the preferred browser for a number of small devices like mobile phones and hand-held computers. Google Chrome: Google Chrome is a free, open-source web browser developed by Google. It was released in 2008. Apple Safari: Safari is the default browser for Mac systems. Safari is known for its sleek design.
1
Your Brief Here... tombryant.gdnm.org
Research Higher Education “We see that lower teaching scores seem to correlate with higher drop out rates. In the chart below, we see how teaching scores relate to the expenditure per student and the student staff ratio, and how expenditure per student and student staff ratio relate to each other”. (gaurdian.co.uk, 22 March 2010)
The Government has released an enormous amount of data. It’s the latest in a series of major data publications by the government, which came into power determined to unleash a “tsunami of data”. So far, publications have included the enormous Treasury database, COINS; salaries of senior civil servants; staff numbers and the detailed organisational structure of each department. The data itself covers over 194,000 individual transactions, payments to suppliers and bills covered by government departments in the first five months of the life of the Coalition. There’s lots not included though: the NHS, benefit payments, spending by quangos, information removed for “national security” and personally confidential reports. It’s about £80bn of an annual spend of £670bn.
2
Your Brief Here... tombryant.gdnm.org
3
Type “Web-Safe” Fonts for a website. There are basically two types of fonts, serif and sans serif. Serif fonts have fine cross-lines at the ends of the letter. Sans serif (“sans” is French for “without”) are fonts that don’t have serifs. The most common serif font is probably Times New Roman. Arial is an example of a common sans serif font. Arial It is probably the most common sans serif font. It is the default font for Windows, and it first shipped as a standard font with Windows 3.1. Readability On Screen: Not the worse but definetely not the best, especially at small sizes, when it becomes too narrow and the spacing between characters too small. Character: Has a streamlined, modern look but is also plain and boring. For Mac users, the equivalent of Arial is Helvetica. Times New Roman Availability: Thoroughly available. It is probably the most common serif font. It is the default font for web browsers. It was first shipped as a standard font with Windows 3.1. Readability On Screen: Acceptable for font sizes of 12pt. and up, but terrible for smaller sizes. Character: Serious, formal and old fashioned. For Mac users, the equivalent of Times New Roman is Times. Verdana Availability: A widely available sans serif font, Verdana was first shipped with Internet Explorer version 3, when the of the Internet demanded a new font that was easy to read on the screen. Readability On Screen: Exceptional. It’s wide body makes it the clearest font for on-screen reading, even at small sizes. Character: Modern, friendly and professional. Georgia Avaliability: Good. It is a serif font introduced by Microsoft with Internet Explorer version 4, when the need for a serif font with much better readability than Times New Roman was required. Readibility On Screen: Very good. It is the best serif font for on-line reading, since it was specifically designed for that purpose. Character: Modern, friendly and professional.
Applying Mathematics to Web Design The Golden Ratio “The golden ratio, also known as the divine proportion, is an irrational mathematical constant with a value of approximately 1.618033987. If the ratio of the sum of the quantities to the larger quantity is equal to the ratio of the larger quantity to the smaller one, then the quantities are said to have a golden ratio.” The construction of a golden rectangle is very easy and straightforward. First, construct a simple square. Then draw a line from the midpoint of one side of the square to an opposite corner and use that line as the radius to draw an arc that defines the height of the rectangle. Finally, complete the golden rectangle and you are done.
I then began researching Google Web Fonts and WordPress Themes. I found some interesting fonts from Google. The research into WordPress themes was done to analyse different web page layouts and grids. Some examples of my findings from these two areas of research are below.
4
Your Brief Here... tombryant.gdnm.org
Analysing and deconstructing three news websites I am looking at www.guardian.co.uk www.bbc.co.uk/news news.google.co.uk The Guardian (Image group 1) Guardian Egyptian 2004-2005. Commissioned by Mark Porter at The Guardian. Designed with Paul Barnes. Available for licensing from Commercial Type. The Egyptian type became more suitable to The Guardian’s new look. The extreme range of weights gave the designers some interesting problems to solve, like how to keep the serifs in the .Hairline weight.’ Through further development they realised that the answer was to taper them ever so slightly. They had to make the Black as heavy and tight as possible without ‘ruining its legibility’. The solution for this was to draw a ‘separate Condensed Ultra, with true slab serifs and stiffer curves on the bowls.’ Hairline, Thin, Light, Regular, Medium, Semibold, Bold, and Black weights, with italics. Guardian Sans (Image group 2) 2004-2005. Commissioned by Mark Porter at The Guardian. Designed with Paul Barnes. From the start of creating the new font, designing a new sans serif for The Guardian ‘felt like a losing proposition.’ The Guardian had become known and associated with Helvetica. However once the Egyptian font had emerged as the primary display face, the designer had more freedom to draw the Sans as a ‘backup face.’ They believe that it is really effective in this role. It is clearly made out of the same parts as the Egyptian, so it sits nicely with it, but at the same time it is not too dramatic. “If they do end up using it for most of the magazine headlines, as we discussed at one point, I think it will do a good job of maintaining the same look while being noticeably different.” Hairline, Thin, Light, Regular, Medium, Semibold, Bold, and Black weights, with italics. Guardian Agate Sans (Image group 3) 2004-2005. Commissioned by Mark Porter at The Guardian. Designed with Paul Barnes.
Image group 2
Image group 1
Image group 3
Your Brief Here... tombryant.gdnm.org
Continuing to analyse and deconstruct my three websites. Using Adobe Photoshop I used the ‘rulers’ to divide the segments of each website to better understand the grid and structure that make them up. Then I had the idea of ‘merging’ the three websites together to create a hybrid style website. To develop the idea even further you could use the font fromt the Gaurdian website and use it on the BBC News site with perhaps some elements from Google News.
5
Your Brief Here... tombryant.gdnm.org
Research Looking at type in Magazines, not just on the web. Also the layout and grid used in magazines will be useful to the project development. Whilst continueing with my research I had another idea which I would have liked to explore further as a possible outcome for a concept. The idea was to look at the amount of calories, protein, carbohydrates etc there are in a certain type of food and do a comparsion. From this comparison and analysis create an interesting visual of the data in some sort of graph form. Possibly using type? Looking at the book Visual Research: An Introduction to Research Methodologies in Graphic Design I have found some interesting examples of how data can be shown. This first example is a detail of one of a series of maps produced by Alison Barnes. In this map Barnes has typographically charted the graffiti in New Basford, Nottingham. The detail shows the nature of the graffiti, tags and insults displayed street by street in the area. The inset detail shows the map in its entirety.
6
Your Brief Here... tombryant.gdnm.org
Research Whilst conducting research into web maps I stumbled across this diagram which triggered the idea of looking at business statistics. I then thought of the entrepreneurs from the programme ‘Dragons Den’ so began to look at statistics from the programme looking at investments made and so forth. At this late stage I should have some concepts to show, however I am struggling to put the typography and grid layout findings into a nice piece of design, therefore as I will present at least one idea as a concept so I can show development in my ideas rather than stick to one collection of statistics for my brief. image that triggered the idea
Website Hybrid Concept
Dragons’ Den “As of the Season 8, the current Dragons are all together worth approximately £875 Million. In order of wealth they are Duncan, Peter, Theo, James and then Deborah.” Below are the statistics that I found shown as net graphs that I have edited using Adobe Photoshop. I had the idea that the statistics could be shown as a map of the UK. If I can collect further statistics of the number of investments made by entrepreneurs from the other series of Dragons’ Den around the World it could be quite an interesting visual way of showing data
7
8
Your Brief Here... tombryant.gdnm.org
A COMPLETE CHANGE OF IDEA!
At this point I was struggling with the development of previous ideas so had a re-think. These were my thoughts and I decided to go with statistics from the London 2012 Olympic games.
Your Brief Here... tombryant.gdnm.org
Ideas Development From this point I needed to conduct some research into the olympic, more importantly find some new statistics that I could show in an infographics form. I conducted some research into the Olympics and went into more detial in the particular sports that are of interest to me. At this stage I was still developing the idea I though I could focus the information more on these specific sports. THE GAMES Archery Athletics Badminton Basketball Beach Volleyball Boxing Canoe Slalom Canoe Sprint Cycling – BMX Cycling – Mountain Bike Cycling – Road Cycling – Track Diving Equestrian – Dressage Equestrian – Eventing Equestrian – Jumping Fencing Football Gymnastics – Artistic Gymnastics – Rhythmic Gymnastics – Trampoline Handball Hockey Judo Modern Pentathlon Rowing Sailing Shooting Swimming Synchronised Swimming Table Tennis Taekwondo Tennis Triathlon Volleyball Water Polo Weightlifting Wrestling
9
Your Brief Here... tombryant.gdnm.org
Ideas Development LONDON 2012 OLYMPICS: TICKETING STATISTICS Top 3 sports (overall) 1. Athletics 2. Swimming 3. Gymnastics Top 3 sports (Male) 1. Athletics 2. Swimming 3. Football Top 3 sports (Female) 1. Athletics 2. Gymnastics 3. Swimming Gender – Across all sports, the gender mix is 53 per cent male and 47 per cent female. – Sports favoured by men include Beach Volleyball (65 per cent), Boxing (65 per cent) and Weightlifting (62 per cent). – Sports favoured by women include Synchronised Swimming (73 per cent), Equestrian (62 per cent) and Gymnastics (60 per cent). Age – Key sports for 18 -24 year olds include Water Polo, Wrestling, Synchronised Swimming and Handball. – The 25 – 34 year old age group made up the largest proportion of respondents. Key sports in this age-group include Wrestling, Weightlifing and Taekwondo. – Cycling is a popular sport among 35 – 44 year olds across BMX, Road, Mountain and Track disciplines. – Track Cycling is also a popular sport among 45-55 year olds – as is Modern Pentathlon. By region – Residents of the South West are twice as interested in the Sailing events than the rest of the country. They are also keen on Rowing making up eight per cent of total sign ups for this sport. – People in Scotland show a higher rate of interest in Tennis – no doubt looking forward to Andy Murray competing in 2012. 5.5 per cent of Scots registered their interest, against four per cent across the country – The Isle of Man residents are keen on seeing Road and Track Cycling sports – possibly in anticipation of locals Mark Cavendish and Bradley Wiggins being part of Team GB. – Londoners are the biggest supporters of Beach Volleyball which will take place at Horse Guards Parade in central London. Residents of the capital also lead the way in wanting to see Synchronised Swimming and Table Tennis. – The people of the South East are most keen on seeing Wrestling, making up 33 per cent of the nation’s demand for the sport. – Those in the East Midlands are the biggest supporters of Badminton accounting for 10 per cent of the total demand.
10
Your Brief Here... tombryant.gdnm.org
Ideas Development & Final Artefact I haven’t mapped out my statistics using a graph like my original idea concept, the idea here is to have this information in a leaflet form for anybody to read. I feel the artefact is interesting as a visual therefor it is likely that people would want to read the information contained within it. It makes for a much more interesting read and encourages you to read the data even if the data itself is not usually something that you would be interested in. So the challenge here is to make almost anyone read data that wouldn’t normally be of much interest to them. The data itself maybe something that has an impact or influence on their lives or not, either way the data needs to look interesting as much as it does be interesting to read and understand. If i were to further develop this idea I would like to add more vectors to make it even more aethestically pleasing, these could even represent values themselves. They currently just represent the information but it would be quite interesting to see them as the values also. Perhaps some 3D elements could be added, I would quite like to turn the vectors into 3D representations.
11