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

La pu­bli­ci­dad online es una de las he­rra­mie­n­tas más poderosas del marketing online. La pu­bli­ci­dad de display es aquella que utiliza medios visuales, entre los que destacan los banners, factores re­le­va­n­tes si se busca tener éxito en Internet con la pu­bli­ci­dad. Mediante una in­te­gra­ción selectiva de banners en de­te­r­mi­na­das páginas web es posible llamar la atención de clientes po­te­n­cia­les sin cri­s­par­los con diseños in­tru­si­vos. Después de todo, la pu­bli­ci­dad 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 blo­quea­do­res de anuncios (ad­blo­c­ke­rs), la pu­bli­ci­dad de display sigue siendo uno de los in­s­tru­me­n­tos más eficaces de marketing online.

Hay muchos tipos di­fe­re­n­tes de pu­bli­ci­dad online, que se di­fe­re­n­cian en parte por su posición en la página web y su efecto:

• Pop-ups, pop-unders y layer ads: estos anuncios, co­n­si­de­ra­dos molestos por muchos usuarios, aco­s­tu­m­bran a re­pro­du­ci­r­se tan pronto como el visitante de una página lleva a cabo una de­te­r­mi­na­da acción.

Por lo general, estos anuncios están pro­gra­ma­dos con Ja­va­S­cri­pt y abren nuevas ventanas del navegador que bien saltan re­pe­n­ti­na­me­n­te y se su­pe­r­po­nen a la página web (pop-ups o ventanas eme­r­ge­n­tes), 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 si­m­ple­me­n­te 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 co­n­su­mi­do­res ya pueden bloquear de forma fiable pop-ups y pop-unders con ad­blo­c­ke­rs, aún no es posible hacerlo con los layer ads. Como este tipo de pu­bli­ci­dad online a menudo desplaza o encubre el contenido real del sitio web, muchos usuarios la co­n­si­de­ran spam. No es de extrañar, por esto, que grandes pro­vee­do­res de pu­bli­ci­dad como Google ya no hagan uso de esta forma de pu­bli­ci­dad.

• Rich media: los pequeños elementos de audio y vídeo deben llegar al usuario lo más di­re­c­ta­me­n­te posible, pero han de encajar pe­r­fe­c­ta­me­n­te en el sitio web. Pueden colocarse fijos o "in­te­r­ca­la­dos" en el contenido, por ejemplo, a través de in­te­r­s­ti­tia­ls. Una ca­ra­c­te­rí­s­ti­ca clave de la rich media o mu­l­ti­me­dia in­ter­ac­ti­va es que, en co­m­pa­ra­ción con los anuncios tra­di­cio­na­les, ofrecen funciones avanzadas que animan a los usuarios a in­ter­ac­tuar, por ejemplo, mediante la in­te­gra­ción de pequeños juegos y otros elementos in­ter­ac­ti­vos. 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 pu­bli­ci­dad tra­di­cio­na­les). Por parte del usuario, el aumento del volumen de datos requerido para su re­pro­du­c­ción también puede influir en la na­ve­ga­ción. Esto se aplica en pa­r­ti­cu­lar al uso móvil, donde ge­ne­ra­l­me­n­te se dispone de un ancho de banda más reducido.
• Vi­sua­li­za­ción de texto: la forma más mi­ni­ma­li­s­ta de pu­bli­ci­dad. Los anuncios de texto suelen estar formados por un título corto, que enlaza a la página web co­rre­s­po­n­die­n­te del anu­n­cia­n­te, la dirección URL de la página y un breve texto de de­s­cri­p­ción. Se utilizan pri­n­ci­pa­l­me­n­te en SEA.
• Pu­bli­ci­dad 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 re­pro­du­ci­r­se sin problemas incluso con una conexión a Internet más débil. No obstante, el uso cada vez mayor de las co­ne­xio­nes de banda ancha in­cre­me­n­tó el interés de estos pro­fe­sio­na­les por los vídeos pu­bli­ci­ta­rios. Estos pueden re­pro­du­ci­r­se au­to­má­ti­ca­me­n­te en la página web o después de que el usuario haga clic en ellos. Además, es posible in­se­r­tar­los en un área de­te­r­mi­na­da de la página web o in­te­grar­los a modo de in­te­r­s­ti­tial antes de que se muestre la página a la que se quiere acceder. Los layers adds suelen contener a menudo también pu­bli­ci­dad en forma de vídeo, que en su mayoría se integra con Flash. Sin embargo, mal uti­li­za­dos, los vídeos pu­bli­ci­ta­rios pueden ser muy molestos, pues ocupan mucho espacio en la página web (o la cubren casi por completo) y suelen llevar sonido in­co­r­po­ra­do que se activa por defecto. Por otra parte, los vídeos pueden presentar el contenido pu­bli­ci­ta­do de forma mucho más in­te­re­sa­n­te e im­pa­c­ta­n­te que otros medios.
• Banners: como parte de la pu­bli­ci­dad con banners, los pro­fe­sio­na­les del marketing utilizan espacios pu­bli­ci­ta­rios pre­de­fi­ni­dos en los sitios web para anunciar marcas o productos es­pe­cí­fi­cos con elementos gráficos (en su mayoría estáticos). Este tipo de pu­bli­ci­dad de display ahorra recursos y no­r­ma­l­me­n­te no desplaza el contenido real de la página web. Sin embargo, los ad­blo­c­ke­rs ocultan los banners en su mayoría, aun siendo mucho menos in­tru­si­vos que los pop-ups o los layer ads.

