Consejos para diseñar un header efectivo en tu web [+ ejemplos]

Autor: Max Camuñas

Fecha: 10/12/2019
Consejos para diseñar un header efectivo en tu web

El header es una de las partes más importantes en una página web, pues es el elemento que los usuarios visualizan en primer lugar cuando llegan a tu sitio. Por lo tanto, la cabecera de tu web debe ser ordenada y limpia para que pueda ser visualizada con un solo vistazo y no de lugar a confusión.

A la hora diseñar una web, debes tener en cuenta que el header es un espacio genérico que tendrá el mismo diseño en todas las páginas (salvo en landing pages o apartados muy concretos).

De este modo, el header de tu web debe ser un punto de encuentro para el usuario, donde disponga de toda la información que necesita y le permita navegar por tu sitio.

Además, en función del tipo de web (ecommerce, blog, one page, etc), debes seguir una estrategia diferente para conseguir tus objetivos de conversión, ya sean clics, ventas o suscripciones.

Si quieres saber más sobre cómo crear y planificar un header web de forma efectiva, en este post te doy una serie de consejos y te cuento cuáles son los elementos más recomendables que debes incluir.

Antes de entrar en materia, te dejo un post con unos consejos para crear un footer efectivo en tu web.

¿Qué elementos incluir en la cabecera de tu web?


Lo primero que debes hacer es un listado con los elementos que vas a incluir en el header de tu web de forma obligatoria, ya sea por motivos de branding, navegación, conversiones u otros.

Aquí te cuento una serie de elementos que son susceptibles de formar parte de la cabecera de una web, pero por supuesto, no tienes que incluirlos todos. Como ya he dicho, esto depende del tipo de web y cuáles sean tus objetivos.

#1 Logotipo

Si hay un punto que no puede faltar en una web, ese es logotipo, ya que sirve como guía visual para el usuario, te permite reforzar tu branding e imagen de marca, y hace que tus visitas te recuerden por un elemento gráfico.

Además, como norma general, el logotipo en una web suele enlazar con la página de inicio de la misma. Es decir, permite que el usuario pueda volver al principio en todo momento.

A la hora de colocar tu logo, tienes diferentes opciones:

header web: logotipo

Puedes situarlo en el centro, por encima del menú, como hicimos en la web de Sara Caro.

header web: logotipo

Otra opción es colocarlo también en el centro, pero alineado con el menú e integrado en sus pestañas de navegación. Así lo hicimos en el header de la web En Conexión Contigo.

header web: logotipo

También puedes recurrir a un diseño más clásico con el logotipo a la izquierda el menú a la derecha. Es efectivo y funciona. Así lo tienes en la web de ABEO o en esta que lees.

header web: logotipo

Un ejemplo más, en este caso con el menú fusionado en la cabecera de la web y su imagen de fondo. Una opción muy visual.

Estos son solo unos ejemplos, pero en este sentido no hay límites. Puedes ser todo lo creativo que tu proyecto te permita.

#2 Menú (s)

Otro imprescindible en el header de una web es el menú, elemento que permite al usuario la navegación entre los distintos apartados.

En ese sentido, puedes optar por colocar un solo menú o dos, siempre en función del tipo de web que tengas y especialmente de su estructura (si tu web tiene muchas secciones, posiblemente necesites un menú doble).

Mi consejo es que evites, siempre que puedas, el doble menú para que el usuario no se pierda e intentes aglutinar tus páginas en uno solo.

Pero si tu sitio tiene una gran estructura o se trata, por ejemplo, de un ecommerce o de un blog con muchas categorías, en ese caso lo necesitarás.

Te dejo varios ejemplos donde podrás visualizarlo mejor:

header web: menú

En el blog de Mi Mundo en una maleta utilizamos un menú doble:

  • Uno principal con el logo alineado en el centro, que incluye los principales destinos del blog.
  • Uno secundario en la parte superior, que incluye las tres únicas páginas estáticas.
header web: menú

Si tienes una tienda online, la web de Acuarela Duck es muy buen ejemplo. En este caso, han utilizado un menú doble organizado de la siguiente forma:

  • Menú principal centrado y situado debajo del logo: incluye las páginas principales de la web, así como las categorías de productos.
  • Menú secundario en la parte superior: incluye las pestañas complementarias para los clientes: carrito, cuenta, lista, etc.
header web: menú

Otra opción es utilizar un menú principal en el header de la web y otro secundario en el footer, como puedes ver en Territorio Magazine.

#3 Buscador

