The Unique Effect of Using Illustration in Website Design

The Unique Effect of Using Illustration in Website Design

If you look at website design trends these days and compare them to 4-to-5 years ago, you will notice a different use of illustration at least 20% of the time. Why is the use of illustration in web design growing? What can the viewer receive through illustration that is different from other design styles?

In this article we will be examining some of the reasons for the recent upturn in the use of illustration in website design.

Using Illustration in Website Design

Here are just some factors with examples, though there are many more reasons than those I list below.

The Unique Effect of Using Illustration in Website Design

Story Telling

Human nature has always been attracted to story telling, whether it’s descriptively or visually. In our case, illustration is a go-to style for visual storytelling. Viewers connect with illustrated narratives faster and more easily.

The visual medium makes it easier for viewers to grasp and relate to problems and solutions in a story; the designer plays an even greater role in portraying the plot-lines with clarity.

Entertainment usually plays a small role in story telling: the greater point of a story is to weave causes and effects together so the viewer can remember the story more easily.

Stylistic details play a great role for readers in visual narratives; therefore the designer’s role in highlighting the proper details is very important.

Fantasy and engaging the imagination

Rules and facts can easily bend or change through illustration in order to present the designer’s point of view better. Viewers love to travel through a world and perspective fantasized by someone else, so long as it is visually accessible.

Adventure World

Look at the above site: Nobody will question why a boat is coming down from a volcano or how a fish can carry a big frame.
In fact these exaggerations allow viewers to follow the concept more easily and in a different way than they normally do, which gives them pleasure.

Below, the “Buy Ticket” call to action is not in its standard spot in the middle of the page. This imaginative placement draws more attention to a key element in the page.

Adventure World

Below is a far more inviting design for signing up than the old-fashioned “Sign Up” button we are used to seeing. No one will object to why an octopus is holding the button, or why a horse floats in the middle of the sky.


In the sample below, the flash site starts with a flying airplane that takes you on an imaginary trip around a world. It is hard to resist and get out of this story and hence this site, before playing with some items on the site.

AM Travel

The following site has used illustration for different purposes: a) to give personality to a very ordinary “lemon”, b) to use the lemon to tell a story that absorbs the reader even more, c) to create interesting icons and an easy-to-use nav bar.

They even push the storytelling act further in their product page, where you can “see” the ingredients instead of reading them. This also helps their site to be more language free.

Limon & Nada

Limon & Nada

Personas, Characters and Mascots

“The term mascot – defined as a term for any person, animal, or object thought to bring luck– colloquially (informally) includes anything used to represent a group with a common public identity” – Wikipedia

The use of mascots goes back, before websites were popular. In advertising, since many years ago, using animals or cartoon characters have been very useful in establishing a brand for continued attention.

In websites, the personas and mascots can play even stronger roles. They can be memorized or remembered as an icon and easily understood for what they represent (either an action or a brand).

These days, mascots are commonly used on different sites (but not all are used correctly).
In this sample the big owl can be remembered, especially because of how it is position on the blue background; it has some resemblance to the twitter bird


The Michelin tire has a well-known persona. He acts as a teacher by answering questions and presenting new products.

Michelin Man

Michelin Man

The use of the HIV virus in 3D illustrations and movies on the website below makes it entertaining and educational at the same time. Since mascots and imaginary characters are great attention-grabbers, many educational sites use them to teach or explain a fact.

Various Styles of Illustration: 3D Illustration, Photo-Manipulation and Sketching

The various styles of illustrations that can be used are very wide, ranging from 3D to photo-manipulation to sketching.
For example “Never Ending Friends” and “Never Ending Pens” are projects from “BIC” in Italy. The illustrators used a BIC pen to sketch a drawing that is very eye-catching.

Never Ending Pen

Never Ending Pen

Use of photo manipulation in this site makes their home page shine.


And lastly, a sample of a 3D illustration is found in this site for the Samsung Galaxy ID Microsite:

Samsung Galaxy ID Microsite

Samsung Galaxy ID Microsite

Illustration as Data, Infographic, Instruction and Iconic Action

One of the biggest demands in infographics these days is to convey dry and boring data, graphs, and information via visualized formats.

There are many sites that successfully present instructions, data, and mapping through information graphics.

In, steps and actions are all illustrated; even the icons are very expressive, intended to trigger your emotions and compel you to react.

Get Some Headspace

Get Some Headspace

Observe the use of data and information provided by this site:

Virgin America

Virgin America

Or in this flash site:


In the website below, realized that using infographic resumes or even using custom avatars could help them more than the traditional way.

Resum Up

Resum Up

Compare the interactive illustrative map below with dry statistics and maps given for city statistics.

Get Out There - Queensland Government

Illustration as Pattern or Background or Decorative UI

There are sites that don’t use full illustrations but would like their help in some UI elements, background or decorative patterns.

If you take a look at this site you will notice how they replaced the standard rectangular box of the slide show with a more stylized one. The use of rollover shapes and typography make their site very attractive.

Il Cavallino

Il Cavallino

Background as illustration

This website showcases a very simple use of illustration through a simple pattern for the background.

Potion Factory

The patterns used for the top and background of this site make the site stand out.

Chiragj Solanki

I really like how this designer combined typography, shape and texture for the background in his site.

Information Highwayman

Here is an example of how a nice pattern can give a happy and warm effect to a website:

Twenty2 Designs

Fonts, Typography, and Illustration

The use of typography in websites has become more popular with the new CSS3 web fonts technologies. However, designers have been using it for a long time (as type and image). Hand crafted types, and nice typography can give a unique look and feel to the site.

Give Beyond

Creep Fest



For a while, illustration was considered exclusively for publications, children’s books or editorials. Today, most our publications and communications have been transformed for the web; consequently, illustration has taken a much more varied role in the design world and the correct use of it presents an opportunity for many benefits.


Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.