Próxima Parada: Iconos Adaptativos

Honestamente, este tema me sonaba algo raro cuando empecé a aprender sobre la iconografía adaptativa, ya que hace poco que hemos adaptado las fuentes de iconos para asegurarnos de que se escalan bien en los diferentes dispositivos. Sin embargo, la idea de los iconos adaptativos lleva un paso más allá, mucho más allá, la iconografía y el diseño adaptativo.

¿Qué son los llamados iconos adaptativo?

Iconos adaptativos no significa que el ancho de la pantalla determina como de grandes se muestran los iconos; de hecho significa que se muestra un cono diferente en base al tamaño en el que se presenta. Esto significa que el tamaño de la pantalla no importa pero el tamaño de los iconos sí. Esto es porque algunos iconos se mostrarán en distintos tamaños – al mismo tiempo, en la misma pantalla.

La diferencia entre iconos no será otra que la calidad de los detalles que se muestran. Estamos hablando de tener un montón de detalle en el icono que se muestra en grande, digamos 500px x 500px, algo menos de detalle en el icono que se muetra a 250px x 205px y el minimo detalle posible en el icono de 25px x 25px. Estoy seguro de que puedes imaginarte que un solo icono puede resultar aburrido y rendearse mal/feo si tienes un icono grande y lo muestras muy pequeño.

responsive-icons-animation

¿Por qué es importante?

Con el boom de las fuentes de iconos, webs adaptativas y diseño minimalista nuestros estilos han cambiado para implementar los iconos planos mucho más en nuestros diseños. Ahora, no estoy diciendo que haya nada malo o que todos los diseños tengan que utilizar fuentes de iconos planos, sino que los que lo hacen, pueden llevarlo un paso más allá.

Al crear iconos adaptativos estamos llevando la iconografía completamente a un nuevo nivel que ayuda a crear mejores experiencias, mejor usabilidad y mejor diseño visual para los usuarios. Al adoptar los iconos adaptativos la idea es crear una mejor web, lo cual todo el mundo quiere y necesita para ti como diseñador y tus usuarios.

a

¿Dónde encaja Iconic aquí?

Iconic es un product que si no has oido hablar de el, al menos lo habrás visto en uso ya que crearon un conjunto de iconos que se ha hecho muy popular. El equipo de Iconic se ha zambullido en la creación de iconos adaptativos; ellos son la fuerza detrás de este nuevo movimiento.

d

Recientemente Iconic ha lanzado y completado con éxito una campaña en Kickstarter donde recibió 92.624$ – si, has leído bien – que es el 628% de lo que pedían (solo necesitaban 15.000$). Con este dinero, han podido investigar métodos y técnologias, lo que les permitirá desarrollar los iconos adaptativos que no es nada fácil. Básicamente, lo que quieren conseguir es revolucionar la iconografía web.

“Solo porque una imagen sea escalable no significa que será legible a cualquier tamaño. La mayoría de los elementos visuales tienen un punto cómodo en terminos de legibilidad — los iconos no son diferentes en este aspecto. Para conseguir un rango más amplio de legibilidad, cada icono será diseñado con diferentes tipos de detalle para que se vean bien en tres tramos de tamaño: pequeño, mediano y grande.”

¿Qué dirección tomar ahora?

Hay varios caminos que se pueden tomar para crear e implementar los iconos adaptativos. Veamos algunas de las maneras que Iconic ha revelado como posibles soluciones.

Media queries

La opción más simple y obvia es crear media queries y emparejarlas con las fuentes web. La idea es que aunque cada icono – los que tienen más y menos detalle – tiene su propio grosor de fuente (como 200, 400 o 600) y que son de hecho parte de una fuente; por lo tanto, cuando redimensionas el navegador puedes cambiar el grosor de la fuente (font-weight) utilizado en una pantalla con un ancho en particular para tener el icono apropiado a la vista.

Sin embargo, este método se queda corto cuando quieres precisión. Según parece, las media queries siguen siendo un concepto clave para traer varios iconos en diferentes condiciones, sigue leyendo para saber a que me refiero con esto.

c

Element query polyfills

No estoy seguro de si sabes lo que son los element query polyfills así que déjame explicarlo rápidamente. Puedes pensar en esto como si fueran media queries que se establecen sobre los elementos en vez. Tomemos el siguiente ejemplo, lo que significa es que cuando el footer es al menos 250px de ancho, haga su fondo blanco. De alguna forma, es una versión mucho más directa y concisa de las media queries.

<code class="css plain">footer[min-width~=”</code><code class="css value">250px</code><code class="css plain">”]{
</code><code class="css keyword">    background</code><code class="css plain">: </code><code class="css value">#fff</code><code class="css plain">;
</code><code class="css plain">}
</code>

 

La idea del element query es un concepto nuevo que aún no está soportado por los navegadores pero funciona si lo implementas con JavaScript. Encontrarás más información aquí.

La idea, que Iconic persigue con los element queries, es muy similar a la de las media queries donde cuando el tamaño del icono cambia – su grosor de fuente también lo hace dando así el icono apropiado. La razón por la que este es un concepto revolucionario es porque combinando element queries con media queries permite seleccionar el icono correcto en el momento correcto de una manera muy especifica.

b

Puntos de rotura SVG

Esta es la tercera y última manera de la que Iconic ha hablado publicamente, los puntos de rotura del SVG. La idea con los puntos de rotura del SVG es interesante – aquí ya piensan en una perspectiva lejana. El SVG permite el control dinámico sobre los elementos e iconos así que esto llevaría la iconografía estática al siguiente nivel una vez más. Imaginemos esto combinado con media queries donde el icono puede ser cambiado independientemente del tamaño de la pantalla. Sin embargo, esto queda algo lejano ya que los puntos de rotura del SVG son complicados de integrar con el DOM en este punto.

¿Qué esperar?

Lo que Iconic persigue es un salto en la innovación en lo que a la iconografía web se refiere; y esperemos que lo consigan, ¡y pronto! Según su campaña de Kickstarter, prometen entregar un conjunto de herramientas de código abierto para facilitar la personalización y la eficiencia. Estas herramientas permitirán la integración de iconos vectoriales a los conjuntos que ellos mismos incluirán.

Por encima de todo, están intentando revolucionar los iconos una vez más. Una cosa que mencionaron en su campaña es el deseo de reinventar las convenciones actuales pero pasadas de moda como los disquetes. El equipo de Iconic se prepara para corregir estos aspectos desfasados del diseño; Tengo los dedos cruzados, ya que es un reto infernal.

Conclusión

En pocas palabras; Te he resumido una tecnología que está por llegar y que hará la web mucho mejor. ¿Puedes imaginar el tipo de experiencias que podremos crear? ¿Puedes imaginar la usabilidad o la innovación que esto dará la UX? Tengo grandes esperanzas en lo que Iconic está haciendo. Les deseo la mejor de las suertes ¡y que lo terminen lo antes posible!

Desarrollador php especializado en convertir un buen café en código. Amante de JavaScript, Laravel y WordPress. Adicto a cualquier herramienta que acelere el desarrollo web. Sígueme en Twitter @zreedee.

Boletín de noticias

0 Comentarios

No hay comentarios aún

Deja tu respuesta

*
* Longitud mínima: 20 caracteres