Crear banners: cómo diseñar tus propios banners

La publicidad online es una de las herramientas más poderosas del marketing online. La publicidad de display es aquella que utiliza medios visuales, entre los que destacan los banners, factores relevantes si se busca tener éxito en Internet con la publicidad. Mediante una integración selectiva de banners en determinadas páginas web es posible llamar la atención de clientes potenciales sin crisparlos con diseños intrusivos. Después de todo, la publicidad mal hecha también puede dañar la marca, mientras que los anuncios bien diseñados generan muchos más clics y, por lo general, más ventas. A pesar de los bloqueadores de anuncios (adblockers), la publicidad de display sigue siendo uno de los instrumentos más eficaces de marketing online.

Hay muchos tipos diferentes de publicidad online, que se diferencian en parte por su posición en la página web y su efecto:

• Pop-ups, pop-unders y layer ads: estos anuncios, considerados molestos por muchos usuarios, acostumbran a reproducirse tan pronto como el visitante de una página lleva a cabo una determinada acción.

Por lo general, estos anuncios están programados con JavaScript y abren nuevas ventanas del navegador que bien saltan repentinamente y se superponen a la página web (pop-ups o ventanas emergentes), bien se abren en un segundo plano, de modo que solo se aprecian cuando se cierran las otras ventanas del navegador (pop-under). Otros anuncios se activan al pasar el ratón por encima o simplemente al hacer scroll, en cuyo caso el anuncio suele mostrarse en la misma ventana del navegador, ocultando el contenido del sitio web visitado (layer ads).

Aunque los consumidores ya pueden bloquear de forma fiable pop-ups y pop-unders con adblockers, aún no es posible hacerlo con los layer ads. Como este tipo de publicidad online a menudo desplaza o encubre el contenido real del sitio web, muchos usuarios la consideran spam. No es de extrañar, por esto, que grandes proveedores de publicidad como Google ya no hagan uso de esta forma de publicidad.

• Rich media: los pequeños elementos de audio y vídeo deben llegar al usuario lo más directamente posible, pero han de encajar perfectamente en el sitio web. Pueden colocarse fijos o "intercalados" en el contenido, por ejemplo, a través de interstitials. Una característica clave de la rich media o multimedia interactiva es que, en comparación con los anuncios tradicionales, ofrecen funciones avanzadas que animan a los usuarios a interactuar, por ejemplo, mediante la integración de pequeños juegos y otros elementos interactivos. Sin embargo, el contenido de rich media no puede mostrarse en todas las páginas web debido a la gran cantidad de datos que contiene (si se compara con los métodos de publicidad tradicionales). Por parte del usuario, el aumento del volumen de datos requerido para su reproducción también puede influir en la navegación. Esto se aplica en particular al uso móvil, donde generalmente se dispone de un ancho de banda más reducido.
• Visualización de texto: la forma más minimalista de publicidad. Los anuncios de texto suelen estar formados por un título corto, que enlaza a la página web correspondiente del anunciante, la dirección URL de la página y un breve texto de descripción. Se utilizan principalmente en SEA.
• Publicidad en vídeo: en un inicio y por razones técnicas, los expertos en marketing online recurrían sobre todo a los anuncios de texto y a los banners, pues podían reproducirse sin problemas incluso con una conexión a Internet más débil. No obstante, el uso cada vez mayor de las conexiones de banda ancha incrementó el interés de estos profesionales por los vídeos publicitarios. Estos pueden reproducirse automáticamente en la página web o después de que el usuario haga clic en ellos. Además, es posible insertarlos en un área determinada de la página web o integrarlos a modo de interstitial antes de que se muestre la página a la que se quiere acceder. Los layers adds suelen contener a menudo también publicidad en forma de vídeo, que en su mayoría se integra con Flash. Sin embargo, mal utilizados, los vídeos publicitarios pueden ser muy molestos, pues ocupan mucho espacio en la página web (o la cubren casi por completo) y suelen llevar sonido incorporado que se activa por defecto. Por otra parte, los vídeos pueden presentar el contenido publicitado de forma mucho más interesante e impactante que otros medios.
• Banners: como parte de la publicidad con banners, los profesionales del marketing utilizan espacios publicitarios predefinidos en los sitios web para anunciar marcas o productos específicos con elementos gráficos (en su mayoría estáticos). Este tipo de publicidad de display ahorra recursos y normalmente no desplaza el contenido real de la página web. Sin embargo, los adblockers ocultan los banners en su mayoría, aun siendo mucho menos intrusivos que los pop-ups o los layer ads.

