Banner web: ¿Qué es y cómo hacer uno para tu tienda en línea?
Un banner web es un formato publicitario digital que puede incluir imágenes, texto, sonido o elementos multimedia, con el objetivo de dar visibilidad a un contenido específico de una empresa o negocio.
Cuando se trata de publicidad digital, un banner web es una de las mejores herramientas para resaltar atributos de una marca, productos o servicios, además de ayudar a alcanzar objetivos puntuales. Son aliados de las campañas de marketing y grandes apoyos comunicativos.
Si quieres saber más sobre cómo hacer un banner web para tu tienda en línea con las mejores prácticas, sigue leyendo este contenido que has llegado al lugar indicado. ¿Comenzamos?
¿Qué es un banner web?
Podemos definir a un banner web como un formato publicitario digital que puede incluir imágenes, texto, sonido o elementos multimedia y su función es darle visibilidad a los objetivos de una empresa o negocio.
Un banner puede encontrarse en una página web, en ciertos espacios publicitarios delimitados con el propósito de captar la atención del usuario y lograr que éste realice una acción establecida, como visitar un sitio web, dejar un registro, realizar una compra, descargar una aplicación móvil o simplemente generar conocimiento de marca.
¿Baner o banner?
Este anglicismo se escribe banner, no baner, siguiendo la gramática del inglés. El término baner es un uso inapropiado y no debería utilizarse para nombrar al formato publicitario digital comúnmente utilizado en la creación de páginas web, tiendas en línea y sitios web.
¿Qué tipos de banner web existen?
Ahora que ya sabes que es banner, hablemos sobre los tipos de banner web, los cuales se categorizan dependiendo de sus características particulares. Algunos de los tipos de banner web más comúnmente encontrados en los sitios web son:
-
- Banner rectangular
- Box banner
- Banner Pop-up
- Banner carrusel
- Banner robapáginas
- Banner skyscraper o rascacielos
Permíteme explicarte uno a uno las especificaciones de cada banner.
¿Qué es un banner rectangular?
El banner rectangular suele encontrarse en la parte superior de un sitio web, sin embargo también puede encontrarse intercalado dentro de un contenido. Suele contener imágenes o mensajes con ofertas atractivas para el usuario. Si bien los podemos encontrar en distintas medidas, la más usual es 700 x 120 píxeles.
Aquí te muestro un ejemplo de banner rectangular, el cual puedes probar y darle clic. 😉
¿Qué es un box banner?
El box banner es similar al banner rectangular, ya que usualmente se encuentra en la parte superior de un sitio web pero a menudo, éste se ubica en la parte superior derecha de la página, ya que en contenidos digitales la lectura que usualmente realiza el usuario es de derecha a izquierda, siendo ésta una de las ubicaciones más observadas. El tamaño más común de un box banner es de 468 x 60 píxeles.
Ejemplo de box banner
¿Qué es un banner pop-up o banner emergente?
Un banner web emergente o también llamado banner pop-up es fácilmente identificable por ser aquel que de forma repentina aparece en la pantalla de tu computadora o dispositivo móvil. Este tipo de banner web fue uno de los más populares en los años noventa, sin embargo su popularidad y funcionamiento fue algo que también lo llevó a ser uno de los más molestos y odiados por los usuarios.
Aunque puede ser útil para conseguir clics, también puede resultar contraproducente si el texto o los gráficos no hacen sentido para el usuario, además de tener en contra la frecuencia con la que aparece. Entre las medidas más habituales está la de 500 x 350 píxeles o la de 550 x 480 píxeles.
Hoy en día existen extensiones de Chrome o configuraciones específicas del navegador que le permiten al usuario bloquear estos banners en los sitios, por ello si planeas utilizarlo para la construcción de tu página web o tienda en línea, es necesario que tomes en cuenta que puede ser bloqueado por los navegadores al tener activadas estas preferencias por los usuarios.
Ejemplo de banner pop-up
¿Qué es un banner carrusel?
El banner carrusel o slider es uno de los elementos más utilizados en la arquitectura web. Usualmente se encuentra en la parte superior de una página de inicio y se caracteriza por permitirle al administrador del sitio web o tienda en línea destacar información o varias ofertas de contenido al mismo tiempo.
Aunque este banner puede ayudar a aumentar el tiempo que los usuarios pasan en un sitio, mal configurado resulta en graves errores de usabilidad, como seguir moviéndose tras la interacción del usuario, un elevado número de ofertas de contenido o slides, demasiados botones o transiciones apresuradas que no permitan la lectura efectiva de los mensajes. Entre las medidas más populares del banner carrusel se encuentra la de 1440 píxeles x 770 píxeles.
Si agregas este elemento a tu tienda online, algunas de las mejores prácticas son:
- Asegúrate de incluir mensajes con información relevante y/o con ventajas competitivas.
- No sobrecargues los mensajes, deben ser leíbles de un simple vistazo.
- Incluye un link en cada imagen, así tu usuario tendrá un acceso rápido al contenido que publicas.
Incluir un banner carrusel en tu Tiendanube es más fácil de lo que crees. Aquí te muestro cómo puedes hacerlo fácilmente. Mira que bien lo hicieron en Melons Kitchen
Ejemplo de banner carrusel
¿Qué es un banner robapáginas?
El banner robapáginas es uno de los más utilizados en diseño web por ser de los menos invasivos para el usuario. Se encuentra en la parte derecha de un sitio, al costado del contenido y aunque lo podemos encontrar en varios formatos, entre los tamaños más comunes, podemos encontrar el cuadrado y el rectangular, siendo de 300 píxeles x 250 píxeles y de 300 píxeles x 600 píxeles respectivamente.
El banner robapáginas lo podemos encontrar, usualmente en un formato integrado a una página web, en una posición fija, ya que no suele pasar desapercibido por los visitantes y no comprometen la usabilidad del sitio o la lectura del contenido. Los hay también en formato desplegable, haciendo que el banner se amplíe cuando el usuario pasa el cursor por encima. Todo depende del funcionamiento o del propósito para el cual se configure.
Ejemplo de banner robapáginas
¿Qué es un banner skyscraper o banner rascacielos?
El banner skyscraper es fácilmente identificable por su formato vertical y de gran tamaño. Similar al robapáginas, se encuentra en el lado derecho de una página web y suele tener una alta tasa de clics, al encontrarse en uno de los sitios más frecuentados por el usuario al momento de navegar y hacer scroll hacia abajo.
Como su nombre lo indica, es parecido a un rascacielos, tanto por la altura como por su gran tamaño, siendo las medidas más comunes 120 píxeles x 600 píxeles.
Ejemplo de banner skyscraper o rascacielos
¿Cómo hacer un banner web?
Para crear un banner web no necesariamente debes saber de programación, existen numerosas herramientas que pueden ayudarte a lograr tu objetivo. Aquí tienes un paso a paso que te ayudará a crear un banner web creativo, con las mejores prácticas. ¡Manos a la obra!
- Define el objetivo
- Elige el formato
- Desarrolla el o los mensajes
- Obtén imágenes de buena calidad
- Elige el call to action
- Mide, analiza y optimiza
Hablemos de cada uno de los puntos para evitar que queden dudas. ¿Te parece?
1. Define el objetivo
Antes de comenzar a diseñar, lo principal es saber cuál es el objetivo del banner. Establecer la motivación es esencial para los siguientes pasos, ya que te ayudará a esclarecer en dónde tendría que estar ubicado, cuál sería el funcionamiento y hacia dónde tendría que dirigir a los usuarios.
El propósito del banner web puede ser tan simple como que los usuarios conozcan tu promoción de envío gratis o tan complejo como que se inscriban a un seminario web o descarguen un e-book y llenen un formulario de registro.
Usualmente las métricas de medición más utilizadas en los banners web son:
- Impresiones: número de veces que los usuarios vieron el banner en un sitio o tienda online.
- Clics: número de usuarios que le dieron clic al banner web.
- CTR (click through rate): el número de clics que se dan en el banner entre el número de impresiones.
💡 Tip: Puedes plantearte número de impresiones, clics y un CTR meta y ver de qué manera se comporta la audiencia ante el banner.
2. Elige el formato
Ya que hayas establecido los objetivos y la medición que realizarás, el siguiente paso es elegir el formato. Para hacerlo puedes hacerte las siguientes preguntas:
- ¿En dónde quiero que vean los usuarios el mensaje?
- ¿Qué respuesta deseo obtener de los usuarios?
- ¿Sería un banner intrusivo o un banner que acompañe al contenido?
- ¿Qué experiencia deseo brindar a mis visitantes?
Para elegir el formato también puedes apoyarte del equipo de diseño web o de programación, en caso de que cuentes con un área de profesionales en tu negocio. Tenerlos en cuenta puede ayudarte a saber si es necesario realizar algún cambio en la plantilla de tu sitio o de tu tienda en línea para implementar el banner o si ya existen estos espacios y solo es cuestión de poner a trabajar el creativo.
3. Desarrolla el o los mensajes
Ya teniendo el formato en mente, puedes dedicarte a la construcción de mensajes para los banners. Algunas de las consideraciones que debes tener en cuenta es que deben ser, sin lugar a dudas, textos persuasivos que cautiven la atención del usuario y despierten su curiosidad; así podrás mejorar el CTR y generarás awareness o recordación de marca.
Asegúrate de que sean textos breves y concisos, evitando las sobre promesas u ofertas llamativas que sean demasiado buenas para ser ciertas y parezcan spam. Al generar textos sintéticos no solo transmitirás tu objetivo de una manera rápida y eficaz, sino que te asegurarás de que el mensaje sea visible y entendible en dispositivos móviles. Recuerda que no es lo mismo navegar desde desktop que en un smartphone.
Entre las mejores prácticas para el desarrollo de textos para banners se encuentran:
- Sé breve, directo y conciso, cuidando siempre el número de caracteres.
- Comunica un atributo por banner. No desees comunicarlo todo en una pieza.
- Comienza haciendo alusión al beneficio o al atributo más importante.
- Lleva al usuario a una acción, evitando el uso de verbos en infinitivo.
- ¡Sé original! Evita términos utilizados frecuentemente en anuncios publicitarios.
- Genera distintos acercamientos. Así podrás optimizar y elegir el mejor más fácilmente.
4. Obtén imágenes de buena calidad
Los elementos visuales en un banner, más allá de ser un simple acompañamiento, son un complemento a la idea que pretendes transmitir, ya que refuerzan atributos o características de tu marca y pueden potenciar el mensaje para hacerlo más vistoso y llamativo a los ojos del usuario.
Te recomiendo utilizar fotografías de buena calidad, ya sean de tus productos o servicios, de la imagen que deseas transmitir o de lo que buscas que el usuario asocie con tu marca. Inclusive puedes hacer uso de imágenes de la audiencia a la que va dirigido el banner, por ejemplo: si tu marca es de productos para mascotas, utilizar una foto de un usuario feliz con su perro o de un gato feliz, suena a una buena alternativa.
Las fotografías pueden ser tomadas por ti, de bancos profesionales o de bancos gratuitos. Si utilizas fotografías tomadas de bancos de imágenes, asegúrate que estén disponibles para su uso comercial, de lo contrario, tendrás que comprar la licencia para el uso de la imagen. De no hacerlo, puedes estar violando las leyes de derechos de autor y hacerte acreedor a una sanción.
Si quieres saber más sobre licencias y cómo reconocer el tipo de derecho de uso, aquí puedes encontrar todo el detalle.
Algunos de los bancos de imágenes libres son Unsplash, Pixabay, Pexels, Flickr, además de Freepik y Canva, que tienen imágenes y vectores para uso comercial.
5. Elige el call to action
Se le llama Call to Action, CTA o llamada a la acción al botón o enlace situado en un banner web que busca llevar a los usuarios a una página de destino o landing page. Es el vínculo entre el contenido del banner y la acción que deseamos que los visitantes realicen.
Si bien, hay de diversos tipos, usualmente se componen de un texto y un enlace al sitio que deseamos llevar tráfico. Puede ser desde un básico “Haz clic aquí”, pasando por un “Descarga el e-book” hasta un “Haz una cita” o “Contáctanos”. Como el que te muestro a continuación.
Debe ser relevante e interesante para el usuario, además de llamar la atención a través de un resalte en color, pareciéndose a un botón. El texto y el link al que debe dirigir a los usuarios debe comunicarse con el mensaje que tenemos en el banner y de ser posible tener una url identificable o posible de rastrear, de ese modo, nos aseguraremos de llevar una medición lo más exacta posible.
6. Mide, analiza y optimiza
Ya configurado el banner, el siguiente paso es probar su funcionamiento y dejar que la magia del internet ocurra. Es necesario estar monitoreando constantemente las métricas para ver el impacto del banner y revisar si el objetivo que nos planteamos es conseguible.
La medición se puede realizar comparando los resultados de impresiones, clics y CTR con los objetivos planteados en un inicio. Para esto podemos utilizar herramientas como Google Analytics, Google Adwords o Campaign Manager, dependiendo de cómo está configurado el banner web en nuestro sitio o tienda online.
De obtener resultados positivos, las acciones siguientes podrían ser ampliar la duración de la campaña o replicar los mensajes en otros medios, mientras que si los resultados no fueron tan favorecedores, es posible optimizar mensajes, las imágenes o incluso revisar si la audiencia a la que fue destinado el banner web es la indicada.
Herramientas para crear un banner web
Existen diversas herramientas para crear un banner web gratuito, con un diseño increíble y original. Aquí te muestro algunas de las más populares, en las que podrías hacer la prueba y ver si funcionan para lo que tienes en mente.
- Canva
- Desygner
- Adobe Spark
- SmartHint
Veamos cada una de estas herramientas y cómo pueden ayudarnos a crear un banner, no baner.
Canva
Esta plataforma de diseño gráfico y web, creada en 2012, se ha caracterizado por ser una herramienta online para la creación de diseños, tanto para propósitos personales como educativos y comerciales. El servicio que ofrece es freemium, dándote la oportunidad de trabajar con elementos gratuitos, así como elementos con costo adicional, sobre todo en temas de fotografías y algunos vectores.
Canva te permite crear un banner web en medidas específicas, algunas de las más comunes que ya hemos revisado anteriormente, así como crear tu propio banner en medidas personalizadas. Tiene un gran número de plantillas que puedes adaptar a los colores y a la tipografía de tu marca, además de darte la posibilidad de descargar el banner que ya has realizado en distintos formatos, como .JPG, .PNG, .GIF e incluso .MOV
Desygner
Similar a la manera de trabajar de Canva, Desygner es un editor de imágenes en línea que te permite crear un banner web haciendo uso de sus plantillas predeterminadas o con las medidas personalizadas a tu sitio, así como con los elementos que mejor se adecúen a tu marca.
Los elementos de Desygner son libres de derechos, por lo que podrás utilizarlos con fines comerciales sin transgredir los derechos de autor de fotógrafos y diseñadores. Además de poder subir tus propias imágenes, íconos y formas. En su versión premium puedes cargar tu propia tipografía y utilizarla en las piezas que diseñes en esta plataforma.
Adobe Spark
Si te es familiar la suite creativa de Adobe, esta herramienta puede sonarte conocida. Adobe Spark es una aplicación web disponible a través de suscripción o si ya tienes un plan de Adobe Creative Cloud. Está hecha para dispositivos móviles y su uso en línea a través de desktop, sin tener que descargar un software en específico.
Esta herramienta te permite crear banners web eligiendo entre su gran variedad de plantillas, modificando paletas de colores, incluyendo un gran número de tipografías e imágenes de distintas fuentes, es decir, puedes utilizar imágenes que ya tengas en tus dispositivos, buscar imágenes libres de derechos, usar fotografías de tu Dropbox o incluso las que tengas en Google Photos.
Entre algunos de los aspectos más memorables de esta aplicación es que además de crear banner web gráficos, puedes crear videos cortos y páginas animadas en cuestión de minutos.
SmartHint
Si eres usuario de Tiendanube, SmartHint es una app que debes conocer, ya que es una excelente herramienta para crear banners web y vitrinas con carrusel de productos. A diferencia de las tres aplicaciones anteriores, esta app te permite generar banners pop-up promocionales, exclusivos y cronometrados con recomendaciones de productos adecuadas a las preferencias de tu cliente.
Las recomendaciones de SmartHint permiten al comprador encontrar el producto que desea, de una manera rápida, además de sugerirle artículos en los que podría estar interesado y que podría incluir en su carrito de compra.
Lo mejor de todo es que puedes hacer una prueba gratis y ver qué tal funciona en tu Tiendanube.
En conclusión
Un banner web puede ser una herramienta increíble para mejorar el rendimiento de tu página web o tienda en línea. Son elementos imprescindibles del marketing digital y te permiten llevar a los usuarios a ofertas de contenido o a realizar acciones que contribuyan a los objetivos de negocio.
Utilizados con las mejores prácticas, los banners en un sitio web pueden tener muchas ventajas y ser aliados en la comunicación de un sitio. Crearlos con un objetivo y con el usuario en mente es el mejor camino para iniciar la construcción de una pieza como ésta.
Espero que este artículo te sea de utilidad y te animes a probar Tiendanube. Verás que no solo es fácil crear un banner web para tu tienda en línea, sino lo sencillo que es vender por internet y llevar tu negocio al siguiente nivel. Lo mejor de todo es que te damos una prueba gratis para crear tu propia tienda online y descubrir lo increíble de esta solución. ¡Sin compromisos! 🤗