Con todo, la efe­c­ti­vi­dad de los banners depende en gran medida del producto y formato pu­bli­ci­ta­do. Si quieres anunciar un producto que se puede mostrar vi­sua­l­me­n­te (como alimentos o ropa), con los banners de mayor tamaño di­s­po­n­drás de espacio para una imagen. Además, los anu­n­cia­n­tes pueden hacer uso del se­gui­mie­n­to y la se­g­me­n­ta­ción para ver cuántos usuarios acceden a su oferta a través de un banner. Otra de las ventajas de este tipo de pu­bli­ci­dad online está re­la­cio­na­da con la facilidad que supone crearla. Es por eso que los banners pu­bli­ci­ta­rios se co­n­vie­r­ten 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 pu­bli­ci­ta­ria como la Red de Display de Google y co­n­s­ti­tu­yen una solución tra­n­sac­cio­nal muy popular: no son tan in­tru­si­vos como los layer adds, si bien no permiten una pre­se­n­ta­ción de productos tan atractiva como los anuncios en vídeo. No obstante, y a di­fe­re­n­cia de los anuncios basados úni­ca­me­n­te 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 co­rre­s­po­n­die­n­te con un solo clic.

Por tanto, el diseño del banner es ex­tre­ma­da­me­n­te im­po­r­ta­n­te pues, no­r­ma­l­me­n­te, 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 im­po­r­ta­n­te in­te­r­na­li­zar ciertos pri­n­ci­pios de diseño. A co­n­ti­nua­ción, te ex­pli­ca­mos cómo crear banners atra­c­ti­vos paso a paso.

Entre otros, se di­s­ti­n­guen los si­guie­n­tes 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 pu­bli­ci­dad con banners hay que co­n­si­de­rar tres elementos:

• Logo. Es in­di­s­pe­n­sa­ble disponer de un logo propio para aumentar la co­n­cie­n­cia de marca. Un buen logotipo se puede reconocer en fra­c­cio­nes 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 co­n­si­de­ra­ble­me­n­te a la marca; los co­n­su­mi­do­res conectan la imagen de un logo de aspecto poco pro­fe­sio­nal con productos poco pro­fe­sio­na­les. Esto es motivo su­fi­cie­n­te para que inviertas tiempo y recursos su­fi­cie­n­tes en el diseño de tu logo. En la Digital Guide en­co­n­tra­rás consejos de gran utilidad para crear el tuyo propio.
• Oferta para el cliente potencial: el anuncio ha de comunicar en fra­c­cio­nes de segundo exac­ta­me­n­te lo que ofrece el anu­n­cia­n­te. Lo primero que debe reconocer el posible cliente es la oferta del anu­n­cia­n­te, que debe contener la in­fo­r­ma­ción necesaria. Si esta es relevante para el es­pe­c­ta­dor, 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 co­rre­s­po­n­die­n­te ("¡Ahora 20 % en zapatos!") con la mayor claridad posible.
• Llamada a la acción. La in­ter­ac­ti­vi­dad 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", "Re­gi­s­trar­se aquí", etc.) permiten al cliente potencial saber lo que pasará al pulsar en el anuncio. Solo entonces el es­pe­c­ta­dor puede asumir si le merece la pena hacerlo.