Con todo, la efectividad de los banners depende en gran medida del producto y formato publicitado. Si quieres anunciar un producto que se puede mostrar visualmente (como alimentos o ropa), con los banners de mayor tamaño dispondrás de espacio para una imagen. Además, los anunciantes pueden hacer uso del seguimiento y la segmentación para ver cuántos usuarios acceden a su oferta a través de un banner. Otra de las ventajas de este tipo de publicidad online está relacionada con la facilidad que supone crearla. Es por eso que los banners publicitarios se convierten en un elemento de gran utilidad para pequeñas empresas con menos recursos.

La mejor forma de activar banners es hacerlo a través de una red publicitaria como la Red de Display de Google y constituyen una solución transaccional muy popular: no son tan intrusivos como los layer adds, si bien no permiten una presentación de productos tan atractiva como los anuncios en vídeo. No obstante, y a diferencia de los anuncios basados únicamente en texto, los banners también permiten trabajar con estímulos visuales. Es más, aquellos bien diseñados consiguen que el usuario acceda a la página de la oferta correspondiente con un solo clic.

Por tanto, el diseño del banner es extremadamente importante pues, normalmente, con este tipo de anuncio se dispone solo de unos segundos para llegar al cliente. Para que el anuncio se reciba de forma positiva, es importante internalizar ciertos principios de diseño. A continuación, te explicamos cómo crear banners atractivos paso a paso.

Entre otros, se distinguen los siguientes formatos:

Recuerda que los gráficos del banner no deben superar los 150 kb. Los formatos de imagen adecuados son .PNG y .JPG y, para los anuncios con animación, GIF. Además, en toda publicidad con banners hay que considerar tres elementos:

• Logo. Es indispensable disponer de un logo propio para aumentar la conciencia de marca. Un buen logotipo se puede reconocer en fracciones de segundo y está diseñado de tal manera que no se concibe como intrusivo. Si, en cambio, no está hecho de forma adecuada, se puede dañar considerablemente a la marca; los consumidores conectan la imagen de un logo de aspecto poco profesional con productos poco profesionales. Esto es motivo suficiente para que inviertas tiempo y recursos suficientes en el diseño de tu logo. En la Digital Guide encontrarás consejos de gran utilidad para crear el tuyo propio.
• Oferta para el cliente potencial: el anuncio ha de comunicar en fracciones de segundo exactamente lo que ofrece el anunciante. Lo primero que debe reconocer el posible cliente es la oferta del anunciante, que debe contener la información necesaria. Si esta es relevante para el espectador, generará interés. Cuando, por ejemplo, quieres realizar un anuncio que se centre en el buen precio del producto o en una oferta especial, muestra dichos precios ("¡Vuelos desde 10 €!") o el descuento correspondiente ("¡Ahora 20 % en zapatos!") con la mayor claridad posible.
• Llamada a la acción. La interactividad del anuncio debe ser visible. ¿Qué sucede cuando hago clic en el anuncio? Los textos y los botones simples ("Ir a la tienda", "Canjear vale", "Registrarse aquí", etc.) permiten al cliente potencial saber lo que pasará al pulsar en el anuncio. Solo entonces el espectador puede asumir si le merece la pena hacerlo.

Para poder ejemplificar mejor la creación de banners, vamos a utilizar como modelo una campaña para una tienda online ficticia de escritorios. La empresa se llama “Table Edge” y tiene el objetivo de atraer a los clientes a visitar la tienda publicando diversos anuncios. Para ello, se decide diseñar un total de seis gráficos, los cuales deben tener un diseño uniforme y contener el logo de la empresa. Se acuerda con el resto de socios utilizar un fondo negro, dado que los banners se van a mostrar en webs de foros con tendencia a los tonos oscuros. Para hacer la oferta más atractiva, ofrecemos un descuento del 10 % a los clientes que accedan a nuestro sitio web a través de uno de estos anuncios. Es decir, ya se han definido los tres elementos que han de incluirse en el banner:

• Se introduce un logo que creemos que será bien recibido por los clientes y que creará presencia de marca.
• Con el descuento se materializa la oferta al cliente potencial, que aumenta a su vez el atractivo del anuncio.
• La llamada a la acción está representada por un botón que enlaza con la tienda y permite hacer visible el objetivo del anuncio.

