Es probable que el término banner ya te resulte más que conocido mas sus particularidades y tipografías derivan hacia un término mucho más amplio. Un banner es sencillamente 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 page del anunciante. 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 término general banner engloba todos ellos, hay una clasificación en dependencia de dónde van colocados 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, pero probablemente 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 y en todo momento pero 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 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 hacia 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 suele ser el ancho de la página x 90px de máximo
Slider: generalmente 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 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 para 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 ciertos ejemplos de piezas promocionales que son originales y de las que puedes inspirarte, después puedes crear cuanto quieras. Ten presente que al usuario debes 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 acostumbra a 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, con 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. El anuncio te invita a ordenar el puzle de la carretera a fin de que el automóvil pueda proseguir su camino. Una vez más se usa 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 indispensables 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 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 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 distintas unas partes de la portada del diario. Te dejamos con en este enlace 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 clásico: si bebes no conduzcas. En la imagen vemos ambas imágenes mas al usuario le aparece únicamente la primera y cuando clica sobre la data que le dice, “bébetelo ahora” se muestra la segunda una 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 informan también del riesgo de beber 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 y cada una de las piezas de las marcas alcohólicas hasta conseguir 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. Ya antes de explicarte cómo hacerlo paso por paso, vamos a ver qué elementos esenciales necesita tener la pieza a fin de que funcione.
Qué elementos imprescindibles necesitas
Diseño limpio, aunque llamativo. Intenta que tu banner se lea a un golpe de vista y que la tipografía sea inteligible, 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 logotipo 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 poco de lo que quieras mostrar a los usuarios que vean tu banner, puesto que es posible que 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 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 al 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, incluso on-line, 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 propios banners, así que nuestra recomendación es que utilices photoshop para ello. Es la forma más profesional y con más libertad para realizar banners. Empezamos 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. Elige un fondo
A continuación deberás o, seleccionar un color de fondo, un degradado o 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 pongas en alguna esquina. Piensa en los diseños que acostumbras a hacer para intentar crear algo afín. Debe existir mas 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 ideal es que insertes un rectángulo de otro color y dentro pongamos la palabra de emergencia 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 a fin de que no tengas ningún tipo de inconveniente.
Realmente crear un banner parece muy sencillo mas lo esencial 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 deseas montar es una estructura fácil, con 3 o bien cuatro elementos, vamos a ofrecerte ciertos programas con los que podrás montar tus propios banners:
: podríamos definirlo como un photoshop on-line pero con muchas menos funciones. Te servirá como programa para diseñar en línea y es totalmente 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 en línea a través de esta web. Existen diferentes planes de precio 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, en tanto 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 artículo de 7 webs con plantillas sin coste para newsletters mas 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 emplear tus colores, por lo que es muy aconsejable si no tienes mucho conocimiento de diseño. diseño de pagina para negocio madrid ponerte a trabajar con ello.
: podríamos definirlo como un photoshop online mas con muchas menos funciones. Te servirá como programa para diseñar on-line y es plenamente 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 coste que van desde el gratuito 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, puesto que te da la oportunidad de hacer diez piezas sin pagar nada al mes. marketing digital analitica web á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 7 webs con plantillas sin costo para newsletters mas 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 propios colores, por lo que es muy recomendable 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 utilizar. Es gratuito si deseas emplear cualquiera de sus recursos mas si precisas un tamaño específico tendrás que adherirte al plan Premium. Su costo es bajísimo, por lo que merece 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 quisieses. 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 similar a Canva o bien a Fotojet. Con tu suscripción a través del e-mail, puedes disfrutar 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 ciertas páginas si es preciso abonar una tarifa mensual, mas en otras no será preciso. Ten presente 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 una imagen.
Plantillas
: 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 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 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.
: muy afín al precedente que tenemos explicado, encontrarás fotografías, ilustraciones, vectores e incluso 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 gratuita tiene sobre todo imágenes muy profesionales, mas no vas a localizar 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 sencillísimo que con una sola palabra clave encontrarás multitud de opciones.
Ya tienes todos los recursos para llenar un banner desde 0 así que solamente te falta echar un pellizco de inventiva y estilo… ¡y a por este motivo!
0 
Star