IXD104 A picture is worth…

Storytelling

This weeks lecture got us back into the role of things by looking at how pictures have been used to tell stories and to communicate dating back to cave paintings. A story can be told in a single image or in multiple shots. This is demonstrated by some breathtaking photographic outcomes that were entered into The Independent Photographer’s global photo contest on the theme of visual storytelling.

'Maras gang member praying' in San Francisco Gotera jail, El Salvador, shot by Javier Arcenillas.

Above is an image taken from the Latidoamerica project. It shows a Maras gang member praying in San Francisco Gotera jail. The emotive elements of this image are very powerful as it tells multiple stories. It tells a story about street gangs, judgement and violent offenders but also tells a story about those that have got caught up in gangs and are now seeking redemption. I find this image to be incredibly moving and to be a very strong example of the narrative power of images.

'Fake forest' in Chongqing, China, shot by Dave Tacon.

The above image was taken in Chongqing China’s fastest-growing city. It shows an entrance through temporary fencing that has been made to look like a forset. Through the entrance, the real landscape can be seen of workers at a construction site in Jiangbei District. This tells a very surreal story about deforestation and urbanisation. On first viewing the image I thought the door and building site had been edited in however on closer inspection evidence of the building site can be found in front of the forest scene on the left-hand side. For me, it’s hard to look at this image and not consider the loss of the natural beauty that comes with urbanisation.

Similarly, I found a number of stunning images on the provided resource pictorymag.com that told beautiful stories under the titles of local legends and life before your eyes.

 

Juxtaposing Images

Stories can also be told through images in combination which can even lead to completely new meanings. A great example of this was provided in this weeks lecture.

Juxtaposing images

Juxtaposing images

The first image combination leads the viewer to perceive the little girl’s facial expression as relating to excitement and wonder while the second suggests something closer to concern and anxiety. This is an important factor to consider when working on the flow of anything visual as simply by ordering images in a particular way can result in a completely different outcome and form of communication.

This brings us to how we can use visual communication as interaction designers and how it can relate to multiple career paths including data visualisation and illustration. I have looked at some illustrators and data artists below.

 

Marion Deuchars

Marion Deuchars is an illustrator and author who created children’s books and become world-renowned for her style of hand lettering. A lot of books appear to deal with making art and drawing some of which I’d be excited to buy for me never mind children.

Cover image of Let's make some great art by Marion Deuchars

I looked through Let’s make some great art and found the whole book to be a work of art. The hand-drawn lettering really adds to the overall feel of the illustrations and the final outcome of page layouts.

Pages on Jakson Pollock

Pages on African Masks

There is a very distinctive handcrafted feel to Deuchars work which I love. I also love the focus of getting children engaged with the masters and pioneers of the art world in simple and fun ways.

Deuchars hand-lettering has even brought her to work in other areas such as magazines including Vanity Fair, Esquire Magazine and New Yorker Magazine. As well as working for clients such as TATE Gallery, Galaxy and Art Press.

 

Vic Bell

Vic Bell is an illustrator, iconographer and brand designer. I thought it would be helpful to look at some of Bells work and see how she develops different styles of icons and illustrations for different brands and devices. I began by looking at how Bell developed a complete icon set for Uber. This was really interesting as Bell talks you through her process in detail which is really helpful and perhaps something I can emulate in my own work.

Map icon created by Vic Bell for Uber

Bell describes how she began the project with the largest design and then reduced it in detail in order to keep the outcomes consistent and clear. Bell begins with the map as it will be the most complicated icon and develops a key for how the icon had been created (see above) which can be applied to all icons that follow. This is a really simple and effective way to approach iconography and I imagine saves a lot of time and redesign. By beginning with the most complicated icon Bell tackles the most complex issues and additional details that will arise allowing her to create a standard (Key) for the rest of the icons which should be applicable in most cases. Similarly, I would like to tackle my own iconography for my Travel App in this way. While I do not have to accommodate different sizes for different screens it may still be helpful in instances, to begin with, a more detailed outcome and remove some of the detail in stages so that I am insuring a clear outcome. I would also like to begin with the most complex icons and developed a key as Bell had done above that can be applied to the rest of my icons.

I then looked a Bells work for Burberry. This was a really interesting and quite complex project as the Brand is so well known. It was great to see some of the methods Bell used to approach her designs e.g. designing icons on a 28px grid.

Grid used by Vic Bell

Bell also outlines how she deals with perception and icon spacing e.g. when an icon consists primarily of white space 6px must be given to allow the element to external space, see examples below.

Icon spacing

It’s really helpful to see how Bell has approached this as the problem does arise that while icons may be set within the same grid and not exceed a specific width or height some can still appear larger than others due to the shape and the amount of whitespace required. Other important factors that Bell looks at in more detail are stroke caps and corners, consistency in corner radius and further optical correction. Bell creates the rule that if an icon takes up the full grid while requiring a lot of white space a 2px border should be applied to ensure a more balanced outcome against the other icons to the human eye. These are all really great guidelines I hope to be able to apply them effectively to my own work.

 

Marcin Ignac

Marcin Ignac is a data artist and founded the studio Variable. Variable has worked on a number of large scale data visualisation projects. One that really caught my eye was the Technology Garden created for IBM.

Technology Garden is a data visualisation of IBM analysis of millions of data points at Wimbledon. The garden combines digital aesthetics and forms found in a traditional English garden. It also utilises colours found in IBM’s brand guidelines and shades of UV light photography. The visual forms created to represent the data are driven by the concept of morphogenesis, this is the biological process that causes an organism to develop its shape. The data presented include the excitement of the crowd player gesture, sets, games, points and winning proins to list only a few.

I found the overall impact of Technology Garden to be incredible and combined beautifully as an installation piece as shown above. The data visuals are beautiful and present the information in a way that makes it almost feel alive. It is incredible to think about how creatively and intricately information can be presented. What I felt was most impressive was however the movement and the feeling of growth Variable were able to create in this piece.

 

What have I learnt?

  • All images tell a story whether it is simple or complex and this should be considered when creating any visual outcomes.
  • There are loads of areas within illustration and data visualisation that I could potentially generate a career in.
  • Visual outcomes can have multiple purposes and have different outcomes in different contexts as seen in Marion Deuchars hand-lettering.
  • When creating icons it can be helpful to begin with the most detailed outcome first and then work on the simpler outcomes to achieve visual consistency across the set.
  • Data can be present in multiple ways and result in beautiful outcomes

How can I apply this to my work in future?

  • I should always consider what is the story I’m trying to tell when creating an illustration or any visual outcome and use this to influence design choices.
  • I should take the time to experiment more with hand-rendered visuals as they can result in really engaging outcomes.
  • In this project and as I continue to create icon sets I should account for icons that consist of lots of white space by adding additional external pace to the outcome to achieve visual balance across the set.
  • It might be helpful to try presenting data in different and creative ways to improve my data visualisation skills.
Share this post:

Leave a Reply

Your email address will not be published. Required fields are marked *