Presencia de marca: la cabecera

En un proyecto de re-diseño reciente (bueno, más bien una redecoración) nos encontramos con el problema de que lo que menos (casi) llamaba la atención de la nueva imagen era el logotipo; la marca.

Toda la disposición de los elementos y zonas de la web era elegante y correcta… pero el logotipo pasaba desapercibido, o al menos no se veía tanto como pretendíamos.

Si os habeis fijado las webs actuales tienen una cabecera enorme, desproporcionada en algunos casos. Incluso muchas de ellas tienen cabeceras que no aportan nada salvo una enorme-zona-con-una-foto-bonita… y no todas son blogs y web 2.0.

Observando las alternativas que se usan para destacar la marca en la cabecera, podemos encontrar las siguientes

  1. Enorme imagen de cabecera con o sin claim. Lo normal es saltártela, pero ya te ha dejado en la retina todo el mensaje. Personalmente la veo algo peligrosa, roba demasiado sitio al contenido. Una variante pueden ser las webs de un único propósito, como puede ser Google u otras estilo web 2.0.
  2. Refuerzo de color sobre la cabecera. Suele ser el recurso más utilizado, una “mancha” oscura horizontal en la que se encuentra el logotipo y puede que el menú principal. Puede ir acompañada de degradados en vertical oscuro-claro, o encerrando la zona con un borde, dibujos, etc… o poniendo la “mancha” horizontal de lado a lado de la pantalla y apoyando sobre ella el contenido de la página.

Hay otras opciones para mostrar la marca sin necesidad de dejar todo el trabajo sobre la cabecera: se puede reforzar la presencia de marca mostrando el logotipo en todos aquellos recursos gráficos que vayan apareciendo en la web: cajas de productos, títulos, … o bien situándola de forma que rompa en el diseño de la página (en diagonal, superpuesta, …)

Gran imagen de cabecera

Esa puede ser una solución para la marca, desde luego, no falla, se ve quieras o no. Ejemplos de ello pueden ser:

  • Subtraction. Una preciosa web con una cabecera de todo menos útil.

    Home Subtraction

  • The Web Standards Project. Combina la mancha de color con una cabecera desproporcionada. Al menos queda bien clarito de que va la web. Ah, como sigue los estándares y además es usable, puedes saltarte la cabecera gracias a un enlace que aparece cuando sitúas el ratón en la zona superior. Un recurso que estoy viendo cada vez más.

    Home de The Web Standards Project

Cabecera oscura

Mi favorita, así que más vale que tengas un logo que lo permita, porque con esta opción puedes ahorrarte quebraderos de cabeza con otros departamentos.

Ejmplos hay bastantes, por poner 2:

  • CSS Beauty. Un ejemplo de que no es necesario robar espacio al contenido para anunciarte.

    Home de CSS Beauty

  • La Coctelera. Cositas sencillas y bien hechas.

    Home de La Coctelera

Alternativas

  • Cabecera por reconocimiento de otros medios. Se da en los periódicos: El País.
  • Presencia de marca constante. Bien vía iconos, tipografías, etc. P.ej. Skype.
  • Clásicos: logo arriba a la izquierda y punto. Con más o menos originalidad: A list apart.
  • La web es mía y hago con ella lo que me da la gana. No pongo ejemplos, pero seguro que se pueden encontrar sin escarbar mucho.

Escribe tu comentario

: