Using Illustrations for Websites


Having a website makes it easier to reach out to a lot of potential clients or viewers, and it is easy for people to find what they are looking for. However, since everyone can make one, there are a lot of bad or boring websites that do not stand out. This will lead to less people visiting the site and nobody knowing about it.

Viewers want to be entertained and surprised, they want to see things they haven't seen before. To connect with the site and trust the company. By using illustrations and creative ways of displaying things, users will want to come back and even share if with their friends. This is because it is different and it can reflect the brand in a better way then using ready made templates and stockphotos.

We never cease to stand like curious children before the great mystery into which we are born
— Albert Einstein

1. Why should we use them?

Through out time humans have always found illustrations and storytelling entertaining and easy to understand. No matter where you are from, we tend to understand the context by just looking at images. The web is created for everyone to read, and the more people you reach out to, more viewers you get and profit will rise. 

In todays web customers want websites quickly and also to be constantly updated. It leaves little time for the designer to create something unique and different. However, viewers are not attracted to generic websites that look the same. It takes usually less then 10 seconds to capture peoples attention. Using illustrations you can decide yourself how it should look like and you are creating something original nobody else has. Viewers want to see something new, they want to be surprised. This will lead them to stay on your page, keep on visiting it and sharing it with others.

Remember that even if it is an illustration it doesn’t have to be childish or goofy. Try different techniques like hand drawing, thickness of the lines, simple or overly detailed, shading and patterns. Use colours that will stand well with the rest of the brand, colourful or even black/white.

Create a mascot that represents the brand, use illustrations that tells the viewer what it is about, have symbols and infographics that shows steps and actions , make a whole new world, use illustrative typography. 

Viewers want to be entertained and surprised, they want to see things they haven't seen before. To connect with the site and feel like they belong there. By using illustrations and creative ways of displaying things, users will want to come back and even share if with their friends.

A picture is worth a thousand words
— Napoleon Bonaparte

2. Illustrations

Stockphotos are photos that you can buy online that someone else has taken. It is useful for the costumer because they can get the photo right away, however, everyone else can use them too. If viewers open your page and see photos they already have seen before, they tend to not trust the page, find it boring and leave. It also doesn’t reflect the personality of the websites brand. Viewers want something unique and that will grab their attention, this will keep them on the site.

If you create your own illustrations, you do not need to find a photo that almost matches the content. Instead you can design something that fits the content exactly. You can use the brands logo, colours, feel, layout, mascot and elements, or the content of the page. Having the power to do whatever you want, you can create something nobody has seen.

When opening up the page you want to grab the attention of the viewer right away. Have an illustration that welcomes them or that describes what the site is about. On good way of displaying who is working there is to use illustrative portraits, it makes it more personal and you can have fun with it, showing that you are a team that has fun.

I found I could say things with colour and shapes that I couldn’t say any other way - things I had no words for
— Georgia O’Keeffe

3. Mascots

A mascot is a character that supports your corporate identity brand and site. It can be a person, a creature like an animal or monster, object or even have several of them together. The mascot is like a lucky charm and it is there to guide and help the viewers, to create a bond with them. It can be there to help answer questions, educate, state information about the brand or to create a unique feel to the page. It is an icon that stands for the brand or what it represents. 

It can appear the same on every page, or change depending on the content. Differ the angles, poses and expressions, it makes it more interactive and memorable. Give it a personality and name, and make it charming and friendly so that people would start to love it, associate with it and want to come back to see it. Remember it has to represent the company, or else people won't remember where they have seen it. 

Test out different colours, drawing techniques and lines. Make it memorable and different by looking at what other companies have done successfully. It’s different to have them printed out then seeing them on the web, so make sure you test it out and see what your co-workers and friends say about it. + Always create them in vectors so that you can re-size it or want to edit it later.

4. Background

A site does not need to have a boring white background, it can be in bright colours, patterns, photographs or even a illustrated world.

If you have a lot of illustrations, you might want to keep it to a simple background. However, you can also divide the page up into different sections and backgrounds. For example use one section for a white background and another with patterns. 

Many websites create this whole new world for their brand. It can be a fantasy land where the product is the main character, or a landscape far away. If you have a brand that want to display how they make the product or where the product comes from, use it as a background piece. It can fill the whole page, just the heading or footer, or it can be in between. Just remember it doesn't need to look like the real world, play around and try new colours or objects.

Use decorative backgrounds or patterns. Either having subtle patterns like paper or a repeating pattern. Or use huge photographs that fills the whole page. It has to be simple if you want to use text on top. Or change settings in Photoshop or draw on top of them.

This world is but a canvas to our imagination
— Henry David Thoreau

5. Symbols & elements

Infographics and symbols are very popular and a easy way of displaying data and gaining viewers attention. Instead of having to read the whole article with a lot of boring facts and information, you can highlight certain areas of it with illustrations. Display data or diagrams in a new way by using colours, patterns or new shapes. It doesn't need to be a pie chart or a simple list, try to engage people to want to read it. 

The website can have icons for social media or how to contact them, because the viewers know these certain icons and trust them. Create your own icons that match your site and highlight them so people will see them. Be creative, use symbols or illustrations that go with the context and make it entertaining for visitors. Use frames or small elements that decorate the website. 

You can illustrate the instructions like steps or actions the viewer needs to take for certain processes or how the brand is created. Characters can explain what they need to do or how to use certain things. Have a step by step illustration how you created the logo or how the products are made. 

To highlight information on your website, have an illustration next to it. For example a purchase button can have a character holding the button, this catches their attention.