Banner web: ¿qué es y cómo hacer uno para tu tienda en línea?
Un banner web es un formato publicitario que incluye imágenes, texto, sonido o elementos multimedia con el objetivo de dar visibilidad a un contenido específico de una empresa o negocio. ¿Tenés una tienda online y querés saber qué es un banner? Acá van su definición, los pasos y las herramientas para crear un diseño efectivo.
Cuando se trata de publicidad digital, un banner web es una de las mejores herramientas para resaltar los 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.
Tal es su relevancia en el e-commerce, que la mayoría de los diseños de tiendas virtuales en la actualidad disponen de áreas específicas en la página web con banners coloridos que destacan promociones, lanzamientos y otros eventos. Si querés usar este recurso en tu negocio online, elegí alguna de estas plantillas de Tiendanube y llama la atención de tu audiencia.
A continuación, te contamos cómo hacer un banner web para tu tienda online con las mejores prácticas. ¡Seguí leyendo y aprovechá las herramientas que te compartimos al final!
¿Qué es un banner web?
Podemos definir qué es un banner web como un formato publicitario digital que incluye imágenes, texto, sonido o elementos multimedia y su función es darle visibilidad a los objetivos de una empresa o negocio.
Ahora bien, si te estás preguntando “¿qué es un banner y para qué sirve?” te contamos que se pueden encontrar en una página web, en ciertos espacios publicitarios delimitados con el propósito de captar la atención del usuario y lograr que este realice una acción establecida.
Por ejemplo, visitar un sitio web, dejar un registro, realizar una compra, descargar una aplicación móvil o 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” no debería utilizarse para nombrar al formato publicitario digital, comúnmente utilizado en tiendas virtuales, páginas y sitios web.
¿Qué tipos de banner web existen?
Ahora que ya sabés qué es un banner digital, hablemos sobre los tipos de banner web y cómo se categorizan dependiendo de sus características. Algunos de los más utilizados son los siguientes:
- Banner rectangular
- Box banner
- Banner pop-up
- Banner carrusel
- Banner robapáginas
- Banner skyscraper o rascacielos
Vamos a explicarte una a una las especificaciones de cada banner.
¿Qué es un banner rectangular?
El banner rectangular se ubica en la parte superior de un sitio web, sin embargo, también puede estar intercalado dentro de un contenido. Suele contener imágenes o mensajes con ofertas atractivas para el usuario. Si bien se pueden encontrar en distintas medidas, la más usual es 700 x 120 píxeles.
A continuación, te mostramos un ejemplo de banner rectangular. ¡Podés probar y darle clic para ver el contenido de esta guía!
¿Qué es un box banner?
El box banner es similar al banner rectangular, ya que se visualiza en la parte superior de un sitio web.
Pero, a menudo, también se ubica en la parte superior derecha de la página, ya que en los contenidos digitales la lectura que realiza el usuario es de derecha a izquierda, siendo esta 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, se identifica fácilmente porque 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 según los usuarios.
Aunque sirve 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 planeás utilizarlo para la construcción de tu página web o tienda online, 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 virtual destacar información o varias ofertas de contenido al mismo tiempo.
Aunque este banner tiende a ayudar a aumentar el tiempo que los usuarios pasan en un sitio, si no está configurado de forma correcta puede ocasionar errores de usabilidad.
Por ejemplo, seguir moviéndose tras la interacción del usuario, generar 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 agregás este elemento a tu tienda online, algunas de las mejores prácticas son:
- Incluir mensajes con información relevante y/o con ventajas competitivas.
- No sobrecargar los mensajes, deben ser leíbles de un simple vistazo.
- Añadir un link en cada imagen, así tu usuario va a tener acceso rápido al contenido.
Incluir un banner carrusel en tu Tiendanube es más fácil de lo que creés. Acá te enseñamos cómo podés crearlo en pocos pasos. ¡Mirá qué bien lo hicieron en Petspot!
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 se puede presentar en varios formatos, entre los tamaños más comunes, está 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 tiene 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 se caracteriza 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 estar 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 debés saber de programación, existen numerosas herramientas que pueden ayudarte a lograr tu objetivo. Acá tenés un paso a paso que te va a ayudar a crear un banner para tu tienda online, con las mejores prácticas. ¡Manos a la obra!
- Definir el objetivo
- Seleccionar el formato
- Crear los mensajes
- Usar imágenes de buena calidad
- Elegir el call to action
- Medir, analizar y optimizar
Hablemos de cada uno de los puntos para evitar que queden dudas.
💡 Pero antes de entrar en el tema, te invitamos a conocer la Paleta de colores, una herramienta útil para diseñar el contenido visual de tu tienda online.
1. Definir el objetivo
Antes de comenzar a diseñar, lo principal es tener claro qué es un banner en una página web y saber cuál es su objetivo. Establecer la motivación es esencial para los siguientes pasos, ya que te va a servir para 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.
Por lo general, 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: podés plantearte número de impresiones, clics y un CTR meta y ver de qué manera se comporta la audiencia ante el banner.
2. Seleccionar el formato
Una vez establecido los objetivos y la medición que vas a realizar, el siguiente paso es elegir el formato. Para hacerlo, te recomendamos 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 podés 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 online para implementar el banner o si ya existen estos espacios y solo es cuestión de hacer la solicitud al diseñador.
3. Crear los mensajes
Teniendo el formato en mente, podés dedicarte a la construcción de mensajes para los banners. Tené en cuenta que deben ser textos persuasivos que cautiven la atención del usuario y despierten su curiosidad; así, podrás mejorar el CTR y vas a generar awareness o reconocimiento de marca.
Asegurate de que sean textos breves y concisos, evitando las ofertas llamativas que sean demasiado buenas para ser ciertas y parezcan spam.
Al generar textos sintéticos no solo vas a transmitir tu objetivo de una manera rápida y eficaz, sino que te vas a asegurar de que el mensaje sea visible y entendible en dispositivos móviles. Recordá que no es lo mismo navegar desde una computadora o en un teléfono móvil.
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.
- Comunicá un atributo por banner. No lo comuniques todo en una pieza.
- Comenzá haciendo alusión al beneficio o al atributo más importante.
- Llevá al usuario a una acción, evitando el uso de verbos en infinitivo.
- ¡Sé original! Evitá términos utilizados frecuentemente en anuncios publicitarios.
- Generá distintos acercamientos. Así vas a optimizar y elegir el mejor más fácilmente.
💡 En Tiendanube disponemos de una serie de banners para tu tienda online que podés adaptar según la identidad de tu marca o una fecha especial. ¡Mirá los modelos!
4. Usar 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 pretendés 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 aconsejamos utilizar fotografías de buena calidad, ya sean de tus productos o servicios, de la imagen que querés transmitir o de lo que buscás que el usuario asocie con tu marca.
Inclusive, podés 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 un gato es una buena alternativa.
Las fotografías pueden ser tomadas por vos, de bancos profesionales o de bancos gratuitos. Si utilizás fotografías de bancos de imágenes, asegurate que estén disponibles para su uso comercial, de lo contrario, tendrás que comprar la licencia. De no hacerlo, vas a estar incumpliendo las leyes de derechos de autor y hacerte acreedor a una sanción.
Si querés saber más sobre licencias y cómo reconocer el tipo de derecho de uso, aquí podés encontrar todo el detalle.
📸 Algunos de los bancos de imágenes libres son:
5. Elegir 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 existen diversos tipos de CTA, usualmente se componen de un texto y un enlace al sitio que deseamos llevar tráfico. Puede ser desde un básico “Hacé clic aquí”, pasando por un “Descargá el e-book” hasta un “Hacé una cita” o “Contactanos”. Acá te enseñamos otro ejemplo: “Crear tienda”.
Este CTA 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 comunicar el mensaje que tenemos en el banner y, de ser posible, tener una URL identificable o posible de rastrear, de ese modo, vas a llevar una medición lo más exacta posible.
6. Medir, analizar y optimizar
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 te planteaste es viable.
La medición se puede realizar comparando los resultados de impresiones, clics y CTR con los objetivos planteados en un inicio. Para esto podés utilizar herramientas dependiendo de cómo está configurado el banner web en tu 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 favorables, es posible optimizar los textos, 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. Te presentamos algunas de las más populares, en las que podrías hacer la prueba y ver si funcionan para lo que tenés en mente.
- Canva
- Desygner
- Adobe Spark
- SmartHint
Veamos cada una de estas herramientas y cómo pueden ayudarte a crear un banner.
Canva
Esta plataforma de diseño gráfico y web, creada en 2012, se caracteriza 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 y te da la oportunidad de trabajar con elementos gratuitos, así como elementos con costo adicional, sobre todo en temas de fotografías y algunos vectores.
Además, Canva te permite crear un banner web en medidas específicas, algunas de las más comunes que ya se revisaron anteriormente, así como crear tu propio banner en medidas personalizadas.
Tiene un gran número de plantillas que podés 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 vas a 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 podés cargar tu propia tipografía y utilizarla en las piezas que diseñes en esta plataforma.
Adobe Spark
Adobe Spark es una aplicación web que está disponible a través de una suscripción o de un plan de Adobe Creative Cloud. Está hecha para dispositivos móviles y se usa en línea a través de una computadora, 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, podés utilizar fotos 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 elaborar banner web gráficos, podés crear videos cortos y páginas animadas en cuestión de minutos.
SmartHint
Si sos usuario de Tiendanube, SmartHint es una app que debés 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 para incluirlos en su carrito de compra.
Lo mejor de todo es que podés 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 virtual. 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 una marca. Crearlos con un objetivo y con el usuario en mente es el mejor camino para iniciar la construcción de una pieza como esta.
Esperamos que este artículo te sea de utilidad y te animes a probar Tiendanube. Vas a ver que no solo es fácil crear un banner web para tu tienda online, 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. ¡Animate a dar el gran salto emprendedor!
