Isn’t it sweet? Mascots in Modern Web Design

Advertisement

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 Screenshot1
Heckert, a handsome wildebeest with typical beard and smart-looking curled horns, is the GNU2‘s mascot.

Today mascots are used almost everywhere3 — 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 Screenshot4
Classic: Livejournal5 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 Screenshot6
Yigg.de7 uses a hamster as a mascot. The mascot appears everywhere throughout the site.

Illustrations ≠ Mascots

Please notice that an illustration and a mascot aren’t the same thing. Joyent8 and HappyWebbies9 use creatures in the comic-style; they’re not mascots, as different creatures are displayed on different pages. Ellislabs10 also uses illustratoins, not mascots.

Mascot Screenshot11
Joyent

Mascot Screenshot12
HappyWebbies

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.

BobrDobr13

Mascot Screenshot14

Justin Bird15 — animated. Don’t forget to hover your mouse over the bird.

Mascot Screenshot16

Stoodeo17

Mascot Screenshot18

Linksguy19

Mascot Screenshot20

Wishlistr21

Screenshot22

Brent Ayers23

Mascot Screenshot24

NetNova25

Screenshot26

Netmaths27

Mascot Screenshot28

Kent Pribbernow29

Screenshot30

Cork’d31

Mascot Screenshot32

Freelanceswitch33

Screenshot34

Octwelve35

Mascot Screenshot36

GlobalZoo37

Screenshot38

Nü Regime39

Screenshot40

Pasquale D’Silva41

Mascot Screenshot42

Potato Parade43 — Flash. This is an McCain’s advertisement.

Mascot Screenshot44

Goanna Webdesign45 (Flash)

Mascot Screenshot46

Crayons47 — animated.

Mascot Screenshot48

Outshouts49

Mascot Screenshot50

Fluther51

Mascot Screenshot52

Companion53

Screenshot54

Datejs55: Ninjas at work.

Screenshot56

Mooourl57 — the mascot supports the logo.

Screenshot58

Dr. Web Magazin59

Screenshot60

MeinProf.de61

Screenshot62

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

Screenshot64

Amiami Village65

Screenshot66

Sourcebench67

Screenshot68

Classics

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

Mascot Screenshot70

Ask Dr. Z71: 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 Screenshot72

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!

Footnotes

  1. 1 http://www.gnu.org/graphics/agnuhead.html
  2. 2 http://www.gnu.org/graphics/agnuhead.html
  3. 3 http://en.wikipedia.org/wiki/List_of_mascots
  4. 4 http://www.livejournal.com/
  5. 5 http://www.livejournal.com/
  6. 6 http://www.yigg.de/
  7. 7 http://www.yigg.de
  8. 8 http://www.joyent.com
  9. 9 http://www.happywebbies.com/
  10. 10 http://ellislab.com/
  11. 11 http://www.joyeur.com/
  12. 12 http://www.happywebbies.com/
  13. 13 http://bobrdobr.ru
  14. 14 http://bobrdobr.ru
  15. 15 http://www.justinbird.com/
  16. 16 http://www.justinbird.com/
  17. 17 http://www.stoodeo.com/
  18. 18 http://www.stoodeo.com/
  19. 19 http://linksguy.com/
  20. 20 http://linksguy.com/
  21. 21 http://www.wishlistr.com/
  22. 22 http://www.wishlistr.com/
  23. 23 http://www.brentayers.com/
  24. 24 http://www.brentayers.com/
  25. 25 http://netnova.com.au/
  26. 26 http://netnova.com.au/
  27. 27 http://www.netmaths.net/
  28. 28 http://www.netmaths.net/
  29. 29 http://www.elitistsnob.com/
  30. 30 http://www.elitistsnob.com/
  31. 31 http://corkd.com/
  32. 32 http://corkd.com/
  33. 33 http://freelanceswitch.com/
  34. 34 http://freelanceswitch.com/
  35. 35 http://octwelve.com/
  36. 36 http://octwelve.com/
  37. 37 http://www.globalzoo.de/
  38. 38 http://www.globalzoo.de/
  39. 39 http://www.nuregime.com
  40. 40 http://www.nuregime.com
  41. 41 http://darkmotion.com
  42. 42 http://darkmotion.com
  43. 43 http://www.potatoparade.co.uk/
  44. 44 http://www.potatoparade.co.uk/
  45. 45 http://www.goanna-webdesign.com/
  46. 46 http://www.goanna-webdesign.com/
  47. 47 http://www.crayons.be/
  48. 48 http://www.crayons.be/
  49. 49 http://www.outshouts.com/
  50. 50 http://www.outshouts.com/
  51. 51 http://www.fluther.com/
  52. 52 http://www.fluther.com/
  53. 53 http://www.companions.com.au/
  54. 54 http://www.companions.com.au/
  55. 55 http://www.datejs.com
  56. 56 http://www.datejs.com
  57. 57 http://www.moourl.com/
  58. 58 http://www.moourl.com/
  59. 59 http://www.drweb.de/
  60. 60 http://www.drweb.de/
  61. 61 http://www.meinprof.de
  62. 62 http://www.meinprof.de
  63. 63 http://www.nrhrehab.org/About+NRH/Meet+Vic+our+Mascot/default.aspx
  64. 64 http://www.nrhrehab.org/About+NRH/Meet+Vic+our+Mascot/default.aspx
  65. 65 http://www.amiamivillage.com/
  66. 66 http://www.amiamivillage.com/
  67. 67 http://www.sourcebench.com
  68. 68 http://www.sourcebench.com
  69. 69 http://www.ask.com
  70. 70 http://www.ask.com
  71. 71 http://www.autoblog.com/2006/06/30/ask-dr-z-national-ad-campaign-for-chrysler-starts-tomorrow/
  72. 72 http://www.autoblog.com/2006/06/30/ask-dr-z-national-ad-campaign-for-chrysler-starts-tomorrow/

↑ Back to top Tweet itShare on Facebook

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.

Advertisement
  1. 1

    Your mascot should be a little fellow who looks kind of crazy with a big hammer.

    0
  2. 52

    Where can I buy these mascot? Also where could I find the tutorial to create mascots like the one that have been listed?

    I think smashing magazine should have a mascot it would be sweet.

    0
  3. 103

    oui je suis d’accord .. je veux tellement une photo pour mon profile :)

    0
  4. 154

    Made a mascot for an online shop to guide through the steps of selecting and purchasing products. I think its a great addition to any site that requires a user to do things in sequential order.

    Microsoft Bob anyone?

    0
  5. 205

    Hello!!
    Ya this mascot and cartoon poster look like really funky style.

    0
  6. 256

    i love individuality…if ur gonna use a mascot, for the love of *&*&! make sure it is something original!

    ;)
    sandy
    megastar media

    0
  7. 307
  8. 358

    this is a great collection !

    0
  9. 409

    Justin Bird looks like a BLUEBIRD

    0
  10. 460

    Where can i get the freelancer for mascot and logo ?

    0
  11. 511

    Justin Bird looks cute dont he

    0
  12. 562

    cool post..

    can u please include a tutorial on mascot creation..

    0
  13. 613

    Anyone knows who the author of the linksguy (dead) site mascot is?

    0

↑ Back to top