Free Press

La cabecera desempeña un papel fundamental en el diseño de un sitio web y marca el tono de todos sus demás aspectos. Sobre todo ahora, en la era del minimalismo triunfante, en la que los distintos caramelos para la vista suelen ser expulsados sin piedad pero con justicia. A veces no queda nada más para captar la atención, por lo que el papel del diseño de la cabecera del sitio web ha aumentado significativamente.

Los diseñadores web se esfuerzan mucho en diseñar esta parte de un sitio web pensando en la creatividad y la productividad. Según Google, sólo se tarda 50 ms en formarse una opinión sobre un sitio web y algunas opiniones se desarrollan en los increíbles 17 ms. El conocimiento de una marca por parte de los consumidores comienza aquí.

Para saber cómo diseñar una cabecera de página web que funcione, y qué elementos debe incluir, sigue leyendo, habrá ejemplos.

«La vida es una primera impresión. Tienes una sola oportunidad para ello.

Haz que sea eterna.

– J.R. Rim

La cabecera de un sitio web es la sección superior de la página web. Antes, la gente entendía los encabezados como tiras estrechas en las partes superiores de los sitios web que contenían un logotipo, una llamada a la acción y la información de contacto. Pero en el diseño moderno, todo el espacio por encima del pliegue de la página de inicio se considera una cabecera.

Al ser la parte estratégica de la página que la gente ve en los primeros segundos de carga de un sitio web, una cabecera actúa como una especie de invitación. Debe proporcionar información básica sobre un sitio para que los usuarios puedan entender lo que ofrece en segundos.

Algunos diseñadores hacen cabeceras separadas para varias secciones del sitio. Por ejemplo, se puede hacer una cabecera grande para una página de inicio y dejar una pequeña franja para otras páginas. Pero mantén la coherencia. El diseño de la cabecera de la página interior debería ser una versión abreviada de la cabecera de la página principal. Esta es una buena práctica de diseño de sitios web.

¿Qué incluye la cabecera de un sitio web?

La tarea de la cabecera es dar a los usuarios respuestas a las preguntas básicas: qué marca se representa, qué productos y servicios se ofrecen, cómo ponerse en contacto con los empleados de la empresa, si hay ofertas actuales, etc.

Aparte de eso, también representa la calidad e incluso la identidad de un sitio web. Si la cabecera evoca una buena respuesta emocional, y el espectador siente que tiene algo de valor, entonces has pasado la prueba inicial.

Los principales elementos de la cabecera de un sitio web suelen ser:

• logotipo o identificador de marca
• llamada a la acción
• texto o titular
• elementos de navegación
• búsqueda.

No hay que añadirlos todos a la vez. Es necesario encontrar un equilibrio entre la abundancia de información y su disposición armoniosa. Utiliza sólo los datos que necesites, sobrecargar una cabecera no resultaría beneficioso, por muy importantes que parezcan todos los enlaces.

Dejar la cabecera demasiado vacía tampoco es una buena idea. Un usuario que no pueda descifrar su interfaz en unos pocos segundos, lo más probable es que se vaya y no vuelva. Un mal encabezado puede empujar a los visitantes a otro sitio con un contenido inferior.

En los diseños de encabezados minimalistas, sólo se presentan los enlaces a las secciones principales del sitio web y el logotipo de la empresa. Esta técnica es especialmente útil cuando se diseñan páginas de aterrizaje.

Mejores prácticas de diseño de cabeceras de sitios web

Nada limita su creatividad cuando se trata de diseñar la sección de cabecera. El encabezado del sitio es un área abierta a un amplio campo de decisiones creativas de diseño, que deben ser memorables, concisas y útiles.

Vamos a repasar los puntos principales.

Tamaño del encabezado

No hay una respuesta definitiva a la pregunta de qué tamaño debe tener la imagen del encabezado de un sitio web. Algunos recursos intentan proporcionar conjuntos de cifras precisas, pero hoy en día uno de los aspectos más difíciles de la construcción de sitios web es garantizar la eficacia de cada tamaño de pantalla. Y aunque dos pantallas tengan el mismo tamaño, la resolución puede ser diferente, por lo que los usuarios no verán lo mismo.

