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.
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.
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.
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.
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.
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.
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.
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:
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 Getsomeheadspace.com, steps and actions are all illustrated; even the icons are very expressive, intended to trigger your emotions and compel you to react.
Observe the use of data and information provided by this site:
Or in this flash site:
In the website below, Resumup.com realized that using infographic resumes or even using custom avatars could help them more than the traditional way.
Compare the interactive illustrative map below with dry statistics and maps given for city statistics.
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.
Background as illustration
This website showcases a very simple use of illustration through a simple pattern for the background.
The patterns used for the top and background of this site make the site stand out.
I really like how this designer combined typography, shape and texture for the background in his site.
Here is an example of how a nice pattern can give a happy and warm effect to a website:
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.
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.