Logos responsive: optimizar la marca para dispositivos móviles

logos_responsive-web
El término responsive está llegando con más frecuencia a oídos de todo tipo de profesionales. Con él nos referimos al método por el que podemos adaptar la interfaz de una web a distintos anchos de pantalla, como los de las tablets y móviles.

El diseñador web ha sido el primero de los profesionales de la imagen que lo ha tenido que estudiar con detenimiento para poder aplicarlo en su trabajo. Así, por poner un ejemplo, todas las imágenes de una página web que vemos en un portátil que tenga un ancho de 1200 píxeles, sí hemos hecho el responsive adecuadamente también tienen que poder visualizarse cuando entremos a ese misma página web desde un móvil que tenga 380 píxeles de ancho.

Dado que el móvil es el dispositivo con el que más accedemos a Internet en la actualidad, la importancia de adaptar la marca es vital para tener una buena imagen en la Red.

Por este motivo, el diseñador gráfico también tiene que saber qué es eso del responsive, entender cómo funciona y saber aplicarlo a la creación de nuevas marcas, o a la hora de asumir el rebranding de muchas de ellas.

Los ejemplos nos ayudarán a comprender de forma más clara los principios básicos del logo responsive. Veamos lo que han hecho algunas grandes marcas.

Simplificar

La idea de simplificar la marca nos es nueva y ni mucho menos viene motivada por el diseño responsable.

Cualquier diseñador gráfico entiende la necesidad de hacer que una imagen sea fácil de recordar y que se pueda escalar para ser aplicada en distintos soportes en papel.

logos-apple-antes-y-despues

Apple sólo tardó un año (1976-77) en cambiar su identidad. Cuarenta años después, sigue conservando esa forma.

Lo que sí podemos atribuirle al responsive es el auge de la tendencia hacia el diseño plano (flat design).

Esta búsqueda de la simplificación en formas y colores ha calado en muchas marcas del propio sector de Internet, que han tenido que replantear sus identidades para adaptarse mejor a los dispositivos móviles. Spotify ha realizado esta adaptación de forma progresiva.

spotify

Simplificación de la imagen de Spotify en 2013.

spotify2015

En 2015 renuncia al degradado buscando una nueva paleta de color.

Otros ejemplos de renovación en distintos sectores que se inclinan hacia el diseño plano la hemos podido ver recientemente en Endesa y MarterCard.

endesa

Endesa también ha eliminado detalles de su imagotipo para crear un nuevo logo menos recargado.

mastercard

Tras 20 años MasterCard se renueva para adaptarse a los móviles.

Crear iconos

La simplificación puede ser más radical, como es el caso de Twitter, que eliminó la parte nominal para quedarse sólo con el isotipo.

evolucion logo de twitter
En el caso de Twitter, la imagen del pájaro como icono, sigue siendo reconocible y perfectamente adaptable a todo tipo de aplicaciones, como perfiles de redes sociales, icono de acceso a aplicaciones móviles o botón dentro de una interfaz web.

Flexibilidad y dinamismo

Quizá el responsive nos está llevando a pensar de una manera diferente cuando tenemos que plantearnos una marca: en vez de verla con la rigidez de antaño, cuando era inquebrantable en su forma, ahora podamos verla cambiar y adaptarse sin problemas a muchas situaciones derivadas de los distintos dispositivos y su uso.

google-elementos
El caso de Google, que rediseña su marca en 2015, es un ejemplo de marca dinámica, donde la identidad se puede transformar y estar representada por tres elementos distintos.
1. Por un lado, está el logotipo con una fuente sin serifa y más rotunda que la original.
2. También apuestan por tener un isologo a modo de icono representado por una G más gruesa y manteniendo los colores corporativos.
3. Pero el elemento más curioso son los puntos, a modo de isotipo, ya que está ideado en continuo movimiento: se trata de un objeto dinámico que señaliza cuando Google está trabajando para ti.

google-dots

Este puede ser otro de los pasos a seguir para las nuevas identidades, no sólo cambiar para encajar en distintos soportes, si no ser animada para comunicar mucho más en nuestras pantallas.

Logo responsive

Como resultados de todos los apartados anteriores, podemos acercarnos a la conclusión final viendo el caso del Whitney Museum of American Art.  La transformación de la identidad está directamente relacionada con el ancho del soporte en el que va a aplicarse.

whitney-varios

whitney

El diseñador de interfaces Joe Harrison hace su propia interpretación de marcas muy conocidas si se adaptasen al responsive en la web ResponsiveLogos.

logos_responsive

En conclusión, cuando el diseñador web empezó a realizar todos sus nuevos trabajos, acepto el hecho de que ya todo debía ser responsive; es una mayor carga de trabajo y no vas a cobrar más por ello.

El diseñador gráfico debe asumir el mismo hecho, sus nuevas identidades tienen que ser responsive por la simple razón de que es lo que haría un buen profesional, aunque no vayas a cobrar más por ello.

1 comentario en “Logos responsive: optimizar la marca para dispositivos móviles”

Dinos lo que piensas

Tu email no se mostrará ;)