Así que no te fijes en el concepto de píxel exacto, mejor sigue reglas sencillas de sentido común.

La cabecera debe tener una altura tal que no interfiera en la percepción del contenido. Para los recursos informativos, una cabecera pequeña sería una gran elección, mientras que para las landings la cabecera puede ser más grande.

En el caso de cabeceras voluminosas, es mejor dejar algo de espacio bajo el pliegue para que el usuario vislumbre lo que sigue en la página y comience a desplazarse.

Jerarquía visual

El Grupo Norman Nielsen formuló por primera vez su teoría sobre el patrón de lectura en forma de F en la web en 2006, y no ha perdido su relevancia hasta hoy.

Una persona que se encuentra en un sitio nuevo y desconocido siempre comienza su viaje visual desde la esquina superior izquierda de la pantalla. Y si no encuentra allí la información esperada, entonces la página se percibe automáticamente como complicada y no estándar, requiriendo demasiado esfuerzo para entenderla.

Logo. Otro estudio realizado por la NN/g descubrió que los usuarios recordarían mucho más fácilmente aquellas marcas cuyos logotipos están colocados a la izquierda en comparación con la colocación en el centro o en la parte derecha.

Si tiene un logotipo con forma redonda, es aceptable colocarlo en el centro de la pantalla, aunque su eficacia seguirá siendo menor en comparación con los colocados a la izquierda.

Navegación. Preste atención a no sobrecargar esta sección de un sitio web. Demasiados enlaces abruman a los visitantes. A veces es necesario modificar la estructura de un sitio web para dejar espacio a las categorías más importantes.

Haga que los visitantes comprendan fácilmente dónde se encuentran y cómo seguir avanzando. Utilice efectos hover para guiar a los usuarios mientras navegan.

Llamada a la acción. Aplique los principios de la jerarquía visual para destacar de forma natural una CTA.

Cabecera fija (pegajosa)

Las barras de navegación persistentes, o lo que es lo mismo, las «cabeceras pegajosas», hacen que la navegación le siga por la página mientras se desplaza. Esto es ahora un estándar de diseño web.

Haz que la cabecera sea fija si no viola tu concepto general de diseño. Es una buena idea tanto para los diseños de escritorio como para los móviles:

• Sitios web de comercio electrónico – el carrito está siempre delante del usuario.
• Sitios web de servicios – el número de teléfono o un CTA están constantemente a la vista.

Los encabezados fijos mejoran la experiencia del cliente, manteniendo a los usuarios orientados y dándoles más control.

El mensaje que transmite una cabecera

Antes de diseñar una cabecera, hay que tener en cuenta el estilo general del sitio web y su objetivo principal.

Si se trata de un sitio web promocional destinado a la presentación de un producto, el diseño de la cabecera puede contener enlaces a las secciones principales, combinados con una gran imagen heroica en la primera pantalla, ya que el objetivo principal de un sitio web de este tipo es presentar eficazmente el producto. En el caso de los sitios web de comercio electrónico o de empresas, la situación puede ser diferente. Un usuario necesita navegar fácilmente, conocer las últimas ofertas, cómo contactar rápidamente con el gestor y dónde ver los pedidos que ya ha realizado, por lo que en este caso, la cabecera puede ser más concisa dando paso a otras categorías.

Hay varios mensajes posibles que puede transmitir un encabezado:

• incitar a un consumidor a hacer algo
• trabajar en la creación de confianza
• animar a un visitante a saber más
• ser divertido, etc.

La elección depende del objetivo de un determinado sitio web.

Imágenes relevantes

La imagen de la cabecera debe transmitir directamente información sobre el negocio. Por ejemplo, si representa el servicio de entrega de comida, entonces la imagen podría representar un mensajero ordenado con comida estéticamente atractiva. En general, el visitante, al ver su sitio, debería querer comprarle algo.

Fotos de alta calidad. La fotografía es una poderosa herramienta para los diseñadores web. Puede contar una historia, evocar emociones y motivar a sus visitantes a seguir desplazándose. Para los sitios con imágenes impactantes, pruebe a hacer una cabecera transparente. Así se muestran mejor las imágenes, conservando los enlaces principales.

