Sven Lennartz

About The Author

Sven Lennartz Sven is the co-founder and former CEO of Smashing Magazine. He’s now writing at his Conterest Blog, where he focuses on blogs, content strategy and publishing — all in German.

Isn't it sweet? Mascots in Modern Web Design

The more emotional a site design is, the more likely it is to evoke positive feelings within its visitors. To achieve a lasting impression, designers tend to use visual cues and offer some eye candy for hurried and hectic users. E.g. vibrant color schemes, photos and illustrations can be used to draw user's attention to some specific site section. But are there any further options? Yes,...

The more emotional a site design is, the more likely it is to evoke positive feelings within its visitors. To achieve a lasting impression, designers tend to use visual cues and offer some eye candy for hurried and hectic users. E.g. vibrant color schemes, photos and illustrations can be used to draw user's attention to some specific site section.

But are there any further options? Yes, there are. Actually, mascots are traditional for sports competitions such as Football World Championship or Olympic Games. Mascot is a more or less nicely designed creature which is symbolic for something and is supposed to evoke sympathy and strengthen the sense of belonging to one single team.

Mascot Screenshot
Heckert, a handsome wildebeest with typical beard and smart-looking curled horns, is the GNU's mascot.

Today mascots are used almost everywhere — e.g. by a number of software applications, groups and communties. It can also support the corporate identity for companies and services. Consequently, they are also becoming more and more popular in web designs.

What Do Mascots Look Like?

Animals and human-like creatures are used more frequently than some abstract creatures. The reason is quite trivial: users are more likely to associate their emotions with something they can easily recognize and find emotional binding to. Abstract creatures need to be studied and understood first. Most users don't have the time and patience to do that. And that's definitely not sometihng they are looking for in the first place. Still, abstract creatures are also possible.

As the carrier of positive feelings, mascots usually laugh and transport the feeling of joy, contentment and happiness. To leave a lasting impression, mascots have to look as cute, as sweet, as adorable, as pity and sometimes even as silly as possible. Unfortunately, most mascots have no names; however, having a name is rather usual for large communities as it can be easier referred to.

Mascot Screenshot
Classic: Livejournal still has its famout mascot, Frank the Goat. Frank usually says "Baaaa" and likes to eat pants.

Some mascots are just hand-drawn illustrations, others are combined with a logo. They appear throughout the site and motivate users to some actions — e.g. to visit some site section or fill in the sign-up form.

Mascot Screenshot
Yigg.de uses a hamster as a mascot. The mascot appears everywhere throughout the site.

Mascots in Modern Web Design

A mascot can provide a site design with a fine and nice detail which the site would miss otherwise. This detail is used on private pages as often as in an online-shop or by a web-service. It's important that the final mascot design is clean and fits to the overall site design. For instance, a laughing beaver doesn't really help a site which tries to sell some underwater accessories.

We have collected a number of cute, well-designed and visually appealing mascots. The images are linked and lead to the pages from which they've been taken.

BobrDobr

Mascot Screenshot

Justin Bird — animated. Don't forget to hover your mouse over the bird.

Mascot Screenshot

Stoodeo

Mascot Screenshot

Wishlistr

Screenshot

Brent Ayers

Mascot Screenshot

NetNova

Screenshot

Netmaths

Mascot Screenshot

Kent Pribbernow

Screenshot

Cork'd

Mascot Screenshot

Freelanceswitch

Screenshot

Octwelve

Mascot Screenshot

GlobalZoo

Screenshot

Nü Regime

Screenshot

Pasquale D’Silva

Mascot Screenshot

Potato Parade — Flash. This is an McCain's advertisement.

Mascot Screenshot

Goanna Webdesign (Flash)

Mascot Screenshot

Crayons — animated.

Mascot Screenshot

Outshouts

Mascot Screenshot

Fluther

Mascot Screenshot

Companion

Screenshot

Datejs: Ninjas at work.

Screenshot

Mooourl — the mascot supports the logo.

Screenshot

Dr. Web Magazin

Screenshot

MeinProf.de

Screenshot

Vic is a hand-drawn mascot of a Medical Rehabilitation Network.

Screenshot

Amiami Village

Screenshot

Sourcebench

Screenshot

Classics

Ask.com used to have Mr. Jeeves answering users' questions. The results weren't always perfect, but Mr. Jeeves always stayed calm and polite.

Mascot Screenshot

Ask Dr. Z: in 2006 Chrysler unveiled its "Ask Dr. Z" national ad campaign that features the company's Chairman, Dieter Zetsche, as the spokesperson and mascot.

Mascot Screenshot

Should Smashing Magazine have a mascot?

We’d like to know your opinion. If yes, how should it look like? Please let us know in the comments!


More Articles on

Free Fonts Of The Month: Relato Sans, Droid Family

by Vitaly Friedman

Every now and again we take a look around, select “fresh” high-quality free fonts and present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually the time you should be investing in your current projects. We search for them and we find them, so you don’t have to. This month we'd like to present you Relato Sans and the Droid font family....

Read more

Screen Resolutions and Better User Experience

by Vitaly Friedman

In order to work well, designs have to be optimized for simplicity, transparency and, consequently, optimal user experience. The user experience itself is, however, in many cases just an elegant term employed with false intentions and wrong approaches. Optimal user experience is rarely achieved by visual design elements, although some stakeholders are strongly convinced that it actually is...

Read more

Pagination Gallery: Examples And Good Practices

by Sven Lennartz

Structure and hierarchy reduce complexity and improve readability. The more organized your articles or web-sites are, the easier it is for users to follow your arguments and get the message you are trying to deliver. On the Web this can be done in a variety of ways. In body copy headlines and enumerations are usually used to present the information as logically separated data chunks. An...

Read more