6 ejemplos de banners creativos y cómo hacer uno por pasos

ūüēí 12 min.

¬ŅQu√© es un banner en una p√°gina web?

Es probable que el término banner ya te resulte más que conocido pero sus particularidades y tipografías derivan hacia un concepto mucho más amplio. Un banner es sencillamente una imagen publicitaria digital. Estas piezas se insertan en diferentes lugares (que veremos más adelante) en una página web.

En la mayoría de los casos tienen como objetivo atraer tráfico a la web o landing page del anunciante. En algunas ocasiones los banners son llamados también gráficos de display o publicidad display, dependiendo de con quien estés hablando.

Tipos de banners, medidas y tama√Īos

Aunque el concepto general banner engloba todos ellos, existe una clasificaci√≥n dependiendo de d√≥nde van colocados o el tama√Īo que tienen. Hay multitud de opciones para mencionar los tama√Īos de banners, distintos nombres que significan lo mismo, por eso vamos a hacer una clasificaci√≥n general, pero es probable que te encuentres con otras definiciones. Vamos a fijarnos en los formatos que marca el IAB para designar esta tipolog√≠a:

    • Banner medium rectangle: 300x250px

Banner medium rectangle

  • Banner wide skyscraper: 160x600px
  • Banner leaderboard: 728x90px

Banner leaderboard

Estos han sido los banners m√°s cl√°sicos que se han utilizado siempre pero a partir de la usabilidad y de los posibles clicks potenciales surgieron m√°s formatos:

  • Billoboard: en este caso ocupa todo el ancho de la p√°gina, expandi√©ndose hacia abajo, 970×250
  • Pushdown: este panel ocupa todo el ancho de la p√°gina en su inicio y se expande hacia abajo con la interacci√≥n del usuario. 970×970
  • Portrait: panel vertical que reproduce contenido.
  • Sidekick: se trata del formato vertical expandible que empuja el contenido de la p√°gina hacia la izquierda, puede tener varios tama√Īos 300×250, 300×600, 970×250

Banner Sidekick

    • Slider: normalmente se expanden y ocupan toda la pantalla, su medida suele ser el ancho de la p√°gina x 90px de m√°ximo

Actualmente, debido al auge del smartphone, se han definido otros tama√Īos exclusivos para √©l:

  • Adhesion banner: 320x50px
  • Pull: 320x50px
  • Slider: 320x50px
  • Filmstrip: enfocado a tablet y con un tama√Īo de 300x600px
  • Filmstrip full screen: 320x50px
  • Smartphone Static Banner: 300x50px
  • Smartphone Static Wide Banner: 320x50px
  • Smartphone interstitial: 300x250px
  • Feature phone Small Banner: 120√ó20 px
  • Feature phone Medium Banner: 168√ó28 px
  • Feature phone Large Banner: 216√ó36 px

Aqu√≠ te ense√Īamos una imagen recopilatoria de algunos de ellos para que puedas ver su tama√Īo:

tama√Īos de banners

6 ejemplos de banners creativos

Damos por hecho que cada compa√Ī√≠a, dise√Īador y objetivo es de una forma, por lo que aunque te ense√Īemos algunos ejemplos de piezas publicitarias que son originales y de las que puedes inspirarte, despu√©s puedes crear lo que quieras. Ten en cuenta que al usuario tienes que llamarle la atenci√≥n, as√≠ que intenta ofrecer algo diferente y piensa a qu√© target te est√°s dirigiendo. El texto es un elemento clave en la pieza, dale vueltas a un copy creativo.

1. Help Schroeder

Ejemplo de banner en The New York Times

Esta pieza es muy popular y suele ponerse de ejemplo en muchas ocasiones. El personaje de dibujos que aparece es Schroeder de la serie Peanuts y el CTA invita a tocar junto a él el piano. Produce cierta curiosidad al usuario, por lo que es muy probable que cliquen en él: vídeo del banner en acción.

2. The new Golf

Ejemplo banner creativo de Volkswagen