Al utilizar un marco, consigues que los banners destaquen sobre el contenido habitual del sitio web. Si su diseño se ajusta al logo, se ofrece una mayor homogeneidad y, dado que los anuncios deben ser legibles en fracciones de segundo, no se recomienda utilizar un marco demasiado extravagante que pueda desviar la atención del visitante a lo esencial. En el ejemplo, los banners están delimitados por un marco con una anchura de pocos píxeles que combina con el logotipo.

También es necesario cierto equilibrio entre el diseño y la posición del logotipo. Si bien debe ser fácilmente reconocible, no debe captar la atención del espectador. Es por eso que se recomienda situar el logo en un borde o en una esquina del banner, pues así se puede reconocer directamente la marca, al mismo tiempo que se dispone de espacio suficiente para incluir el texto publicitario o las imágenes del producto. Si la marca aún no es muy conocida, tiene sentido integrar también el nombre junto al logotipo. En la imagen de ejemplo, los banners incluyen el nombre del negocio, al inferir que el usuario no conocerá su procedencia solo con el logo. Sin embargo, en el modelo Mobile Leaderboard, debido a la limitada disponibilidad de espacio, solo es posible incluir el logotipo.

El ejemplo muestra la oferta al cliente potencial en diferentes formatos, destacando en todos ellos el descuento del 10 %. Además, se opta por un color de fuente que contrasta con el marco, el fondo y el logotipo y se añade un texto corto para que los espectadores puedan captar el mensaje en pocos segundos. A modo de complemento, es posible añadir en letra más pequeña otros textos que refuercen el valor de la oferta, por ejemplo, citando comentarios positivos de clientes sobre la marca o los productos. Todo ello, claro está, teniendo siempre en cuenta el tamaño del banner seleccionado y evitando sobrecargarlo.

La elección de la fuente también es importante, pues ha de ser suficientemente legible para que el mensaje publicitario pueda ser captado rápidamente de un solo vistazo.

Dado que el objetivo de los anuncios es que el usuario realice una acción, la conocida como llamada a la acción se considera uno de los componentes más importantes del banner y debe distinguirse del resto del anuncio. En el ejemplo, el botón se ha diseñado en un color naranja brillante que resalta sobre el fondo oscuro. Debido a su reducido tamaño, el leaderboard móvil se puede considerar una llamada a la acción en sí mismo por lo que puede prescindirse de un botón.

La llamada a la acción debe situarse de tal manera que constituya el "final en el camino de lectura", por lo que antes de elegir su posición es necesario tener en cuenta la dirección natural de la lectura por parte del espectador. De este modo, el anuncio transmite primero la información más importante (la oferta) y luego muestra el botón (la solicitud de acción).

En lo que a la creación de imágenes se refiere, se puede ser más creativo, aunque sin llegar a sobrecargar, de lo contrario se puede disuadir al posible cliente.

Dependiendo de la industria o marca, es útil integrar un key visual, esto es, un diseño clave que representa a la marca. De este modo, un negocio que se dedique a la venta online de calzado podría añadir un zapato como key visual en un banner. Las cadenas de comida rápida, por ejemplo, suelen mostrar la imagen ideal de su producto más emblemático. En el caso que nos ocupa, nos interesa dejar claro que en Table Edge se venden escritorios.

Si se ofreciese un surtido mayor de productos, también podría incluirse en los banners una selección de los más atractivos. Por ejemplo: un banner que publicite un servicio de streaming puede incluir como elemento visual clave diferentes carteles de películas o, si se oferta un servicio fotográfico, utilizar una foto particularmente atractiva. Es sobre todo en los banners de mayor tamaño donde hay que aprovechar el espacio de manera creativa. Sin olvidar comprobar, claro está, los derechos de autor de la imagen que se vaya a utilizar.

Al crear el banner es posible incluir también información sobre los premios y reconocimientos del producto o la marca anunciados. Para ello se puede recurrir a elementos gráficos como estrellas, pues resultan familiares para el espectador y evocan asociaciones positivas. Algunas páginas de prueba ofrecen gráficos creados especialmente para que se integran en los banners.

También es común recurrir a la imagen humana para publicitar productos. Esta es una estrategia común de las tiendas online. Los proveedores de equipamiento deportivo confían en las estrellas del deporte y las marcas de perfume suelen utilizar a algún rostro conocido para atraer la atención del público objetivo. Para inspirar asociaciones emocionales, también se pueden usar otras imágenes, como las de paisajes. En definitiva, el objetivo es conseguir que la imagen utilizada atraiga la atención del hipotético cliente, motivo por el cual es esencial utilizarla de forma inteligente.

