Cuando un cliente me encarga el diseño de una página web, lo habitual es que ya tenga un logotipo. En ocasiones forma parte de una identidad corporativa bien definida, mientras que otras veces es simplemente una imagen que lleva años utilizando en su negocio. Sea como sea, ese logo tendrá que encontrar su sitio dentro del diseño de la nueva web y no siempre va a resultar sencillo.
En ocasiones, un logotipo que funciona perfectamente en una tarjeta de visita, en un rótulo o en cualquier otro soporte no tiene por qué hacerlo igual de bien en una página web. Sus proporciones, la cantidad de detalles que contiene o incluso los colores pueden complicar su integración, especialmente en la cabecera, donde el espacio disponible es limitado y tenemos que adaptar el diseño a pantallas de distintos tamaños.
En estas situaciones, una de las tentaciones es intentar que el logotipo encaje a toda costa en el espacio que habíamos previsto para él. Sin embargo, no siempre es la mejor decisión. A veces necesitaremos utilizar una variante del logotipo y otras tendremos que reconsiderar la composición de la cabecera para respetar su identidad sin perjudicar el conjunto del diseño.
Qué hacer cuando las proporciones del logotipo complican el diseño
Uno de los primeros problemas que podemos encontrarnos es que las proporciones del logo no encajen bien en el espacio que habíamos previsto. Los logotipos horizontales suelen resultar relativamente fáciles de integrar en una cabecera, pero los verticales pueden complicarnos bastante las cosas, especialmente si incluyen elementos que dejan de distinguirse al reducir su tamaño.
Podríamos pensar que basta con aumentar la altura de la cabecera para hacerles sitio, pero esta decisión tiene consecuencias sobre el resto de la web. La cabecera es un elemento que se repite en todas las páginas y, si ocupa demasiado espacio, termina restando protagonismo al contenido y haciendo que la navegación resulte más incómoda. En dispositivos móviles, donde la altura disponible es todavía más limitada, el problema se acentúa.
Una solución que suelo utilizar cuando me encuentro con un logotipo vertical y no dispongo de una versión alternativa es permitir que sobresalga de la cabecera. En lugar de aumentar su altura para contenerlo por completo, mantengo unas dimensiones razonables y dejo que el logotipo se prolongue hacia abajo, superponiéndose parcialmente a la siguiente sección. De esta manera conserva un tamaño suficiente para resultar reconocible, pero no obliga a que toda la cabecera ocupe más espacio del necesario.
Naturalmente, esta solución no sirve para cualquier composición. Hay que tener en cuenta qué elementos aparecen debajo de la cabecera y asegurarse de que el logo no dificulta su lectura ni interfiere con la navegación. En algunos diseños puede funcionar muy bien, mientras que en otros será preferible reorganizar los elementos de la cabecera o buscar una variante del logotipo que se adapte mejor al espacio disponible.
Cuando el logotipo tiene demasiados detalles
Otro inconveniente habitual aparece cuando el logotipo contiene demasiados elementos o utiliza una tipografía que pierde legibilidad al reducir su tamaño. Esto sucede, por ejemplo, con logos que incluyen ilustraciones complejas, textos secundarios, eslóganes o incluso información de contacto. Puede que todos esos elementos se distingan perfectamente cuando vemos el logotipo a gran tamaño, pero al colocarlo en la cabecera de una web algunos terminan convirtiéndose en manchas difíciles de identificar.
En estos casos, lo primero que debemos valorar es si disponemos de una versión simplificada del logotipo. Muchas identidades corporativas contemplan distintas variantes para adaptarse a diferentes soportes y tamaños. Puede tratarse de una versión sin eslogan, de una composición que prescinda de determinados elementos secundarios o de un isotipo que permita identificar la marca sin necesidad de mostrar su nombre completo.
Si no existe ninguna alternativa, conviene estudiar qué posibilidades tenemos antes de modificar el logotipo por nuestra cuenta. Eliminar elementos, cambiar sus proporciones o sustituir una tipografía puede parecer una solución sencilla, pero también puede alterar la identidad de la marca. Lo razonable sería plantear al cliente la necesidad de disponer de una versión adaptada para espacios reducidos, preferiblemente siguiendo los criterios de quien haya diseñado su identidad corporativa.
También debemos distinguir entre un logotipo que pierde legibilidad por la cantidad de detalles que contiene y otro que se ve borroso porque la imagen utilizada no tiene suficiente resolución. En el segundo caso, el problema no está necesariamente en el diseño del logo, sino en el archivo que estamos utilizando. Si te encuentras con esta situación, en otro artículo explico cómo evitar que el logotipo de una web se vea pixelado.
Cuando los colores del logotipo no encajan con el fondo
El color también puede complicarnos la integración de un logotipo en una página web. Pensemos, por ejemplo, en una marca cuyo logo utiliza letras blancas y que queremos colocar sobre una cabecera de fondo claro, o en uno que combina varios colores y pierde legibilidad cuando lo situamos sobre una fotografía. En ambos casos, el contratiempo no está necesariamente en el logotipo, sino en la relación que establece con los elementos que lo rodean.
Cuando trabajamos con una identidad corporativa bien desarrollada, lo habitual es disponer de versiones del logotipo preparadas para distintos fondos. Puede haber una versión principal, otra en negativo para fondos oscuros e incluso variantes monocromáticas. Siempre que existan, lo más razonable es utilizarlas siguiendo las indicaciones de la marca, en lugar de modificar sus colores para adaptarlos a nuestro diseño.
La situación se complica cuando el cliente únicamente dispone de una versión (cosa bastante habitual). A veces recibimos un logotipo sobre un rectángulo blanco que, al colocarlo en una cabecera de otro color, deja un recuadro bastante poco integrado. Si ese fondo no forma parte del propio diseño del logotipo, podemos intentar conseguir una versión con transparencia o preparar un archivo adecuado a partir del original, siempre que tengamos material suficiente para hacerlo sin deteriorarlo.
Otra posibilidad es adaptar el fondo de la cabecera al logo, en lugar de hacer lo contrario. No siempre será necesario utilizar el color corporativo como fondo de toda la cabecera. Podemos recurrir a una superficie neutra que permita distinguir correctamente la marca y reservar los colores corporativos para otros elementos de la interfaz. En ocasiones, esta decisión también ayuda a que el conjunto resulte visualmente más equilibrado.
Hay que prestar especial atención a los logotipos que se colocan sobre imágenes, algo relativamente frecuente en diseños donde la cabecera se superpone a una fotografía de portada. Aunque el contraste sea suficiente en una zona de la imagen, puede dejar de serlo en otra, especialmente cuando el encuadre cambia para adaptarse a distintas pantallas. En estos casos, utilizar una versión del logotipo con mayor contraste, introducir un fondo que lo separe de la fotografía o reconsiderar su ubicación suele dar mejores resultados que confiar en que siempre habrá una zona de la imagen donde se vea correctamente.
En cualquier caso, debemos evitar modificar arbitrariamente los colores de un logotipo para conseguir que encaje. La identidad corporativa debería ser uno de los puntos de partida del diseño, no un elemento que vamos alterando según nos convenga. Si ninguna de las versiones disponibles funciona sobre el fondo que hemos elegido, quizá deberíamos reconsiderar ese fondo antes de plantearnos modificar el logotipo.
No siempre hay que adaptar el logotipo, a veces hay que adaptar la cabecera
Hasta ahora hemos visto distintas situaciones en las que las características de un logotipo pueden complicar su integración en una página web. Sin embargo, hay una cuestión que conviene tener presente desde el principio. Cuando diseñamos una web para una empresa que ya dispone de una identidad corporativa, no podemos tratar su logotipo como si fuera un elemento más que podemos modificar libremente para ajustarlo a nuestras necesidades.
A veces el problema aparece porque hemos concebido una cabecera con unas características muy concretas antes de valorar cómo encajará el logotipo. Quizá hemos previsto una distribución horizontal con el logotipo a la izquierda y el menú de navegación a la derecha, pero las proporciones de la marca hacen que esa composición resulte poco equilibrada. En lugar de forzar el logotipo para mantener nuestra idea inicial, puede ser más sensato reconsiderar la distribución de los elementos.
No existe ninguna obligación de colocar siempre el logo en la esquina superior izquierda ni de situar el menú de navegación a su lado. Podemos optar por una cabecera con el logotipo centrado y la navegación debajo, distribuir los elementos en distintas franjas o utilizar composiciones diferentes según el espacio disponible. Naturalmente, estas decisiones también deben tener en cuenta la facilidad de navegación y las convenciones que los usuarios ya conocen. Una composición original no tiene por qué ser mejor si termina dificultando el uso de la web.
También es importante distinguir entre las limitaciones reales y las que nos imponemos nosotros mismos. A veces descartamos una distribución simplemente porque no encaja con la estructura que habíamos imaginado, cuando en realidad existen otras composiciones perfectamente válidas. Antes de plantearnos modificar un logotipo, conviene preguntarnos si hemos explorado suficientemente las posibilidades del diseño.
Esto no quiere decir que el diseño deba quedar completamente condicionado por el logotipo. Hay ocasiones en las que una identidad gráfica presenta complicaciones que van más allá de su integración en una página web y conviene trasladárselos al cliente. Si la marca no dispone de versiones adecuadas para distintos tamaños o soportes, puede ser un buen momento para recomendar que se desarrollen esas variantes.
Piensa que nuestro trabajo como diseñadores web consiste en encontrar una solución que respete la identidad de la marca y, al mismo tiempo, permita construir una interfaz coherente y fácil de utilizar. No se trata de hacer que el logo entre con calzador, sino de conseguir que forme parte del diseño con naturalidad.
Deja una respuesta