El diseño de mascotas para web es una de mis especialidades, en los últimos años he diseñado docenas de mascotas corporativas para web, el cliente suele quedar bastante satisfecho con el diseño pero después no sabe cómo sacarle el máximo partido.
A veces tienen que usarlas a tamaños muy pequeños, otras no están bien integradas con el contenido, muchas veces modifican el diseño con desastrosas consecuencias, otras veces son demasiado agresivos en la compresión de la imagen… y en muchos casos no se hace un uso real de los diseños.
Puntos a tener en cuenta para sacar el máximo partido a tu mascota.
- Antes de nada pregúntate si realmente necesitas una mascota, ¿es adecuado para tu público objetivo?.
- Planifica tu web para sacar el máximo partido a tu mascota.
- Recuerda que cuanto más grande uses la ilustración (dentro de lo razonable) más bonita se verá.
- Deja márgenes alrededor de la ilustración para que el diseño respire.
- Haz que la mascota interactue con la web, se creativo.
- Aplica tus colores corporativos en la mascota.
- Diseña una mascota versátil que puedas usar para banners, avatares, camisetas, o para tu página "about" (acerca de… ).
- Elige un concepto que vaya acorde con tus valores corporativos.
- Optimiza el peso de la ilustración, guarda como JPG al 60%.
- Si tienes que hacer posteriores modificaciones pídeselo al autor del diseño.
- Pide los diseños en alta resolución (hasta 7000x7000px) o en formato vectorial, así podrás imprimir cualquier tamaño que necesites.
- Observa si tu diseño cumple los principios básicos a la hora de diseñar una mascota.
Tyler Cruz personaliza su mascota para diferentes ocasiones, una buena idea.
Características de una buena mascota
- Memorable, tiene que causar impacto.
- Fácil de recordar, debe dejar huella en la memoria del observador.
- Debe ser único, debe ser fácil de discriminar respecto a los competidores.
- Atractiva, el personaje debe ser atractivo para el públcio objetivo.
- Icónico, el personaje debe representar los valores corporativos de la marca.
- Funcional, debe funcionar en banners, en el encabezado de la web, en el logo.
Maneras efectivas de integrar diseños de personajes en la web.
La utilización de la mascota integrada en el logotipo es la forma más común de integrar al personaje, así asociamos el personaje a la marca, es una de las maneras más efectivas de usar una mascota.
Fíjate que la mascota usa los colores corporativos de la web. Muy buena integración.
Podemos integrar la mascota de forma muy efectiva usándola como icono o integrada en los botones, podemos usarlo en el estado "over" de nuestros botones y animarlo en Flash:
Una de las maneras más efectivas consiste en usar la ilustración a todo el ancho de la web, sacrificas mucho espacio pero consigues un gran impacto visual. La web de John Cow era un buen ejemplo, lástima que estén reduciendo cada vez más el tamaño de la ilustración en lugar de optimizar el espacio restante.
Algunos ejemplos de illustración como encabezado a todo lo ancho de la web.
No necesariamente tenemos que usar la mascota en el encabezado de la web, también podemos usarla para resaltar determinados elementos del diseño:
Y para terminar algunos banners con diseños de personajes:
16 Noviembre 2009 at 19:43
Excelentes tips, Sergio..¿qué opinas de este?: http://www.falconknives.com/
16 Noviembre 2009 at 20:08
Some nice illustration here – thanks.
16 Noviembre 2009 at 22:49
Muy bonito Diana, es una pena que el header sea tan pequeño, se vería mucho mejor si hubiera un poco más de espacio.
17 Noviembre 2009 at 0:19
yeah :/ thank you Sergio!!
Cheers.
17 Noviembre 2009 at 0:30
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
17 Noviembre 2009 at 0:55
que cantidad de personajes…
Sergio, has hecho alguno de esos sitios completos? o solo las mascotas?
17 Noviembre 2009 at 5:01
¿sabes q sería genial? Que hagas un video con animoto.com puedes mostrar tus diseños como un video, bueno chécalo
17 Noviembre 2009 at 9:31
@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!
17 Noviembre 2009 at 18:33
absolutamente AE es mejor
aunqu con Animoto es más rápido
4 Diciembre 2009 at 17:40
plz tell me using what program u draw this mescots? is there any tips.. tutorials?! plz reply..
12 Diciembre 2009 at 8:24
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!!!
12 Diciembre 2009 at 11:36
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.
13 Diciembre 2009 at 0:23
Muy bueno. Gracias por todo lo que compartes con nosotros.
13 Diciembre 2009 at 8:04
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?
14 Diciembre 2009 at 3:02
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.
30 Diciembre 2009 at 20:36
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.
20 Enero 2010 at 1:36
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!
21 Enero 2010 at 17:43
Hola Javier, muchas gracias.
Echa un ojo a este tutorial: http://www.sosfactory.com/blog/how-to/photoshop-tutorial-3d-logo/
Saludos.
11 Marzo 2010 at 12:10
you’r master. thank to share..
13 Marzo 2010 at 10:41
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:)
27 Abril 2010 at 11:11
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!! ; )
26 Julio 2010 at 23:25
Sérgio muito bom seu trabalho!!
Pena que não tenha tutoriais em português.
6 Agosto 2010 at 20:45
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
7 Agosto 2010 at 0:32
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.
8 Agosto 2010 at 20:21
Sergio, ¿hay alguna posibilidad de crear una ilustración tutorial en portugués (Brasil)?
13 Agosto 2010 at 11:42
Lo siento Nathan, no tengo ni idea de portugués.