5 tipos de headers efectivos para tus websites

Fuente: http://www.maestrosdelweb.com/ - Diseño Autor: Stephanie Falla Aroche

El diseño web no deja de sorprendernos en sus tendencias y en está ocasión quiero compartir con ustedes 5 tipos de headers que actualmente se utilizan mucho. El header en una página web es quien presenta muchas de las opciones de la página y por ello al crear un header debemos contemplar varias posibilidades que lo hagan efectivo.

Hablamos de los headers creativos, dinámicos y accesibles en donde vimos lo simple, complejo y la armonía del header. También, les compartí algunas ideas para hacer footers más útiles sin perder ese espacio gracias a las novedades del diseño. Ahora veamos unos ejemplos de los tipos de headers que se utilizan mucho en los actuales diseños.

El header atrevido y gigante

Este diseño de header tiene como propósito, ocupar gran parte de la pantalla es una especie de intervención que impacta la atención del usuario y muestra el elemento más importante del sitio: menú de opciones, presentación del autor, producto o servicio.

Como pueden ver en este ejemplo el autor del blog utiliza el Header gigante para presentarse, gráficamente mostrar a qué se dedica y presenta un formulario de contacto para que se le envíe un mensaje sin buscar más.

• Simple Art: es otro sitio que tiene un diseño gigante en su header en donde destaca una temática: el diseño y sus características.
• Enroutefilm: nos muestra está opción de header para la promoción de eventos en donde necesitamos que un anuncio nos de los datos más importantes de él.

Las aplicaciones web en el header

Esta opción es muy útil para los sitios que desean destacar en su header una aplicación web, pueden agregar en el header la opción de descarga si está es gratuita o tiene una versión de prueba y algunas capturas de pantalla para promover sus características.

• Campaignmonitor: el header de este sitio tiene claro que lo más importante de su sitio es la promoción de su aplicación y utiliza dos botones claves.
• Playintraffik: presenta su aplicación como contenido principal y un botón que nos guía a seguir conociendo sobre ella.

El header con personaje animado

Si la empresa, aplicación o blog tiene un personaje animado como icono o parte del logotipo el uso de dicho personaje como imagen principal del header es una buena forma de posicionarlo en la mente del usuario. Está opción de header es muy utilizada para promover la marca y mascota.

El sitio de Wishlistr utiliza a un personaje animado para representar la opción que tiene el usuario de suscribirse desde su computadora al servicio y además se vale del texto para complementar la información.

• Mailchimp: es otra opción que muestra en el header a su mascota como parte de la marca que representa.
• Digimurai: la mascota está en completa relación con el nombre de la marca, así que en este sitio podemos ver que está centrada y completamente posicionada.

Un tour desde el header

Está opción sin duda es la más dinámica de todas ya que contempla el uso de elementos multimedia para brindarle al usuario la posibilidad de navegar entre una galería de vídeos o imágenes para conocer el producto o servicio.

• Paramoreredd: un header muy inspirador que contempla varios elementos dentro de él, pero con una opción de navegar en el mismo lugar.
• Icondesigner: Sebastian nos da un creativo ejemplo del uso del header y la navegación de opciones para promover los proyectos.

El header con portafolio

Esta opción de mostrar el portafolio en el header es similar a la del tour, pero la diferencia es que en el tour puedes mostrar variedad de información, mientras que en la diseñada para mostrar el portafolio se debe enfocar en la muestra de una galería de trabajo.

• Onwired: se enfoca en el uso del header para mostrar al visitante su galería de trabajos.
• Designmovesme: utiliza el header para presentar sus últimos trabajos en diferentes categorías visuales y escritas.

Estas son algunas opciones de headers que se utilizan en la actualidad, pero lo que debemos tener claro es que todas son arriesgadas y por ello deben tener un buen diseño y equilibrio para no perder el objetivo real del header. Algunas de estas opciones si no las sabemos utilizar pueden ser un problema para tu sitio web, así que lo mejor es definir qué es lo más importante de tu web site y resaltarlo en este espacio.

¿Qué otras tendencias de header has visto? ¿Cuáles son tus recomendaciones para el header?

Comparte: