Sobre los nuevos íconos y las pantallas HiDPI

Como habrán notado muchos usuarios, las últimas actualizaciones de ZinjaI y PSeInt presentan sets de íconos renovados. El cambio es simple pero se nota, y hasta he recibido buenas críticas al respecto. Además de buscar actualizar un poco el tema de íconos, este cambio viene de la mano de otro más funcional, que es el soporte para pantallas HiDPI.  Los que tengan notebooks con pantallas 1080p o más deberían haber notado, si usan Windows o Mac, que el texto se ve "mal/feo" (como pixelado, o con un anti-aliasing muy berreta), o, si usan GNU/Linux, que todo se ve muy pequeño. Lo segundo es más fácil de entender/imaginar, pero lo de Windows tiene sus aristas.


Primero, la cuestión más "estética". En mi defensa debo decir que soy un programador y no un diseñador, así que admito que en líneas generales los íconos de mis aplicaciones son horribles. Y para peor son realmente muchos en el caso de ZinjaI. Mi empecinamiento en que toda acción tenga su ícono se debe a que eso es lo que permite colocar dicha acción en la barra de herramientas. Y me parece importante que cada uno pueda poner a mano lo que más usa y personalizar el entorno a su antojo (aunque me sorprende la baja cantidad de usuarios que realmente lo hace, pero eso es para otro post).

Entonces, partiendo de la base de que son feos y necesito más variantes de lo que da mi imaginación; intenté analizar objetivamente cual es la tendencia, el denominador común de las imágenes y de los íconos en las aplicaciones que se ven "bien" para los usos y costumbres actuales. Y creo distinguir algunas propiedades relativamente claras y objetivas que puedo aplicar en mis íconos: 1) se buscan íconos minimalistas (simples, poco cargados); 2) ya no se estila que las formas tengan bordes (a menos que se busque un efecto cartoon, se usan formas sólidas, de un solo color); y 3) colores pasteles (poco saturados), y pocos en lo posibles (paletas reducidas, o hasta monocromáticas).

Set de íconos de elementos de menúes y barras de herramientas actual de ZinjaI

Lo de minimalista se me complica porque son demasiados íconos (más de 170) y entonces enseguida me quedo sin ideas/metáforas/diseños. No encuentro tantas variantes simples y fáciles de distinguir a la vez. Y asociado a esto mismo, está el hecho de que uso muchos colores, porque me ayudan a agrupar y distinguir sub-conjuntos de íconos relacionados. Entonces, lo de monocromáticos tampoco se me hace viable; pero lo de tonos pasteles podría ser. Y es, de hecho, el próximo paso en el rediseño.

Lo que sí hice fue sacar todos los bordes (¿porqué será que si ahora disponemos de más definición nos empeñamos en no utilizarla?) y ese es por ahora el único cambio aplicado. Pero se nota, y creo que queda mejor. Sin embargo, esto trae algunos problemas. Los bordes usualmente eran de colores que hacían contraste con el contenido, entonces ayudaban a distinguir las formas. Ahora un ícono de una hoja en blanco no funciona si el fondo del botón es muy clarito... Entonces tengo que agregar algún detalle que resalte la forma en ese caso (por ejemplo, una sombra). Así que no es simplemente seleccionar todo y quitar los bordes... pero casi.

Primer implementación de íconos nuevos y más grandes en PSeInt.

En esta captura faltan algunos detalles como la sombra para realzar el borde de la hoja en blanco.

A esta altura es importante mencionar el proceso de creación de los íconos. Hasta hace poco, cada ícono nacía a la par de su funcionalidad. Lo dibujaba en Inkscape (vectorial) y luego lo exportaba a mano a las diferentes resoluciones. Es razonable cuando tengo que hacer pocos íconos y tampoco hay tantas resoluciones. Pero de golpe tenía que rehacerlos todos (por lo de sacar los bordes) y hasta agregar una resolución más (para lo de HiDPI). Y entonces dejó de ser buena idea hacerlo a mano. Por suerte Inkscape permite exportar desde la linea de comandos, así que, como siempre, la solución fue un script de bash. Fue un trabajo tedioso encuadrar todos los íconos, y definirles un id para poder seleccionarlos al exportar desde la linea de comandos. Pero un trabajo de una sola vez, y ahora con un script regenero todos los íconos y en todas sus resoluciones en un paso. Así que será más fácil ir evolucionando el tema en las futuras versiones.


Y entonces ahora vamos a lo de HiDPI. Son las pantallas que tienen resoluciones "muy altas" para su tamaño real (por ejemplo, una notebook de 13" a 1920x1080), y entonces los píxeles son tan chiquitos que si usáramos las mismas escalas en pixeles que las pantallas "comunes" (las viejas de toda la vida) las cosas se verían demasiado pequeñitas. Para que las aplicaciones que no consideraron este problema se vean a un tamaño legible, Windows y Mac hacen algo más o menos razonable (en pos de la maldita "backward-compatibility"), pero que da un resultado sencillamente horrible: renderizan al tamaño original (en pixeles) y escalan (estiran) el resultado. Los escalados de Mac con sus pantallas Retina, y de Windows 10 son especialmente malos (en Windows 7 no se veía taaan mal). Para evitarlo, la aplicación debe avisarle al sistema que es consiente de la definición y que se hará ella responsable de escalar lo que deba.

Nota al margen: me sorprende no haber recibido quejas al respecto; lo noté recién cuando cambié mi notebook y empecé a trabajar yo mismo con una de estas pantallas. Duelen los ojos de verlo.

Antes y después de hacer a ZinjaI "pdi-aware". Alcanza con ver la diferencia 

en el de la izquierda entre la fuente del título de la ventana y la del el menú.

En GNU/Linux, los textos se ven bien, el sistema toma los tamaños de fuentes en puntos (no pixeles) y entonces renderiza la fuente al tamaño real adecuado (directamente, sin escalado, no se porque Windows y Mac no hacen lo mismo). Pero usualmente no se hace cargo de íconos, tamaños de ventana, etc. Entonces, ahí nuevamente debe intervenir el programador. En mi caso averiguo los DPI, y si son más de lo "habitual", defino por defecto una tamaño de íconos más grande que si no lo fuera; y también agrando los anchos y altos de algunas ventanas y paneles. En Mac, todavía no hago nada ya que no he podido probarlo y no se aún como avisarle eso de que soy "dpi-aware".


En resumen, creo que la estética va mejorando un poco (dentro de mis limitaciones como mal artista), y que seguro que será un buen paso adelante para los que usamos estas "nuevas" pantallas, que serán cada vez más habituales en notebooks. No es todo lo que se requiere para adaptarse completamente, pero es lo más básico y notorio. El cambio en PSeInt ya está publicado completo, en ZinjaI lo de HiDPI está en el repo para la próxima release.