En el pasado, una «cabecera» en el diseño web normalmente se refería a la tira siempre presente en la parte superior de los sitios web que contenía el logotipo, la barra de navegación, y tal vez algunos datos de contacto y la barra de búsqueda. Hoy en día, un «encabezado» se refiere más a menudo a todo el espacio por encima del pliegue en la página de inicio.
A menos que alguien haya encontrado su sitio a través de una entrada de blog compartida en las redes sociales o de una referencia en otro sitio, lo más probable es que entre a través de la página de inicio. Y lo primero que verán es ese lugar privilegiado en la parte superior, al descubierto.
He escrito antes sobre cómo los visitantes responden mejor a la colocación predecible de ciertos elementos en su sitio web (como el logotipo y CTA). Al diseñar un sitio web con el objetivo de satisfacer sus expectativas y mejorar su comodidad haciendo que la experiencia sea algo más predecible, puedes mejorar efectivamente las tasas de clics y de conversión.
Ahora piensa en ese espacio de cabecera en la página de inicio.
La mayoría de la gente ha llegado a confiar en las páginas de inicio para darles una vista de pájaro de lo que es una empresa o sitio web, lo que significa que usted no puede permitirse el lujo de perder esta oportunidad de cumplir con esa expectativa. Por supuesto, el diseño de la cabecera de su página de inicio puede ser único para su marca, pero los elementos que se encuentran en ella no deberían serlo. Los visitantes esperan que no sea necesario desplazarse para descubrir lo que un sitio hará por ellos. En esencia, tu cabecera debe ser una historia de 10 segundos que demuestre a tus visitantes el valor que tendrá el sitio para ellos.
Entonces, ¿qué harás con este espacio para cautivar el interés de tus visitantes?
Hablemos de algunas de las tendencias en el diseño de cabeceras en 2017, de lo que puedes hacer para aprovechar esta propiedad inmobiliaria tan visible, y echemos un vistazo a algunos ejemplos interesantes de cabeceras en el camino.
14 tendencias en el diseño web de cabeceras en 2017
No es que sus visitantes no sean conscientes de su capacidad para desplazarse por una página o para hacer clic a través de una navegación con el fin de obtener más información sobre la marca detrás de un sitio. Pero, ¿por qué tendrían que hacerlo? Hay suficiente espacio en la cabecera para ofrecer un mensaje sucinto que les diga todo lo que necesitan saber. Y si 50 palabras o menos no son suficientes, la imagen de fondo o el diseño comunicarán el resto de la historia.
Por encima de todo, el encabezado de la página de inicio puede hacer o romper la primera impresión de sus visitantes, por lo que es tan importante clavar esta sección.
Si te cuesta encontrar una forma de dar el pistoletazo de salida a tu sitio con fuerza, quizá encuentres algo de inspiración en las siguientes tendencias de diseño de cabeceras de 2017:
Imagen de héroe sobredimensionada
Gracias al estilo modular de diseño de los sitios para que sean responsivos, la mayoría de los diseños se dividen ahora en bloques y secciones distintas. Este estilo de diseño se presta muy bien a las imágenes principales de ancho completo que pueblan muchos sitios web.
Por ejemplo, el sitio web de Cleverbird Creative. Utiliza una imagen singular y llamativa superpuesta a un texto sencillo para dar la bienvenida a los visitantes. No hay duda de lo que buscan aquí: belleza simplificada.
Imágenes deslizantes
Creo que hubo un tiempo, no muy lejano, en el que muchos de nosotros cuestionábamos el deslizador como elemento de diseño viable. Sin embargo, muchos diseñadores han hecho un gran trabajo haciendo uso de él en las cabeceras. Hay imágenes deslizantes que se desplazan automáticamente de una bella imagen de alta resolución a la siguiente y las hay como la de Pierre que ruega a los visitantes que tomen el control de esa experiencia por sí mismos.
Imágenes de paralaje transformadoras
El desplazamiento de paralaje sigue creciendo con fuerza y la cabecera ha demostrado ser el lugar perfecto para aplicar este tipo de «ilusión» visual a los diseños web. Sin embargo, lo que más se está viendo últimamente es que los diseñadores dan a su scroll parallax un toque de transformación, probablemente para sorprender a los visitantes con el inesperado resultado del desplazamiento. La agencia australiana de diseño UX August ha hecho precisamente eso con su cabecera.
Fondos de vídeo
El fondo de vídeo es otra de esas tendencias recientes que realmente funciona mejor cuando se aplica a la cabecera de la página de inicio. Este de Le 28 hace un gran trabajo de establecer el estado de ánimo para el sitio web del restaurante, mostrando videos de la parte delantera y trasera del establecimiento gastronómico.
Navegación oculta
Aunque se podría argumentar que el menú hamburguesa pertenece a los sitios web vistos en dispositivos móviles (como se pretendía originalmente), hay algo que decir sobre lo que ese tipo de minimalismo de navegación hace por la cabecera. El sitio web de +rehabstudio es un buen ejemplo de ello. Al alejar la navegación, tu atención se centra inmediatamente en los emocionantes elementos visuales del símbolo del más… y luego te das cuenta de que hay pequeños toques de animación a su alrededor.
Mascota de la marca
Si la cabecera es el lugar para introducir a los visitantes a su sitio, ¿qué mejor manera de iniciarlo que presentándoles a los «personajes» que van a conocer en el camino? Si tu sitio utiliza mascotas de la marca -como lo hace el sitio de WPMU DEV- este es el momento y el lugar para mostrarlas.
Tipografía llamativa
Hay mucho que se puede hacer para dar un lavado de cara a la tipografía de tu sitio. Dicho esto, a veces no se trata de elegir la fuente cursiva más elegante para echársela en cara a la gente. Si miras el ejemplo de Slack de arriba, verás que todo tiene que ver con el tamaño de la fuente. No hay nada realmente especial en la tipografía que han elegido, pero es muy limpia y clara. Eso, junto con el tamaño del mensaje principal, es lo que lo hace tan llamativo.
El contenido es lo primero
Para los sitios web que se centran principalmente en ofrecer montones de contenido a los visitantes (piense en cualquier sitio de noticias o blog importante), una estrategia de contenido primero para la cabecera será lo más lógico. En realidad, no hay que andarse con rodeos. La gente ha venido a tu sitio para leer tu contenido, no necesitan ser atascados por la lectura adicional en la página de inicio, así que puedes ir directamente a ello como hace Glamour.
Los productos primero
En esta misma línea, los sitios de comercio electrónico no necesitan molestarse en utilizar la cabecera para escribir un titular pegadizo o proporcionar un vídeo explicativo sobre la empresa. Los visitantes saben lo que han venido a buscar al sitio, por lo que se puede ir directamente al grano. Sin embargo, a diferencia de los proveedores de contenido, los minoristas de productos pueden utilizar este espacio privilegiado para mostrar sus productos más vendidos o sus lanzamientos más recientes para atraer a los visitantes, como hace Apple.
CTA frontal y central
Puede llegar un momento en que su sitio tenga algo realmente especial que mostrar a los visitantes, algo que quiera que descarguen o compren. Ahora bien, aunque eso no sea la atracción principal de tu sitio, puedes utilizar la cabecera de forma temporal o permanente para destacar esta llamada a la acción especial como hace la bloguera Everywhereist con su libro.
Colores vibrantes y texturas
Quizás una de las cosas más bonitas que ha surgido de Google Material Design es nuestra disposición a utilizar más colores vibrantes, capas y degradados en el diseño web. Ya no tienen que quedar relegados a los botones de llamada a la acción, sino que pueden utilizarse para bloques enteros del sitio web, como hace Stripe con su cabecera colorida y texturizada.
Animación
No hay absolutamente nada de malo en tener un diseño de cabecera estático en la página de inicio, especialmente si quieres que el foco de atención se dirija a una CTA o a un vídeo. Manténgalo simple para que no haya distracciones que impidan a los visitantes realizar la acción que usted pretende. Pero para los sitios web que quieren una forma interesante de compartir su mensaje con los lectores, las animaciones pueden ser una sabia elección. El Baianat utiliza una pequeña animación para compartir varios mensajes en el mismo espacio, lo que evita que parezca desordenado o saturado de información.
Diseños geométricos
El diseño web geométrico está muy de moda ahora mismo, ya que se presta a las líneas lógicas y limpias necesarias para el diseño responsivo. Así que no es de extrañar que estemos viendo más sitios web, como el de Perspective API, que integran elementos geométricos en el diseño de la cabecera. Hay otros, como Stripe y WPMU DEV, que utilizan líneas diagonales para crear un paisaje visual único e inesperado para los visitantes.
Experimental
Por último, llegamos a los diseños de cabecera experimentales. La clave de estos diseños no es que la cabecera sea extravagantemente extraña e inusual. Eso distraería demasiado a los visitantes. En su lugar, su enfoque debe ser la creación de algún efecto inesperado causado por el simple movimiento a través de la cabecera.
Toma el diseño de Teamgeek, por ejemplo. Usted puede ver que hay algo «off» sobre el logotipo y el mensaje dentro del centro de la página, pero no es hasta que se involucran con él que te das cuenta de que hay un giro especial incorporado.
Envolver
Como se puede ver, hay una variedad de maneras que usted puede diseñar un encabezado para un sitio de WordPress. Sin embargo, si observas detenidamente los ejemplos anteriores, te darás cuenta de que los diseñadores fueron muy estratégicos en cuanto al estilo de cabecera que utilizaron y los elementos que se incluyeron en ella. Cuando llegue el momento de diseñar un encabezado para su próximo proyecto de sitio web, considere si necesitará lo siguiente:
- Logotipo
- Tradicional vs. oculto
- Sección de encabezado heroica vs. ir directamente al contenido
- Logotipo o declaración de intenciones
- Información de contacto
- Enlaces a redes sociales
- Barra de búsqueda
- Alternancia multilingüe
- Carro de la compra
- Mascota de la marca
- Fotografía de archivo vs. fotografía real de la empresa. Fotografía real de la empresa, las personas o el producto
- Imagen estática vs. imágenes deslizantes vs. vídeo de fondo
- Vídeo promocional incrustado
- Botón de llamada a la acción
- Formulario de contacto
- Barra de bienvenida
También puede encontrar otros elementos que pertenezcan a esta sección del encabezado superior de su página de inicio. Realmente se reduce a lo que tiene más sentido para su sitio. En otras palabras, ¿qué elementos contarán la historia de su marca, educarán y atraerán a su audiencia desde el principio, e inspirarán la suficiente confianza para impulsarlos a través de su sitio?
Etiquetas:
- diseño
- cabeceras