Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

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? Link

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.

Mascots in Modern Web Design Link

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.

BobrDobr8

Mascot Screenshot9

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

Mascot Screenshot11

Stoodeo12

Mascot Screenshot13

Wishlistr14

Screenshot15

Brent Ayers16

Mascot Screenshot17

NetNova18

Screenshot19

Netmaths20

Mascot Screenshot21

Kent Pribbernow22

Screenshot23

Cork’d24

Mascot Screenshot25

Freelanceswitch26

Screenshot27

Octwelve28

Mascot Screenshot29

GlobalZoo30

Screenshot31

Nü Regime32

Screenshot33

Pasquale D’Silva34

Mascot Screenshot35

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

Mascot Screenshot37

Goanna Webdesign (Flash)

Mascot Screenshot

Crayons38 — animated.

Mascot Screenshot39

Outshouts

Mascot Screenshot

Fluther40

Mascot Screenshot41

Companion42

Screenshot43

Datejs44: Ninjas at work.

Screenshot45

Mooourl46 — the mascot supports the logo.

Screenshot47

Dr. Web Magazin48

Screenshot49

MeinProf.de50

Screenshot51

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

Screenshot53

Amiami Village54

Screenshot55

Sourcebench56

Screenshot57

Classics Link

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

Mascot Screenshot59

Ask Dr. Z60: 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 Screenshot61

Should Smashing Magazine have a mascot? Link

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

Footnotes Link

  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://bobrdobr.ru
  9. 9 http://bobrdobr.ru
  10. 10 http://www.justinbird.com/
  11. 11 http://www.justinbird.com/
  12. 12 http://www.stoodeo.com/
  13. 13 http://www.stoodeo.com/
  14. 14 http://www.wishlistr.com/
  15. 15 http://www.wishlistr.com/
  16. 16 http://www.brentayers.com/
  17. 17 http://www.brentayers.com/
  18. 18 http://netnova.com.au/
  19. 19 http://netnova.com.au/
  20. 20 http://www.netmaths.net/
  21. 21 http://www.netmaths.net/
  22. 22 http://www.elitistsnob.com/
  23. 23 http://www.elitistsnob.com/
  24. 24 http://corkd.com/
  25. 25 http://corkd.com/
  26. 26 http://freelanceswitch.com/
  27. 27 http://freelanceswitch.com/
  28. 28 http://octwelve.com/
  29. 29 http://octwelve.com/
  30. 30 http://www.globalzoo.de/
  31. 31 http://www.globalzoo.de/
  32. 32 http://www.nuregime.com
  33. 33 http://www.nuregime.com
  34. 34 http://darkmotion.com
  35. 35 http://darkmotion.com
  36. 36 http://www.potatoparade.co.uk/
  37. 37 http://www.potatoparade.co.uk/
  38. 38 http://www.crayons.be/
  39. 39 http://www.crayons.be/
  40. 40 http://www.fluther.com/
  41. 41 http://www.fluther.com/
  42. 42 http://www.companions.com.au/
  43. 43 http://www.companions.com.au/
  44. 44 http://www.datejs.com
  45. 45 http://www.datejs.com
  46. 46 http://www.moourl.com/
  47. 47 http://www.moourl.com/
  48. 48 http://www.drweb.de/
  49. 49 http://www.drweb.de/
  50. 50 http://www.meinprof.de
  51. 51 http://www.meinprof.de
  52. 52 http://www.nrhrehab.org/About+NRH/Meet+Vic+our+Mascot/default.aspx
  53. 53 http://www.nrhrehab.org/About+NRH/Meet+Vic+our+Mascot/default.aspx
  54. 54 http://www.amiamivillage.com/
  55. 55 http://www.amiamivillage.com/
  56. 56 http://www.sourcebench.com
  57. 57 http://www.sourcebench.com
  58. 58 http://www.ask.com
  59. 59 http://www.ask.com
  60. 60 http://www.autoblog.com/2006/06/30/ask-dr-z-national-ad-campaign-for-chrysler-starts-tomorrow/
  61. 61 http://www.autoblog.com/2006/06/30/ask-dr-z-national-ad-campaign-for-chrysler-starts-tomorrow/
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.

