Seleccionar página

Durante la redacción de mi anterior artículo las 12 tendencias en el diseño web para 2014 descubrí una nueva técnica para adaptar el tamaño y diseño de los iconos de una web a los diferentes dispositivos que usemos, tales como ordenadores, tablets o móviles smartphones.

Puedes probar haciendo un resize del navegador en está página

Chulo, verdad? Los iconos responsive muestran un icono distinto para diferentes tamaños de pantalla. Esto es lo que hace que tengan un nivel de precisión y detalle personalizado.

Un icono que se muestre en una pantalla grande mide 500px x 500px y tendrá más detalles, que por ejemplo, con otra resolución y una medida de 250px x 250px con menos detalles.

iconos-responsive-movilEn el ejemplo que cito se muestra un icono de una casa. En un smartphone, como en mi Samsung Galaxy S2, será un simple triángulo y un cuadrado (ver imagen). Para pantallas más grandes, el icono puede tener más detalle y ya muestra una chimenea con el pequeño triángulo y rectángulo. Para pantallas aún más grandes, el icono de la casa tiene sombras, ventanas, pomo de la puerta de entrada y hasta garaje en la parte trasera.

¿Cómo se consigue crear un icono redimensionable?

icono-svg-illustratorEl formato usado en el ejemplo es un archivo SVG que son las siglas de Scalable Vector Graphics, que traducido al español es Gráficos Vectoriales Redimensionables.

Es un formato que desde el 2001 se adaptó para los móviles y que buscaba solucionar el problema de la pérdida de definición que una imagen sufría cuando cambiaba de tamaño o redimensionaba.

Las imágenes en SVG permiten diseñar vistosos gráficos vectoriales y con un peso muy compactado, todo lo contrario al popular formato en mapa de bits. La imagen de la casa en realidad no deja de ser un sprite para que la web cargue una sola imagen con todas las variantes. En la imagen muestro como está diseñado el icono home_sprite.svg en Adobe Illustrator.

Por medio de media queries en CSS3 se van mostrando las diferentes versiones de la casa cambiando la posición en pixeles de la propiedad CSS background-position del SVG por rango de tamaño (medido en em, que equivale al tamaño en puntos del elemento que se usa)media-queries-iconos-responsive

En otro ejemplo de iconografía responsive todos los iconos se añaden a la misma fuente. Esto permite que el tamaño varie según el peso (Iconic-Large.otf, Iconic-Medium.otf, Iconic-Small.otf). Cada icono se puede cambiar modificando el font-weight del CSS3. En la demostración, los iconos responden al ancho de la pantalla.

¿Por qué centrarse tanto en los iconos?

Sobre todo para crear páginas más elegantes y menos aburridas y que ofrezcan un mejor diseño visual para los usuarios. Una forma de destacar y ser diferente del resto.

Artículos de interés

Si te ha gustado comparte en:

Enviar comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.