Para poder eje­m­pli­fi­car mejor la creación de banners, vamos a utilizar como modelo una campaña para una tienda online ficticia de es­cri­to­rios. La empresa se llama “Table Edge” y tiene el objetivo de atraer a los clientes a visitar la tienda pu­bli­ca­n­do 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 ma­te­ria­li­za la oferta al cliente potencial, que aumenta a su vez el atractivo del anuncio.
• La llamada a la acción está re­pre­se­n­ta­da 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 ho­mo­ge­nei­dad y, dado que los anuncios deben ser legibles en fra­c­cio­nes de segundo, no se re­co­mie­n­da utilizar un marco demasiado ex­tra­va­ga­n­te que pueda desviar la atención del visitante a lo esencial. En el ejemplo, los banners están de­li­mi­ta­dos por un marco con una anchura de pocos píxeles que combina con el logotipo.

También es necesario cierto equi­li­brio entre el diseño y la posición del logotipo. Si bien debe ser fá­ci­l­me­n­te re­co­no­ci­ble, no debe captar la atención del es­pe­c­ta­dor. Es por eso que se re­co­mie­n­da situar el logo en un borde o en una esquina del banner, pues así se puede reconocer di­re­c­ta­me­n­te la marca, al mismo tiempo que se dispone de espacio su­fi­cie­n­te para incluir el texto pu­bli­ci­ta­rio 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 pro­ce­de­n­cia solo con el logo. Sin embargo, en el modelo Mobile Lea­de­r­boa­rd, debido a la limitada di­s­po­ni­bi­li­dad de espacio, solo es posible incluir el logotipo.

El ejemplo muestra la oferta al cliente potencial en di­fe­re­n­tes formatos, de­s­ta­ca­n­do 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 es­pe­c­ta­do­res puedan captar el mensaje en pocos segundos. A modo de co­m­ple­me­n­to, es posible añadir en letra más pequeña otros textos que refuercen el valor de la oferta, por ejemplo, citando co­me­n­ta­rios positivos de clientes sobre la marca o los productos. Todo ello, claro está, teniendo siempre en cuenta el tamaño del banner se­le­c­cio­na­do y evitando so­bre­ca­r­gar­lo.

La elección de la fuente también es im­po­r­ta­n­te, pues ha de ser su­fi­cie­n­te­me­n­te legible para que el mensaje pu­bli­ci­ta­rio pueda ser captado rá­pi­da­me­n­te 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 co­m­po­ne­n­tes más im­po­r­ta­n­tes del banner y debe di­s­ti­n­gui­r­se 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 lea­de­r­boa­rd móvil se puede co­n­si­de­rar una llamada a la acción en sí mismo por lo que puede pre­s­ci­n­di­r­se de un botón.