En este caso vemos un banner muy interactivo y original. Se trata de una de las campa√Īas de Volkswagen en el que quiere promocionar el nuevo Golf. El anuncio te invita a ordenar el puzzle de la carretera para que el autom√≥vil pueda continuar su camino. Una vez m√°s se utiliza el juego, algo que est√° muy aceptado por los usuarios digitales porque les aporta algo m√°s que un anuncio.

3. Foster’s Hollywood

banner Foster's Hollywood

En este caso vemos todos los detalles que hemos marcado como imprescindibles anteriormente: imagen, logo, texto y CTA. Todo bien ordenado y jerarquizado, sin abrumar al lector. La imagen tiene buen aspecto, el texto indica exactamente lo que se quiere promocionar y la llamada de atención es clara y concisa.

4. The Fugitive Chronicles

banner creativo en The New York Times

Este banner de la serie televisiva The Fugitive Chronicles, se integra en la portada de uno de los periódicos más importantes del mundo, The New York Times, siendo protagonista absoluto. Es un increíble trabajo audiovisual, ya que se trata de un vídeo en el que el prisionero se mueve por las diferentes partes de la portada del diario. Te dejamos con en este enlace el vídeo porque merece mucho la pena: vídeo del banner The Fugitive Chronicles.

5. “Don’t drink and drive” de Fiat

banner Don't drink and drive de Fiat

Este banner animado es tambi√©n muy popular por el impacto del mensaje, el ya cl√°sico: si bebes no conduzcas. En la imagen vemos ambas im√°genes pero al usuario le aparece √ļnicamente la primera y cuando clica sobre la fecha que le dice, “b√©betelo ahora” se muestra la segunda parte del anuncio en el que el coche aparece destrozado y la flecha de la bebida alcoh√≥lica abajo, ya consumida.

6. Malteser – Typo Crash

banner de Malteser - Typo Crash

Se trata de un banner de servicios de ambulancias que avisan tambi√©n del peligro de beber y conducir a trav√©s de este anuncio interactivo. De nuevo, se quiere hacer protagonista al usuario para que juegue con la publicidad y trate de encajar todas las piezas de las marcas alcoh√≥licas hasta conseguir el cartel entero. Al final, es imposible y te apetece un eslogan que dice “Don’t drink and drive”. Puedes verlo en este v√≠deo v√≠deo del banner de Malteser

Cómo hacer un banner

Si has llegado hasta aqu√≠ es porque probablemente te interese saber c√≥mo realizar un banner tu mismo para gestionar la publicidad de tu compa√Ī√≠a. Antes de explicarte c√≥mo hacerlo paso por paso, vamos a ver qu√© elementos esenciales necesita tener la pieza para que funcione.

Qué elementos indispensables necesitas

  • Dise√Īo limpio, aunque llamativo. Intenta que tu banner se lea a un golpe de vista y que la tipograf√≠a sea legible, evita cursivas. Si la landing page a la que enviar√°s al usuario es azul, haz que este banner sea del mismo color.
  • Coherencia en la jerarqu√≠a.
  • Nuestro logo para que nos identifique.
  • CTA claro, necesitas un Call To Action en el que el usuario sepa que tiene que clicar para llegar hasta ti. ‚ÄúDescarga ahora‚ÄĚ, ‚ÄúReg√≠strate ya‚ÄĚ o ‚ÄúHaz clic‚ÄĚ. Estos casos dependen un poco de lo que quieras mostrar a los usuarios que vean tu banner, ya que es posible que quieras que solo de un vistazo vean algo que les quieres contar pero no les quieras llevar a ning√ļn sitio. En ese caso prescindiremos de la llamada a la acci√≥n.
  • Un claim o eslogan que enganche y que diga algo sobre lo que quieres ofertar.
  • Dependiendo de lo que queramos informar, qu√© tama√Īo tiene y d√≥nde lo queremos poner, utilizaremos fotograf√≠as de fondo o no.
  • Puedes animar tu banner si no vuelve loco a nadie.

Una vez tenemos claros estos puntos, podemos pasar a dise√Īar nuestro banner. Es recomendable que al menos tengas nociones b√°sicas de dise√Īo porque si no te parecer√° m√°s complicado. Un curso b√°sico de dise√Īo, incluso online, puede venirte muy bien para este tipo de acciones.

