Youtube Facebook Twitter Deviantart My feed Feed directly to your inbox

How to integrate a mascot design in your website

16 November 2009

Mascot design, Tutorials

How to integrate a mascot design in your website
Choose your language / Elige tu idioma:englishespañol

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.

Mascot design

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.

Tyler Cruz

Tyler Cruz customizes his mascot for different occasions, a good idea.

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.

Logo design

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.

Big Dave Star

Notice the mascot use the corporative colors of the web. Very good integration.

Prison struggle

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:

Cam Holdem

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.

John cow

Some examples of illustration as all wide headline of the web.

Free Power Boards

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:

Samurai of Legend

Signature Bar

To finish, some banners with character designs:

Banner design

This post was written by:

- who has written 97 posts on SOSFactory Blog.

My name’s Sergio Ordoñez I´m illustrator, graphic and web designer. A selection of my work is included at SOSFactory. If you want to support this blog, please be an active member: tweet the posts, participate in the discussions and the exercises :)

Contact the author

  • Pingback: Tweets that mention How to integrate a mascot design in your website | SOSFactory Blog -- Topsy.com

  • Pingback: Twitted by FatsCrib

  • http://greatdiane.daportfolio.com Diana

    Excelentes tips, Sergio..¿qué opinas de este?: http://www.falconknives.com/ :)

  • http://www.redbilby.com.au redbilby

    Some nice illustration here – thanks.

  • http://www.sosfactory.com Sergio Ordonez

    Vey nice Diana, it´s a shame the header is so narrowed, it could looks much better at a bigger size.

  • http://greatdiane.daportfolio.com Diana

    yeah :/ thank you Sergio!! :)

    Cheers.

  • http://greatdiane.daportfolio.com Diana

    Sergio, no sé cual diseño viste del link q mencioné, pues lo cambiaron, en realidad es este :

    http://greatdiane.deviantart.com/art/Falcon-Knives-Logo-143756276

  • http://www.jotape.cl Juan Pablo

    que cantidad de personajes…
    Sergio, has hecho alguno de esos sitios completos? o solo las mascotas?

  • Pingback: uberVU - social comments

  • http://greatdiane.daportfolio.com Diana

    ¿sabes q sería genial? Que hagas un video con animoto.com puedes mostrar tus diseños como un video, bueno chécalo :)

  • http://www.sosfactory.com Sergio Ordonez

    @Juan Pablo: no solía diseñar sitios completos hasta hace poco, ahora mismo trabajo en un par de ellos.

    @Diana: si tuviera un poco más de tiempo me pondría con After Effects, aunque es más complejo seguro.

    Saludos!

  • http://greatdiane.daportfolio.com Diana

    absolutamente AE es mejor :) aunqu con Animoto es más rápido

  • Alexa

    plz tell me using what program u draw this mescots? is there any tips.. tutorials?! plz reply..

  • http://www.thelettucestudios.com andres

    hola sergio ante todo debo felicitarte tu arte inspira a mucha gente especialmente a mi, te cjuento que tengo una web la cual me gustaria que veas y que me des tu opinion, seria de mucha ayuda una opinion como la tuya, en cuanto a los personajes, diseños etc. tambien te cuento que me compre la cintiq, y estoy esperandola aun porque no me llego, soy de argentina,aca las cosas tardan en llegar, te queria preguntar algo de la cintiq, solo funciona con el lapiz no? con los dedos no, no? digo porque si uno apoya la palma de la mano se marcaria, y rd como si uno apretara varias partes a la vez. no se si soy claro, quizas no. la pregunta es si la cintiq solo responde al tacto del lapiz? bueno, te agradezco por tu tiempo, muchas gracias y felicitaciones por tu arte. es espectacular!!!

    • http://www.sosfactory.com Sergio Ordonez

      Hola Andrés, felicidades por el nuevo juguete. Estás en lo cierto, sólo es sencible al lápiz, si no sería bastante complicado.

  • http://www.monicarebollo.com Mónica

    Muy bueno. Gracias por todo lo que compartes con nosotros.

  • http://www.thelettucestudios.com andres

    si, muchas gracias te cuento que me lo compre con la plata ganada del concurso de logos de freelancer.com gane el people choice award y el septimo lugar

    te guto mi web? alguna critica?

    • http://www.sosfactory.com Sergio Ordonez

      Enhorabuena entonces!

      Creo que deberías trabajar un poco los márgenes y alineamientos de tu web, por lo demás me gusta la imagen.

  • Diana

    Hola, Andrés, una pregunta ¿compraste la tableta por Amazono o ebay? tengo curiosidad porque noté que Amazon no envía aparatos eléctricos como es el caso de las tabletas.

  • http://Construyendo... Javier Diaz

    Bueno soy nuevo al entrar a este blog y me impresiono lo que vi tus diseños son muy buenos a mi se me dificulta un poco lo que es darles perspectivas a las imagenes y la calidad de la imagen, quisiera saber como haces para diseñar los logos ( me refiero a como los dibujas )… Si me ayudaras te lo agradeceria Ok! Diseños Espectaculares!

  • http://www.sosfactory.com Sergio Ordonez

    Hola Javier, muchas gracias.

    Echa un ojo a este tutorial: http://www.sosfactory.com/blog/how-to/photoshop-tutorial-3d-logo/

    Saludos.

  • http://zonanarsis.com narsis

    you’r master. thank to share..

  • http://www.heldesign.com Hege

    I absolutely love your style, and frequently check back to see what`s new. Keep up the awesome work, you have an amazing talent:D

    Sincerely,
    Hege:)

  • http://www.charminmotion.com Carmina

    Hola!! excelente post! me ha encantado… yo también tengo una mascota en mi web.. a ver qué te parece: http://www.charminmotion.com

    Saludos!! ; )

  • Nathan Monte

    Sérgio muito bom seu trabalho!!

    Pena que não tenha tutoriais em português.

  • Rosty

    Hola Sergio que tal??
    Tengo una duda, has realizado alguna ves una animación de tus mascotas para web o para cualquier proyecto?? si es si, quisiera saber como haces para animarlas? las exportas en pedazos? o haces una versión de estas sin muchos detalles?
    Expongo este punto en particular ya que quiero animar una mascota que estará en mi web pero usare Flash ya que es el programa de animación que domino, consejos!!

    Gracias, esperare tu respuesta

  • http://www.sosfactory.com Sergio Ordonez

    Hola Rosty,

    no suelo diseñar para animación, si fuera así lo haría como tú dices, diseños sencillos cortados en diferentes partes para poder animarlas.

  • http://nathanmonte.blogspot.com Nathan Monte

    Sergio, ¿hay alguna posibilidad de crear una ilustración tutorial en portugués (Brasil)?

  • http://www.sosfactory.com Sergio Ordonez

    Lo siento Nathan, no tengo ni idea de portugués.

  • Namik_pasha

    Hye. i really like all your post. im from malaysia. i enjoy drawing but now i got problem with colour. i like to design mascot like you do. can u give comment from my blog, is that good enuff? http://namikpasha.blogspot.com .And i wanna to know how to start to find the job especially for mascot design from the website. Thanks.
    ps: sorry for my bad english

  • Pingback: 50+ Excellent Character Illustrator & Photoshop Tutorials | Tutorials Share | Graphic & Web Design Tutorials

  • Pingback: 48+ Fantastic Character Illustrator & Photoshop Tutorials | Daily Roundups