20. Giving information

This exercise involved looking at examples of information graphics. I must admit I’d never totally considered infographics much in the past but looking now they really are all around us. I chose to design an infographic based around my journey to work/ desk. My tutor sent me some links to a website on visual complexity – an online community which showcases the best in data visualisation and infographics. This site is packed full of really interesting and sometimes pretty complex infographics. From looking at it I decided that I wanted to try do something quite graphical and representational. http://www.visualizing.org/explore#featured=1&sort=recent I also looked at They Draw and Travel – a site where people post illustrated maps of cities/ places they’ve visited. The majority of these are more designed to be visually attractive and illustrated rather than give a more graphical representation but I still think the site was worth looking at. Santa Cruz, California London, UK The two approaches to depicting the info are quite different but I decided I wanted to try something which was quite technical looking and striking (well I can but hope!) I took some images of Primark in Glasgow which had these illustrated maps of the city. These are more for aesthetic purposes. 20140305_140754 20140305_140742 From my various searches I decided to put together a mood/ idea board for reference. Info graphics mood board- decisions designers made, appropriateness Info mood board-Recovered-Recovered-Recovered       http://www.creativebloq.com/graphic-design-tips/information-graphics-1232836

 resume

Love this simple CV infographic – would really stand out – it simplifies a lot of information. Designer obv wanted a clear and conscise representation to save employers reading lots of unnecessary information

Online image Accessed 8th March 2014 https://www.behance.net/zhiliang

 Fonts & Colors

Really simplifed way of showing what colours are used in logos – easy to look at, very clear simple shapes and minimal text

 

Hongkiat 2014 50 Informative and well designed infographics Available from http://www.hongkiat.com/blog/50-informative-and-well-designed-infographics/ [Accessed: 18th March 2014]

The next part involved us describing our immediate surroundings using information graphics.  I was deciding whether to do my desk or my morning journey as they both would require quite different approaches. The journey is more of a map and I think I’d want to try to be fairly accurate with my surrounds in terms of where they are located. The desk on the other hand would immediately to  me be more of a drawing. Anyway I started with my journey to work and considered the main points on my journey , thinking about landmarks and key information and filtering information that wouldn’t be essential for the graphic. – landmarks , glasgow church , traffic lights, homeless man, hill , gft, steeple,art school crane – What helps me on my journey, fuel, ipod, book – Weather I encounter As I made a start with sketches I was trying to keep in mind the various examples of infographics and what elements they included and made them effective. To start with I think I was focusing on it being almost like a map of my journey but the purpose really is to give information about my journey – not really to map the route. I also thought that infographics don’t necessarily need to show a lot of information but just info in a really clear and interesting way. A lot of the ones I’ve looked at above include statistics or are trying to chart some information. I decided to break it down into stages. 1. What do I want my infographic to say/ show – how much info is there 2. How can I get this across in a simplified way using graphics Break my desk down – Food stuffs, Art materials, Supplies – coke etc, The hub (the computer/ my internet) – everything is close at hand – hands reaching out, chair, mouse, cup on window ledge, notepads, something to show the tabs on my computer – overload/ facebook, categorise them – keep simple  Green tech I also found some online editors to create your own infographics and that and looking at these in combination with my boards I was able to come up with numerous options for both the desk idea or my journey to work. http://piktochart.com/ I sketched out some ideas and had a few which had potential .

My next hurdle was thinking about how to create the graphics themselves. I decided Illustrator was probably my best shot but I’m not overly experienced using it so knew there would be a bit of a learning curve. I did some searching on online illustrator tutorials to get a feel for some of the methods. It was during this process I came across the work of Paul Butt. This tutorial looks great and his work is truly beautiful to look at and in its precision.   To try at somepoint – http://www.digitalartsonline.co.uk/tutorials/adobe-illustrator/design-magazine-infographic/

mas31

Really complex and technical looking – it brings some seriousness to the topic of comics – gives it importance. Could use something like this to chart progress of lots of topics against each other. I like the use of black on white for the main info then with coloured circles to follow/ add interest. I also like the wee pictorial keys.