Pero partimos de la base de que tienes cierto conocimiento en dise√Īo para empezar a crear tus propios banners, as√≠ que nuestra recomendaci√≥n es que utilices photoshop para ello. Es la manera m√°s profesional y con m√°s libertad para realizar banners. Empezamos con un ejemplo muy b√°sico.

Pasos

1. Crea un nuevo documento

Escoge la medida que tendr√° la pieza. Vamos a poner de ejemplo un banner medium rectangle de 300x250px.

2. Elige un fondo

A continuación deberás o bien, elegir un color de fondo, un degradado o una imagen.

3. Nueva capa

Cuando te decidas, crea una capa nueva para empezar a a√Īadir el resto de elementos a la pieza. Vamos a continuar insertando nuestro logo para tenerlo ya fijado y tras esto te recomendamos que lo coloques en alguna esquina. Piensa en los dise√Īos que sueles hacer para intentar crear algo similar. Debe existir pero no ser el protagonista.

4. Inserta el texto

Abre una capa nueva para insertar el texto, el claim que quieres que tenga ese banner. No escribas algo demasiado largo, ni todo en may√ļsculas, debe tener una coherencia est√©tica.

5. Llamada a la acción

Una vez acabado el paso anterior, creamos de nuevo otra capa para completar el CTA que queramos a√Īadir. Lo ideal es que insertes un rect√°ngulo de otro color y dentro pongamos la palabra de urgencia que queremos a√Īadir.

6. Guarda tu dise√Īo

Una vez tengas estos pasos b√°sicos listos ya podr√°s guardar tu imagen con la calidad m√°s alta para que no tengas ning√ļn tipo de problema.

Realmente crear un banner parece muy sencillo pero lo importante es que todos los elementos de la pieza se sincronicen estilísticamente y guarden una jerarquía.

P√°ginas para hacer banners online

Aunque nuestra primera recomendación es que realices tus banners con photoshop, existen multitud de programas para hacerlos online. Si lo que quieres montar es una estructura sencilla, con tres o cuatro elementos, vamos a ofrecerte algunos programas con los que podrás montar tus propios banners:

    • Design Wizard: esta es otra gran herramienta para crear banners en l√≠nea de alta calidad. Las funciones gratuitas te permiten cambiar el tama√Īo de sus dise√Īos, cargar fuentes, fotos y logotipos y crear paletas de colores personalizadas. Su biblioteca contiene m√°s de un mill√≥n de im√°genes premium y miles de videos, ilustraciones y gr√°ficos de alta calidad. Todos los videos e im√°genes tambi√©n tienen licencia para uso comercial.
    • Online Photo Editor: podr√≠amos definirlo como un photoshop online pero con muchas menos funciones. Te servir√° como programa para dise√Īar online y es totalmente gratuito, no es necesaria ni una suscripci√≥n. Puedes crear la pieza con el tama√Īo que desees y despu√©s ir creando tambi√©n capas con el resto de elementos.
    • Bannersnack: puedes crear tus dise√Īos online a trav√©s de esta web. Existen diferentes planes de precio que van desde el gratuito hasta el de 48 euros al mes con el que puedes hacer multitud de dise√Īos. El plan gratuito puede servirte si no tienes pensado hacer mucho material, ya que te da la oportunidad de hacer 10 piezas sin pagar nada al mes. Sus plantillas est√°n divididas en autom√≥vil, salud, eventos, viajes, servicios, negocio‚Ķ multitud de ellas enfocadas a principiantes.
    • Canva: habl√°bamos de √©l hace unos d√≠as en el post de 7 webs con plantillas gratis para newsletters pero tambi√©n puede servirnos para estos casos. En un programa con estilos y tama√Īos variados, por lo que puedes aprovechar sus plantillas para dise√Īar tus banners. Tienes la posibilidad de subir im√°genes y logos y utilizar tus propios colores, por lo que es muy recomendable si no tienes mucho conocimiento de dise√Īo. Solo necesitas un email para ponerte a trabajar con ello.

