10 consejos para diseñar banners que funcionen

En Internet nos encontramos cada día cientos de banners en las pàginas que visitamos, en vídeos y en ventanas emergente que siempre intentamos eliminar. Por esa cantidad de mensajes visuales, las campañas online tienen un gran reto a la hora de crear banners que realmente lleguen al usuario y más nosotros, los diseñadores, para realizarlos diferentes y atractivos. Para facilitarte el camino de un buen diseño de banner te damos unos consejos que te van a ser de gran ayuda.

Consejos para el diseño de banners

1- Piensa antes de hacer el banner

Puede que en la empresa que trabajas tengas un equipo de marketing que piensa en todo, pero lo habitual no es eso, normalmente es un cliente o jefe/a que tan solo te dice ¡hazme un banner!. Aquí es donde tienes que parar ¡STOP! y sin dejar que pase ni un segundo le digas: “Si perfecto te hago un banner pero necesito que me digas”:

Objetivo del banner: vender un nuevo artículo, anunciar una oferta, dar a conocer la empresa, informar, etc.

– El logo o logos que se quiere poner: si hay varios cual es más importante y en qué orden.

– Las frases: eslogan, destacado, nombre o textos secundarios, etc

– Si se quiere animación realmente: a veces tan solo se necesita una imagen, así que si empiezas sin saber eso puede que hayas malgastado un dia entero en algo que no se va a hacer.

– El orden de la animación: que el cliente con tu ayuda te cree un story board breve de las escenas.

– Fecha de entrega: un banner comporta mucho tiempo si está animado, muchos de vosotros ya lo sabéis, así que si ha de estar el mismo dia decir que de animación nada o solo un detalle. Si tenéis unos días dependerá de si la campaña es fuerte, realmente lo necesita o queréis luciros.

2- Conoce el target y webs donde se implementará el banner

El público objetivo o target a quién va dirigido es fundamental a la hora de diseñarlo, porque atraerá la mirada del usuario que vaya a entrar realmente. No es lo mismo anunciar Nike women que un anuncio del ayuntamiento para anunciar las fiestas municipales.

En los banner de tipo general sin rango de edad, como supermercados, información del ayuntamiento,etc es mejor dar una imagen neutra, con una imagen y elementos estéticos planos o fondo blanco o plano y textos sin serifa), en cambio en anuncios rompedores mejor usar un toque o línea de color interesante y corporativo, algún eslogan en texto legible pero ligeramente más grueso o diferente tipografía que el resto.

Conocer el target también nos ayudará a saber el tiempo de las animaciones, más lenta o más rápida dependiendo de la edad a quien va dirigido.

En qué webs y en qué zona de esa web estarà situado es fundamental para captar la atención del usuario. Si está en la cabecera es más fácil la captación, pero has de saber que los banner de cabeceras a veces están programados para que salgan cada 3 entradas en la web, no estará siempre allí. Si es vertical lateral también tendrás protagonismo pero los mensajes se tendrán que situar mayoritariamente en la parte superior (a veces no se baja a ver el resto de web)

Si está en alguna columna interior, con otras noticias o banners es bueno saberlo para aplicar un fondo diferente o lo contrario parecer parte de la noticia, dependiendo del tipo de mensaje del banner.

3- Mira la competencia

Para ser diferente de la competencia tienes que observarla, evitar parecerte mucho a ella, utilizar otros colores y diferentes imágenes, porque a veces se crean banner con imágenes sacadas de bancos de imágenes profesionales, y si coinciden dos campañas con las mismas imágenes puede dar problemas de confusión al usuario y legales a la empresa, ¡así que mucho cuidado!!

4- Tamaños de banners estándar

En algunas campañas se sabe los tamaños de los banners porque se contrata espacios específicos, pero la mayoría de veces se crean tamaños inesperados a lo largo de la campaña. así que mejor diseñar sabiendo que el banner puede ser rectangular, cuadrado o verticales. Tenemos las ventajas de los tamaños estándar para cabeceras de web, entre noticas y en columnas, así que aprovéchalos y evitarás algunos cambios. Los tamaños más utilizados son:

• Robapáginas: 200×200 px

• Banner: 468×60 px

• Megabanner: 728×90 px

• Rascacielos: 120×600 px

