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

¿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 wide skyscraper: 160x600px
• Banner leaderboard: 728x90px

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

• • 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:

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

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

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

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

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

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

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.

• 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!