
Smashing Magazine we smash you with the information that will make your life easier. really.
Isn’t it sweet? Mascots in Modern Web Design
January 15th, 2008 in Design Showcase | 105 Comments
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.

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.

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.

Yigg.de 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. Joyent and HappyWebbies use creatures in the comic-style; they’re not mascots, as different creatures are displayed on different pages. Ellislabs also uses illustratoins, not mascots.
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.
Justin Bird — animated. Don’t forget to hover your mouse over the bird.
Potato Parade — Flash. This is an McCain’s advertisement.
Goanna Webdesign (Flash)
Crayons — animated.
Datejs: Ninjas at work.
Mooourl — the mascot supports the logo.
Vic is a hand-drawn mascot of a Medical Rehabilitation Network.
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.
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.
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!
Leave a Reply
Sponsors
- Advertise with us!
Smashing Links
Popular Posts
- 100 Wordpress Themes
- 83 Wordpress Themes
- 80 AJAX Solutions
- 53 CSS Techniques
- 40 Free Fonts
- 50 Beautiful Designs
- 50 Simple Designs
- 45 Fresh Designs
- 30 Dark Designs
- 65 Flash Designs
- Beautiful Icon Sets
- Beautiful Wallpapers
- Beautiful Photos
- Free Design Templates
- Free CSS Layouts
- Photoshop Tutorials
- Illustrator Tutorials
All Posts
- 35 Designers × 5 Questions
- 50 Designers × 6 Questions
- 404 Error Pages
- AJAX Libraries
- AJAX Solutions
- Badges and Pins
- Black & White Photography
- Block Quotes
- Blog Designs
- Blog Headers
- Book Covers
- Brochures and Booklets
- Browsers Round-Up
- Browser Test Suites
- Buzz-Monitoring
- Calendar Designs
- Charts and Diagrams: Tools
- Cheat Sheets
- Code Beautifier
- Copyright Explained
- CSS Coding Techniques
- CSS Designs 1, 2, 3, 4, 5
- CSS Editors
- CSS Expert Ideas
- CSS Float Theory
- CSS Frameworks
- CSS Free Templates
- CSS Footers
- CSS Forms 1, 2
- CSS Frameworks
- CSS Galleries
- CSS Ideas
- CSS Layouts
- CSS Menus
- CSS Print-Layouts
- CSS Specificity
- CSS Styleguides
- CSS Tables
- CSS Tutorials
- CSS-Techniques
- CSS Tools
- Data Grids and Tables
- Data Visualization 1, 2
- Date Stamps
- Design Books 1, 2
- Design Magazines
- Designer's Checkpoints
- Divine Proportion
- Domain Tools
- Dreamweaver Tutorials
- E-Mail Delivery
- Favicons 1, 2, 3, 4, 5, 6
- Firefox Themes
- Fireworks Tutorials
- Flash Designs
- Flash Slideshows
- Flash Tutorials
- Fonts 1, 2, 3, 4, 5, 6
- Form Design Patterns
- Forums
- Gadgets 1, 2, 3
- Google AdSense
- Google PageRank
- Graphics Design
- Grid-Based Design 1, 2
- Grunge Design 1, 2
- Hand-Drawing Style 1, 2
- Handwriting and Lettering
- Hotkeys
- HDR Pictures
- HTML Template Systems
- Icon Sets 1, 2, 3, 4, 5
- Icons, Templates 1, 2, 3
- Illustrator Tutorials 1, 2
- Laptop Sleeves
- Laptop Designs
- Link Building
- Links in New Windows?
- Mascots
- Motion Graphics
- Music Videos
- Navigation Menus
- Newspaper Designs
- Online Converters
- Online Generators
- Packaging Design
- Pagination
- PDF Magazines
- Photoshop Tutorials 1, 2
- Pixel Art
- Podcasts
- PNG Transparency
- Portfolios
- Product Designs
- RSS Best Design Practices
- RSS Feed Icons
- Screensavers
- SEO Tools
- Shopping Carts
- Short Movies
- Slideshows & Lightboxes
- Source Code Editors
- Splash Pages
- Start Pages
- Stock Icons
- Space, Nebula wallpapers
- Tab-Based Interfaces
- Tag Clouds
- Textures
- Textures & Backgrounds
- Texture Design
- Tooltips Scripts
- Tutorials
- Typefaces 1, 2
- Type Setting Principles
- Typography Showcase
- Typography BIG 1, 2
- Typographic Posters
- Typography In Motion
- Typography Showcase
- Usability Books
- Usability Glossary
- Usability Nightmares
- Usability Principles
- User Interfaces
- Vintage and Retro
- Wallpapers 1, 2, 3, 4
- Web 2.0 Tutorials
- Whitespace & Simplicity
- Wordpress Plugins
- Wordpress Themes 1, 2, 3, 4
- WYSIWYG Editors
Webtips
Sideblog
Mozilla has put out a call for everybody to share the vision of how we would like to see the Firefox browser and the Web in the future.
10 Free Handwriting Fonts features Sketch Rockwell, Gregs Other Hand and Imitation.
Coquette icons is a free set with curvy and colorful icons designed to get the affection of your visitors. .ico, .png, .icns, 128×128px. Backlink is necessary to use the set.
Logo Design Trends 2008 presents 15 current trends in logo design. Among them are Supernova, loops, stitch, amoeba and doodles.
You can follow Smashing Magazine on Twitter now. Ideas, suggestions, remarks? Feel free to share, discuss and spread the word.



































