Qué debes tener en cuenta en el diseño de banners

A la hora de diseñar un banner, deben tenerse bastantes aspectos en consideración, tanto por parte de la empresa como del diseñador. A continuación, explicaremos qué aspectos son y qué trucos nos servirán de ayuda para crear un banner que llegue al usuario eficazmente.

Aspectos clave para diseñar un buen banner 

Conocer al usuario

Como en cualquier campaña publicitaria, es necesario conocer al público potencial al que va dirigido (target). Si se realiza un banner que atraiga al usuario con un mensaje que le sea familiar, con un diseño atractivo y que, además, incluya un punto de humor o misterio, el éxito está casi garantizado.

Otro aspecto a considerar es si verá el banner en la cabecera o dentro de los contenidos en la web. En el primer caso, puedes hacer un mensaje más largo. En el segundo, el mensaje ha de ser más escueto y directo, conservando la versión de la cabecera pero realizando una animación más rápida con la finalidad que se lea todo el contenido en los pocos instantes que lo mire el usuario.

Diseño en animación

Los banners pueden ser estáticos o con animación, pero como todos sabemos si hay alguna animación, aunque sea sutil, nuestro cerebro dirigirá la mirada a ese punto y atraerá al usuario más que el resto de mensajes que hay en una página, que a veces son demasiados.

Si se ha de realizar un banner animado complejo, con frases e imágenes que aparecen y desaparecen del espacio, lo mejor es pedir a la empresa un story board de los contenidos que quieran que aparezca en cada secuencia de imagen.

Un truco: intentar siempre mantener el logo de la empresa visible y la frase más importante en el inicio de la animación, puesto que el usuario sólo mantendrá unas décimas de segundo atento en el plano de la web, hasta que arrastre el ratón al resto de la página.

Tipografía

Intentar utilizar letras muy legibles, mejor de palo seco porque ayuda a la lectura rápida y clara. Si se utilizan decorativas que sea en un logo o texto secundario. El usuario no tendrá tanto tiempo para fijarse en una letra extraña llena de detalles.

Colores

Es un tema muy personal y depende de los colores corporativos de la empresa, pero se ha de considerar la buena lectura de los textos e imágenes. Por eso, se suele poner los textos bajo un fondo de un tono y al lado, la imagen o personaje recortado.

Si se quisiese hacer el texto encima de una fotografía, ésta habrá de estar muy atenuado. Por ejemplo, como una imagen de una modelo en tonos grises a 40% de su tono original y con un texto en color plano.

Trucos de Animación en secuencias

Las animaciones en secuencias  o con diferentes planos son complejos, porque tienes que tener en consideración como aparecerá el siguiente plano. Lo más habitual es utilizar los siguientes recursos:

• Fusión por transparencias: si se basa en diferentes imágenes un buen recurso es utilizar el efecto de fusión de imágenes jugando con la transparencia, pasando una imagen a 100% de opacidad a 0% y a la vez pasando la otra imagen de 0% a 100%, de una forma gradual. Puede ser más rápido o despacio dependiendo de la sensación que se quiera dar. En estos casos lo habitual es dejar siempre los textos y logo fijos.
• Movimiento sutil de algún elemento: si se considera que el usuario preferiría un banner más estático con un toque de animación, lo ideal es hacer un movimiento del brazo del personaje principal u elemento que salga en el banner y que refuerce el mensaje, como un lápiz, objeto o simplemente una hoja cayendo.
• Entrada de elementos en el espacio: Si al usuario le atrae el movimiento puedes realizar un banner más complejo haciendo aparecer en el banner los mensajes e imágenes de una forma dinámica que aparezcan y desaparezcan por los laterales o parte superior e inferior del banner.

Peso adecuado del archivo banner y bucle

El peso adecuado de un banner ha de ser entre 20K y 30K, es un peso bastante pequeño para que no tarde en cargarse en las webs y se visualice antes que otros contenidos. La solución de poner el banner en bucle hace que pueda ser más larga la animación sin aumentar el peso.

– Tipos de archivos

• JPG o PNG: suelen ser banners estáticos, a veces se utilizan de fondo de página web o fijos en alguna sección.
• GIF: puede ser estático o animado, los banners GIFs. Si son animados tienen la ventaja de que pueden verse en casi todas las plataformas (tablets, móviles,etc) pero el peso puede ser demasiado elevado al estar animado.
• .swf: contienen animaciones habitualmente más complejas y sofisticadas. Tienen la ventaja de que pesan poco, además pueden contener vídeos. La desventaja es que en pocas plataformas se ven, solo en navegadores de ordenadores.

– Coherencia en todas las versiones de tamaño de un banner

Los tamaños de los banners pueden variar mucho, aunque hay formatos universales aun hay webs que tienen tamaños propios. Los tamaños que llaman más la atención a los usuarios son:

• El Robapáginas (300×250 píxeles/pulgadas)
• El Megabanner (728×90)
• El banner común (468×80)

Normalmente en las campañas si se piden hacer diferentes formatos de banners se ha de considerar hacer el mismo diseño de banner (imagen, textos y secuencias) en los diferentes tamaños, para mantener coherencia de campaña y cuando el usuario lo vea en otra web lo relacione automáticamente.

Y tú, a la hora de diseñar banners ¿qué otros aspectos tienes en consideración?¿hay algun truco que utilices?