Panel de Canva

  • Fotojet: es una herramienta muy similar a Canva, tiene gran cantidad de plantillas y recursos y es muy f√°cil de usar. Es gratuito si quieres utilizar cualquiera de sus recursos pero si necesitas un tama√Īo espec√≠fico tendr√°s que adherirte al plan Premium. Su precio es muy bajo, por lo que vale la pena si tienes que hacer varias piezas diferentes y necesitas una herramienta sencilla.
  • HTML5 maker: a trav√©s de esta web puedes crear banners mucho m√°s profesionales y animados si quisieras. Como el resto de programas, existe una versi√≥n gratuita con plantillas de muchos tama√Īos y estilos por lo que sin realizar ning√ļn pago. Esta herramienta es m√°s avanzada por la incorporaci√≥n de animaciones pero cuenta con una pesta√Īa de tutoriales en v√≠deo con los que podr√°s aprender mucho y te dar√°s cuenta de que es m√°s f√°cil de lo que parece.
  • Desygner: es otra de las ideas que te damos y que tambi√©n es muy similar a Canva o a Fotojet. Con tu suscripci√≥n a trav√©s del email, puedes disfrutar de muchas opciones de forma gratuita. Cuentan con multitud de recursos, im√°genes de uso libre, vectores, stickers y fondos‚Ķ ¬°una muy buena herramienta para hacer nuestros pinitos como dise√Īadores!

Recursos

Es importante tambi√©n que cuentes con un listado de p√°ginas donde puedes encontrar fondos e im√°genes gratuitas y libres para incluir en tus banners. Gracias esto ‚Äúperder√°s‚ÄĚ menos tiempo buscando y sabr√°s que tienes autorizaci√≥n para usarlas. En algunas p√°ginas si es necesario pagar una tarifa mensual, pero en otras no ser√° necesario. Ten en cuenta que en algunas de las p√°ginas de las que te hemos hablado para crear banners (Canva, Fotojet, Desygner‚Ķ) puedes escoger plantillas que ya vienen con un fondo o una imagen.

Plantillas

    • Freepick: muchas plantillas para elegir con diferentes dise√Īos, formas y tama√Īos. Adem√°s aqu√≠ vas a encontrar un mundo de fotograf√≠as, fondos, vectores, iconos‚Ķ es uno de los m√°s populares por la cantidad de recursos que ofrece, ¬°y es espa√Īola!
    • Vecteezy: otra web donde podr√°s descargar numerosas plantillas que se adapten a tus necesidades, adem√°s de vectores y otros muchos elementos para a√Īadir a los banners.

Im√°genes y fondos para banners

  • Pixabay: muy similar al anterior que tenemos explicado, encontrar√°s fotos, ilustraciones, vectores e incluso v√≠deos. Es probable que encuentres los mismas im√°genes en muchas de estas p√°ginas.
  • Unsplash: nuestro favorito por la calidad de fotograf√≠as que encontrar√°s. Esta web gratuita tiene sobre todo im√°genes muy profesionales, pero no vas a encontrar fondos planos y vectores. Pero aseguramos que merece la pena.
  • Foter: tiene dise√Īos para los fondos de tus banners muy originales y de belleza art√≠stica. Muy recomendable. Tiene un buscador muy sencillo que con una sola palabra clave encontrar√°s multitud de opciones.

Ya tienes todos los recursos para completar un banner desde 0 así que solamente te falta echar una pizca de creatividad y estilo… ¡y a por ello!

11 comentarios en ¬ę6 ejemplos de banners creativos y c√≥mo hacer uno por pasos¬Ľ

  1. Mi contento por iniciar mi trabajo con banners, que antes no los pod√≠a confeccionar, les agradezco por ense√Īarme, muchas gracias, este tipo de ayudas son muy buenas.

    Responder
    • Hola Pilar. Depender√° del tipo de banner que quieras insertar, los precios var√≠an si, por ejemplo, se trata de un banner est√°tico o animado. En esta p√°gina hay una tabla informativa donde te puedes hacer una idea de la diferencia entre tipos y tama√Īos. Espero que te sirva!

      Responder
  2. Pues yo creo que un banner bien echo seria una gran herramienta para un negocio o empresa que lo use de forma correcta sobre todo si son para publicidad.

    Responder

Deja un comentario