Posted 8th October 2014 | By ExtraMile

This weeks design hour is going to be themed around illustration. Examples created by hand or by computer can be seen throughout printed and digital media and can really set a brand or company apart from the rest especially if they have a unique style or highly recognizable motif. The style of illustration also helps to steer the marketing of a company in one direction or another.

Illustrative Design

This weeks design hour is going to be themed around illustration. Examples created by hand or by computer can be seen throughout printed and digital media and can really set a brand or company apart from the rest especially if they have a unique style or highly recognizable motif. The style of illustration also helps to steer the marketing of a company in one direction or another. Hand drawn, childlike and doodle types of illustration can reflect an informal, playful and perhaps independent business, whilst clean digitally created illustration can reflect a technically minded and corporate company.

Let's first look into the world of illustrated web design.

Mint Design Company

This is a really pretty site using a hand drawn style of illustration throughout. It gives a real sense of individuality and shows the personality of the creator. Not only are the drawings beautiful but there are some lovely snippets of animation dotted about. The navigational elements and social icons have their own individual animations when you hover over them, whilst each page has a little animated scene when it first loads up.

Illustrative Web design

What is Bitcoin

This site uses a “flat design” type of illustration where all elements are created in 2D with minimal detail and texture. It can give a more modern, corporate and contemporary feel to a website - more so than the hand drawn style of illustration. The scrolling in this also tells a story as the user is navigated through an explanation of what a Bitcoin is.

Flat Design website

Don Guri Music

This site for a collaboration of musicians makes a great entrance with its illustrated, animated and musical landing page. This fun illustrated style is echoed in several of the websites elements. The illustrated menu items show subtle animated effects when the user hovers over them, whilst the musicians themselves display a little animated version of their individual talents.

Digital Web Design

Garden Studio

I really like the landing and ending scenes in this website. They use layering along with parallax scrolling to create these beautiful 3D landscapes. As the user scrolls, the layers move at different speeds which come together for a few seconds to create the complete picture. The movement almost makes it feel like you are part of the landscapes.

Parallax Scrolling websiite

Logos

Here is a selection of some very successful illustrated logo. Whilst Mail Chimp’s motif is hihgly detailed and has more of a 3D style, the illustrated logos of Starbucks and Obey use negative space and a bold block printing style of design to create their striking and memorable logos.

Mail Chimp LogoObey LogoStarbucks Logo

Packaging

These three examples of illustrated packaging vary in style and are all fantastic in their own individual way. One uses fun child-like drawings, another uses beautiful and intricate floral drawings and the last uses geometric forms. 

Illustrative packaging

Images all sourced from Pinterest
Companies mentioned are
Nuts.com
Purdey's
Omnom Chocolate

Fonts

Although hand drawn / illustrative fonts are very stylized and not suited to every website, I do have a fondness for them. They can help to create a sense of fun, informality and add a more personal touch in design more than a traditional sans serif or serif font. Here are a couple of my favourites:

Happy Fox by Lauryn Green

Happy Fox Font

Look Up by Filiz Sahin

Look Up Font

Written by Laura Bennett, designer at ExtraMile Communications.

ExtraMile we try to take an hour out each week to look around us at what others do and to gain inspiration and to admire people's creativity. Each post in this series is one staff member's take on the world of web, design and things online. We hope you enjoy it.

extramile

About ExtraMile

A digital marketing agency with international capabilities