INTRODUCCIÓN
En algún momento de su carrera, casi todos los diseñadores tendrán que diseñar un conjunto de banners publicitarios. Inspirado por alguien que me dijo que habían hecho su primer anuncio de banner, pensé que sería bueno examinar este subgénero de diseño, ya que he diseñado miles de anuncios de banner y dirigido miles de arte más a lo largo de los años.
En esta publicación no entraré en los problemas, como los tipos de páginas en las que aparecen los anuncios o las tasas de clics, ya que los diseñadores no pueden cambiarlas. Estaré mirando exclusivamente el arte de diseñar pancartas para que se vean más atractivas (y, con suerte, más fáciles de hacer clic).
Los anuncios de banner deben indicar la página a la que se conectan
EL PAISAJE DE ANUNCIOS DE BANNER
Los tres anuncios de banner en línea más comunes son la MPU (Unidades de Mensajería Plus), la tabla de clasificación y el rascacielos, a lo que me refiero como la santísima trinidad de los anuncios de banner. Aparecen en toda la web a medida que las formas encajan en el ancho de la página web (tablas de clasificación) o dentro de una columna individual (MPU y rascacielos). Las tablas de clasificación se colocan con una MPU o un rascacielos, pero los tres nunca aparecen juntos.
Los anuncios de banner generalmente formarán parte de una campaña existente, por lo que sus ingredientes pueden ser proporcionados por el cliente, es decir, logotipo(s), imágenes, dirección de copia. La clave es combinar esos ingredientes de una manera que sea interesante para el usuario del sitio web en los aproximadamente 2 segundos que pasan escaneando el anuncio (incluso menos si escanean el anuncio de forma periférica). Es crucial captar su atención con una imagen/mensaje convincente y hacer obvio lo que te gustaría que hicieran a continuación. Si usted entrecerrar los ojos y no hay un obvio punto focal en el anuncio, es poco probable que funcione.
Creo firmemente que los banners deben indicar claramente en qué está haciendo clic el usuario de la web. De esta manera, el usuario llega a una página que se parece al anuncio que lo envió allí. Si no fuera así, naturalmente se sentirían decepcionados o aplazados si no se pareciera en nada a lo que esperaban.
Como resultado, normalmente miro la página de destino primero al diseñar banners y trabajo hacia atrás desde allí. A continuación, se trata de establecer la jerarquía correcta de los diversos ingredientes del anuncio (por ejemplo, logotipo primero pero pequeño, titular siguiente pero dominante, etc.).). Después de eso, agregue una llamada a la acción (CTA) adecuada que se vincule a la copia y especifique la acción/respuesta deseada. Una vez que se ordenan las jerarquías de los mensajes, se pueden aplicar a los tres tamaños de banners de forma individual.
Los elementos compiten entre sí en la mayoría de las MPU debido a la forma cuadrada
MPU (300×250)
La unidad MPU (Unidad de Mensajería Plus) generalmente se coloca en la columna derecha más estrecha de la página y, como resultado, tiene un formato aproximadamente cuadrado y un tamaño más pequeño para aparecer encima del pliegue. El formato cuadrado presenta un problema de composición, ya que al ojo humano le gustan las imágenes ligeramente más horizontales (formato horizontal) o más profundas (formato vertical).
Siento que la mezcla de logotipo, imagen, titular y llamada a la acción en los MPU a menudo no deja mucho espacio para que uno de los cuatro forme el foco del anuncio. Esto se ve fácilmente en los MPU HP y X-Factor de arriba, donde todos los elementos luchan entre sí por la atención del usuario web. En ambos casos, el fondo se utiliza simplemente como una tableta en la que colocar elementos.
Por el contrario, la MPU de CSI de arriba ha utilizado la imagen de fondo para unir los elementos haciéndolos emerger de las sombras. La pistola circular, la tarjeta de evidencia amarilla y las manos en los pies también emergen de las sombras para establecer un tono y proporcionar otra información visual para el ojo si la copia no se lee.
Los titulares son el elemento clave en las tablas de clasificación
TABLAS de clasificación (728×90)
La forma horizontal larga de la tabla de clasificación puede llevar a diseños que utilizan sus elementos como una serie de trozos iguales como en el ejemplo de HP anterior. Sin embargo, he encontrado que las tablas de clasificación tienen más impacto si el titular es mucho más grande que en las otras dos unidades de anuncios de banner. Esto se demuestra claramente en el anuncio de Factor X de arriba, donde incluso si escaneas el anuncio rápidamente, la conclusión clave es » ¿Lo tienes?»
Dado que las tablas de clasificación generalmente se colocan en la parte superior de la página, un enfoque en los titulares se presta a la psicología preexistente de cómo procesamos las páginas web, un recuerdo residual de la lectura de periódicos y revistas.
A medida que las resoluciones de pantalla aumentan de tamaño, también lo hacen los anchos de página web, lo que hace que los 728×90 anteriores sean cada vez más redundantes (originalmente diseñados para una resolución de 1024 × 768). Como resultado de esto, CBS Interactive se está moviendo para reemplazar todos los 728×90 en su red de sitios con 970×66 (llamado súper líder). Estos nuevos anuncios son menos intrusivos para el usuario de un sitio y se adaptan mejor a las diversas páginas, que ahora tienen un ancho de 970 píxeles. La longitud añadida y la profundidad más superficial de un super líder se prestan aún más a una iteración impulsada por los titulares de una campaña.
El pliegue corta los rascacielos por la mitad hasta que el usuario se desplaza hacia abajo
El rascacielos largo y delgado tiene pequeños titulares e imágenes grandes
RASCACIELOS (160×600)
Mientras que los MPU y las tablas de clasificación generalmente se colocan en una página por encima del pliegue, el rascacielos se corta por la mitad por el pliegue de la página (generalmente alrededor de 600 px hacia abajo, ver el diagrama de arriba). Como resultado, la información clave, como el logotipo, el titular y el CTA, debe estar en la mitad superior. La estrechez del rascacielos también significa que sus titulares tienden a ser pequeños.
En mi experiencia he encontrado que los rascacielos tienden a colocarse en páginas que tienen mucha información y son ligeras en imágenes. Esto es ideal para rascacielos, ya que tienen mucho más espacio para imagary que MPU y tablas de clasificación.
En los tres ejemplos de 160×600 por encima de los rascacielos se ha diseñado teniendo cada vez más en cuenta el pliegue de izquierda a derecha. En el rascacielos HP, todos los elementos anteriores han recibido la misma prominencia y, como resultado, no hay foco para el ojo. El anuncio de Factor X tiene a los presentadores más grandes que en otras iteraciones de la campaña, pero el titular pequeño se ha visto abrumado por todos los demás elementos: la información clave está debajo del pliegue y hace que el fondo del anuncio sea pesado. En el rascacielos CSI, la imagen más grande reúne los elementos, mientras que el segundo logotipo ha causado un poco de hacinamiento en la parte superior.
Compare esta versión de 728×90 del anuncio con los 300×250 de abajo (vea el anuncio animado aquí)
La animación ayuda a dividir los elementos a lo largo del tiempo
ANIMACIÓN
No hace falta decir que agregar animación a un anuncio de banner atraerá la atención hacia él. Una versión Flash de un banner también ayuda a romper estos elementos con el tiempo. En el Ally 728×90 de arriba, mostrar el lápiz lleno es menos convincente que en la versión 300×250, donde el ojo está esperando a ver qué sucede a continuación.
Últimamente veo muchos más botones de repetición en anuncios animados, sin duda porque el anuncio ya ha comenzado a reproducirse cuando la página comienza a cargarse. Las versiones estáticas de los anuncios han vuelto a ser más relevantes a medida que se cargan como Jpeg predeterminado en entornos donde el Flash no se reproduce, como tabletas y teléfonos inteligentes.
La animación por sí sola no es suficiente para hacer que un anuncio sea bueno. Todavía tiene que haber algo convincente en el anuncio, de lo contrario, se inclina hacia ser como todos esos anuncios de puntuación de crédito, dieta y remortgage baratos que llaman la atención. Originalmente había convertido los dos anuncios de Ally de arriba en GIFs animados para esta publicación, pero mi ojo los eliminó automáticamente, ya que (y probablemente la mayoría de la gente en la web) estoy tan acostumbrado a ignorar los anuncios animados apilados uno encima del otro.
CONSEJOS DE DISEÑO DE BANNERS
Ya que he hecho tantos banners, aquí hay algunos consejos que he recogido a lo largo de los años. Disculpas si parecen obvias, las declaro porque veo que no se aplican constantemente:
Copy
• Evite toda la copia en mayúsculas, ya que esto dificulta la lectura del usuario
• Los titulares y el cuerpo del texto deben tener diferentes tamaños para facilitar al lector el escaneo
• Los titulares y/o el cuerpo del texto deben estar en no más de tres líneas
• preservar las jerarquías de mensajería y todo el texto debe estar alineado de manera consistente (izquierda, derecha, centro)
• Considere usar tipografía interesante como imágenes para ahorrar espacio un elemento menos
Llamada a la acción (CTA)
• Debe ser corto y al punto como «Ir ahora» o «Comprobarlo Out»
• Debe estar por encima del pliegue para unidades de 160×600 y 300×600 (aproximadamente la mitad de la unidad)
• Debe estar en mayúsculas al comienzo de cada palabra para facilitar el escaneo
Botones
• Debe estar en colores contrastantes sin parecer llamativo
• Debe colocarse hacia el final de la copia y/o en la parte inferior derecha
• Debe ser de tamaño uniforme a lo largo de un conjunto de banners publicitarios
• Aparentemente, obtiene más clics que los enlaces de solo texto en los banners publicitarios (aunque estos últimos se vean más elegantes)
Misc
• Agregue un borde gris de 1 px en los anuncios con un fondo blanco: puede colocarse en una página blanca
* Para la aprobación de la primera ronda, a veces convierto los fotogramas individuales de Photoshop en un GIF animado
* Antes del envío final, me quedo atrás y miro el anuncio para comprobar si se puede escanear fácilmente
* Como con todo diseño, ahorre tiempo dibujando siempre los fotogramas del anuncio
Una apariencia de página reúne los anuncios de banner al envolver o enmarcar la página
CONCLUSIÓN
Dado que los usuarios web están tan acostumbrados a ver anuncios de banner (y anuncios en general), hay muchos cambios por delante. Aunque la santísima trinidad de MPU, la tabla de clasificación y el rascacielos dominan el paisaje de anuncios de banner, he visto que otros tamaños se están volviendo más comunes, como los Intersticiales de 640×480 (a medida que el video se vuelve más predominante) y los anuncios de Media página de 300×600 que tienen un MPU más profundo para dominar la columna de la derecha. Para obtener una lista completa de las unidades más nuevas que probablemente llenarán Internet en el futuro, visite la página de IAB sobre el tema haciendo clic aquí.
Para una experiencia de marca más completa y armoniosa, las pieles de página (o «fondos de pantalla») se usan mucho más en Internet (especialmente en Internet Movie database (en inglés)) a medida que envuelven los anuncios de banner juntos. Hacemos alrededor de 900 skins al año en CBS Interactive (descargue este pdf para leer más). A medida que las pieles también se vuelven más numerosas, también hay un aumento en las adquisiciones de medios enriquecidos hechas a medida que se solicitan especialmente en las RFP (para leer más sobre esto, consulte mi publicación aquí). Sin embargo, tanto para los aspectos como para las adquisiciones de medios enriquecidos, todavía existe la necesidad siempre presente de que la experiencia publicitaria funcione junto con los banners publicitarios estándar en la página y la experiencia del usuario con ellos.
APÉNDICE
La historia de los banners publicitarios:http://en.wikipedia.org/wiki/Web_banner
Estándares de la Oficina de Publicidad Interactiva (IAB) :
http://www.iab.net/guidelines/508676/508767/displayguidelines
El Pliegue: http://en.wikipedia.org/wiki/Above_the_fold
Buscar anuncios de banners para marcas específicas: http://www.moat.com
Resolución de pantalla: http://en.wikipedia.org/wiki/Display_resolution
Creación de anuncios DIY: http://www.building43.com/videos/2011/07/19/flite-cloud-based-advertising
Anuncios de banners de Adobe: http://tv.adobe.com/watch/cs5-design-premium-feature-tour/interaction-design-101-create-a-simple-banner-ad-with-flash-professional-cs5/
Algunas páginas de anuncios de banner colaborativas:
http://jobs.designcrowd.com/bannerad-design-jobs
http://99designs.com/banner-ad-design/contests
http://www.crowdspring.com/banner-ads/
Algunos hoteles (y hacinamiento) banner web diseño de sitios:
http://www.justgothere.com/web_banners/web_banner_example/300x250_web_banner_example.htm
http://www.decentbanners.com/portfolio_300x250.html
http://www.banner4five.com/business_banners_300x250
