Development And Realisation: Who Lives The Longest?

Here are some sources that I have found whilst exploring this question:

  1. https://www.cia.gov/library/publications/the-world-factbook/fields/2102.html#138
  2. http://www.citylab.com/politics/2014/01/charting-life-expectancies-worlds-countries/8044/
  3. http://www.informationisbeautifulawards.com/awards/2014
  4. https://www.iconfinder.com/ 

Click to enlarge:

Advertisements

Development And Realisation: Information Visualisation & Design

“Can we differentiate information visualisation from information design?… Information design starts with the data that already has a clear structure, and its goal is to express this structure visually.” – Manovich, 2010.

Information or data visualisation is a visual representation of data. Spatial representation is chosen by the designer who also decides how to present the data effectively enabling us, the audience, to understand the information easily. Generally these are created for the purpose of telling or explaining a specific story.

Both information visualisation and design seek: order to define data, visually represent data, convert data into graphics. They can be interactive, static and animated. Even though the brief is asking us to create a static graphic, there’s no reason why we can’t show movement through form.

So summarising and analysing the research I have undertaken I have concluded that my original theme being The hydrological cycle (the water cycle) will not be executed well enough. I want my design to have minimal text as possible and for it to be visually enticing and the message to be understood within seconds, which is why I have chosen my new theme to be Who lives the longest?. I’m sure this will be a far more effective representation of data than my previous idea. Less text will be needed to understand the graphic, and the use of colour, shapes and spatial proximity will be a more exciting challenge for me.

Development And Realisation: Representation

REPRESENTATION CAN BE BROKEN UP INTO FOUR ELEMENTS:

  1. Form/Composition – innovative tool
  2. Colour – implications of colour
  3. Visualisation – creativity & thinking
  4. Structure – innovative ways

Gestalt is a psychology term which means “unified whole”. It refers to theories of visual perception developed by German psychologists in the 1920s. These theories attempt to describe how people tend to organise visual elements into groups or unified wholes when certain principles are applied. These principles are: Closure, proximity, continuation, similarly & figure and ground.

representation

Different laws, perception and context, and Structure:
– Laws of proximity
– Laws of similarity
– Laws of symmetry
– Laws of continuity
– Laws of closure
– Figure-Ground

Colour:
– Culturally influenced within the spectrum of colour.
– Different meanings in different parts of the world.

Information visualisation:
– Expressing data through forms and visualisation in a clear structure in a simple form.
– Presenting data effectively.
– Convert data into graphics.
– Target audience.
– Data/form colour and composition.
– Info graphics.
– Need to create a concept that is simple but easy to understand.

Screen Shot 2014-11-28 at 17.18.27
If we place a set of shapes orderly close to each other we perceive them as a group – unified mass. When we start to cluster a simple shape we start to perceive it as having relationships, that connect.
Screen Shot 2014-11-28 at 17.18.43
Things that are close to one another are perceived to be more related than things that are spaced farther apart. 
Screen Shot 2014-11-28 at 17.26.46
Using similarity to show individualism – example of a graphic which is using slices to highlight the differences but graphically it works as we perceive it as a whole fruit body.
Screen Shot 2014-11-28 at 17.19.10
Using proximity and similarity – we can start to form specific groups. In this example which plots children’s deaths we can see that they have used similarity in shape, colour and form – http://www.jackhagley.com/What-kills-children
Screen Shot 2014-11-28 at 17.19.24
Law of symmetry – when two symmetrical elements are unconnected the mind tends to connect them to form a whole shape.
Laws of continuity - elements of objects tend to be grouped together. Where individuals components in this case umbrella and tap are joined we perceive the two objects as two single uninterrupted entities.
Laws of continuity – elements of objects tend to be grouped together. Where
individuals components in this case umbrella and tap are joined we perceive the two
objects as two single uninterrupted entities.
Law of closure- perceiving individual objects as whole. Specifically when parts of the picture are missing our perception fills the missing gap. Shigeo Fukuda, Japanese graphic designer in the 60s which used this method  effectively In this poster for a no war campaign, missiles form into death.
Law of closure- perceiving individual objects as whole. Specifically when parts of the
picture are missing our perception fills the missing gap.
Shigeo Fukuda, Japanese graphic designer in the 60s which used this method
effectively In this poster for a no war campaign, missiles form into death.

 

