Es probable que el término banner ya te resulte más que conocido pero sus peculiaridades y tipografías derivan hacia un concepto mucho más amplio. Un banner es simplemente una imagen promocional digital. Estas piezas se introducen 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 página web o landing diseño web agencia de viajes . En algunas ocasiones los banners son llamados también gráficos de display o bien publicidad display, dependiendo de con quien estés hablando.
Tipos de banners, medidas y tamaños
Aunque el concepto general banner engloba todos ellos, hay una clasificación dependiendo de dónde van puestos o el tamaño que tienen. Hay multitud de opciones para mentar los tamaños de banners, distintos nombres que significan lo mismo, de ahí que haremos una clasificación general, mas es probable que 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 empleado siempre y en todo momento mas desde la usabilidad y de los posibles clicks potenciales brotaron más formatos:
Billoboard: en un caso así 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: por norma general se expanden y ocupan toda la pantalla, su medida acostumbra a ser el ancho de la página x 90px de máximo
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 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 para que puedas ver su tamaño:
Damos por hecho que cada compañía, diseñador y objetivo es de una forma, por lo que aunque te enseñemos ciertos 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 debes llamarle la atención, así que intenta ofrecer algo diferente y piensa a qué target te estás dirigiendo. El texto es un factor clave en la pieza, dale vueltas a un copy creativo.
1. Help Schroeder
Esta pieza es muy popular y acostumbra a 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, por 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 rompecabezas de la carretera a fin de que el automóvil pueda continuar su camino. Una vez más se utiliza el juego, algo que está muy admitido por los usuarios digitales pues 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, logotipo, texto y CTA. Todo bien ordenado y jerarquizado, sin agobiar 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 sucinta.
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 esenciales del mundo, The New York Times, siendo protagonista absoluto. Es un increíble trabajo audiovisual, en tanto 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 enlace el vídeo por el hecho de que 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 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 afirma, “bébetelo ahora” se muestra la segunda una 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 informan también del peligro de tomar y conducir a través de este anuncio interactivo. De nuevo, se quiere hacer protagonista al usuario a fin de 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
Cómo hacer un banner
Si has llegado hasta aquí es pues probablemente te interese saber cómo realizar un banner tu mismo para gestionar la publicidad de tu compañía. Ya antes de explicarte cómo hacerlo paso por paso, veremos qué elementos esenciales precisa tener la pieza a fin de que funcione.
Qué elementos imprescindibles necesitas
Diseño limpio, si bien llamativo. Procura que tu banner se lea a un golpe de vista y que la tipografía sea inteligible, evita cursivas. Si la página de aterrizaje a la que enviarás al usuario es azul, haz que este banner sea del mismo color.
Coherencia en la jerarquía.
Nuestro logotipo para que nos identifique.
CTA claro, necesitas un Call To Actionen el que el usuario sepa que tiene que clicar para llegar hasta ti. “Descarga ahora”, “Regístrate ya” o bien “Haz clic”. Estos casos dependen un poco de cuanto quieras enseñar a los usuarios que vean tu banner, puesto que es posible que desees que solo de un vistazo vean algo que les quieres contar pero no les quieras llevar a ningún lugar. En un caso así prescindiremos de la llamada a la acción.
Un claim o bien esloganque enganche y que afirme algo sobre lo que deseas 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 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 pues si no te parecerá más complicado. Un curso básico de diseño, incluso on line, puede venirte realmente bien para esta clase 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 esto. Es la manera más profesional y con más libertad para efectuar 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. Escoge un fondo
A continuación deberás o, 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 introduciendo nuestro logotipo para tenerlo ya fijado y tras esto te invitamos a que lo pongas en alguna esquina. Piensa en los diseños que acostumbras a hacer para procurar crear algo afín. Debe existir pero no ser el protagonista.
Abre una capa nueva para introducir el texto, el claim que deseas que tenga ese banner. No escribas algo demasiado largo, ni todo en mayúsculas, debe tener una congruencia estética.
Una vez acabado el paso precedente, creamos nuevamente 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 emergencia 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 tipo de inconveniente.
Realmente crear un banner semeja muy sencillo 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 deseas montar es una estructura sencilla, con 3 o cuatro elementos, vamos a ofrecerte ciertos programas con los que podrás montar tus propios banners:
: podríamos definirlo como un photoshop on-line mas con muchas menos funciones. Te servirá como programa para diseñar online y es plenamente gratis, 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 en línea a través de esta web. Existen diferentes planes de precio que van desde el gratis hasta el de 48 euros por mes con el que puedes hacer multitud de diseños. El plan gratis puede servirte si no tienes pensado hacer mucho material, en tanto 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.
: hablábamos de él hace unos días en el blog post de 7 webs con plantillas sin costo 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 emplear tus colores, con lo que es muy recomendable si no tienes mucho conocimiento de diseño. Solo precisas un email para ponerte a trabajar con esto.
: podríamos definirlo como un photoshop on-line pero con muchas menos funciones. Te servirá como programa para diseñar online 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 online a través de esta web. Existen diferentes planes de costo que van desde el gratis hasta el de cuarenta y ocho euros al mes con el que puedes hacer multitud de diseños. El plan gratis puede servirte si no tienes pensado hacer mucho material, puesto que te da la oportunidad de hacer diez piezas sin abonar nada al mes. Sus plantillas están divididas en automóvil, salud, acontecimientos, viajes, servicios, negocio… multitud de ellas enfocadas a principiantes.
: hablábamos de él hace unos días en el blog post de siete webs con plantillas sin coste 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 logotipos y utilizar tus propios colores, por lo que es muy aconsejable si no tienes mucho conocimiento de diseño. Solo precisas un email para ponerte a trabajar con ello.
: es una herramienta muy afín a Canva, tiene gran cantidad de plantillas y recursos y es muy fácil de usar. Es gratis si quieres usar cualquiera de sus recursos pero si precisas un tamaño específico tendrás que adherirte al plan Premium. Su coste es muy bajo, con lo que vale la pena si tienes que hacer múltiples piezas diferentes y necesitas 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, 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 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 semeja.
: 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 email, puedes gozar 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 esencial también que cuentes con un listado de páginas donde puedes localizar 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 emplearlas. En ciertas páginas si es necesario pagar una tarifa mensual, pero en otras no será preciso. Ten en cuenta que en algunas de las páginas de las que te hemos hablado para crear banners (Canva, Fotojet, Desygner…) puedes elegir plantillas que ya vienen con un fondo o bien una imagen.
Plantillas
: muchas plantillas para seleccionar con diferentes diseños, formas y tamaños. Además aquí vas a localizar 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.
: muchas plantillas para seleccionar con diferentes diseños, formas y tamaños. Además aquí vas a hallar un planeta 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 adapten a tus necesidades, además de vectores y muchos otros elementos para añadir a los banners.
Imágenes y fondos para banners
: muy similar al anterior que tenemos explicado, encontrarás fotos, ilustraciones, vectores e inclusive vídeos. Es probable que halles los mismas imágenes en muchas de estas páginas.
: nuestro favorito por la calidad de fotografías que encontrarás. Esta web gratis tiene sobre todo imágenes muy profesionales, mas no vas a encontrar fondos planos y vectores. Pero aseguramos que merece la pena.
: 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 llenar un banner desde 0 así que únicamente te falta echar un pellizco de creatividad y estilo… ¡y a por este motivo!