Hace poco revisamos una página cuya portada tenía cinco banners. Uno anunciaba un descuento, otro presentaba un servicio nuevo, otro llevaba al contacto, otro mostraba una certificación y el último pedía al visitante que se suscribiera.
El propietario quería destacar cinco mensajes importantes. El resultado fue que ninguno parecía realmente importante.
Un banner puede ayudar a llamar la atención, presentar una promoción o conducir al usuario hacia una página concreta. Cuando toda la web intenta gritar al mismo tiempo, deja de ser un recurso útil y se convierte en ruido.
Respuesta rápida: un banner web es un bloque visual que destaca un mensaje, una promoción o una llamada a la acción dentro de una página. Puede incluir imagen, texto y botón, y debe dirigir al usuario hacia un contenido relacionado.
En esta guía veremos: qué se considera un banner, qué diferencia existe frente a un hero, un slider o un popup, cuándo merece la pena utilizarlo y cómo diseñarlo para que funcione también desde móvil.
Qué es un banner web
Un banner web es una pieza visual, normalmente rectangular, que se utiliza para dar protagonismo a un mensaje dentro de una página o en un espacio publicitario.
Puede estar compuesto por:
- una fotografía o ilustración;
- un título breve;
- un texto de apoyo;
- un botón o enlace;
- un fondo de color o recurso gráfico.
La palabra banner se utiliza para elementos bastante distintos.
En publicidad digital suele referirse a un anuncio colocado en una web ajena que conduce hacia la página del anunciante.
Dentro de la propia web de una empresa, puede ser una franja destinada a presentar una promoción, destacar un servicio, comunicar una novedad o llevar al usuario hacia una sección importante.
Un banner no debería limitarse a decorar. Tiene que comunicar algo concreto y ofrecer un siguiente paso razonable.
Para qué sirve un banner dentro de una página web
Un banner puede utilizarse para:
- anunciar una promoción temporal;
- presentar un servicio nuevo;
- dirigir hacia una categoría o página importante;
- comunicar un cambio de horario o condiciones;
- destacar una campaña;
- invitar a reservar, comprar o solicitar información;
- dar acceso a una guía, evento o contenido especial.
Funciona especialmente bien cuando existe un mensaje prioritario que merece más visibilidad que el resto.
Por ejemplo, una empresa de formación puede utilizar una franja para anunciar la apertura de matrículas. Una tienda puede destacar una campaña de temporada. Una empresa de servicios puede presentar una nueva especialidad y enlazar hacia su página.
El banner debe conducir a un contenido que continúe la conversación. Si anuncia un servicio, debería enlazar a ese servicio. Si presenta una promoción, el destino debe explicar sus condiciones.
Mandar todos los banners a la portada o a un formulario genérico obliga al usuario a volver a buscar lo que acaba de interesarle.
Banner, hero, slider, popup y modal: diferencias
En diseño web estos términos se utilizan a veces como si fueran intercambiables, pero no cumplen exactamente la misma función.
| Elemento | Cómo aparece | Uso habitual |
|---|---|---|
| Banner | Integrado dentro del contenido de la página. | Promoción, aviso, campaña o acceso destacado. |
| Hero | Gran bloque situado normalmente al comienzo. | Presentar la propuesta principal de la página. |
| Slider | Varias diapositivas ocupan el mismo espacio. | Mostrar una sucesión de mensajes o imágenes. |
| Popup | Aparece por encima del contenido. | Promociones, suscripciones, avisos o contacto. |
| Ventana modal | Centra la interacción y bloquea temporalmente el fondo. | Formularios, confirmaciones o tareas concretas. |
| Banner de cookies | Franja o panel relacionado con el consentimiento. | Informar y gestionar preferencias de cookies. |
Un banner forma parte del recorrido normal de la página. No debería interrumpir la navegación ni obligar a cerrarlo para continuar.
Los popups y modales sí aparecen por encima del contenido y requieren más cuidado porque pueden molestar o bloquear al visitante. En la guía sobre ventanas modales en diseño web explicamos sus diferencias y límites con más detalle.
Cuándo merece la pena utilizar un banner
Lo utilizaría cuando existe un mensaje concreto que:
- tiene prioridad durante un periodo determinado;
- interesa a una parte amplia de los visitantes;
- cuenta con una página de destino adecuada;
- puede explicarse con pocas palabras;
- encaja con el diseño general de la web.
No hace falta convertir cada servicio, ventaja o noticia en un banner.
Cuando hay demasiados, empiezan a competir entre sí. El visitante no sabe dónde mirar y termina ignorándolos todos, un comportamiento parecido al que ocurre con la publicidad.
Si todo está destacado, nada está destacado. Cinco colores, tres botones y dos promociones colocados uno detrás de otro no crean jerarquía. Crean una discusión visual.
Cuándo es mejor no utilizarlo
Un banner puede sobrar cuando:
- repite exactamente lo que ya dice la página;
- no existe una acción o destino claro;
- desplaza contenido más importante;
- se muestra en todas las páginas sin motivo;
- intenta explicar demasiadas cosas;
- compite con el aviso de cookies, WhatsApp y otros elementos flotantes;
- ocupa casi toda la pantalla del móvil;
- permanece durante meses anunciando algo que ya terminó.
También conviene revisar los banners heredados de campañas antiguas. Encontrar en agosto una promoción de Navidad no transmite precisamente una gestión muy cuidadosa.
Cómo diseñar un banner web que funcione
Un solo mensaje principal
El usuario debería comprender en pocos segundos qué se anuncia.
Un banner no es el lugar adecuado para explicar todas las condiciones de un servicio. Su función es presentar la idea y llevar hacia una página donde pueda desarrollarse.
Un botón que diga qué ocurrirá
Textos como “Ver servicio”, “Consultar fechas”, “Descubrir la promoción” o “Solicitar información” suelen orientar mejor que un botón genérico de “Más”.
Una imagen que tenga relación con el mensaje
La fotografía no debe colocarse únicamente porque queda un hueco. Tiene que apoyar la idea, mostrar el servicio o ayudar a entender la campaña.
También debe contar con derechos de uso claros y una calidad suficiente para no parecer ampliada a la fuerza.
Contraste y legibilidad
El título, el texto y el botón deben distinguirse correctamente del fondo.
Colocar letras blancas sobre una zona clara de una fotografía puede funcionar en una maqueta concreta y dejar de leerse al cambiar la imagen o reducir la pantalla.
El W3C recomienda mantener suficiente contraste entre texto y fondo. Cuando se utiliza una fotografía variable, una capa de color parcialmente opaca puede ayudar a conservar la legibilidad. Puedes consultar sus recomendaciones de diseño accesible.
Coherencia con el resto de la web
Un banner puede llamar la atención sin parecer que una teletienda se ha colado en la página.
Debe respetar tipografías, colores, estilos de botones y jerarquías visuales. Si parece pertenecer a otra empresa o a otra época de la web, rompe la confianza en lugar de reforzarla.
El banner debe prepararse para móvil
Un banner diseñado únicamente para una pantalla horizontal suele dar problemas en teléfonos.
La imagen se recorta, el título queda diminuto, el botón desaparece o todo el bloque ocupa más altura que el contenido principal.
Para evitarlo conviene:
- mantener el texto como HTML y no incrustarlo dentro de la fotografía;
- permitir que el contenido cambie de posición en pantallas pequeñas;
- utilizar recortes o imágenes adaptadas a móvil;
- comprobar que el botón pueda pulsarse cómodamente;
- evitar títulos demasiado largos;
- controlar la altura del bloque;
- probarlo en varios tamaños reales.
El texto incluido dentro de una imagen no se adapta bien, puede resultar difícil de leer y obliga a crear archivos diferentes para cada cambio.
Separar imagen, título y botón permite que el diseño web reorganice el banner según el dispositivo sin perder el mensaje.
Banners, imágenes y SEO
Un banner no mejora el posicionamiento únicamente por ser grande o visual.
Desde el punto de vista SEO conviene cuidar varios detalles:
- utilizar texto HTML para el mensaje importante;
- comprimir la imagen y servirla en un tamaño adecuado;
- añadir un texto alternativo cuando la imagen aporte información;
- crear un enlace coherente con la página de destino;
- no ocultar el contenido principal detrás de una creatividad gráfica;
- evitar que el banner retrase innecesariamente la carga.
Google utiliza el texto alternativo, el contenido cercano y otros elementos de la página para interpretar las imágenes. El atributo ALT debe describir lo que aporta la imagen, no convertirse en una lista de palabras clave.
Si la fotografía es puramente decorativa y el mensaje ya aparece escrito junto a ella, no hace falta repetir todo el texto comercial dentro del ALT.
El banner puede apoyar el contenido, pero no debe sustituirlo. Un título importante incrustado únicamente dentro de un JPG resulta menos flexible, menos accesible y más difícil de actualizar.
Cómo saber si un banner está funcionando
No basta con que guste dentro de la empresa.
Podemos revisar:
- cuántas personas hacen clic;
- qué página visitan después;
- si completan la acción propuesta;
- si el banner aumenta o reduce el abandono;
- cómo funciona desde móvil;
- si los visitantes entienden el mensaje.
Un banner con pocos clics no siempre es inútil. Puede estar comunicando un aviso sin necesitar interacción.
Pero si su objetivo era llevar a una promoción y nadie entra, habrá que revisar el mensaje, la posición, el diseño o la propia oferta.
Un banner debe saber ocupar su sitio
Un buen banner destaca una idea y facilita el siguiente paso.
No necesita animaciones constantes, colores estridentes ni tres llamadas a la acción. Necesita un mensaje comprensible, una jerarquía clara y una relación lógica con el contenido que lo rodea.
También debe retirarse o actualizarse cuando deja de ser útil.
El objetivo no es llenar un hueco del diseño. Es utilizar ese espacio para ayudar al visitante.
¿Tu web tiene banners, promociones y avisos que compiten entre sí?
Podemos ayudarte a reorganizar la página, simplificar los mensajes y diseñar bloques que conduzcan al usuario sin llenar la pantalla de ruido.
Preguntas frecuentes sobre banners web
¿Qué es un banner web?
Es una pieza visual integrada en una página o utilizada como anuncio para destacar un mensaje, promoción o llamada a la acción.
¿Para qué sirve un banner en una página web?
Puede anunciar una promoción, presentar un servicio, comunicar una novedad o dirigir al usuario hacia una sección concreta.
¿Banner y popup son lo mismo?
No. El banner suele formar parte de la página. El popup aparece por encima del contenido y puede interrumpir la navegación.
¿Qué diferencia existe entre un banner y un hero?
El hero es el bloque principal situado normalmente al comienzo de una página. El banner puede aparecer en distintos puntos y suele destacar una campaña, aviso o contenido específico.
¿Es mejor poner el texto dentro de la imagen?
Normalmente no. El texto HTML se adapta mejor a móvil, resulta más accesible, puede actualizarse con facilidad y permite controlar mejor la legibilidad.
¿Un banner ayuda al posicionamiento SEO?
No por sí solo. Puede formar parte de una página bien estructurada, pero deben cuidarse el texto HTML, el peso de la imagen, el ALT y la página de destino.
Qué significa el código HTTP 301 y cuándo es un problema
Qué es un mockup web y cómo se utiliza en un proyecto
ShortPixel Image Optimizer: cómo comprimir imágenes en WordPress
Qué son los estándares web y por qué importan
NeoAttack, la agencia web que convierte webs en máquinas de vender
Diseño web para laboratorios y empresas científicas