Colour plays a huge role whilst being a designer. A question that comes up all the time when in the planning phase of a particular piece of work is: what does colour mean to us culturally?
When choosing a tone, tint or hue to represent your graphics/information, you
need to think beyond how it looks aesthetically.
Colour can mean completely different things in different cultures.
Weddings in the western world are associated with white whereas in Asia funerals are.

Development and Realisation

In this new unit we have been asked to identify data which we can source and use in a visual looking graphic. I.e. an A2 poster. The poster should have minimal text (if possible) and must be interesting to look at. The data/idea must also be clear so the audience can understand it with ease. I am going to undertake this task through vast amounts of research and working in Adobe Illustrator which works with vector graphics as opposed to bitmaps which Photoshop utilises.

So these are what info-graphics looks like. I researched various info graphics that artists have produced and one website that was brought up in one of our seminars is http://www.informationisbeautiful.com/awards. On this particular page you can view who are the winners of a competition that the website hosts annually, some of the artists are students themselves.

Page
“My Life”, informationisbeautiful.com

http://www.informationisbeautifulawards.com/showcase/169-my-life

This info-graphic seems like he could use it as part of his CV.  It’s very simple and visually interesting to the eye. The choice of colour was executed well and the box in the middle that represents how experienced he is in Flash, Illustrator, Photoshop and so on was also equally executed. Using the same shape with different colours to symbolise a different software and a different scale to represent his expertise in it, it is visually clear to someone where his expertise lie. You can see and understand this within just a few seconds instead of reading text. This is a lot more  attractive and attention-grabbing doing it this way. That’s the whole point of info-graphics.

Dylan Mac Kay is the artist of this particular info-graphic. This is what he said about it: “The goal of this project was to question myself and to try and find all the positive things about my life. Positive was my key word for this. I was finding it hard to describe to people what exactly Im doing in life so I needed a way to simply show that. The project wouldn’t just focus on career I wanted it to have a bit of my personality to it so I added my aspirations to show people not just who I am but who I want to try become.”

 

Left Wing or Right Wing, http://ceblog.s3.amazonaws.com/wp-content/uploads/2012/03/Picture-134.png

This one is a bit different because there is a lot more text than the previous one. Info-graphics are at their best when there is no text at all, yet the message, data or whatever it may be is still being presented clearly and quickly. This is very thorough and has a lot of information on it. It is very knowledgable, however for the simple fact that there is lots of text the viewer might lose their attention and won’t be as engaged because text is boring. Human nature now is getting more lazy and has less time on its hands. Too much text could completely jeopardise you’re whole design.

 

Harry Beck, Underground Tube Map, 1930

This design that Harry Beck so famously produced for the London Underground was an early data visualisation as we know it today, where colour was fundamental through out – of which we still use to this day. The method of structured data being: tube lines, tube stations and their locations and how we

can translate a space through a simple representation.

Here are some more info-graphics (click to enlarge):

Concept and Ideation: Kinetic Typography

Motion Graphics is well established in the realm of digital media. It’s highly creative and is influenced greatly from graphic design and animation. Typography is just one element of Motion Graphics and by experimenting with many different typographic fonts animated to a soundtrack you can make text animated that has dynamics of motion and emotion. Adobe After Effects is arguably the most commonly used digital motion graphics and visual effects software. It’s mainly used in post-production for films or television production.

Below is the outcome of the task I had to do which is to complete a audio clip of at least 20 seconds and apply what I have learnt from workshops of Kinetic Typography using After effects. I abbreviated the word “f***ing”  to “f***in'” as well as replacing the words “Americans” and “whales” with images of the American flag and a cartoon whale to make it sound more phonetically with the actors voice over.

Enjoy:

 

Concept and Ideation: Stop Motion

"Tea in a cup" stop motion, Seb Faull 14
“Tea in a cup” stop motion, Seb Faull 14

This is an animated gif I created in Photoshop. The pictures were taken one at a time with a Nikon D5200. These are the images I used:

 

I took a range of 22 images and edited them slightly in Camera Raw as the pictures were initially under exposed and a bit dark. It is fairly basic, but not bad for a first attempt. I would like to improve this GIF by adding some sound. I.e. sound effects, etc.