IllustrationWeb design

Illustration in Web Design

By 24th November 2014November 25th, 2016No Comments

Introduction

The use of illustration in web design is a growing trend, thanks to faster download speeds, ensuring large image files don’t slow down your user’s experience, and a push towards a more imaginative approach to web design, driven by the desire to stand out from the crowd and ensure that your website delivers on impact, branding, communication and usability.

The vast majority of websites do not use any illustration. If used well, this visual tool can help to make your site unique and stand out. There are a broad range of illustration approaches and styles, so you are sure to find something different and fitting for your company. A well chosen style also helps to communicate your brand and express your company’s personality, whilst engaging the user and making your site more memorable.

So what is illustration in web design and how is it used?

The definition of illustration is as follows: Visual matter that has the intention of clarifying, explaining or illuminating. To use illustration effectively it is key to first look at how it can be utilised, and consider the goal you wish to achieve.

Looking at the following examples we will explore these uses and what they bring to a website. We will examine the use of simple icon and diagrammatic imagery, the introduction of mascots and characters, and then illustration led websites to create a complete unique user environment. Finally, we will examine the use of illustrated text.

Info graphics and flat design

Flat design is spearheading the growing use of illustration in websites at the moment. It is a classically digital style, embracing the fact that your website is a piece of functional technology, whilst also creating a modern, crisp design. Instead of trying to represent real life tactile objects, this illustration style is born out of a desire to simplify right down to the basics, and thus communicate an idea in a fast and direct manner.
A popular way to use this style is to navigate throughout a web site. This kind of design is seen on the Windows 8 apps store navigation blocks and icons, and has gone on to be a popular design choice for many websites. The use of 2D minimal icons with crisp edges, along with a strong colour pallet, directs the user effectively with memorable colour coding. The navigation using large blocks as opposed to text buttons, also recognises the number of people accessing websites using tablets and smart phones.

Windows 8 dashboard navigation

Screenshot of windows 8 flat design navigation dashboard

Use of flat design for navigation in MS Outlook

Microsoft outlook navigation

Use of flat design for navigation in Doc Ready website

Screenshot of Doc Ready website

Use of flat design for navigation in Renamy website

Screenshot of Renamy plugin website

This style is also ideal to communicate processes or ideas in a fun and efficient way. This also helps to reduce text heavy web pages and scale down excess copy, and it works especially well for service websites or those with instructions.

Use of flat design as an info graphic in Akita website

Screenshot of akita website
This website uses flat design to show the flow of data in an imaginative and diagrammatic way, following an email from sender to receiver.

Use of flat design in LinkedIn info graphics demonstrating different statistics

Illustrated info graphic

The flat design style of illustration has developed into a popular visual aesthetic currently popular across web design and advertising.
The Birdbrain website demonstrates how flat design has influenced illustration in the past few years.

Here is how the Birdbrain website looked in 2010

Birdbrain mascot 2010

And now in 2014

Birdbrain mascot 2014

TIP: This style of flat illustration looks good used with a sans-serif font for a cohesive aesthetic.


The use of Character or Mascots.

The illustrated character on the Birdbrain website leads us nicely onto the next use of illustration. The use of a character of mascot can really help to give your website personality, connect to your user on a more personal level and convey your company approach. This helps with customer relations as you can communicate warmth, trustworthy-ness, approachability and humour. A mascot also builds your brand and makes your website stand out. Imagine the Coupon Ninja site or the Chubby Grub site below without their mascots, they would be considerably more generic and plain.

Coupon Ninja website

Coupon Ninja character illustration

Chubby Grub website

Chubby Grub mascot character

Haafe & Haph website

Screenshot of haafe and haph website

Photoshop Lady website

Screenshot of photoshop lady character

Mail Bakery website

Screenshot of Mail Bakery website

Be sure to choose your character well. If the Mail Bakery website wasn’t a well known brand it could, on initial viewing, confuse the user in to thinking they had stumbled across an actual baking site aimed at women. So it is important to consider your user. The use of a character on your site can also help attract in your target market by choosing a character who your target audience can readily identify with.


The fully illustrated site

In this instance illustration is used to drive the whole design of the website and the final result is often highly decorative, creating a unique virtual experience for the user. Fully illustrated websites are popular with companies trying to market an ‘experience’ in the real world, whether it be a shopping experience like the Hermes site, or a travel experience like the Flanders Tourism website (Kust Extra Deluxe). It is important that the site’s functionality is properly considered along with the aesthetics of the design, so that you are careful not to obscure or inhibit navigation on the website. The following examples show how a unique and beautiful environment is created using illustration as the most prominent design element. This use of illustration can quickly establish the nature of your business and the tone of your website.

Use of illustration on the Kust Extra Deluxe website

An animated map of the Flemish coast reveals different areas to visit when you move your cursor across the sights, zooming in with a 3D effect when you click on a location.

Screenshot of extradeluxe website homepage

Screenshot of extradeluxe website

Use of illustration on the Hermes site, La Maison Des Carres

A fullscreen cut-away illustration of a shop’s interior, with footmen welcoming you, lets you click on each scarf design and display it as if it were hanging in a display room.

Screenshot of la maison des carres website

Use of illustration on the Wow toys website

An imaginary landscape populated with illustrated toys in a style that perfectly mimics the bright simple toys for sale on the site. The toys in the scene are animated when the cursor hovers over them in a fun way, then lead to the relevant online shop page when the user clicks on the toy.

Screenshot of illustration used on wow toys website

Screenshot of wow toys website

Use of illustration on the Ferias Para Curtir website

An illustrated map shows the features and layout of this Spanish holiday and activity resort.

Screenshot of ferias para curtir website

The use of illustration in this way doesn’t always directly communicate the product being sold, but more provides a way to establish a brand name, even though what is being marketed may be unrelated.

An example of this could be the BarCamp website. Whilst BarCamp is actually a network for conferences focusing and running workshops around technology, their website illustration doesn’t communicate this but instead focuses on the brand name ‘BarCamp’ showing a camping and forest scene. This can work well and add some fun if your brand is well known in the industry you work.

Screenshot of barcamp website

Another example of this is Garden Studio. A design company which shows off it’s design and illustration techniques using an image of a garden to interest the user and also restate the brand.

Screenshot of garden studio website


Illustrated text

Hand rendered text is a fantastic way to add individuality to a design. Even hand tracing over a standard font instantly creates a totally unique look. It is particularly suitable when trying to convey a natural and organic brand, or for conveying metaphysical things like thoughts, creativity or imagination.

Use of hand rendered text on the Project 365 website

Screenshot of Project 365 website

If you are incorporating illustrations on your website, hand rendered text can be used as a way of unifying your text copy with the artwork.

Use of hand rendered text on the Katy Jackson website

Screenshot of Katy Jackson illustration website


Summary

Illustration can give your website a real edge in many different ways. It is important to consider how and why you want to use it before deciding whether it is suitable for your site. However if you do choose to use illustrations it can really benefit your site’s functionality, brand identity and impact. If you require illustration for use on your next web project, please contact ReactiveGraphics


[box style=”1″]If you found this article useful or informative, please share it through Twitter, Reddit or whatever works for you. It really helps us out a lot and we thank you in advance. If you have any questions please feel free to leave them below or email info@reactivegraphics.co.uk[/box]

Save

Leave a Reply