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 sencillamente 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 web o página de aterrizaje del anunciante. En algunas ocasiones los banners son llamados también gráficos de display o bien publicidad display, en dependencia de con quien estés hablando.
Tipos de banners, medidas y tamaños
Aunque el término general banner engloba todos , existe una clasificación en dependencia 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, por eso vamos a hacer una clasificación general, pero es probable que te encuentres 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 usado siempre mas a partir de la usabilidad y de los posibles clicks potenciales brotaron 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 cara 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: normalmente 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 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 ciertos 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 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 presente 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 factor 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 al lado de él el piano. Produce cierta curiosidad al usuario, por lo que es muy probable 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 desea promocionar el nuevo Golf. experto sem de la carretera para que el automóvil pueda seguir su camino. Una vez más se emplea el juego, algo que está muy aceptado por los usuarios digitales pues les aporta algo más que un anuncio.
3. Foster’s Hollywood
En este caso vemos todos los detalles que hemos marcado como indispensables 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 breve.
4. The Fugitive Chronicles
Este banner de la serie televisiva The Fugitive Chronicles, se integra en la primera plana de uno de los periódicos más esenciales del planeta, 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 pues 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 pero 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 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
Cómo hacer un banner
Si has llegado hasta aquí es por el hecho de que seguramente te interese saber cómo efectuar un banner tu mismo para gestionar la propaganda de tu compañía. 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. desarrollo de paginas web para empresas madrid 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 Actionen el que el usuario sepa que debe cliquear para llegar hasta ti. “Descarga ahora”, “Regístrate ya” o “Haz clic”. Estos casos dependen un tanto de cuanto quieras enseñar a los usuarios que vean tu banner, puesto que posiblemente desees que solo de una ojeada vean algo que les quieres contar mas 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 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 bien no.
Puedes animar tu banner si no vuelve ido a nadie.
Una vez tenemos claros estos puntos, podemos pasar a diseñar nuestro banner. especialista en sem por lo menos tengas nociones básicas de diseño porque si no te parecerá más complicado. Un curso básico de diseño, incluso en línea, puede venirte muy bien para este género 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 utilices photoshop para esto. 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 de ejemplo un banner medium rectangle de 300x250px.
2. Elige un fondo
A continuación deberás o, escoger 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 logo para tenerlo ya fijado y tras esto te recomendamos que lo coloques en alguna esquina. Piensa en los diseños que acostumbras a hacer para procurar crear algo similar. Debe existir mas no ser el protagonista.
4. Introduce el texto
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.
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 ideal es que introduzcas 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 inconveniente.
Realmente crear un banner semeja 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 en línea. Si lo que quieres montar es una estructura fácil, con 3 o cuatro elementos, vamos a ofrecerte algunos programas con los que podrás montar tus banners:
: podríamos definirlo como un photoshop online mas con muchas menos funciones. Te servirá como programa para diseñar on line y es absolutamente gratis, 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 online a través de esta web. Existen diferentes planes de precio que van desde el gratis hasta el de 48 euros al 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 ocasión 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 artículo 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, por lo que puedes aprovechar sus plantillas para diseñar tus banners. Tienes la posibilidad de subir imágenes y logos y usar tus colores, con lo que es muy aconsejable si no tienes mucho conocimiento de diseño. Solo necesitas un email para ponerte a trabajar con ello.
: podríamos definirlo como un photoshop en línea pero con muchas menos funciones. Te servirá como programa para diseñar online y es completamente 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 gratis 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, puesto que te da la oportunidad de hacer 10 piezas sin pagar 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 post de siete webs con plantillas sin costo para boletines de noticias 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 usar tus propios colores, por lo que es muy aconsejable si no tienes mucho conocimiento de diseño. Solo precisas un e-mail para ponerte a trabajar con esto.
: 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 deseas 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, con lo que vale la pena si debes hacer múltiples piezas diferentes y necesitas una herramienta sencilla.
: 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 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 ciertas páginas si es preciso 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 vienen con un fondo o bien una imagen.
Plantillas
: muchas plantillas para escoger con diferentes diseños, formas y tamaños. Además aquí vas a encontrar 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 amolden a tus necesidades, además de vectores y otros muchos elementos para añadir a los banners.
: muchas plantillas para escoger con diferentes diseños, formas y tamaños. Además aquí vas a encontrar 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 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 precedente que tenemos explicado, encontrarás fotos, ilustraciones, vectores e incluso vídeos. Probablemente halles los mismas imágenes en muchas de estas páginas.
: nuestro preferido por la calidad de fotografías que encontrarás. Esta web gratuita tiene sobre todo imágenes muy profesionales, mas no vas a hallar fondos planos y vectores. Mas aseguramos que vale 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 y cada uno de los recursos para completar un banner desde 0 así que solamente te falta echar un pellizco de creatividad y estilo… ¡y a por este motivo!