SOSFactory Blog

Choose your language / Elige tu idioma:

Mascot design for webs is one of my specialties, in the last few years I’ve been designing dozens of corporative characters for webs. Clients are usually very satisfied with the design, but they don’t know how to make the most out of it.

Sometimes they have to use them at very small sizes, sometimes they are not well fitted in the context, very often they modify the design with disastrous results, usually they are too agressive with the compression of the image… and in many cases they don’t make a real usage of the designs.

Points you should have in consideration to make the most out of your mascot design.

• First of all, consider if you really need a mascot design. Is it adecuate for your public objective?
• Program your web in order to make the most out of your character design.
• Remember: the bigger you show the illustration (within reasonable limits) the nicer it will look.
• Leave margins around the illustration, let the design breathe.
• Make the mascot interact with the rest of the web, be creative.
• Apply your corporative colors to your mascot.
• Design a versatile mascot, this way you can use it for banners, avatars, T-shirts, or your "about" page.
• Choose a concept that matches your corporative values.
• Optimize the weight of the illustration, save it as JPG at 60%.
• If you have to make later modifications, ask the author of the design.
• Order your designs in high resolution (till 7000x7000px) or in vectorial format. This way you can print any size you need.
• Watch if your design fits the basic principles when it comes to design a mascot.

Characteristics of a good mascot design

• Memorable, it must cause impact.
• Easy to remember, it must remain etched in the memory of the observer.
• It must be unique, and easy to discriminate from the competitors
• Attractive, the character must be attractive for our target public.
• Iconic, the character must represent the corporative values of the brand.
• Functional, it must work in banners, in the headline of the web, in the logo.

Effective ways to integrate the designs of the characters in the web.

The use of the mascot integrated in the logotype is the most common way to integrate the character. This way we associate the character with the brand, it´s one of the most effective ways to use a mascot.

We can integrate the mascot very effectively by using it as an icon or integrating it in the buttons. We can use it in the "over" state of our buttons and animate it in Flash:

One of the most effective ways consists of using the illustration all the wide of the web. You sacrifice a lot of space but you get a great visual impact. John Cow‘s web was a good example of this, too bad they are reducing more and more the size of the illustration instead of optimizing the remaining space.

We don’t really need to use the mascot in the headline of the web, we can use it to highlight certain elements of the design:

To finish, some banners with character designs: