Ya no existen Aplicaciones o Sitios Web profesionales que no posean
un set de íconos que acompañen a las acciones más comunes o
trascendentes dentro de los mismos. Son la mejor forma de sintetizar lo
que se espera de una interacción determinada por parte de un usuario en
nuestra aplicación, además de servir para embellecer el diseño
propuesto. Por último, y no menos importante, ayudan (y mucho) a mejorar
la usabilidad de nuestros entornos, utilizando representaciones
gráficas ya globalmente estandarizadas que hacen a nuestras aplicaciones
más intuitivas y fáciles de aprender. Todo esto hace que trabajar con
íconos sea hoy en día imprescindible.
Cuando únicamente se dispone de “mapas de bits” para llevar estos
íconos a la pantalla del usuario, -y sugiriendo que no se pretende tener
más de una imagen y programar una lógica que elija cuál mostrar-,
sucede que, a la hora de diseñar aplicaciones responsive, empiezan a
aparecer las dudas acerca de cuál es el tamaño óptimo de esa imagen para
todas las resoluciones a las que está dirigido el diseño. De ello
resulta que para resoluciones superiores necesito una imagen de mayor
tamaño, que consecuentemente va a pesar más, que no es óptima para un
dispositivo móvil; a su vez, este dispositivo móvil no necesita una
imagen tan grande, y puede que necesite conectarse a conexiones más
lentas en las que el peso total de la aplicación incide sobre el
rendimiento. Sucede lo mismo a la inversa: una imagen óptima para un
dispositivo móvil, pierde definición en un monitor de escritorio, por
poner un ejemplo. Y esto solamente sin sumar cómo se renderizan algunas
imágenes en pantallas de distinta densidad de píxeles, o con píxeles que
no son cuadrados u otros detalles derivados del “Pixel Ratio”, etc.
Por ende, la mejor opción para resolver buena parte de la base del
diseño de nuestra aplicación, es llevar nuestros iconos embebidos en
Icon Fonts, lo que nos garantiza compatibilidad con la mayoría de los
dispositivos móviles y navegadores de escritorio. Los Icon Fonts son
básicamente fuentes de texto como los Arial, Times New Roman, etc. Sólo
que en lugar de letras se trata de símbolos. Esto conlleva una serie de
ventajas:
Los Icon fonts son bastante más livianos que los iconos generados como imágenes.
Como son fuentes de texto se pueden manipular de la misma manera que a
un texto con CSS. Con un color: #00F; consigues un icono azul. Con
font-size:2em; tienes un icono responsive y controlas su tamaño, etc
etc. Esta es probablemente su mejor característica.
No importa el tamaño; nunca se pixela.
Pero mejor que hablar de sus prestaciones, es mostrarlas:
Cómo construir mi propio Icon Font
Para ello, usaremos algún sistema online como IcoMoon o IconVault,
que nos permite subir los archivos con nuestros íconos y el sistema se
encarga de devolver el paquete que contiene los archivos con las fuentes
tipográficas y la hoja de estilos que las instancia. En nuestro caso
usaremos IconVault. Para esto tendremos que trabajar nuestros diseños
con un programa de diseño vectorial como por ejemplo Adobe Illustrator o
Corel Draw, y utilizar una plantilla (que podés descargar acá) para
exportar cada icono por separado a archivos SVG.
Una vez que tenemos todos nuestros SVGs, los comprimimos en un
archivo ZIP y lo subimos a IconVau.lt/app. Luego de finalizar el
proceso, podremos descargar nuestra tipografía terminada en un archivo
comprimido que contiene todos los archivos tipográficos en los
diferentes formatos compatibles (TTF, EOT, SVG y WOFF), una hoja de
estilos ejemplo en CSS que muestra cómo instanciar nuestros IconFonts y
un index.html para ver los resultados y probarlos.
¡Y listo! Ya tenemos nuestros IconFonts listos para nuestra
aplicación. Los animo a probar sus fuentes en sus diseños responsive con
unidades relativas al “view port” (como por ejemplo “vw” y “vh”) y ver
cómo se adaptan los tamaños de los iconos a las diferentes resoluciones.
miércoles, 19 de agosto de 2015
Suscribirse a:
Enviar comentarios
(
Atom
)
Everyone knows that now the majority of them sit on the Internet through their phones, but not all sites have a mobile version, I want to offer you optimize their sites, and how can you do it all, just visit this resource shopify mobile theme
ResponderEliminar