How To Design a Mascot
Good mascots aren't easily forgotten. Some that I remember from childhood are: Toys "R" Us's Geoffrey the Giraffe; the Domino's Pizza Noid; 7 Up's Cool Spot. Geoffrey's still around, but the other two disappeared. So how do you create the right mascot?
What Good Mascot Design Needs
A mascot isn't just a drawing; it's a character with personality. GEICO's gecko is like a living, breathing being; it's easy to forget it's a computer rendering.
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.
Mascots in Modern Web Design
The OUTSHOUTS mascot is calling the user's attention to the 'contact us' suggestion (at What Is This?, doesn't show in IE 6)
Don't just plop the mascot in the header or logo and forget about it. It should appear throughout the site and create a more memorable experience for the user. Where would you be on the site? Urging users to sign up for the newsletter? Pointing out side notes in a blog post?
Here, Songbird's mascot calls attention to the newsletter
The Songbird Media Player site is a great example of how a mascot can be used. Go take a look at the site, at the blog. See the possibilities? Of course, not every site warrants such extensive use of a mascot. How you use your mascot is up to you; there are no absolutes in design.
To leave a lasting impression, mascots have to look as cute, as sweet, as adorable, as pity and sometimes even as silly as possible.
A mascot can provide a site design with a fine and nice detail which the site would miss otherwise. … It’s important that the final mascot design is clean and fits to the overall site design.
Mascots in Modern Web Design
Mascots are the faces of companies or groups of people. What does your mascot say about you? It needs to represent you and what you do. It also needs to appeal to your target audience. If you're not targeting gamers, don't create an 8-bit mascot.
YiGG.de's mascot in its natural environment
YiGG.de's hamster catches the user's attention because it's bright orange. This isn't random: the site design's main color is light blue, and blue and orange are complementary colors. Keep your color scheme in mind when designing a mascot.
Don't try to force a mascot into your site. If your site is cutesy and uses simple, cartoon-style drawings in the design, don't create a realistic mascot rendered with complex textures.
Remember: Your site is the world your mascot lives in.
When Mascot Design Goes Bad
Going through the links in "Mascots in Modern Web Design" (and in its comments), I saw a lot of good examples of mascot usage. I also saw some mascots that looked very out-of-place on their sites.
Report Frog's mascot on the main page
Report Frog was the worst offender. The cartoon frog looks weird on the otherwise professional site. Report Frog needs a more realistic frog, similar to GEICO's gecko.
Report Frog's "Fun Facts" ("A 'log in' is slang for a log party") seem forced, not funny. Since the company's name is Report Frog, it makes sense to go with a frog theme, but they're doing it wrong. I'd rather see some frog silhouettes and lily pads incorporated in the design.
Report Frog is an example of how the wrong mascot design can cripple a site. Just because they want a frog doesn't mean any frog will do: their current frog in a suit looks lame.
The Making of rycz's Mascot
The purpose of rycz.com is to display my work, so naturally there's a lot of eye candy in the design. In order to keep the site design unified, I took the pink kitty in the header and incorporated it in the footer, in my art descriptions, in the RSS link, and in the sidebar. When I needed to design my profiles on Twitter and Virb, it made sense to continue using the kitty.
Bubble Kitty getting into trouble on Twitter
As I was reading Smashing Magazine's article, "Mascots in Modern Web Design," it occurred to me that the pink kitty had become the mascot for my website. I didn't do it on purpose; originally I just considered the kitty part of my theme.
Because I wasn't thinking "I need to add a mascot here," it looks very natural in my design. My site is made up of simple vector illustrations, and that's exactly what the kitty is. Plus, the kitty's very cute; even though it's a really simple character, it still has personality.
Bubble Kitty says 'hi'
Mascots don't always have a name, but it's easier to refer to them if they do. Because the kitty is next to a speech bubble on the gallery pages, my friend refers to it as "Bubble Kitty." A silly name for a silly character.
More Mascot Help
- "Drunken Monkey Photoshop Tutorial" at Smashing Magazine
- "Mascot Design Articles" at SOSNewbie
- "Mascots in Modern Web Design" at Smashing Magazine
Thanks for the link buddy
[...] wonder how to design a mascot for your website? RYCZ.com has an awesome tutorial. I think I need a mascot for my site. Like a cat in a business suit. [...]