Íconos y logos adaptables para un diseño web «responsive»

«Adaptabilidad» (Responsiveness) se ha convertido en una palabra de moda desde que fue acuñada por Ethan Marcotte en 2010. Marcotte mostró cuántos elementos en una página podrían dinámicamente cambiar su logo a un mejor suit de pequeñas pantallas. Actualmente, el diseño adaptable es más o menos integrado a la web. Ha crecido con el negocio dentro de los principios de crear un logo móvil, optimizado y flexible. Pero parece ser que la esencia de lo que es el diseño adaptable, de algún modo se ha perdido. Aunque el logo se considere el factor más importante, el diseño adaptable es más amplio que solo la organización del contenido en la creación de un sitio web.

El diseño adaptable (o diseño web responsive) tiene que ver con el contexto, por lo tanto, la reducción o racionalización de contenido en una página no es suficiente. Los detalles más pequeños del diseño, como iconos y logos, deberían seguir iguales principios contextuales para crear un sistema de respuesta verdadero.

Los iconos se han convertido en una lengua materna para los dispositivos de hoy en día, y no podemos simplemente asumir que estos «perforarán» los marcos adaptables sin un poco de inspiración. Estos son increíblemente efectivos al comunicar algo en un espacio muy pequeño, y puede trascender el lenguaje, la funcionabilidad comunicativa y el propósito a una audiencia global. Se necesita desarrollar constantemente un cambio y cambiar con los usuarios, tecnología y diseño.

El desafío está en los detalles

La ubicuidad de las pantallas de alta resolución indica que la calidad de los iconos debe ser abordada. Los iconos 72dpi simplemente no se cortan en las pantallas de retina de hoy en día, por lo que se requiere adoptar soluciones basadas en vectores.

 

 

La multitud de dispositivos también plantea desafíos al mostrar iconos. Ya no tenemos control sobre cómo nuestros iconos serán buscados, debido a la amplia gama de tamaños de pantalla. La creación de un único icono que funciona a través de todos estos tamaños puede ser un reto, especialmente si un icono se escala a un tamaño muy pequeño, ya que puede perder tanto su impacto como su legibilidad.

Parece haber una brecha en el pensamiento entre diseños adaptables y el detalle del diseño real de los elementos dentro de la propia disposición.

Hay algunas soluciones que se han ideado para combatir estos desafíos. Un ejemplo es el uso de fuentes para un icono, una técnica eficaz, pero un poco difícil de utilizar con fuentes de Internet a fin a fin de mostrar símbolos. Los iconos con fuentes permiten a los diseñadores mostrar iconos nítidos y legibles a través de diversos dispositivos. El problema es que el nivel de detalle del icono con fuentes es limitado.

Otra opción es usando solo CSS to display icons, lo que significa que necesitarán renderizar si píxeles. Nuevamente, el problema con esta técnica es que el estilo del icono se limita a lo que se puede crear con códigos, y puede ser tedioso de actualiar.

The bottom line is that both these solutions still restrict designers. Often the style of icon—such as color or level of detail—is dictated by the restrictions of the implementation method. This is not in keeping with good user experience, and current techniques do not factor in how icons are read at very large and very small sizes. So there must be a better solution?

La punto es que estas soluciones todavía restringen a los diseñadores. A menudo, el estilo de icono, como el color o el nivel de detalle están dictados por las restricciones del método de aplicación. Esto no va con la buena experiencia de usuario, y las técnicas actuales no tienen en cuenta cómo se leen los iconos en tamaños muy grandes y muy pequeños. Así que debe haber una mejor solución para ello.

Una solución adaptable

¿Y si pudiéramos combinar los principios del diseño responsive con el arte de la iconografía para encontrar el equilibrio perfecto entre sencillez en relación al tamaño de la pantalla? ¿Y si el detalle de un icono pudiera cambiar proporcionalmente en relación con el ancho de la pantalla? ¿Qué pasaría si los iconos fueran más sensibles y se adaptaran al tamaño de un dispositivo?

 

 