Importante homogeneizar: Recuerda que la campaña será la misma, son los mismos contenidos de textos, logos, imágenes y animación, pero tan solo cambia el formato.

5- Jerarquía de elementos y animación clara

Como solo tienes unos segundos para mostrar el banner recuerda poner el logo siempre o al menos al inicio (menos que sea una estrategia de campaña online para captar solo al espectador manteniendo en secreto la marca).

El segundo más importante es el eslogan, en tercer lugar el personaje famoso o imagen de la campaña y luego algún texto adicional.

No dejes lo importante para el final, porque quizás ni lo vea el usuario en las décimas de segundo que le dedica.

Utiliza animaciones infinitas para volver a empezar el banner, porque si está entre noticias o vuelve a subir a la cabecera de la página quizás lo vea al final de la animación.

6- Imágenes de calidad y animaciones sutiles

Es más importante que los textos y fotos del banner se lean y vean bien que una gran animación.

Muchos piensan que al ser un producto por internet y por el poco peso del banner que te exigen (20k-25k normalmente) la calidad de la imagen no es tan importante y si la animación, pero es lo contrario.
Si el banner se ha de ver por web entonces puedes utilizar flash pero si se verá sobre todo en tablets y móviles haz una versión estática en JPG o GIF para que el gestor de banner lo sustituya automáticamente si no es posible verlo el flash.

Una buena solución es crear animaciones en detalles, que capten solo un sitio del banner la atención, suaves y de pocos segundos manteniendo el resto estático, así pesará menos.

7- Mensajes cortos y tipografías legibles rápidamente

Recuerdale al cliente que el eslogan sea corto por lo rápido que pasa la vista el usuario. Si realmente le interesa al usuario ya entrará en la web, donde se puede explicar con detalles la oferta, por ejemplo.

Las fuentes más legibles en pantallas son las sin serifa, así que utilizalas en estos banners y si hay varios textos utiliza bold para diferenciar la jerarquía de lectura. Si el logo de la marca también está en sin serifa entonces utiliza rectángulo de color de fondo para el texto y tamaño diferente al del logo. Hay versiones de fuentes algo diferentes en sin serifa que te puede ayudar.

Si tienes que utilizar con serifa como Times entonces que sea en un tamaño relativamente grande, los detalles en pantalla a partir de 9 puntos hacia menos no se leerá bien.

8- Colores eficaces, que ayuden a ser visto sin molestar al usuario

Recuerda el lema de todo diseñador “Fondos oscuros o saturados texto blanco, fondos claros texto negro”. Evita textos sobre imagen, si te obligan utiliza rectángulos o formas con texto dentro si ha de estar sobre la imagen, o aplica un color degradado plano en esa zona de la imagen contrastando el texto en bold.

9- Animación interesante, no gratuita

Los banners han de destacar, pero eso no quiere decir que se conviertan en un neón luminoso ni que sean como máquinas recreativas con “haz clic aquí” o “entra” constantemente, estos son descartados inmediatamente por el usuario. Como las modas lo que le interesa al usuario es un banner que no moleste pero divertido, como hacer una acción inesperada como el mismo ser una páginas de libro que desaparece, o indicar un personaje que hagas algo con tu ratón en el banner, ahí depende del tipo de target y situación del banner en la web para saber las posibilidades creativas que tienes.

Otra técnica como hemos comentado en el consejo 6 es hacer animaciones sutiles en elementos concretos del banner como movimiento del cabello, un globo que se mueve o un texto determinado del banner que se mueva hacia un lado,etc.

10- Tipos de archivos de banners

Recuerda hacer el banner en diferentes tipos de archivos: swf (flash), GIF y JPG es lo más habitual y lo que acepta más los gestores de banners. Si quieres ahorrar formatos utiliza GIF con imágenes con pocos tonos, fondos y textos de colores planos.

Con estos consejos ya estás más que preparado para hacer banners que SI funcionen, invierte tu imaginación y creatividad para ser diferente y en caso de duda recuerda las claves que te hemos dado, ahorrarás tiempo y energía.

¿Has tenido encargos de banner infernales? ¿hay alguno de grandes marcas que siempre recuerdes? ¡Háznoslo saber en tu comentario!

Curso relacionado: Curso Superior de Diseño Gráfico Multimedia