↑ 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

    Cute collection. Thank you!

    0
  2. 2

    That’s so cool, it’s like hi-tech 60′ :))

    0
  3. 3

    Mascots and characters can work really well for branding if done properly and tastefully.

    0
  4. 4

    Jean-Philippe Encausse

    January 15, 2008 7:14 am

    Thanks !
    This post is exactly what I was looking for :-)

    Does anybody know where to find a repository, database, … of modern mascots available for personal websites ?

    0
  5. 5

    Caesar Tjalbo

    January 15, 2008 7:23 am

    It sometimes seems as every FOSS project has its own mascot, from penquins to dragons and devils.
    I got a bit of a shock when seeing the mascot of Crayons, it reminded me of Clippy (the horror!).

    0
  6. 6

    maybe there a squirrel or maybe a chipmunks mascot holding magazines?:)

    0
  7. 7

    Cheers for the feature guys!

    0
  8. 8

    Hi great selection, i’m looking for my own mascott actuelly (actuelly i’m my own mascott ;-) ), this can inspire me, thanks a lot

    0
  9. 9

    What are the common tools used to create and/or animate cartoon-like mascots?

    0
  10. 10

    Yes a mascot would be cute and obviously he should have a large mallet in his hands that is “Smashing” the ground as the the mascot hovers in the air, triumphant from the force of the impact

    0
  11. 11

    what about veerle?

    0
  12. 12

    Some of these mascots can be bought from iStockPhoto.com, like the ones from FreelanceSwitch, Kent Pribbernow and Stoodeo.

    0
  13. 13

    Woah! That’s me! I’m soo delighted to be featured! Thanks! ^_^

    0
  14. 14

    I love my little alien mascot. In fact, the currently unnamed species of alien is part of a re-branding contest I currently have running to help generate name for my freelance design company to be.

    I might be toeing the line on the ‘do not advertise’ aspect, but I hope that giving Smashing Magazine readers the chance to win prizes would be warmly received instead of frowned upon.

    0
  15. 15

    I think a mallet/hammer or an anvil would be a good mascot. I’m not much of an illustrator, so I don’t have an image of one, but either of those would be “smashing”!

    0
  16. 16

    AGREE! Large Mallet, lots of cuteness.

    0
  17. 17

    Great post, as usual!
    And yes, you shoul have a mascot too, they are really cool.

    0
  18. 18

    Vector arts dominates !!

    0
  19. 19

    I hadn’t seen many of these, it’s amazing what quests you people can come up with.
    http://www.justinbird.com/ stood out to me as the best of the lot.
    Check out his portfolio, he mixes flash and html elements fairly well, not quite validating, but…
    Vector Kung Fu specialists rock!

    0
  20. 20

    A lot of those are of a very similar style (Wishlistr, Brent Ayers, Netmaths, Cork’d, Freelanceswitch for example), and whilst that’s no bad thing, it seems like quite a few sites now have them.

    The reason I come back to smashingmagazine.com is the content, and I don’t feel a mascot, however cute or appropriate will make much difference to me.

    0
  21. 21

    What, am I six years old?

    Leave Tony the Tiger on the cereal box.

    0
  22. 22

    I think mascots do work for certain sites. Especially if you want to evoke that “awww” feeling.

    I think Smashing Magazine works well just the way it is. I don’t think it needs a mascot.

    0
  23. 23

    Can inanimate objects be considered mascots? Or must a mascot be in the animal family?

    0
  24. 24

    amazing stuff out there ! and please we’re used to SM surprises, so hit us ^^

    0
  25. 25

    cindy*staged4more

    January 15, 2008 5:19 pm

    What a fun post! I have to say though, several of them look like brothers and sisters ;)

    Cheers,
    Cindy

    0
  26. 26

    I hope you consider a squirrel if you decide to go the mascot route – they just are not enough of them online. They’re pretty much ignored and nobody takes them seriously. But they’re fierce creatures who crack nuts! Your squirrel should definitely crack nuts (a simile for uncovering and exposing great information!)

    0
  27. 27

    Carlos Andres

    January 15, 2008 8:18 pm

    Is just me or I smell a Mascot Contest in the future?!

    0
  28. 28

    Please NO Mascot for Smashing Mag!

    0
  29. 29

    Cute collections :)
    I like justin bird the most :)

    and I think smashing doesn’t need mascots i like it just the way it is now, :)

    0
  30. 30

    I’m with Kim (above).. go with a squirrel. Name him (or her) Smashy the Squirrel. I can see a whole line of Smashy the Squirrel merchandise!

    0
  31. 31

    … for sure a mascot would be good, but nothing cute – simply clear

    0
  32. 32

    Please please please please no logo for Smashing!

    0
  33. 33

    Koldo Barroso

    January 16, 2008 4:19 am

    This a very interesting subject! Lovely to see all these charactes together. In our business we constantly promote the use of characters to build up the image od a web site, and we have also created a few ones. And of course, we had our Chef mascot for one year and it helped us a lot to get better recognigsed in the Internet. Sometimes the get better than logos!

    0
  34. 34

    I see mascots simply as a means to sell kids something shitty.

    Its not long before a mascot loses its novelty factor – then its endearing qualities are replaced by irritating ones – remember this if you want to use ‘cute’ to attract people to your site.

    p.s death to Tony the Tiger, The Tetley Teafolk and that fucking monkey who turns your milk chocolately.

    0
  35. 35

    yes!!! It is cool

    0
  36. 36

    Love the whale.

    0
  37. 37

    hehe.. that’s a good one! :)

    0
  38. 38

    Does anyone rember “Clarus the Dogcow”?

    http://en.wikipedia.org/wiki/Dogcow

    0
  39. 39

    You’re mascot shout be a rhino because Smashing Magazine smashes you with force…like a rhino!

    0
  40. 40

    Looks like all these people have too many credits to spend on istockphoto

    0

↑ Back to top