Puedes ver una representación visual de los iconos adaptables en Responsiveicons.co.uk. El concepto interroga la complejidad de los iconos y el modo en el que se muestran a través de diferentes dispositivos. Mediante la creación de iconos de imagen en formato SVG  (Scalable Vector Graphic) y que utilizan las consultas de los medios de comunicación, varios iconos se pueden mostrar en diferentes tamaños de pantalla sin pérdida de calidad o legibilidad. El resultado es un icono de respuesta que cambia dinámicamente, y que está perfectamente optimizado para el tamaño y el contexto en el que se muestra.

¿Qué pasaría si el detalle de un icono pudiera cambiar proporcionalmente en relación con el ancho de la pantalla?

Los Pros

• Legibilidad:  Los íconos son más legibles sin estar limitados a un estilo ultra-mínimo al mostrarse en un tamaño más grande. Con iconos adaptables, los diseñadores tienen la capacidad de afinar los iconos para mostrar el «lado dulce» en términos de legibilidad y en varios tamaños.
• Flexibilidad: Los iconos mostrarán variedades de detalle, dependiendo del tamaño de la pantalla. Esto es particularmente útil, ya que hay una gama de tamaños de pantalla para ello. He utilizado el ejemplo de la gama anterior de las pantallas de cine para dar a entender que existen enormes diferencias. Los diseñadores pueden querer iconos sean más ilustrativos en pantallas más grandes.
• Prueba furtura: La naturaleza fluida de los iconos adaptables denotan que estos ya están optimizados para nuevos dispositivos.

Los Contras

• Tiempo: Los iconos adaptables le toman más tiempo al diseñador. Se podría discutir sobre el tema de que la iconografía ya es un proceso que consume tiempo, de modo que, ¿por qué añadir trabajo extra? Diseño web adaptable es un trabajo extra, pero los beneficios de las soluciones flexibles son cada vez evidentes en una escala global.
• Recognition: Una de las preguntas más frecuentes que me han hecho es cómo los iconos adaptables afectan la experiencia del usuario. Si un icono cambia de estilo, ¿esto lo hace más difícil de recordar? La respuesta es, en un principio, tal vez, pero la optimización siempre requerirá diferencias en el aspecto del diseño, ya que los usuarios se vuelven más sensibles a los iconos en diferentes dispositivos, dentro de una marca en particular, este problema desaparece. En todo caso, el icono cambia puede atraer la atención del usuario, volviendo a un usuario más comprometido.

 

El futuro es Contextual

Los iconos son sólo un pequeño aspecto de un cambio más grande en el pensamiento de diseños que responden a diseño de respuesta que incorpora todos los elementos. Tipografía Responsive también es algo que se está explorando, permitiendo fuentes web a convertirse afinados para varias pantallas y dispositivos.

La marca también podría comenzar a alejarse de los principios tradicionales, estáticos y con base de impresión, para unirse a un futuro más escalable, con logos adaptables y marcas que se utilizan en el diseño. Podemos comenzar a ver marcas y diseñadores aflojar su control sobre pautas estrictas para permitir soluciones de logo más flexibles y a punto de ponerse en marcha.

 

 

Hay caminos aún más emocionantes por explorar. Sistemas conscientes de la edad o la cultura de un usuario que podrían permitir la creación de iconos, que se muestran en base a lo que entiende un usuario. Por ejemplo, una persona de 60 años no puede entender las mismas cosas que a alguien en su adolescencia, lo que significa que dos iconos diferentes podrían mostrarse de acuerdo a la identificación de huellas digitales o el reconocimiento facial. Esto podría ayudar a las personas a través de un proceso complejo de una manera que más les convenga.

 

 

Otro ejemplo es pensar en el diseño adaptable en relación con la ergonomía. ¿Qué pasaría si los iconos pudieran cambiar en complejidad según el grado de distancia que se encuentra una persona de un dispositivo? ¿Qué otras tareas podrán hacer en ese momento? Quizá ver televisión, empujar un cochecito o estar sentado en el autobús. Estos contextos se deben considerar si vamos a crear una experiencia verdaderamente eficaz cuando se utiliza iconos.

Conclusión

El hecho de que el concepto de iconos adaptables sea una técnica válida para el futuro, no es algo seguro; pero sí es seguro decir que la creación de soluciones flexibles y escalables, que están optimizadas para hoy y para mañana pueden mejorar la experiencia del usuario y a los productos y servicios que están diseñados para ellos.