104: Week 08- Designing Infographics

Designing Infographics

In this week’s lecture we delved deeper into the world of infographics and how they are effective. Infographics have proved to be very useful in the medical field to explain infectionary diseases and many illnesses as its graphical representations of difficult or complex issues can simplify them and make them informative for everyone which is the main benefit of infographics.

There are different types of infographics, these are the main examples shown in the lecture.

Timeline Infographics

 

Timeline infographics are great for visualising the history of something, to highlight important dates, or to give an overview of events.

Humans tend to make sense of time and how its spaced, a visual like a timeline infographic can help create a clearer picture of a timeframe. Visuals aids like lines, icons, photos, and labels all help to highlight and explain points in time.

 

 

 

 

Statistical Infographics

 

 

A statistical infographic puts the focus on your data. The layout and visuals will help you tell the story behind your data.

Your storytelling devices can include charts, icons, images and eye-catching fonts.

 

This is an example of a statistical infographic.

 

 

 

In this lecture we also learned the keys to making a good infographic are utility, illustration and soundness.

Utility-describes understandable nature of the infographic as this is the main purpose of one- to simplify a complex thing for a wide target audience

Soundness- describes the accuracy of the data and the way it is presented- making sure it is clear and a good representation of the data

Illustration- illustration can really help bring data to life and visualising data in a really interesting and eye-catching way, however, it is importat the illistration does not overpower the data and distract from the topic and point of the infographic.

 

Our tasks for this week wast to complete a master-apprentice recreation of two bar charts:

The charts on the right are my recreations.

104: Week 07- Visualising Data

Visualising Data

In this week’s lecture we final part of the module, visualising data.

We introduced to infographics, and how important, easy to understand, simple,  concise information is.

Diagrams- are a simplified drawing showing the appearance, structure, or workings of something.

 

 

 

 

 

 

 

 

Visualisations- are ‘an interdisciplinary field that deals with the graphic representation of data. It is a particularly efficient way of communicating’

 

 

 

 

 

 

 

We were shown that data is everywhere from bus timetables to forecasts and weather reports so why not take the the time to make this information beautiful and functional.


Research

For further research into visualisations and what they can be used for, I watched David McCandless‘s Ted Talk on the ‘Beauty of Data Visualisation’

The first project he brought up was his data visualisation on the military spending, worldwide which he called “The Billion Dollar Gram”

Visual Business Intelligence – The Billion Pound-O-Gram Redesigned

McCandless researched articles expressing the amount of money spent on something and scaled it accordingly with everything else to convey simply how much money was spent on something in comparison to say personal wealth. The project was then colour coded to show how the money was used. McCandless talks about presenting this information as a ‘landscape’ or a ‘map’ that ‘people can explore with their eyes’ I thought that was a really nice way of thinking about data and how you can even gain excitement from it.

The next project McCandless’s presented was called “Mountains out of Molehills” which he describes as a “timeline of global media panic” The higher the point the more intense the fear:

mountains out of molehills.PNG | Bryn Mawr College

McCandless points out patterns in data such as the ‘violent video games’ timeline which occurs around November and April every year. This can be explained by buying video games for Christmas around November time however for april, the spike occurs due to the anniversary of the Columbine shooting which is a pattern that never would have been seen if not for data visualisation.

David McCandless goes on to explain how he feels “Data is the new soil” as it as a fertile medium from which creativity and visualisations can grow from. He talks about how disconnected raw facts and figures can be and it makes them hard to understand but you can do more than just making data understandable you can make it an art unto itself.

The beauty of data visualization | David McCandless - YouTube

McCanless brings up this graphic to compare our human senses to the processing power of technology to allow us to see how powerful our minds are but the small square at the bottom right is how much of this we are actually aware of. This really made me think about how important proper presentation of data as is we, as humans, will immediately infer patterns and relationships between data from just a look at a graph. McCanless furthers this point by pointing out that we view America and China as military heavy and countries and figures back this up but these aren’t as true as they could be. If you put China’s soldier population relative to its general population it actually has quite a small army.

The world of data visualisations allow us to see how the beliefs of everyone around us and where they came from, it gives us a unbiased perception of how the world works and from this we can create our own opinions. The information I’ve learned about creating data visualisations has made me very excited about the topic and this is something I will look into myself.

 


Project 02 – Infographic / Data Visualisation

This week we were shown our final project-  creating an infographic looking specifically at global population.

