El responsive design llega al branding

Abel Ramírez Rivero

Diseñador Industrial.

Abel Ramírez Rivero

@AbelRRDesign

BehanceAbelRRDesign

¿Qué son los logos responsive?

Los logos responsive tienen su origen en el concepto de web responsive y son imágenes con propiedades de respuesta. Por ejemplo, para una visualización a pantalla completa en un iMac de 21” mostrará un gran logo de cabecera con mucho detalle, y al visualizar el logotipo en un iPhone mostrará una versión simplificada de menor tamaño que el anterior.

Logos responsive, web responsive, diseño responsive, responsive, processing, Tonangeber, Joe Harrison, archivo SVG.

Ejemplos de logos responsive para las marcas Coca-Cola, Chanel o Nike

Esto es necesario porque hoy en día conviven múltiples dispositivos con diferentes tamaños de pantallas que requieren diferentes interfaces. El usuario no visualiza el contenido siempre en el mismo formato, por lo que la web se tiene que adaptar para garantizar la accesibilidad del contenido.

¿Cuál es su fundamento técnico?

Su fundamento técnico radica en que son archivos en formato de imagen SVG (Scalable Vector Graphics), los cuales presentan numerosas ventajas a pesar de ser muy poco utilizados y muy desconocidos. No se componen de mapas de bits como un JPG o un PNG si no que almacenan la información suficiente para reproducir los gráficos. Entre sus principales ventajas encontramos que:

  • Es escalable, puede ampliarse y reducirse sin perder calidad.
  • Pesan muy poco, por lo que se cargan rápidamente en una web.
  • Es un formato estándar que funciona en cualquier navegador hoy dí
  • Es abierto y está basado en XML (permite su control mediante código).
  • Soportan estilos CSS (como los que se utilizan para dar forma a una web responsive) que permiten modificar el gráfico diná
  • Pueden incluir imágenes en mapa de bits.
  • Permiten interacciones tipo rollover.
  • Pueden incluir tipografías True Tipe y Typo 1 dentro del mismo archivo SVG.

Lo importante de la utilización de este tipo de archivos SVG es que se plantea como una alternativa al formato Flash. Permite realizar más funciones que este y sin embargo no presenta tantos problemas de compatibilidad y soporte.

Además, al ser un tipo de archivo de formato abierto, evitamos depender de las decisiones de las grandes marcas del sector como Adobe, propietaria de Flash. Por lo tanto al utilizar archivos en formato SVG estamos potenciando un sistema que nos beneficia a todos y permite un desarrollo del diseño más abierto.

¿Por qué se traslada a las marcas el diseño responsive?

Las marcas necesitan hacerse cada día más sofisticadas y flexibles para adaptarse  a los diferentes formatos digitales. Hace ya un tiempo que se desarrollaron las primeras marcas cambiantes o marcas mutantes, en las cuales un software generativo de código abierto, como processing, crea un sistema visual compuesto por imágenes con una identidad común.

Un buen ejemplo de ello es Tonangeber.

 Logos responsive, web responsive, diseño responsive, responsive, processing, Tonangeber, Joe Harrison, archivo SVG.

Tarjetas con imágenes generadas con processing para Tonangeber.

La diferencia de los logos responsive con las marcas cambiantes radica en el concepto. El software de las marcas mutantes se ha programado para diseñar una gráfica aleatoria en base a una identidad gráfica concreta, sin que se tenga en cuenta su tamaño necesariamente. Sin embargo los logos responsive modifican su tamaño y apariencia para adaptarse al formato de visualización en las diferentes pantallas.

 ¿Qué ventajas aporta el responsive design?

Los logos responsive suponen una gran ventaja tanto para el diseñador como para el cliente. Como los archivos SVG son programables, se pueden definir un estilo en concreto para un logotipo y entregárselo al cliente con la seguridad de que sea cual sea el tamaño no habrá problemas en su aplicación ya que la adaptación es automática.

 Eso mismo ocurre con el cliente, el cual recibe un archivo al que solo debe modificarle el tamaño y no preocuparse de respetar el aire marcado por el diseñador o mantener las proporciones establecidas en la guía de estilo. Además, podrían también evitarse errores a la hora de imprimir si las imprentas comienzan a trabajar con este tipo de archivos.

 En otras palabras, la aplicación de la tecnología SVG  podría hacer desaparecer los manuales de uso y aplicación del logotipo en un futuro no muy lejano.