Oliver (January 15th, 2008, 6:56 am)
Cute collection. Thank you!
Bughy (January 15th, 2008, 7:03 am)
That’s so cool, it’s like hi-tech 60′ :))
Ray (January 15th, 2008, 7:08 am)
Link [www.oriental-gallery.com] has just launched today has a cute mascot design too.
Naomi Niles (January 15th, 2008, 7:14 am)
Mascots and characters can work really well for branding if done properly and tastefully.
Jean-Philippe Encausse (January 15th, 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 ?
Caesar Tjalbo (January 15th, 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!).
ionut (January 15th, 2008, 7:28 am)
you forgot to include Link [www.famundo.com] :)
Yuri (January 15th, 2008, 7:35 am)
Although she is not an illustration, Microsoft’s Ms. Dewey might be worth adding to the list!
Link [www.msdewey.com]
Landseer (January 15th, 2008, 7:36 am)
The Link [support.pn-cms.de] uses an icebear as mascot, even before the Knut-hype in Germany started :-)
reezluv (January 15th, 2008, 7:39 am)
maybe there a squirrel or maybe a chipmunks mascot holding magazines?:)
Pasquale (January 15th, 2008, 7:52 am)
Cheers for the feature guys!
fabien (January 15th, 2008, 8:11 am)
Hi great selection, i’m looking for my own mascott actuelly (actuelly i’m my own mascott ;-) ), this can inspire me, thanks a lot
Brad K (January 15th, 2008, 8:13 am)
What are the common tools used to create and/or animate cartoon-like mascots?
Wayne Thume (January 15th, 2008, 8:27 am)
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
daustralala (January 15th, 2008, 8:31 am)
what about veerle?
Arthur (January 15th, 2008, 8:32 am)
In this website we have a mascot too !!
Link [humorbabaca.com]
A entertainment website, with jokes, funny images and much more!
And if happens the contest for choose a mascot for Smashing Magazine, I will participate!
Great Post! :)
Yaili (January 15th, 2008, 8:42 am)
Some of these mascots can be bought from iStockPhoto.com, like the ones from FreelanceSwitch, Kent Pribbernow and Stoodeo.
Aka (January 15th, 2008, 8:50 am)
I think mascot is the better way to remember a site. I use one too :
Smashing magazine can make a mascot too but maybe not as a logo but as a companion.
chris (January 15th, 2008, 8:52 am)
Link [www.songbirdnest.com].
Luc (January 15th, 2008, 9:08 am)
Woah! That’s me! I’m soo delighted to be featured! Thanks! ^_^
sbhebert (January 15th, 2008, 9:19 am)
Smashing should have a mascot, but only if it’s Link [gallaghersmash.com] smashing a watermelon.
JamieO (January 15th, 2008, 9:48 am)
I love my little alien mascot. In fact, the currently unnamed species of alien is part of a Link [www.oastler.ca] 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.
Gabe (January 15th, 2008, 9:53 am)
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”!
Brad (January 15th, 2008, 10:29 am)
AGREE! Large Mallet, lots of cuteness.
Paolo (January 15th, 2008, 10:47 am)
Great post, as usual!
And yes, you shoul have a mascot too, they are really cool.
PixlNinja (January 15th, 2008, 11:33 am)
Vector arts dominates !!
Ty (January 15th, 2008, 11:49 am)
I hadn’t seen many of these, it’s amazing what quests you people can come up with.
Link [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!
Shane (January 15th, 2008, 12:02 pm)
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.
losfinkos (January 15th, 2008, 12:15 pm)
Great post! Some really cute stuff going on there ;)
But you forgot the red zebra at Link [redzee.com]
Marty (January 15th, 2008, 1:23 pm)
What, am I six years old?
Leave Tony the Tiger on the cereal box.
Varick (January 15th, 2008, 1:49 pm)
Thanks for the Link [www.happywebbies.com] hit!
…let us know if you’re still looking for a mascot. heh.
AgentB (January 15th, 2008, 1:52 pm)
Another one: Link [www.agentb.com]
Jonathan (January 15th, 2008, 1:55 pm)
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.
Juanma (January 15th, 2008, 2:21 pm)
What? no Link [veerle.duoh.com]
Samuel (January 15th, 2008, 3:23 pm)
Can inanimate objects be considered mascots? Or must a mascot be in the animal family?
decybel (January 15th, 2008, 4:24 pm)
amazing stuff out there ! and please we’re used to SM surprises, so hit us ^^
cindy*staged4more (January 15th, 2008, 5:19 pm)
What a fun post! I have to say though, several of them look like brothers and sisters ;)
Cheers,
Cindy
Kim (January 15th, 2008, 5:31 pm)
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!)
Jermayn Parker (January 15th, 2008, 7:22 pm)
I myself use a mascot for my blog!
Link [germworks.net]
Carlos Andres (January 15th, 2008, 8:18 pm)
Is just me or I smell a Mascot Contest in the future?!
Aravind (January 15th, 2008, 9:55 pm)
Hei… great collection… by the way…, my website also has a mascot… :) Link [www.thedesignsuperhero.com]
aravind (January 15th, 2008, 9:58 pm)
and see another mascot.. Link [reportfrog.com]
haungo (January 15th, 2008, 10:59 pm)
Please NO Mascot for Smashing Mag!
fedmich (January 15th, 2008, 11:49 pm)
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, :)
Brian (January 16th, 2008, 1:01 am)
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!
Andreas (January 16th, 2008, 1:15 am)
… for sure a mascot would be good, but nothing cute - simply clear
Eric (January 16th, 2008, 3:19 am)
Please please please please no logo for Smashing!
Koldo Barroso (January 16th, 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!
Chris (January 16th, 2008, 6:15 am)
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.
BlueTurtle (January 16th, 2008, 6:33 am)
yes!!! It is cool
therapix (January 16th, 2008, 6:36 am)
Love the whale.
gr8pixel (January 16th, 2008, 6:37 am)
hehe.. that’s a good one! :)
Alex (January 16th, 2008, 7:33 am)
another option is to have a mascot in the logo, seen here on a chinese music website (a monk with headphones): Link [www.louder.cn]
Ulli (January 16th, 2008, 8:00 am)
Does anyone rember “Clarus the Dogcow”?
Link [en.wikipedia.org]
Aaron (January 16th, 2008, 8:14 am)
You’re mascot shout be a rhino because Smashing Magazine smashes you with force…like a rhino!
David Bailey (January 16th, 2008, 8:36 am)
Looks like all these people have too many credits to spend on istockphoto
Michael (January 16th, 2008, 9:05 am)
Hey! Check out this mascot Link [www.modernmonster.com] that I’ve made.
JC (January 16th, 2008, 11:24 am)
Don’t forget the infamous Link [techguytales.com]
Gene (January 16th, 2008, 2:15 pm)
Please stick to something simple and something that doesnt look like it was pulled out from Veerle’s library. Perhaps something along the lines of Kid Robot-ish..?
James (January 16th, 2008, 4:18 pm)
I don’t know about you guys getting one, mascots on websites seem to be there to make the site more ‘human’ to technophobic users. And I don’t think your readership falls into that category, it just feels like dumbing it down… Just my 2 cents…
gene (January 16th, 2008, 6:25 pm)
i actually agree with james (#63). Smashing Magazine already has a logo… the S in a box, why add more to it? Sure Smashing talks about trends in the industry, but why follow em if they are only just trends? Trends eventually die out…
Darren (January 16th, 2008, 8:54 pm)
Great blog! :) I have a mascot, which gets mentioned alot.
I don’t think a mascot would suit this type of blog though.
Defunkid, copyleft funk music since 2001 (January 17th, 2008, 12:30 am)
here are some nice Link [www.openpuppets.com]
hope you like it
dharma (January 17th, 2008, 2:33 am)
Ask Jeeves is a classic… I remember the pre Google days, that used to be my favorite search engine. Link [dharma.indviews.com]
wez (January 17th, 2008, 3:12 am)
Sweet stuff, check out Link [www.yodiv.com,] cutest little things ever!!
wez (January 17th, 2008, 3:14 am)
sorry that should be Link [www.yodiv.com]
tripdragon (January 17th, 2008, 7:33 am)
Not a fan. Especially of this Illustrator gradient look for the models. They reek of , meh… In most cases. I dont know , just not a fan I guess
bgolat (January 17th, 2008, 6:45 pm)
there are some cool mascots on there, I don’t really think the stock vector mascots should be included though…
Sergio Ordoñez (January 17th, 2008, 10:45 pm)
Very bad!!!! … you forgot about me, the king of mascot design :)
Here is my examples: Link [www.sosfactory.com]
Cheers
Sergio Ordoñez (January 17th, 2008, 10:50 pm)
For #13 Brad K:
Here you can learn a bit about mascot design for websites: Link [www.sosnewbie.com]
Sabo (January 19th, 2008, 8:12 pm)
You can include my mascot too if you like : P
Link [www.malditoweekend.com]
btw, Sergio Ordoñez IS THE BEST! look at his work.
Regards.
wez (January 21st, 2008, 2:01 am)
why do people that criticize never have a web page link on their name. Great resource.
The Mascot (January 24th, 2008, 6:56 pm)
Well, it looks like a bunch of people are commenting for free links to their websites, so I’ll do the same. Granted, their “mascots” are completely inadequate (I am THE Mascot, after all). But in general the idea’s a good one, even though those other mascots aren’t as good-looking as me.
Smashing won’t be able to come up with something as special as me, so they should just stick with the logo.
james (January 27th, 2008, 2:19 am)
Stop spamming your sites guys. Most of them suck anyway. The guys on here deserve it because they are actually good.
Natrium (January 28th, 2008, 3:06 am)
looks like a majority wants a mascot for SmashingMagazine
JasonR (January 29th, 2008, 5:09 pm)
Your mascot should be a little fellow who looks kind of crazy with a big hammer.
Kevin (February 6th, 2008, 1:38 pm)
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.
cssbit (February 10th, 2008, 8:56 am)
oui je suis d’accord .. je veux tellement une photo pour mon profile :)
tuor (March 5th, 2008, 3:18 am)
Made a mascot for an Link [angelsandmore.ch] 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?
mammoth (March 30th, 2008, 4:43 pm)
when you say mascot, can the animation here: Link [www.maxlifestyle.net] be considered as a mascot?
aLien (May 19th, 2008, 6:09 pm)
Cute alien mascot can found here the Link []. check it out !!
Nancy (July 29th, 2008, 12:01 am)
Hello!!
Ya this mascot and cartoon poster look like really funky style.
Kai Sellgren (August 4th, 2008, 1:11 pm)
You forgot Link [www.tritoncms.com] mascot :P