Imágenes deslizantes. Si tiene varias fotos estupendas que representan el negocio del sitio web, ¡adelante! Los usuarios pueden desplazarse por un conjunto de exquisitas imágenes de alta resolución.

Ilustraciones. Las imágenes de cabecera de los sitios web tienen que tocar la fibra sensible y establecer una conexión personal. Mejor si una imagen es distinta y fácilmente reconocible incluso si se recorta de la cabecera del sitio web. Puede conseguirlo aprovechando la tendencia actual de las ilustraciones.

Vídeo o animación

No centre su atención sólo en imágenes estáticas.

Añadir un vídeo es una de las ideas más eficaces para la cabecera de un sitio web. Si es posible, intenta añadir un material de vídeo temático en una cabecera. Muchos sitios web lo utilizan para cautivar a la audiencia mientras presentan su empresa o producto de la mejor manera posible.

Otra forma de hacer que su diseño sea aún más atractivo, vívido y memorable es añadir animación. Puede hacer que las cabeceras de los sitios web sean realmente geniales. Si buscas una página web interactiva que enganche a los espectadores, la animación es una gran alternativa.

Una llamada a la acción bien diseñada

Al diseñar una cabecera web, el diseñador añade en ella algunos elementos de llamada a la acción como «iniciar sesión», «registrarse», «ponerse en contacto», etc. Para atraer la atención del usuario de modo que se produzca la acción necesaria, el botón debe contener una inscripción comprensible para el cliente y ser perceptible entre otros contenidos.

La colocación de una llamada a la acción en un lugar estratégicamente significativo es una oportunidad perfecta para instar a los usuarios a pasar a la acción desde el principio, impulsando así su tasa de conversión. Algunos CTA pueden utilizarse durante un periodo de tiempo para promocionar ofertas especiales, otros tienen una presencia a largo plazo.

Mejores fuentes para las cabeceras de los sitios web

En primer lugar, el cliente percibe los nombres de las secciones y la información que proporciona la empresa: datos de contacto, ofertas interesantes. Por lo tanto, hay que elegir fuentes claras y legibles que no perjudiquen la percepción y puedan ser comprendidas a primera vista.

Para las cabeceras de páginas web grandes, se puede utilizar alguna tipografía atrevida y elementos imaginativos para captar la atención de los usuarios, de lo contrario, es mejor no elegir fuentes rebuscadas que puedan resultar difíciles de leer.

Diseño de cabecera sencillo

Al mantener una cabecera bien definida y ordenada, tus visitantes sentirán que no intentas agobiarlos con tus ofertas. La cabecera de un sitio web creativo puede tener un aspecto muy sencillo.

Navegación oculta (menú hamburguesa)

Esta es una solución cada vez más utilizada para el diseño de sitios web. El menú hamburguesa es un pequeño icono de tres rayas, que muestra el menú completo al hacer clic. Esta técnica es utilizada por los diseñadores cuando necesitan centrarse en la pantalla principal.

Desde el punto de la usabilidad del sitio, esta es una buena opción. Este tipo de menú proviene del diseño para móviles y ya es familiar para los usuarios. La hamburguesa es adecuada para sitios promocionales, donde el énfasis principal está en la presentación de alta calidad del producto utilizando fotos o videos. Para las tiendas online, esta opción puede ser menos adecuada, ya que para el cliente es importante tener una cesta, productos seleccionados y un campo de búsqueda en acceso rápido.

Diseño de cabecera móvil

La cabecera debe mostrarse correctamente no sólo en la versión de escritorio de la web sino también en la móvil. Por lo tanto, debe ser responsivo y capaz de ajustarse bien a cualquier dispositivo móvil.

El uso diario de los dispositivos móviles llevó a que los diseños de los sitios web parezcan orientados al móvil incluso en sus encarnaciones de escritorio. Por ejemplo, la implementación de grandes imágenes de héroe y menús de hamburguesa tiene sus orígenes en el diseño móvil.

En conclusión

El sitio web se presenta por su cabecera. Es como una tarjeta de visita única. Por lo tanto, al diseñar un sitio web, preste la máxima atención a la cabecera.

Y una última mejor práctica del diseño de la cabecera de un sitio web: haga alteraciones regulares para mantener su sitio web fresco y actualizado. Utilice algunas ideas de este artículo.