Otro elemento transversal en el header de una web es el buscador, que siempre recomiendo tener activo por cuestiones de usabilidad (tú conoces muy bien tu web, pero seguro que no es el caso del usuario que entra por primera vez).

En este sentido, tienes diferentes opciones de diseño y ubicación: icono de lupa, barra buscadora, al lado del menú, debajo del logo, etc.

Como ejemplo, puedes ver la web de Casika (tienda de muebles), cuyo header me gusta mucho por su diseño y organización.

header web: buscador

#4 Datos de contacto

Otro tipo de información que puedes incluir en la cabecera de tu web son los datos contacto, tales como teléfono o email.

Mi consejo en este sentido es que no incluyas demasiados datos de contacto, solo los que sean estrictamente necesarios para que el usuario te pueda contactar. Por ejemplo, la dirección, que suele ocupar demasiado, recomiendo incluirla en el footer.

Es decir, datos de contacto sí (siempre que los necesites), pero sin pasarse.

Te dejo un ejemplo donde los datos de contacto están, pero ocupan un lugar discreto.

header web: datos de contacto

#5 Redes sociales

Las redes sociales son otra vía de contacto en una web, pero he querido separarla del apartado anterior para centrarme en ellas.

A la mayoría de clientes le gusta que sus perfiles sociales estén bien visibles en el header de su web, todo lo contrario que a mí.

¿Por qué? Muy sencillo. Porque las redes sociales son un canal complementario para comunicar el mensaje de tu marca o negocio, pero no el principal, que siempre debe ser tu web o blog.

Es decir, el objetivo de las redes sociales es amplificar tu mensaje para convertirlo en tráfico hacia tu web, no al contrario. No tiene sentido que, cuando has conseguido que el usuario aterrice en tu web, lo primero que hagas sea sacarle de ella para llevarle a tus redes sociales.

¿Qué es más importante para ti? ¿Una usuario satisfecho en tu web que puede dar lugar a una conversión, o un like en Instagram?

Por lo tanto, las redes sociales como elemento destacado en el header web nunca las recomiendo, solo si son imprescindibles y está justificado. Mi consejo es que las pongas en el sidebar o en el footer.

Y esto te lo dice una persona a la que le encantan las redes sociales y que es muy activa en ellas, pero si hablamos de estrategia, no te recomiendo sacar al usuario de tu web para llevarlo a la red social que sea. Nadie te asegura que esa persona vaya a volver a la web.

Como ejemplo, te dejo la web de Javi Layunta, en cuyo header incluimos las redes sociales sin restar protagonismo al resto de elementos.

header web: redes sociales

#6 Tienda online

Como ya he comentado en el apartado menú, si tu web es una tienda online, debes incluir en el header los elementos referentes al proceso de compra: carrito, cuenta, pedido, lista de deseos, acceso…

Aquí puedes ver como lo resolvimos en la web de Nairamkitty:

header web: tienda online

#7 Botones destacados

Otro tipo de elemento que puedes incluir en la cabecera de tu web son botones destacados para enfatizar un servicio, llevar al usuario a una landing o animarle a que haga una acción específica.

Como ejemplo puedes fijarte en la cabecera de mi propia web, donde puedes ver el botón «pedir presupuesto» como destacado.

[En otro post hablaré sobre las tasas de conversión de este botón y el cuestionario al redirige]

header web: botones destacados

Si hablamos de botones destacados, otra opción son los que dan acceso o permiten el registro en una plataforma. Por ejemplo:

header web: botones destacados

Como ves, este tipo de botones son imprescindibles en webs de formación, plataformas que requieren un registro previo, membresías o servicios especializados.

#8 Barra fija

Las barras fijas son muy útiles para mostrar en el header de tu web anuncios, descuentos, cupones, llamadas a la acción o información adicional.

Si las usas, ten cuidado de no cargarlas de información para no restar protagonismo al resto de elementos.

Como ejemplo, te dejo la cabecera de la web Women Shoes, una tienda online de zapatos para mujeres. Me encanta la forma en que han resuelto el incluir gran cantidad de información y datos sin pisarse unos a otros.

header web: barra fija

#9 Selector de idioma / país

Si tu web es un sitio multi lenguaje porque operas en diferentes países, un elemento obligatorio en el header es un selector de idioma; y si quieres filtrar a las visitas por ubicación, un selector de país.

Aquí te dejo un ejemplo donde han incluido ambos selectores con un resultado brillante en cuanto a diseño y usabilidad:

header web: selector de idioma / país

Como ves, el uso de las banderas de cada idioma / país es un recurso gráfico idóneo para este tipo de selectores.