La llamada a la acción debe situarse de tal manera que co­n­s­ti­tu­ya 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 es­pe­c­ta­dor. De este modo, el anuncio transmite primero la in­fo­r­ma­ción más im­po­r­ta­n­te (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 so­bre­ca­r­gar, de lo contrario se puede disuadir al posible cliente.

De­pe­n­die­n­do de la industria o marca, es útil integrar un key visual, esto es, un diseño clave que re­pre­se­n­ta 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 em­ble­má­ti­co. En el caso que nos ocupa, nos interesa dejar claro que en Table Edge se venden es­cri­to­rios.

Si se ofreciese un surtido mayor de productos, también podría incluirse en los banners una selección de los más atra­c­ti­vos. Por ejemplo: un banner que publicite un servicio de streaming puede incluir como elemento visual clave di­fe­re­n­tes carteles de películas o, si se oferta un servicio fo­to­grá­fi­co, utilizar una foto pa­r­ti­cu­la­r­me­n­te atractiva. Es sobre todo en los banners de mayor tamaño donde hay que apro­ve­char 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 in­fo­r­ma­ción sobre los premios y re­co­no­ci­mie­n­tos del producto o la marca anu­n­cia­dos. Para ello se puede recurrir a elementos gráficos como estrellas, pues resultan fa­mi­lia­res para el es­pe­c­ta­dor y evocan aso­cia­cio­nes positivas. Algunas páginas de prueba ofrecen gráficos creados es­pe­cia­l­me­n­te para que se integran en los banners.

También es común recurrir a la imagen humana para pu­bli­ci­tar productos. Esta es una es­tra­te­gia común de las tiendas online. Los pro­vee­do­res de equi­pa­mie­n­to 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 aso­cia­cio­nes emo­cio­na­les, también se pueden usar otras imágenes, como las de paisajes. En de­fi­ni­ti­va, el objetivo es conseguir que la imagen utilizada atraiga la atención del hi­po­té­ti­co cliente, motivo por el cual es esencial uti­li­zar­la de forma in­te­li­ge­n­te.

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

Muchos banners contienen pequeñas ani­ma­cio­nes para llamar la atención del usuario. Si están bien hechas, estas imágenes en mo­vi­mie­n­to (GIF) pueden lograr un efecto pro­fe­sio­nal, si bien requieren más trabajo y ex­pe­rie­n­cia que los banners or­di­na­rios. Con la he­rra­mie­n­ta gratuita Giphy puedes crear un GIF uniendo archivos visuales que puedes haber creado antes para ilustrar tu producto. Este tipo de ani­ma­cio­nes pueden responder a un diseño discreto en los que úni­ca­me­n­te se cambia el color de fondo del banner o recurrir a una mayor ela­bo­ra­ció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 ani­ma­cio­nes, en el caso de recurrir a archivos GIF hay que cuidar de no so­bre­ca­r­gar el anuncio con in­fo­r­ma­ción visual, pues de lo contrario, podría ser ignorado por el es­pe­c­ta­dor y, en el peor de los casos, enojarlo, de manera que la marca se re­la­cio­na­ría con una emoción negativo. Además, un uso excesivo de imágenes estáticas en un GIF puede ra­le­n­ti­zar la conexión a Internet. Algunas ani­ma­cio­nes también pueden despertar aso­cia­cio­nes 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 co­n­si­de­rar el banner como spam. Los co­n­su­mi­do­res podrían verlos como fraudes o clickbait y, en co­n­se­cue­n­cia, se dañaría la repu­tación de la marca.

Por tanto, aunque recurrir a imágenes en mo­vi­mie­n­to para los banners puede co­n­tri­buir al éxito del anuncio, su diseño ha de ponerse en manos de pro­fe­sio­na­les que consigan un buen equi­li­brio.

Si co­n­si­de­ras 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 re­co­me­n­da­cio­nes 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 pu­bli­ci­ta­rio apenas va a generar clics, pues no incluye el logotipo de la marca y, por lo tanto, no se puede saber la pro­ce­de­n­cia de la oferta anunciada. Esto puede hacer que muchos es­pe­c­ta­do­res de­s­co­n­fíen y por lo tanto eviten clicar en el anuncio.

El banner de este ejemplo es pro­ble­má­ti­co 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 di­s­ti­n­guir). Es más, se puede co­n­si­de­rar 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 es­pe­c­ta­dor, que busca poder entender el contenido en pocos segundos. Por todo ello, se re­co­mie­n­da que el texto de­s­cri­p­ti­vo de la oferta sea corto y conciso y se destaque del fondo con los co­n­tra­s­tes ne­ce­sa­rios.

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 co­n­se­cue­n­cia, el posible cliente puede preferir no clicar. Es por eso que incluir una llamada a la acción es esencial.

• Uni­fo­r­mi­dad en el branding: al diseñar los banners, guíate por el diseño de tu propia web. De esta forma aumentas la po­si­bi­li­dad de re­co­no­ci­mie­n­to 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 di­re­c­tri­ces 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, si­m­ple­me­n­te re­s­pe­ta­n­do las reglas en cuanto a la elección del color o de la fuente, ya estarás logrando un efecto pu­bli­ci­ta­rio. Puedes, por ejemplo, in­fo­r­mar­te acerca de la gama de colores y sus posibles co­m­bi­na­cio­nes.
• Observa el si­m­bo­li­s­mo del color: los colores pueden causar di­fe­re­n­tes reac­cio­nes en el es­pe­c­ta­dor y activar aso­cia­cio­nes. 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 su­fi­cie­n­te tiempo y recursos: un mal banner puede hacer mucho daño a tu marca. Por eso dedica tiempo su­fi­cie­n­te al diseño y, si careces de ex­pe­rie­n­cia en el uso de programas gráficos, recurre a expertos en la materia.