Illustrations and Mascots in Modern Web Design

Aug 01, 09 Illustrations and Mascots in Modern Web Design

Illustrations and mascots are used almost everywhere. Illustrations are no longer bound to printed publications and mascots are no longer confined within a sports field – they also live in your browser in many modern web designs. Adding characters and illustrative elements to a web design can completely change it’s look and feel making it appear more unique and interactive.

First off, I would like to make a clear distinction between illustrations and mascots because people often get confused with the two and the terms are used quite interchangeably. Although they both have similar functions for evoking emotion and making the design more lively, they are very different things. Mascots can be animals, people, abstract creatures or even robots! On the other hand, illustrations can be any of these things but are not limited to them – in other words, illustrations are just there to enhance the design and to liven up to mood. What makes a mascot different from other illustrations is that it defines the brand and serves as some sort of corporate identity and in websites, they appear on all or most of the pages. Take a look at Ask.com (formerly Ask Jeeves) – their mascot, Jeeves has been used to guide users and help them with their search queries. It wasn’t until March of this year, that Ask.com has resumed the use of Jeeves since their re-branding in 2007.
Jeeves, the mascot for the Ask.com search engine
Contrastingly, if you look at volll.com, you can see the site uses a lot of comic-like illustrative elements but they are not necessarily used for branding purposes.
Colorful illustrations in volll.com
The following is a list of websites I have compiled that creatively uses illustrations and mascots to enhance their design and build their brand.

MailChimp

MailChimp's cute chimpanzee courier
The MailChimp mascot not only effectively represents its company and product, but also depicts the company’s efficiency and competence. The great visual appeal of the mascot makes customers want to use the product and trust the brand. This is easily one of my favorite mascots on the web.

Freelanceswitch

freelanaceswitch's mascot
In one form or another, this mascot appears on every single page of this website. Having different variations of the mascot (for example the same character doing a different action or holding a different prop) throughout the site makes it more interactive and fun for the audience.

Joyent

Joyent uses different characters instead of one mascot
Joyent.com uses characters in a cartoon style although they were not intended to be used as mascots as different characters appear on each page. These illustrations are merely used to embellish the site design.

branded07

Puffin bird mascot of branded07
Rob Palmer’s represents himself with a cartoon puffin bird as a mascot in his web portfolio. The bird appears throughout the site in different variations – sometimes holding up signs and sometimes burrowed in the sidebar.

Cork’d

Mascot of Cork'd holding a wine bottle
Another example of a simple, yet effective mascot. This one depicts a person holding a wine bottle. It is positioned beside the site features to encourage new users to sign up to the site.

volll

The main section of the volll website
I want to conclude with this particular site because not only is it beautifully illustrated, the site layout is so creative and ingenious.

Putting characters and mascots in your designs can effectively change its look and feel. There are no definite rules for implementing mascots/characters in a web design, but keep in mind that you should always design to fit the purpose. If it is a company mascot, it should convey confident expressions and shouldn’t have negative expressions as it must represent the company in a positive way.

9 Comments

  1. Nice article Stevo! Very helpful =]

  2. Great first post Stephen! Keep it up!

  3. Tiago S. /

    Hi,

    Where can I find artists that do this kind of work?

    Thanks in advance,

  4. Chris Southam /

    Not forgetting http://www.performerslounge.com and http://www.winja.co.uk
    They’re very cool mascots!

    • Stevo /

      thx for bringing this up :D The Web Ninja sticker-like mascot is especially cool! Very nice

  5. Hally /

    This is a great page. And the contents are really that worth reading. I will add this to my own library

  6. Informative professional site, whatmore can i say!!

  7. Paul Paul /

    Great site guys, please let me know if you are interested in exchanging links with us.

  8. Floyd /

    Cool sites. I especially like both MailChimp’s and Branded07′s mascot design. Their cartoon characters really brought out the overall design of the entire website. I was aiming for that overall design aesthetic as well when I went to http://www.mascotdesigncorner.com to ask them for a mascot character design. I even gave the design team this link as a reference to how I want the design to look. I couldn’t be happier as for the price I paid it was a steal. Thanks again for posting the websites. They were really inspiring.

Leave a Reply