15+ Beautiful Website Headers and Why They Work So Well

¿Qué es lo primero que ve un usuario en su sitio web?

Exactamente, el encabezado.

Si no es lo suficientemente atractiva, si no aporta claridad, los usuarios podrían marcharse y no volver jamás.

No queremos eso, ¿verdad?

Las cabeceras de los sitios web son una parte fundamental del diseño de un sitio web. Desempeñan un papel fundamental a la hora de captar la atención de los usuarios y establecer una conexión con los visitantes del sitio web.

Es por ello que, en las siguientes líneas, abordaremos algunos principios de diseño de cabeceras que deberías tener en cuenta a la hora de diseñar una cabecera de sitio web.

Principios de diseño de cabecera a seguir

Estudios de investigación han encontrado que los ojos de los usuarios se mueven en una página web siguiendo uno de los 3 patrones:

• El patrón Gutenberg

Fuente de la imagen: https://vanseodesign.comThe El patrón Gutenberg puede aplicarse a contenidos con mucho texto. Sugiere que los ojos de los lectores recorran la página en una serie de movimientos horizontales.

Ejemplo:

• El patrón en forma de Z

El patrón en forma de Z define el camino que siguen los ojos de los usuarios al escanear una página, un camino que toma la forma de una letra Z. Se recomienda para el diseño de páginas de aterrizaje, que los lectores escanean rápidamente.

Ejemplo:

• El patrón en forma de F

Este patrón describe el estilo más utilizado para leer bloques de contenido en el medio online. Los usuarios escanean rápidamente una página web y sus ojos siguen un patrón F.

Ejemplo:

Sin entrar en más detalles sobre estos patrones, nos gustaría reforzar que para cualquiera de estos modelos, la línea horizontal superior es donde los visitantes comienzan a escanear una página.

¿Qué integrar en la cabecera de un sitio web?

Estos patrones muestran por qué un diseñador web debe decidir cuidadosamente lo que los usuarios deben ver primero. La cabecera debe servir de gancho que capte su atención y les invite a explorar el resto de la página.

No hay posibilidad de causar una segunda impresión. Por lo tanto, hay que pensar bien qué incluir en la cabecera:

• Fuerte imagen de héroe

Una imagen de héroe es una imagen de banner muy grande que se muestra por encima del pliegue en una página web. Se incluye en la sección de la cabecera y es lo primero que ven los usuarios al llegar a un sitio web. Las imágenes heroicas también tienen el propósito de atraer la atención de los visitantes hacia el punto de venta único (USP) de la empresa. Una de las mejores prácticas es que el uso de rostros de personas reales en las imágenes de héroe puede ayudar a los visitantes a relacionarse mejor con la marca. La comunicación se vuelve más humana y personal.

Fuente: Drift.com

• Punto de venta único (USP)

El USP es una frase que explica la razón de ser de un negocio. Debe revelar qué hace la empresa, por qué y para quién. También debe hacer hincapié en las características y ventajas únicas que hacen que la marca destaque entre sus competidores. Una fuerte USP es vital para transmitir el mensaje correcto a los visitantes del sitio web y, en última instancia, para convertirlos en clientes.

Fuente: miro.com

• Nombre de la marca

El nombre de la marca hace que la gente se acostumbre a la identidad del sitio o refuerza la imagen que la gente tiene de la identidad de su empresa.

La imagen debe reflejar la personalidad de su marca y garantizar que la voz de su marca sea coherente en todo el sitio web. Debe ser fácilmente reconocible incluso si se recorta de la cabecera del sitio web. Y cuando se coloque en la cabecera del sitio web, debe desempeñar un papel clave a la hora de establecer una conexión personal con cada usuario.

Fuente: carolinaherrera.com

• Vídeo del producto

Debido a que los usuarios sólo tardan 50 milisegundos en formarse una opinión sobre un sitio web, significa que debes tener los mensajes más importantes en la cabecera. Por eso muchas empresas no esperan a que sus usuarios se desplacen hacia abajo y lleguen a las características de su producto/servicio, sino que utilizan el poder del vídeo para transmitir mejor su mensaje. Además, no olvidemos que el 78% de las personas ven vídeos online cada semana, y el 55% ven vídeos online cada día.