#10 Formulario de suscripción

Por último, quiero mencionar un recurso que también es susceptible de ser incluido en la cabecera de una web, aunque no es del todo recomendable por el gran espacio que ocupan.

Además, los formularios de suscripción se pueden colocar en otras partes de la web y funcionar de forma óptima a nivel de conversiones.

Por lo tanto, situarlos en el header es algo arriesgado y solo está justificado en tipo de diseños muy concretos.

header web: formulario de suscripción

Recuerda usar solo los elementos que sean imprescindibles para tu público, no satures de información a la persona que visita tu web. Si lo haces, se llevará una mala imagen, y darle la vuelta a una primera impresión negativa en Internet es muy complicado.

Cómo crear el header de tu web


Ahora que ya conoces cuáles son los elementos que puedes incluir en el header de tu web en función de tu diseño y estrategia, te cuento cómo llevarlo a la práctica, para lo cual tienes varias opciones.

  1. Opciones de tu tema: te recomiendo leer la documentación de tu plantilla WordPress para consultar todas las opciones que incluye a la hora de crear el header de tu web: menús, buscador, redes sociales, diseño, organización, etc.
  2. Widgets de WordPress: la segunda manera de crear una cabecera para tu web es utilizar los widgets nativos de WordPress. La mayoría de temas permiten añadirlos en el header.
  3. Si utilizas Divi como plantilla, puedes crear una cabecera totalmente personalizada en tu web con el nuevo generador de temas que ha incluido Divi 4.0. En post post te explico todas las novedades de Divi 4 y aquí te dejo un tutorial con un ejemplo real.

Y aquí te dejo el post en el que te explico cómo crear una cabecera personalizada con el generador de temas de Divi.

Espero que todos estos consejos, recomendaciones y ejemplos te sirvan a la hora de crear el header de tu web, organizar sus elementos y conseguir tus objetivos 😉

Portada: vector web browser design / Shutterstock

Summary
Consejos para diseñar un header efectivo en tu web [+ejemplos]
Article Name
Consejos para diseñar un header efectivo en tu web [+ejemplos]
Description
Consejos, recomendaciones y ejemplos para crear el header de tu web de forma efectiva, organizar sus elementos y conseguir tus objetivos.
Author
Publisher Name
Max Camuñas
Publisher Logo

5 Comentarios

  1. Edu Rubianes

    Hola Max, qué tal!!!

    He leído este post y el del diseño de footers y están ambos DPM 😉

    Me he quedado con el detalle que comentas de poner un formulario de suscripción en el header. Aunque en mi caso no he tenido que ponérselo a ningún cliente, sí es cierto que alguna vez me han sugerido meterlo en el footer, algo que no me acaba de convencer…

    El tema es que ahora, con la GDPR, hay que añadir la capa de información legal y los formularios quedan un mojón de cuidao… ¿cómo lo resuelves tú en estos casos? ¿lo metes sin el texto legal?

    Gracias, tío!!!

    Un abrazo!!!

    Responder
    • Max Camuñas

      Hola Edu,

      Lo resuelvo con un conmutador, como puedes ver en los formularios de suscripción de esta web. Es legal y cumple con el RGPD.

      Espero que te sirva la idea 🙂

      Responder
  2. Edu Rubianes

    Está muy bien la idea!!! 😉

    Responder
  3. Soraya

    Hola Max,

    Me estoy leyendo todos tus post ya que estoy en proceso de montar una web con mi pareja y andamos un poco perdidos y la verdad es que me encanta tu web, lo explicas todo perfectamente y con tu ayuda lo veo todo mucho más fácil.

    Mi consulta era la siguiente: En el video dices que dejarás el CSS para alinear las tres columnas en la cabecera, para que la podamos copiar. No veo el código por ningún lado, ¿me lo podrías enviar, si no te importa?

    Gracias de antemano.

    Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Para cumplir con el nuevo RGPD y que tus datos estén a salvo, debes leer y aceptar mi política de privacidad. Tus datos serán guardados en SiteGround y WordPress, mi proveedor de hosting y el CMS que utilizo en esta web.

Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages

Soy Max Camuñas y te doy la bienvenida a mi blog (mi casa).

Por aquí hablo sobre los temas que me apasionan: WordPress, Marketing, Social Media o Blogging.

Me encanta ayudar a otras empresas a marcas a crear el diseño de su web desde cero.

¡MÁS SOBRE MÍ!

masterclass
CÓMO PLANIFICAR TU PÁGINA WEB PARA QUE TU NEGOCIO BRILLE
¡accede gratis!