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 resulté 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:

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