Part 5 Layout Infographics
What to I think I will be exploring here?
- How graphics can be used to portray information and direct the eye around this information. - How to visually present a large quantity of information without having to have long lines of text. - Effective ways to break down information so that it is easier to understand.
What skills do I want to develop?
- I think this could be the perfect exercise for me to put into practice the concept of reducing the amount of information that I put on a project. The aim of this is to present it visually so I will not be able to put long lines of text and instead be forced to present the information in a different way. - I want to start using grids within programs. I know how to do this but I want to put it into practice where instead of just using it to line a few things up, there is a full grid system that is created, if it is appropriate.
What do I need to make sure that I focus on during my research?
- What layout techniques are used but not only in terms of grid structures but how the text is laid out next to the graphics, what stroke thickness there is, how the eye is led around the frame etc. - Different information graphic display methods. In my head I have that they are all bus timetables, the tube maps and pie charts but I want to challenge this preconception that I have to see what other ways information can be portrayed to an audience. - Colour palettes. I imagine these to be quite varied and will be used to clearly direct your eye around the frame, I want to see how colour is effectively used and controlled in this kind of scenario as it is something that I usually use very freely.
Note: With the information graphics, I didn’t feel the need to explain the concept as the principal with these is that you should be able to establish this from the graphic itself. Some of them did need a little explaining but others were made perfectly clear.
This seems to be an example with a lot more writing than other examples. The numbers have been enlarged to make sure these are the aspects we remember but there is also a lack of direction through colour with minimal graphics.
Exercise: Giving Information Infographics does what it says on the tin. They are graphics that show information to an audience in a more visual way instead of writing out data. It can show anything from data (statistical), information or knowledge. Showing it in a more visual way like this can help to highlight trends and patterns within data not only for the person producing the work but also the reader. One of the most commonly known information graphics would be the London Tube map. Common types of information graphics would be these kind of transport designs. This is a stereotype that I had before starting this assignment. However, it soon became apparent that this isn’t the case. There are far more types of information graphic. As the purpose of each project is to portray knowledge and information, I didn’t want to look too much into a project as I researched it because this goes against the point of the graphic itself. I wanted to work out what I could figure out from the information provided.
Project created for Wired magazine that looks at the primary colours that featured on each cover.
Peter Orntoft
This one to the left was quite hard to work out what each colour meant however, after reading more about the project, it becomes clear. A group of 250 people of different ages and different cultures were asked what colour they associated with different emotions. The larger the area, the more people who selected this colour.
What are the national colours of each country? This includes the colours on the flag and those used during national ceremonies.
“The Curtain is an experimental RAW data visualization. Through the cross over editing with raw data, like image editing with Audacity, I was able to get heart beating sound tracks from the original photographs. Then I printed the sound tracks out as digital still images.� Once again this is not a traditional style of information graphic, the information shown isn’t even clear to understand apart from the data bending method.
Would this be appropriate? Is this really information that would be presented on an infromation graphic? Would be helpful to see the original data used.
“The Dandelion Mirror is a psychological measurement device featuring non-contact sensor technology. The biosensor-based unit is able to measure a person’s temperature, pulse, respiration and blood pressure, through a webcam, and thereby check their current state of health. The data measured are then visualized, in the shape of a ‘growing’ virtual plant which mirros each user’s health.” Wang, S. (2017) Infographics: designing and visualizing data. Barcelona, Spain: Promopress. This is one of the most interesting examples of information graphics that I found. Although as a reader it is difficult to interpret and work out why each one appears differently, the structure and the concept are there. For the purpose of this project, and looking at my tendancy to overcomplicate projects, I think trying to create an information graphic like this would not achieve the aim that I need this project to complete. It is an intriguing structure to analyse but compared to other information graphics, it doesn’t fit the trend of information analysis.
Common characteristics between these information graphics: - Most of them use a Sans Serif font, it keeps it straight to the point and isn’t too decorative. The example on the opposite page does use a Serif font as the title but most others use a Sans Serif in order to keep it straight to the point and not complicate the reading any more. - Clear hierarchy. It is very clear where you are supposed to read next. - Not overcomplicated. The information is kept concise and shown in a more visual way, visual symbols are important here. The symbols that are used are more universally understood codes, they are not ones that rely on personal connections. It is very clear what the symbol means within the purpose and everyone will obtain this reasoning. - A lot of these examples have lots of colours but red always seems to feature. Red is a colour that always demands attention and your eye is immediately drawn to it so with the purpose of information graphics, if there is one important piece of information you want the reader to remember put it in red. This is what appears to be the case with the graphic titled ‘Where you money goes: the definite atlas of UK government spending.’ - A key is provided so that the audience can understand what they are reading clearer. - A definitive border is provided for most of the graphics. This gives the eye a slight break, the eye isn’t reading from one edge of the page to the other. Having a shorter line length makes the text easier to process and it doesn’t seem so overpowering to the viewer. It makes the information seem contained. -Geometric shapes work best as they too are based on ‘mathematical formulas, they relate to point, line and plane’ . By using such structures, instead of organic or random shapes, the information appears more organised and coherant as this too is also based on mathematical formulas. This doesn’t mean that all of them have to have this kind of structure but it helps in the organisation of information and is the most common way of presenting it. Poulin, R. (2011) The language of graphics design: an illustrated handbook for understanding fundamental design principles. Gloucester: Rockport; Rotovision.
Different ways of presenting the same information - but this is very simple data to be analysing
What have I learnt about visual communication with this exercise? - Order and uniform through the presentation of information is an important part of the flow. It makes the information easier to follow and easier to then find the information again if needed. - The information needs to find a balance and although it may seem like there is only one way to show this information, my personal variations of the same information show that the information can be presented in many different orders. - Scale makes it easier or harder to read. The larger the sections, it almost appears like there is too much information although it has reduced the amount of information being presented. - This selection of information, and the information that I looked at, is very visual and colour based, other information would perhaps have different learning points. - Text choices aren’t as important here for any other purpose than readability. I wanted to use the same fonts as the brand to make this connection but this isn’t an important choice, the focus is on the information and how it is presented.
Exercise: Birthday List
There were very few examples of birthday lists like that indicated in the information pack. Instead I found a lot in bullet journal examples.
What visual language techniques are used on these examples? - Linear structure or at least formulaic. It is easy to follow in the order per month. - There is equal spacing between each month no matter how many birthdays are per month. - Colour coding for each month on some examples but each month is highlighted in some ways. - In terms of lettering, some are made to mirror fancy script fonts because this is part of the beauty of bullet journals whilst others are put in capitals in compairson to lower case lettering. As mine will be created digitally the flow will be slightly different but it will be interesting to explore the same structure with Serif or Sans Serif fonts as well.
To the left is the basic structure that I started with, I decided that sending a text wasn’t something that I often did, it was more of a facebook message and sometimes I will do presents but only small ones in contribution to a larger present so I thought it this were to be something that I wanted to do then I would add these options in. As there was a lot of space left over, I thought that I always struggle for present ideas but lookig at this now, the section for plans is too small. Too many birthdays and not enough space to write a plan for each.
Instead of focusing on the content, this part is about LAYOUT so, in order to provide a distinction between these two sections and make sure the focus was on the birthdays and what had to be done on each one, I started to look at ways of turning the sections into more defined areas. Fonts were also experimented with at this point.
Is the key needed twice or is it clear to understand that the columns will still be the same?
What have I learnt at this point about visual language and communication? - Linear structures make the information easier to follow and equal spacing between each section makes it easier on the eye. Although the other examples had every month, because I had preplanned this, I didn’t want to have months with no names so I decided to use the space better within the a3 sheet to make the information easier to read. - Don’t put unnecessary information on something even if it makes the appearance more linear. Why would I put boxes on this that I knew wouldn’t be ticked off? - Think about what information you need to know before you plan something. Haivng the column for 21st birthdays after the tick boxes makes no sense, I need to know that they are 21 before I go and buy them a card, or write a message or buy a present. - Make it interesting but also useable. Although I like the grey, black and pink colour combination, I had to consider whether I would still be able to write on this. What colour pen do I usually use? Will this show up once I have ticked something off? Yes, because I use a black ball point pen. - There is a very clear grid system that is in place here, everything fits in together with equal spacing. As this was designed for me, I am the client in the way, the grey box provides the perfect way to take the grid slightly off centre and make it a little more interesting because I find such structures quite boring unless they are made interesting in some way. This isn’t breaking the grid, it is shifting it slightly and adding some interest in a small and simple manner. - A visual hierarchy is established within the columns as the font chosen had a bold option which meant that each month could be highlighted more to the viewer.