I did a lot of thinking about which direction I would go in for this project, looking at past students work it seemed to be heavily focussed on overall population statistics or population changes from disease or disaster. The second concept is something I found interesting and struck a chord with me at the time as I had been researching women’s rights and gender inequalities at the time. In that research I had heard of the term femicide- ‘ a man’s killing of a woman’ and thought this would be a slightly different take on the project but something close to my heart and especially in the aftermath of Sarah Everard’s death on the 3rd of March.

 


Weekly Tasks- Master Apprentice

These are the original diagrams:

 

 

 

 

 

 

 

 

And these are my recreations:

 

 

 

 

 

 

 

I couldn’t find a good match for the number in the centre of the second pie chart so I chose a font I felt worked with the rest of the diagram. Overall I felt I did a good job at recreating these diagrams and have been enjoying these exercises.

 

104: Week 05- Tying it all together

Tying it all together

In this week’s lecture we covered ui design on phones including the importance of the buttons sizes and how colour affects the functionality of the design.

 

Principles of UI 

  • Format Content- its important when formating designs for mobile that everything fits within the margins of the phone screen dimensions so the content can be viewed and understood easily without awkward scrolling or zooming out to see everything

 

 

  • Hit Targets- the buttons should be able to be easily pressed by a finger or thumb. They should be appropriately sized and spaced to avoid accidentally pressing the wrong button.

 

  • Text Sizes- the sizing of text should be proportional to how important the information is but also all text should be at a readable size.

 

  • Contrast-  there should be contrast in font weighting between in headings and body text. Colour can also be used to emphasise contrast but should be used sparingly and appropriately, e.g. all text the same bright colour or colour unreadably bright.

 

  • Spacing- the line spacing between text is important to improve the overall visibility of the text- helping the content be as easy to understand as possible.

 

  • Distortion- images and content should not be distorted or have a squashed appearance which could affect the understanding of the content/images. Images should be properly scaled to fit in the webpage or app.

 

  • Organisation- to assist the use of an app the content should organised in such a way that when the user first glances at it they know what the app or webpage wants them to do and can process the information as quickly as possible.

 

  • Alignment- the way the content is aligned on a page is important for the ease of use. Images should be placed appropriately along with the text and used in only one alignment. Buttons should be placed in similar areas across screens/pages to simplify navigation for the user.

 


Touch Gesture Sizing

The average size of a finger is 57 px wide and the average thumb size is 72px. It is important to keep these measurement in mind when designing buttons for an app or web page as  making buttons too small would make using the product more difficult than it has to be. The useability of an app or webpage is so important as people are less likely to use a product if their experience with it is difficult. However you can’t always use only these sizes for buttons as it leaves less room for all the important design elements, the use of the buttons and the difficulty level of pressing them should just always be kept in mind in design.

The anatomy of the user should also be taken into account when styling the layout and spacing of the content. Buttons spaced too close together could lead to clicking the wrong button and creating a frustrating experience. Also buttons- especially ones that are similar in context such as navigation buttons- spaced too far apart can lead to confusion in design as humans group together buttons that are beside each other.  The layout and where you decide to place important buttons should be concentrated on the bottom half of the phone as majority of phone users hold their phone in one hand and as phone screen sized have increased there is now more difficulty reaching top areas of the phone screen,.


Colour

 

Monochromatic colour schemes are one colour in many shades. These can be used to create a sense of consistency in more minimal design.

Analogous schemes involve few colours close to each other. This creates warm or cool colour schemes which produces a sense of temperature in design and colour harmony.

Complementary are schemes were the colours used are opposites on the colour wheel.  These can create good contrast on designs as it draws in the eye.

Triad colour schemes are formed from creating a triangle in the colour wheel. These can create a vibrant design if used in a balanced way.

Custom colour schemes were also mentioned in the lecture which is great for ensuring the colours used are appropriate for the app/ website being designed but the above colour schemes should be used to draw inspiration from to make sure it works.

Colour Contrast- is an important feature of the colour scheme as without strong contrast between all the colours used, it will be harder for the user to differentiate between the content especially with text colour.

The optimum colour contrast between background and text colour is 21:1, there is a website called https://contrast-ratio.com/ in which you can input your intended background and text colour to see what its contrast ratio is. This can help while in the design stage to check how readable your colour scheme is as functionality when it comes to app/webpage design is so important. These ratios do change between small (4.5:1) and large (3:1) text.

The website webAIM also has a colour contrast checker but it slightly more in depth. It tells you if your colour combination passes or fails depending on text size and gives an explanation. Adobe also has resources on their websites to help designers with colour contrast.

 

 

 

 

 

 

 

 

Contrast in User attention- if you want certain elements to stand out in your design, make them appear different to its surroundings in some way. It helps the user focus on what part of the content is the most important and this helps users process information as quickly as possible and aids their user experience.