Las tipografías de iconos son una manera perfecta para incorporar gráficos escalables en el diseño de tus Aplicaciones para Móvil Nativas y Aplicaciones web (WebApp).
Debido a la gran variedad de dispositivos y por tanto de resoluciones de pantalla ha llegado un momento en el que es difícil manejar imágenes gráficas que se comporten de una manera correcta.
Partimos de la idea de que es muy importante el diseño de los iconos, especialmente para aplicaciones móviles, ya que de un vistazo deben aportar la información suficiente para dar pistas al usuario de qué hay detrás de ellos. Muchas aplicaciones sustituyen los textos de los botones por iconos para aprovechar al máximo el espacio disponible y esto significa que los diseñadores tienen una gran oportunidad de demostrar sus dotes de síntesis y expresión gráfica. Sin embargo, una vez que se han creado viene la ardua tarea de adaptarlos a los diferentes tamaños, resoluciones y dispositivos en que se mostrarán.
Por esta razón los diseñadores y desarrolladores con el tiempo vamos huyendo de los iconos basados en imágenes basadas en píxeles para dar paso siempre que sea posible a las fuentes basadas en vectores, y esto por unas cuantas razones de peso. A bote pronto algunas de ellas son las de trabajar con archivos de tamaño manejable, sin límite de adaptación para un sinfín de tamaños de pantalla y la ventaja de que con trabajos desarrollados por un equipo amplio, el control sobre los gráficos es mucho mayor.
Otro aspecto a tener en cuenta es el de los tiempos de carga y la proliferación cada vez mayor de pantallas retina, que obligan a basar cada vez más los efectos CSS en gráficos vectoriales para poder ofrecer un diseño web de alta calidad para cualquier tipo de usuario y dispositivo. Una ayuda nos ha venido de los navegadores que gracias a sus mejoras soportan fuentes personalizadas. Esto ha hecho que muchos diseñadores opten por convertir sus diseños de iconos en tipografías web. Además, de crear pensando en la posterior utilización y su trabajo de adaptación a diferentes dispositivos, han podido pasar a centrarse en la creatividad y la mejora de la experiencia del usuario (UI).
Estas son las ventajas de las tipografías de iconos frente a las imágenes de mapas de bits:
- Tamaño: No es necesario enviar diferentes formatos de la misma imagen de icono con el consiguiente ahorro en peso a descargar. Existe sólo un archivo de poco peso que se carga al iniciar la aplicación.
- Facilidad de uso: Una vez conocida y adoptada la manera de trabajar con ellas, la utilización de tipografías de icono es bastante útil y fácil. Existen muchas herramientas que ayudan en la incorporación de las mismas a cualquier plataforma móvil, navegador web o dispositivo.
- Escalabilidad: Los iconos basados en tipografías son independientes de la resolución y por lo tanto se pueden escalar a cualquier tamaño. Se verán nítidos incluso en pantallas retina y permiten estar preparados para cualquier dispositivo.
- Facilidad en el mantenimiento: Al pertenecer todos los iconos a un único archivo de tipografía, la gestión en los cambios de los iconos se resuelve con la modificación o ampliación de un único archivo de forma natural.
- Interactividad: La capacidad de manipulación de las fuentes a través de código permite que se puedan modificar los iconos para la creación de animaciones y efectos de forma sencilla y sin exigir un mayor esfuerzo a la aplicación.
- Flexibilidad: De igual manera, el cambio de su aspecto en cuanto al color, tamaño o apariencia se logra fácilmente con pocas líneas de código.
Conclusión
La utilización de fuentes de iconos puede tener un gran impacto en tu desarrollo de aplicaciones móviles nativas y webapp. Puedes olvidarte de tamaños de pantalla, resoluciones, tiempos de descarga… Y empezar a idear efectos, animaciones y cambios de aspecto de los iconos y vectores en tiempo real.
En definitiva ganar en la calidad de tus proyectos debido a un menor esfuerzo de desarrollo y la obtención de mejores resultados.
Comentarios