6 ejemplos de banners creativos
📑 En este blog post encontrarás:
¿Qué es un banner en una página web?
Es probable que el término banner ya te resulte más que conocido mas sus peculiaridades y tipografías derivan hacia un concepto mucho más extenso. Un banner es simplemente una
imagen promocional digital. Estas piezas se insertan en diferentes lugares (que vamos a ver 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 del anunciante. En ciertas 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 término general banner abarca todos ellos, hay una clasificación dependiendo de dónde van colocados o bien el tamaño que tienen. Hay multitud de opciones para mencionar los tamaños de banners, distintos nombres que significan lo mismo, de ahí que vamos a hacer una clasificación general, mas probablemente te halles con otras definiciones. Vamos a fijarnos en lospara designar esta tipología:
Banner medium rectangle: 300x250px
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 clics potenciales surgieron más formatos:
Billoboard: en un caso así ocupa todo el ancho de la página, expandiéndose cara abajo, 970×250
Pushdown: este panel ocupa todo el ancho de la página en su comienzo 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 cara la izquierda, puede tener múltiples tamaños 300×250, 300×600, 970×250
Slider: generalmente se expanden y ocupan toda la pantalla, su medida suele ser el ancho de la página x 90px de máximo
Slider: normalmente se expanden y ocupan toda la pantalla, su medida acostumbra a ser el ancho de la página x 90px de máximo
Actualmente, debido al apogeo del móvil, 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 a fin de que puedas ver su tamaño:
Damos por hecho que cada compañía, diseñador y objetivo es de una forma, con lo que si bien te enseñemos ciertos ejemplos de piezas promocionales 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é objetivo 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 muchas veces. El personaje de dibujos que aparece es Schroeder de la serie Peanuts y el CTA invita a tocar al lado de él el piano.
Produce cierta curiosidad al usuario, con lo que es muy posible que cliquen en él:.
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 puzle de la carretera para que el automóvil pueda continuar su camino. Una vez más se emplea el juego, algo que está muy admitido por los usuarios digitales por el hecho de que les aporta algo más que un anuncio.
3. Foster’s Hollywood
En este caso vemos todos y cada uno de los detalles que hemos marcado como imprescindibles anteriormente: imagen, logo, texto y CTA. Todo bien ordenado y jerarquizado, sin agobiar al lector. La imagen tiene buen aspecto, el texto señala exactamente lo que se quiere promocionar y la llamada de atención es clara y concisa.
4. consultoria seo
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, puesto que se trata de un vídeo en el que el preso se mueve por las diferentes unas partes de la portada del diario. Te dejamos con en este link el vídeo porque merece mucho la pena:.
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 las dos imágenes mas 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 vehículo 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 riesgo 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 y cada una de las piezas de las marcas alcohólicas hasta lograr el cartel entero. Al final, es imposible y te apetece un eslogan que afirma “Don’t drink and drive”. Puedes verlo en este vídeo
Cómo hacer un banner
Si has llegado hasta aquí es pues seguramente 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 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 Actionen el que el usuario sepa que tiene que cliquear para llegar hasta ti. “Descarga ahora”, “Regístrate ya” o bien “Haz clic”. Estos casos dependen un tanto de lo que quieras enseñar a los usuarios que vean tu banner, ya que posiblemente quieras que solo de un vistazo vean algo que les quieres contar mas no les quieras llevar a ningún sitio. En un caso así prescindiremos de la llamada a la acción.
Un claim o esloganque enganche y que diga algo sobre lo que quieres ofertar.
Dependiendo de cuanto 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 desquiciado a nadie.
Una vez tenemos claros estos puntos, podemos pasar a diseñar nuestro banner. Es conveniente que cuando menos tengas nociones básicas de diseño por el hecho de que si no te parecerá más complicado. Un curso básico de diseño, aun en línea, puede venirte muy bien para este tipo de acciones.
Pero partimos de la base de que tienes cierto conocimiento en diseño para comenzar a crear tus banners, así que nuestra recomendación es que emplees photoshop para ello. Es la forma más profesional y con más libertad para realizar banners. Comenzamos con un caso muy básico.
Pasos
1. Crea un nuevo documento
Escoge la medida que tendrá la pieza. Vamos a poner como ejemplo un banner medium rectangle de 300x250px.
2. Escoge un fondo
A continuación deberás o bien, seleccionar un color de fondo, un degradado o bien una imagen.
3. Nueva capa
Cuando te decidas, crea una capa nueva para comenzar a añadir el resto de elementos a la pieza. Vamos a seguir 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 procurar 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 congruencia estética.
5. Llamada a la acción
Una vez acabado el paso anterior, creamos nuevamente otra capa para llenar el CTA que queramos añadir. Lo idóneo es que introduzcas un rectángulo de otro color y dentro pongamos la palabra de urgencia que deseamos 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 a fin de que no tengas ningún género de inconveniente.
Realmente crear un banner semeja sencillísimo pero lo esencial es que todos los elementos de la pieza se acompasen estilísticamente y guarden una jerarquía.
Páginas para hacer banners online
Aunque nuestra primera recomendación es que efectúes tus banners con photoshop, existen multitud de programas para hacerlos en línea. 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 banners:
: podríamos definirlo como un photoshop online pero con muchas menos funciones. Te servirá como programa para diseñar en línea y es completamente gratuito, no es precisa 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.
: puedes crear tus diseños on line a través de esta web. Existen diferentes planes de costo que van desde el gratuito hasta el de 48 euros por mes con el que puedes hacer multitud de diseños. El plan gratuito puede servirte si no tienes pensado hacer mucho material, puesto que te da la oportunidad de
hacer 10 piezas sin abonar nada al mes. Sus plantillas están divididas en automóvil, salud, eventos, viajes, servicios, negocio… multitud de ellas enfocadas a principiantes.
: hablábamos de él hace unos días en el blog post de 7 webs con plantillas gratis para newsletters mas 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 emplear tus 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.
: podríamos definirlo como un photoshop on line mas con muchas menos funciones. Te servirá como programa para diseñar on-line y es plenamente 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.
: puedes crear tus diseños on-line a través de esta web. Existen diferentes planes de precio que van desde el gratuito hasta el de cuarenta y ocho euros al mes con el que puedes hacer multitud de diseños. El plan gratuito puede servirte si no tienes pensado hacer mucho material, puesto que te da la ocasión de
hacer diez piezas sin abonar nada al mes. Sus plantillas están divididas en automóvil, salud, eventos, viajes, servicios, negocio… multitud de ellas enfocadas a principiantes.
: hablábamos de él hace unos días en el post de siete webs con plantillas sin coste para boletines de noticias pero también puede servirnos para estos casos. En un programa con estilos y tamaños variados, con lo que puedes aprovechar sus plantillas para diseñar tus banners. Tienes la posibilidad de subir imágenes y logotipos y usar tus colores, por lo que es muy recomendable si no tienes mucho conocimiento de diseño. Solo necesitas un e-mail para ponerte a trabajar con esto.
: es una herramienta muy similar a Canva, tiene gran cantidad de plantillas y recursos y es muy fácil de usar. Es gratis si quieres utilizar cualquiera de sus recursos pero si precisas 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 múltiples piezas diferentes y precisas una herramienta fácil.
: a través de esta web puedes crear banners mucho más profesionales y animados si quisieras. Como el resto de programas, hay una versión gratuita con plantillas de muchos tamaños y estilos con lo que sin efectuar ningún pago. Esta herramienta
es más avanzada por la incorporación de animacionespero 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.
: es otra de las ideas que te damos y que también es muy afín a Canva o bien a Fotojet. Con tu suscripción a través del e-mail, puedes gozar de muchas opciones de forma gratuita. Cuentan con multitud de recursos, imágenes de uso libre, vectores, stickers y fondos… ¡una buenísima herramienta para hacer nuestros pinitos como diseñadores!
Recursos
Es esencial también que cuentes con un listado de páginas donde puedes localizar fondos y también imágenes gratis 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á preciso. Ten en cuenta que en ciertas páginas de las que te hemos hablado para crear banners (Canva, Fotojet, Desygner…) puedes elegir plantillas que ya vienen con un fondo o una imagen.
Plantillas
: muchas plantillas para elegir con diferentes diseños, formas y tamaños. Además aquí vas a hallar 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!
: otra web donde podrás descargar numerosas plantillas que se amolden a tus necesidades, además de vectores y muchos otros elementos para añadir a los banners.
: muchas plantillas para seleccionar con diferentes diseños, formas y tamaños. Además aquí vas a hallar 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!
: otra web donde podrás descargar numerosas plantillas que se amolden a tus necesidades, además de vectores y otros muchos elementos para añadir a los banners.
Imágenes y fondos para banners
: muy afín al anterior que tenemos explicado, encontrarás fotos, ilustraciones, vectores e incluso vídeos. agencias web halles los mismas imágenes en muchas de estas páginas.
: nuestro preferido por la calidad de fotografías que encontrarás. Esta web gratis tiene sobre todo imágenes muy profesionales, pero no vas a encontrar fondos planos y vectores. Mas aseguramos que merece la pena.
: tiene diseños para los fondos de tus banners muy originales y de belleza artística. Muy aconsejable. 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 un pellizco de inventiva y estilo… ¡y a por esta razón!