Fuente: wistia.com

• Llamada a la acción (CTA)

Una CTA es un mensaje (normalmente en un botón), que desencadena una determinada respuesta de los visitantes del sitio web. La llamada a la acción debe estar claramente definida y ser fácil de entender por los visitantes del sitio web. Naturalmente, una CTA colocada en la cabecera, justo donde los visitantes comienzan su viaje en el sitio web, aumenta las posibilidades de obtener la acción deseada de los respectivos usuarios.

Fuente: creatopy.com

• Producto que presenta

En caso de que dirija una tienda de comercio electrónico, querrá destacar la calidad y la conveniencia de un determinado producto, y la mejor manera de hacerlo es incluir ese producto en la cabecera. La atención de los usuarios se dirigirá hacia esa mejor oferta, y serán propensos a entrar en el proceso de compra.

Fuente: amazon.com

En cualquiera de los casos anteriores, la regla general es: ¡manténgalo simple, manténgalo claro, haga que el encabezado sea atractivo! Los estudios demuestran que «la diferencia media en el tratamiento de la información por encima y por debajo del pliegue por parte de los usuarios es del 84%». Por tanto, lo mejor es centrar tus esfuerzos en reducir esas cifras lo máximo posible. Y lo harás mejor si te has marcado unos objetivos en cuanto a lo que quieres transmitir.

Los sitios web grandes, como www.youtube.com, limitan el espacio dedicado a la cabecera a una pequeña cantidad. Esto se hace a propósito, ya que la intención es dejar que la atención de los usuarios se dirija a algo más importante, como los productos, o los servicios, o los vídeos (por ejemplo, YouTube).

A veces ni siquiera hace falta una cabecera, o si la hay, sólo hace falta una pequeña.

Todo depende de las particularidades del sitio web. Piénsalo y dale a tu sitio web la personalidad que necesita, sin importar lo que las tendencias de diseño web te «digan» de vez en cuando.

¿Qué inspira la cabecera de tu sitio web?

Además de transmitir ciertos mensajes, también puedes considerar infundir ciertas emociones en los lectores. Dependiendo del propósito que le dé al encabezado, puede inspirar en los lectores uno de los siguientes:

• Curiosidad

Para ciertos sitios web, sería adecuado establecer un encabezado que inspire curiosidad en los lectores. Querrán saber más, anhelarán más, se apresurarán a explorar el resto de la historia.

Es lo que siento con esta cabecera de Canva. Hacen una gran promesa ahí mismo: «Diseña cualquier cosa». Y te invitan a probarlo. ¿Puedes resistirte?

• Acción

En algunos casos, es mejor incitar a la acción directamente desde la cabecera. Con una llamada a la acción, puedes invitar a los usuarios a hacer clic en un botón, o a realizar alguna otra interacción con el sitio web, desde el principio. En el caso de Planable, su USP está directamente relacionada con la CTA que aparece a continuación. Además, si no está preparado para comprar, también hay una opción para programar una demostración.

• Confianza

Puede ser útil empezar inspirando confianza a tus visitantes. Usted quiere que ellos tomen alguna acción más adelante, y para hacerlo, tienen que sentirse totalmente seguros de que toman la decisión correcta.

Veamos cómo lo hace Salesforce. Afirman que son el mayor CRM del mundo. De acuerdo, podrías decir que el 99% de las empresas que existen no son las primeras en su campo. Y tendrías razón. Pero, si lees a continuación, seguro que hay algo que te puede servir. Hay un estudio de caso que muestra lo eficiente que es el producto. Usted mismo puede aprovechar dicho estudio de caso.

• Dolor

¿Por qué demonios querría inspirar dolor en los lectores, especialmente desde la cabecera? Bueno, muchas empresas tienen su marketing basado en el principio FUD (Fear, Uncertainty, Doubt). En una fase temprana del proceso de conversión, el miedo/dolor desencadenará la decisión de aplicar inmediatamente una solución y hacer que ese dolor se desvanezca.

