The Brief

Find some examples of information graphics.  For example, bus timetables, city maps, diagrams, or representations of statistical data.  Look at the way they are designed and try and work out the decisions the designer made.  What can you learn from them and when would it be appropriate to use a similar design solution?

For this exercise you are going to describe your immediate surroundings using information graphics; this could be a plan of your desk, the layout of your house, the arrangement of objects in your cupboards or your morning journey; anything will do.

Before you start you need to think about scale and about how you will break down the information for your design.  Create a graphic that represents an arial or front on view of your location.  Be mindful of the hierarchy of the elements in the composition and the dynamics needed to draw the viewer’s eye from one stage to the next.  Use typography, numbers and colours to describe what is being presented.  You may want to produce a key to help us understand what is being shown, as well as a diagram title to put things in context.

Examples of information graphics

Below in figure 1 are examples of information graphics.  I have noticed the following elements and concepts the designers use in these information graphics which I can apply to my own work.

• The angle of the point of view of the location.  What looks the best?  An aerial view or a side view at 45 degrees from the ground?  I prefer the latter as it gives a comprehensive view similar to a bird hovering in front of a window and peeping in.  The designers chose between a symmetric- or isometric viewpoint.
• I also looked at what elements can be removed, for instance, the wall right in front of the location, the floor or other unnecessary information.
• Observing the rendering of the element is also important.  The information graphics that captured my attention are simple and have only one colour at different saturations.  This might not work for all graphics, but it is certainly a consideration.
• Icons play a vital role in simplifying the design and for clear communication.
• A clear beginning and end are essential when describing a process or methodology.  I like the idea of a path or a road, almost like a journey with a beginning and an end.
• The audience associates certain colours with each other.  For example, if you use pink to signify all the shopping routes, it is important not to use pink somewhere else in your diagram that has nothing to do with shopping routes.
• Use Occam’s razor to remove unnecessary elements that have no purpose in conveying the intended message or information.

Choosing a subject matter

 I am choosing my desk and work area as a subject matter.  This is where I do all my projects. I will be flexible to change things around or simplify this area to create an information graphic.

Creating an information graphic

I have sketched this area to make sense of everything present in this area and noticed that there is a lot of repetition of elements such as books, brushes, pens and even lights.  I will narrow that down by just having one item on the infographic to avoid unnecessary repetition.

The three-quarters view of this area is ideal because it gives the best perspective and a feeling of depth.  I can also fit more items into this area without it looking too cramped.  I will try other compositions as well. 

The front view will not work because there are many important elements that I am looking at while sitting at the desk, like the window for natural light, my supplies and the Wacom tablet.  The sketches in figure 5 are also cropping out key objects as the footstool and storage for my art supplies.  Now that I have an idea of the composition, I will start breaking the information down by analysing the area.

I will now arrange the important objects by choosing a colour for each one, and the less important objects will be in grey to form part of the background.  I have done a rough sketch in figure 8.

I think this concept could work, but now I will remove elements that could distract the viewer from the essential aspects.  I am removing the table to the left of the green table, the water on the table, and the tall square light between the pink and green desk.  I also added the cupboard on the far right to experiment with a different look.

I now need to refine and simplify further by researching some rendering ideas and creating another visual reference sheet.  The multi-colour elements in draft two could work, but now I am thinking of having the illustration in one hue and different tonal values and not using a colour code but a diagram with dash lines.  I will also introduce outlines to give the infographics definition and sharpness and keep the background simple to allow the diagram to stand out.

In figure 10, I included images of Billy Jean from his website https://billie-j.com/whataboutery and also from infographic sites such as https://coolinfographics.com/blog and https://pudding.cool.  I paged through these sights to further understand how to use text, diagrams, rendering and colour when doing infographics.  The designers used contrast and detail in selected images to create a hierarchy and draw attention to an element, so I will use outlines on the chair to draw the viewers’ attention to the chair. 

Choosing a colour palette and type

I have narrowed the colour palette down to two options, and because Adobe Illustrator is so user-friendly to change colours easily, I knew I could make colour tweaks at the end.

The colours of draft 3 (figure 13) are still too contrasting and might distract from the diagram, so I have decided to scale the palette down to one hue and use colour palette B.

The heading in figure 14 is Le Havre Regular at 93pt, and the body text is Verdana Regular which is much lighter than Le Havre and creates a nice contrast.  The “M” of Le Havre has sharp peaks, which draws attention but contrasts with the swooping curves of the lowercase “i”.  The x-height is low and draws the eye into the illustration.

I have used an outline for the chair and footstool to draw the eye, lead it to the desk, and then to the art supplies on the shelving.

This illustration is simple and doesn’t need numbers, colour codes or a key.  The diagram with the description is enough; adding numbers and keys will make it too busy.

Overall it was another rich and rewarding exercise that challenged me to learn new skills.  I was pleasantly surprised with the outcome as I was out of my comfort zone with this exercise.  I think it all came together in the end, and I look forward to doing another information graphic soon.