Si recurres a imágenes de terceros, asegúrate de que tienes permiso para utilizarla. De lo contrario, podrías tener problemas legales.

Muchos banners contienen pequeñas animaciones para llamar la atención del usuario. Si están bien hechas, estas imágenes en movimiento (GIF) pueden lograr un efecto profesional, si bien requieren más trabajo y experiencia que los banners ordinarios. Con la herramienta gratuita Giphy puedes crear un GIF uniendo archivos visuales que puedes haber creado antes para ilustrar tu producto. Este tipo de animaciones pueden responder a un diseño discreto en los que únicamente se cambia el color de fondo del banner o recurrir a una mayor elaboración, en cuyo caso hay que prestar especial atención para no cometer errores en el diseño.

Al igual que con los banners sin animaciones, en el caso de recurrir a archivos GIF hay que cuidar de no sobrecargar el anuncio con información visual, pues de lo contrario, podría ser ignorado por el espectador y, en el peor de los casos, enojarlo, de manera que la marca se relacionaría con una emoción negativo. Además, un uso excesivo de imágenes estáticas en un GIF puede ralentizar la conexión a Internet. Algunas animaciones también pueden despertar asociaciones negativas si, por ejemplo, se utiliza un botón con un color brillante para la llamada a la acción, ya que el usuario podría asociarlo con páginas de juegos o apuestas y considerar el banner como spam. Los consumidores podrían verlos como fraudes o clickbait y, en consecuencia, se dañaría la reputación de la marca.

Por tanto, aunque recurrir a imágenes en movimiento para los banners puede contribuir al éxito del anuncio, su diseño ha de ponerse en manos de profesionales que consigan un buen equilibrio.

Si consideras los tres factores de éxito del diseño de banners (logotipo de la marca, propuesta de valor y llamada a la acción) y sigues las recomendaciones de diseño, puedes empezar a diseñar tus propios banners. Para evitar los errores típicos de los menos expertos, aquí hay algunos ejemplos de lo que no se debe hacer en la creación de banners.

Este banner publicitario apenas va a generar clics, pues no incluye el logotipo de la marca y, por lo tanto, no se puede saber la procedencia de la oferta anunciada. Esto puede hacer que muchos espectadores desconfíen y por lo tanto eviten clicar en el anuncio.

El banner de este ejemplo es problemático por varios motivos: por un lado, se hace muy difícil la lectura debido a la ausencia de contraste (el azul sobre el negro es muy difícil de distinguir). Es más, se puede considerar que el diseño de un banner ha fracasado en el momento en que el lector tiene que forzar la vista para poder leer el texto. Además, el texto es demasiado largo, lo que no capta la atención del espectador, que busca poder entender el contenido en pocos segundos. Por todo ello, se recomienda que el texto descriptivo de la oferta sea corto y conciso y se destaque del fondo con los contrastes necesarios.

En el ejemplo no está claro adónde lleva al usuario si decide hacer clic en él. Esto se debe a que falta la llamada a la acción. En consecuencia, el posible cliente puede preferir no clicar. Es por eso que incluir una llamada a la acción es esencial.

• Uniformidad en el branding: al diseñar los banners, guíate por el diseño de tu propia web. De esta forma aumentas la posibilidad de reconocimiento de la marca.
• Adapta el diseño de los banners a las páginas en las que se espera que aparezcan tus anuncios: así se puede conseguir que los banners parezcan ser parte del sitio y no un elemento intrusivo.
• Respeta las directrices básicas de diseño: los anuncios tienen que atraer la atención, lo que incentiva a sus creadores a explorar caminos nuevos. No obstante, simplemente respetando las reglas en cuanto a la elección del color o de la fuente, ya estarás logrando un efecto publicitario. Puedes, por ejemplo, informarte acerca de la gama de colores y sus posibles combinaciones.
• Observa el simbolismo del color: los colores pueden causar diferentes reacciones en el espectador y activar asociaciones. Si vendes un producto orgánico, un esquema de color verde-marrón apoya la idea de que la marca respeta el medio ambiente. Los productos de belleza se anuncian a menudo con colores apagados. Además, cuando elijas los colores, ten en cuenta también a tu público objetivo.
• Invierte suficiente tiempo y recursos: un mal banner puede hacer mucho daño a tu marca. Por eso dedica tiempo suficiente al diseño y, si careces de experiencia en el uso de programas gráficos, recurre a expertos en la materia.