Este puede ser un enfoque para los servicios de ciberseguridad, los servicios de seguridad física, pero también en la sanidad o los fondos de pensiones.

Este enfoque puede aprovecharse en campañas que quieren concienciar a la gente de que hay que vacunarse contra el COVID, o de que hay que ponerse el cinturón de seguridad.

• Laughter

Tal vez quieras conectar emocionalmente con los visitantes, desde el principio. Y no hay mejor manera de hacerlo que hacerles reír. Y reírse a carcajadas. Se está formando una sensación de complicidad y tendrás a tus usuarios a tu lado, mientras exploran el sitio web.

• Familiaridad

Conectar la situación de los usuarios con una situación similar presentada en la cabecera puede crear cierto grado de familiaridad.

Tipos de cabeceras para diferentes tipos de sitios web

Dependiendo de las especificidades del sitio web, una cabecera se ajustará mejor al diseño general que otra. En consecuencia, debes tener una idea clara de qué tipo de cabecera se adaptará mejor a tu propio sitio web (ya sea un comercio electrónico, un blog, un portafolio, un periódico online, etc.).

• Cabecera centrada en el CTA

En el caso de Blue Apron, la cabecera del sitio web utiliza un vídeo de gran tamaño, en lugar de una gran imagen principal. Transmite una sensación de calidez, familiaridad, apetito.

A continuación, tenemos un CTA que invita al usuario a pasar a la acción para beneficiarse de la misma experiencia acogedora y deliciosa.

El sitio web de CrazyEgg viene con un encabezado que invita a los usuarios a tomar su producto para una demostración en vivo. Su producto es simplemente un ajuste perfecto para tales demostraciones en tiempo real. Y demuestra al instante los beneficios del producto. También utilizan una pista visual que apunta a la CTA: la mano del hombre del globo dirige la mirada hacia el botón.

• Cabecera centrada en la marca

Este es un bello ejemplo de un sitio web con una cabecera centrada en la identidad de la marca y en los elementos de la misma. Incluye el logotipo, una réplica de los colores del logotipo de la marca en la parte superior, así como su eslogan.

• Cabecera centrada en el contenido

Esto es muy adecuado para blogs, y revistas, que promueven artículos e historias.

Pero, también encontré algunas excepciones.

Patagonia no promociona su tienda en la página principal, pero, impulsan historias que muestran su compromiso de hacer un cambio en el mundo. Esta historia actual, que aparece en la cabecera del sitio web, trata sobre la esclavitud y el activismo.

En el caso de Ikea, la parte izquierda de la pantalla invita a los visitantes a una de las tiendas online, mientras que la otra mitad invita a los usuarios a leer la historia de Ikea.

• Cabecera con fondo de vídeo

BUKWILD integró 3 vídeos diferentes en la cabecera del sitio web. Cada uno de los vídeos se puede reproducir colocando el ratón sobre la sección correspondiente. Lo interesante de esto es la forma creativa en que utilizan los vídeos como partes de una «imagen» más grande, que representa su marca.

• Cabecera centrada en el producto

En el caso de Cropp, una tienda de moda online, se presentan las últimas colecciones en la cabecera.

Threadless.com contextualiza el wall-art y presenta un Squad CMYK. La cabecera también incluye un CTA claro, para todos aquellos que sientan que pertenecen de alguna manera a ese escenario presentado en la cabecera por el «escuadrón».

• Cabecera centrada en la marca personal

En el caso del blog de viajes Alex in Wanderland, en la cabecera de la web, además de una foto de Alex, los usuarios pueden ver el comienzo de una historia en esta cabecera: «Cinco años y contando en la carretera…». Esto es una invitación para que los lectores quieran explorar más historias.

Para terminar…

Los encabezados contribuyen en gran medida al éxito o al fracaso de un sitio web. Técnicamente hablando, esta parte superior es naturalmente la primera cosa en el sitio web con la que la gente interactúa.