Diseño adecuado de la cabecera - Un vistazo a 6 sitios web diferentes

Cuando piensas en la cabecera de un sitio web, ¿piensas en la barra de la parte superior donde se encuentran el logotipo y el menú? No te equivocas, pero últimamente algunos piensan que la cabecera es todo lo que está por encima del pliegue. Esto significa que cuando visitas un sitio web, si no te desplazas hacia abajo, toda la sección que se muestra es la cabecera.

Echemos un vistazo a varios sitios web que tienen una variedad de cabeceras y discutamos lo que vemos que pretende cada sitio web con su diseño.

Box.es

La cabecera de Box.com no es sólo un logotipo y un menú, sino una vista previa completa de su producto junto con una llamada a la acción en el centro. Si tienes un producto especial o nuevo, este tipo de encabezado es una forma estupenda de que tus visitantes encuentren y obtengan más información fácilmente. Para los productos nuevos, no tienes que mantener la llamada a la acción (CTA) delante y al centro, puedes utilizar este lugar temporalmente y luego cambiar a otro estilo de cabecera.

Box hace un gran trabajo para que sus botones de acción sean fáciles de encontrar. El estilo sencillo y limpio es agradable a la vista. Esta cabecera está pensada para obtener información de los visitantes a través de un formulario de prueba gratuita o de contacto.

 Apple.com

El estilo de cabecera de Apple gira en torno al producto. En lugar de mostrar todas las funciones del nuevo iPhone en su cabecera, se limitan a mostrarte el producto. Esto despierta la curiosidad. La cabecera se centra en una oferta que hacen para las fiestas. Es sencillo y limpio, e incita al usuario a hacer clic para obtener más información. Esta cabecera se basa en el deseo de los visitantes de conocer (y comprar) lo último y lo mejor en tecnología.

BearsBeans.com

Bear's Beans tiene una cabecera muy sencilla. Comunica muy claramente de qué va la marca, pero también atrae la curiosidad. Desde el principio, el logotipo, el pequeño menú y una llamada a la acción muy clara hacen que quieras probar un sorbo de su café. En este caso, sólo utilizan cuatro elementos en total: logotipo, titular, botón y menú. El tamaño del texto permite que el sitio web sea muy llamativo. Como puedes ver, no hay ninguna sección definida entre la zona de la barra de menú y la CTA inferior. Por eso llamaríamos cabecera a toda la sección. La cabecera adopta un enfoque sencillo y relajado para educar al cliente.

BestBuy.com

Best Buy utiliza su primera cabecera para ayudar a los visitantes a encontrar información sobre tarjetas regalo, tiendas locales, carros de la compra, productos, cuentas, estados de pedidos y una barra de búsqueda. En este caso, toda la sección por encima del pliegue no se llamaría cabecera, ya que está claramente seccionada a un desplazamiento en el que han destacado ventas y productos. Esta cabecera ofrece a los visitantes una forma fácil de completar una venta. Best Buy hace un gran trabajo al incluir mucha información en un espacio pequeño sin que parezca demasiado abarrotado.

GettyMusic.com

La cabecera de Getty Music es sencilla a su manera. No sólo extienden los elementos de su menú para ocupar la mayor parte de la barra, sino que también han utilizado una foto sencilla con algo de texto debajo. Esta imagen no llama a la acción, sino que está colocada para el reconocimiento de la marca. Aunque Getty Music tiene una tienda, no tiene un icono de carrito de la compra en su menú. Esto aleja el lado de comercio electrónico de su sitio web y lo hace parecer más informativo. Esta cabecera da a los fans y visitantes una oportunidad de comprometerse con la música y los eventos que se describen en ella.

WissmannFamily.com

La cabecera de la familia Wissmann es una forma moderna de crear reconocimiento de marca e impulsar las ventas de su música. La combinación de colores con los del CD y el logotipo aporta una sensación relajada. Los iconos del menú y su ubicación indican que el sitio web se centra en las ventas y en conectar con los visitantes a través de las redes sociales.

¿Qué hemos aprendido?

Tras examinar estos seis sitios web, ¿qué hemos aprendido sobre los diseños de cabecera adecuados? ¿Es que una cabecera sirve para todos los estilos de sitios web? Evidentemente, no. Esto es lo que he aprendido:

• La cabecera del sitio web puede extenderse hasta el pliegue del sitio web.
• Los tipos de iconos utilizados en una cabecera pueden expresar el propósito general del sitio web
• Todas las imágenes de cabecera no tienen por qué utilizarse para llamadas a la acción, sino que también pueden utilizarse para el reconocimiento de la marca.
• Si tienes una tienda en tu sitio web, no es un requisito tener un icono de carrito de la compra en la cabecera.
• Los seis ejemplos tienen algo en común: todos tienen cabeceras limpias y sencillas. Los colores combinan con el resto del sitio web y todo el contenido fluye sin problemas.

¿Qué has aprendido? No importa en qué nivel de experiencia en diseño te encuentres, dedicar tiempo a revisar sitios web de éxito puede ayudarte a ampliar tus conocimientos sobre el diseño adecuado de cabeceras para sitios web.