Online image accessed 9th March 2014 http://sectiondesign.co.uk/comic-book-movies All images Paul Butt http://sectiondesign.co.uk/ I felt a bit overwhelmed looking at the tutorial but was thinking I’d start off using Illustrator on a more basic level!! I also came across this which was reminded me of my typography magazine cover.

PSFK Illustrated History of Typewriter 2014 http://www.psfk.com/2014/03/an-illustrated-history-of-typewriter-design-infographic.html [Accessed 19th March 2014]

The sites below are great for looking at inspiring infographics. http://dailyinfographic.com/ http://www.fastcodesign.com/section/infographic-of-the-day http://www.coolinfographics.com/

I also liked this one which is quite relevant to some of the upcoming exercises on logo and branding

PSFK Brand Logo Design http://www.psfk.com/2014/03/brand-logo-design.html [Accessed: 20th March 2014]

I started with my desk and mapped out what I thought were some things I’d like to include. At the centre of my desk is my computer surrounded by items which I use regularly. info 1 sample desk Thinking about linking the elements bringing in colour to try categorize the items Info 2 sample desk   Background wood effect . I created the majority of the little icons in Illustrator which was a minor achievemment. I was particularly pleased with the mini teddy. I tried to think how the info would be read and the hierarchy of the elements. With the computer being the biggest item, its the item that you are immediately drawn to and I would say thats the most important item on my desk.

Squares and gill shadow

Squares and gill shadow

Using lines with rounded corners to link the items. I created these in Illustrator first using the rounded corners option for a line (note for self for future projects) . Felt like this was getting somewhere. laura desk woodf1 L Desk info 1 left layout version

Squares and gill shadow

Squares and gill shadow

Favourite desk image

Favourite desk image – switched to circles which were easier on the eye

Different layout moving items to the side and introducing a few new objects. Trying to link with a different map of my desk.

Gills sans normal and condensed text

Gills sans normal and condensed text

 

left layout desk

left layout desk with added text labels

Throughout these I was continually thinking – Do they communicate something visually which is relatively clear and easy to understand . I decided I also wanted to try another few styles of infographics and decided to experiment with depicting my journey to work. I tried to stick with a bright and interesting colour scheme. Again, I created the majority of these vectors in Illustrator . The Gills Sans text is nice and clear easy to read with Franklin Gothic used for the labels with different colour. I think initially I had thought I wanted to create something more technical/ statistical looking, but in reality the information I wanted to show didn’t really fit into this category and I feel that the desk image and the journey to work , break down the information in a way which is easy to understand.

journey to workcrop

Breaking down the info into three sections that make up my journey. Symbols/ image used to show each element

journey to work croppurple version

Brighter colour backdrop

journey to work cropblue version 2 journey to work crop

I also decided to take a completely different slant and try a sort of map version / journey giving some more technical information. Again, I think this has some promise but I prefer the other layout as above.

lauras map version to workpsd

Experimenting with creating a little map version. I like my Scotrail train 🙂 and some of the symbols I developed but not sure it hangs together well enough

lauras map version to work completejpg

Adding a graph and some keys makes this a lot more interesting but its not as punchy as the other journey to work map

Overall, I think my examples are quite clear infographics which are relatively interesting to look at. However, I’m aware that they are more picture / symbol based than purely type/ numbers/ colours as outlined in the brief. That being said my examples are certainly infographics and for the information they depict are quite suitable as I don’t think something overally technical would have been as good to look at. If I was to do this exercise again I might try focus more on using purely Type perhaps selecting fonts/type with different properties to convey different items/ elements. Eg slanty font for walking up a hill, TYPEWRITER font for my computer etc

After tutor report

Reflecting on my tutors comments about this exercise I do take on board that perhaps the desk examples look a bit too clip art like and don’t really say anything new or different about me whereas the latter journey to work examples have more information in them and in doing so have a better level of resolve.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: