Skip to main content

A glimpse at our illustration process

18th July, 2013

The initial ideas and production process in Illustration work by one of our illustrators.

To help explain the function of their latest site in a fun and friendly way, we drew up some ideas for illustrations on a responsive website home page. In this post we shed a little light on the initial ideas and production process.

We created responsive illustrations, including a large homepage desktop illustration to help show the intended use of the tool, whilst also adding a splash of colour and character.

A glimpse at our illustration process

The first move was to investigate the existing website and make sure that the purpose of the site is clear. Next up is sketching out quick ideas of characters and objects that could fit with the theme. Google Images is an essential resource for accurate reference material. For this project pictures of building sites, diggers, scaffold, iPhones and laptops were collated for reference material.

The very first idea was a four panel comic strip that told the narrative of someone having excess building materials left over and using this construction materials exchange tool website to assist in re-purposing or recycling them. The website was included in the illustration, being used on different devices to try and highlight the responsive design of the new site.

Whilst the narrative was clear, the comic strip panels felt too much like sudden jump cuts and feedback from the team led to the idea that we should try and include the story within one large image. We opted for the idea of having all the characters in one big open world but was a little concerned that it would be easy to lose the focus of the narrative. This early sketch shows all the characters spread out across the landscape, but they’re too small and it’s difficult to see exactly what they’re doing so the narrative is lost.  

Another idea was to get rid of the story completely and just show a busy landscape full of builders and vehicles going about their business. It’s not obvious that the people are recycling materials but we liked the little touches like the windmill, the tower crane, the flowers and the pond. We thought the way this brought in the environment would hopefully give the impression that this organisation was eco-friendly. This also made the illustration slightly taller to ensure it would work with the homepage layout.

Going back to the narrative, characters were brought into the foreground and made the smartphone and laptop easy to see. This sketch was approved and then it’s time to start adding a bit of colour.

The sketch was imported into Photoshop and then digitally painted the different layers using the brush tool. A new layer of buildings were added into the background to help add a bit of extra depth and brought back the pond and the flowers to make the landscape a bit friendlier.

More discussion with the design team led to tweaking the tone of the green grass so it matched the buttons on the site, for brand colour consistency.

Another round of amends was used to replace the bags of rubble with a spade (they looked too much like bags of money) and scaffold was added to make the bricks look more like they were part of a building site. The final addition was one extra step in the story that showed the two websites users shaking hands.

illustration banner for zero waste scotland

Finished illustration and responsive website

The end result worked really well, and you can read about the finished project case study here.

You can see more of our illustration work on our Dribbble account @curveagency

Drupal and UX Design Agency

UK Drupal Agency and UX Design Team with our very own usability testing lab in Leeds. We work with national charities, NGOs and private sector clients.