Design | 15th November

Illustrating our new site

Illustrating your ideas

If you have Illustrator or Photoshop on your computer, the likelihood is that you can create a decent illustration. The difficult part isn’t really in the execution (OK, maybe a little) but more in coming up with original ideas. So how do you train your brain to turn a vague idea into something real on paper? The answer is pretty simple and applies to all aspects of design, practice practice practice. The more you sketch, the more you hone your brain to hand to eye coordination, get a feel for your style and start to understand proportions and perspectives.

Give us an example

Ok, so recently I had the fun task of creating lots of colourful illustrations for the New Socks Media website. The four main pages that needed visuals were: Design, Development, Strategy and Capabilities. After a bit of doodling I came up with a witty idea (if I do say so myself) of designers cranking a colour wheel to create their work. Wouldn’t that be great, if you had an idea, filled some robotic pencils with colour and then all you had to do was turn a wheel. Part of me was also feeling particularly sarcastic that day as I’d been part of an out of work conversation that went something like;

“Design isn’t that important. Anyone can put some pictures and nice fonts on a page”

…I have no words…

Like all of my illustrations, this one started life as a quick, lo-fi pencil sketch. I originally wanted one “cranker” and one “filler” but as you’ll see in the finished drawing I simplified the foreground on the left hand side as I wanted the angled shadows to be a prominent feature.

I scanned my sketch into my computer as a base to start from, opened Illustrator and got to work. The first thing I did was to pick my vanishing point, draw a few guides and decide where the main light source would be. You can use the perspective tool in Illustrator to acheive a similar effect but I personally found that for this piece all those lines just got in my way.

Using my rough guides and initial sketch as blueprints, I shifted my focus onto shapes. I personally stay away from colouring as I go so that I can really focus on proportion and form rather than getting lost in the detail. The finished line drawing looked like this:

Now for the fun part! Line drawings can actually look pretty great on their own but I wanted to add life to my illustration with bright, New Socks brand and complimentary colours. I knew I was going to include subtle gradients in the background and shadows so I created a colour palette for myself which looked like this...

To be honest I never know exactly which colours I'm going to use for each form or character. For this particular illustration I started by using only shades of red, orange and yellow to define areas of light and dark. I then started adding shades of blue for contrast and after about 30 minutes or so I had my finished illustration! To see all four illustrations you can visit the respective pages: design, development, strategy and capabilities.

Written by
Nicole Bartlett
Nicole is a UI Designer and Design Sprint Facilitator at New Socks Media.