Un ejemplo de logos responsive

Un buen ejemplo de aplicación diseño de logos responsive lo encontramos en el proyecto experimental de Joe Harrison (http://responsivelogos.co.uk).

El trabajo de Joe Harrison ha sido aplaudido y criticado al mismo tiempo. Las criticas dicen que los logotipos ya deben ser escalables, y que no entienden que tiene de nuevo el asunto. Piensan que solamente es un juego de palabras en las que el autor ha utilizado la terminología responsive para hacer más notorio y visible su trabajo.

Otros confunden el proyecto con una aplicación de web responsive. La diferencia radica en que en una web se programa el código CSS para que en función del tamaño de visualización muestre una u otra imagen,  en este caso es el propio archivo SVG el que realiza esa función.

Sin embargo, hay otro gran número de personas que apoyan y felicitan a Joe por su proyecto ya que consideran que es una buena reflexión que puede desembocar en una nueva forma de proyectar marcas.

En mi opinión, el proyecto es muy interesante, ya que plantea y da solución a un problema al que se enfrentan hoy en día las marcas: la flexibilidad y adaptabilidad. Si bien es verdad que algunos logotipos no se han resuelto correctamente, como es el caso de Nike.

Nike Air es un subproducto de la marca Nike, y por tanto si retiramos el Air del logotipo no estaremos comunicando sobre dicha submarca y por tanto perderá completamente el significado, si queremos anunciar la nueva generación de zapatillas Nike Air Max 1, lo más apropiado sería dejar Air en lugar del Swosh cuando necesitemos simplificar la marca al máximo. Sin embargo, a pesar del posible error de aplicación de la marca, este ejercicio nos ayuda a comprender el concepto de logo responsive.

 Logos responsive, web responsive, diseño responsive, responsive, processing, Tonangeber, Joe Harrison, archivo SVG.

Ejemplo de logo responsive para Nike.

Los logotipos Disney o Guinness presentan elementos característicos y genuinos de la marca como son el Castillo de Disneyland o el arpa irlandesa. Estos aportan mucho significado a la Identidad Visual Corporativa en forma de historia, que ayuda a definir a la marca o habla de sus orígenes.

 Logos responsive, web responsive, diseño responsive, responsive, processing, Tonangeber, Joe Harrison, archivo SVG.

Ejercicio logo responsive para Walt Disney.

Lo interesante es que cada uno evoluciona de manera muy diferente, en el caso de Walt Disney, la marca pierde su símbolo y se apoya finalmente en la palabra Disney ya que es mundialmente conocida y posee una tipografía muy característica. Sin embargo, me parece mal resuelta la simplificación excesiva del logotipo de Disney únicamente a la D inicial.

 Logos responsive, web responsive, diseño responsive, responsive, processing, Tonangeber, Joe Harrison, archivo SVG.

Ejemplo de logo responsive para Guinness.

En el caso de la cerveza irlandesa, lo que permanece inalterable a la hora de reducir el imagotipo es el símbolo del arpa. Lo mismo sucede con Victorinox, su imagotipo se reduce en el símbolo del escudo. En ambos casos me parece mucho más acertada la reducción final.

 Logos responsive, web responsive, diseño responsive, responsive, processing, Tonangeber, Joe Harrison, archivo SVG.

Ejemplo de logo responsive para Victorinox.

El diseño responsive comenzó aplicándose al diseño web pero conforme la tecnología avanza permite que este se expanda a otros sectores del diseño gráfico. La revolución ha llegado ahora al mundo de las marcas y parece que la forma que tenemos de proyectar marcas sufrirá un gran cambio cuando vemos trabajos como Tonangeber o logotipos proyectados en archivos SVG.

 La sofisticación a la que aspira el sector parece no tener límites y lo que está claro es que hay que estar muy atento para no quedarse rezagado. ¡Renovarse o morir es la cuestión!

Anuncios

3 Respuestas a “El responsive design llega al branding

  1. Pingback: Aquí os dejamos las LECTURAS RECOMENDADAS para la próxima semana | Tendencias e Innovación OBS·

  2. Pingback: El Responsive design llega al Branding | Aula de Diseño Gráfico·

  3. Pingback: Coolhunting en España, ahora desde una misma plataforma | Asociación andaluza de Coolhunting·

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s