Una renovación cuidada de los iconos de Mole

Quería compartir algunas ideas sobre cómo renovar los iconos de un producto: a qué prestar atención y dónde todavía se puede mejorar.

Esta mañana repasé con cuidado los iconos de Mole. Hasta ahora la app usaba los iconos del sistema, que para un producto sencillo me parecen más que suficientes, pero mirando de cerca les faltaba un poco de carácter.

Qué biblioteca de iconos elegir

Después de investigar un poco, las dos bibliotecas que mejor encajan con los iconos de una app eran Remix Icon y Phosphor Icons. Remix la usé mucho para la web, es sencilla y cómoda, pero dentro de una app no me terminaba de convencer, así que cambié a Phosphor, que tiene mucha personalidad y queda muy bien. Alrededor del 70% de los iconos se pudo usar tal cual, y el 30% restante lo dibujé yo pidiéndole a Opus 5.5 que escribiera el SVG, para que el conjunto fuera coherente.

Juzgarlos siempre dentro del producto

En la comparación de arriba quizá la diferencia no se note mucho. Muchas veces hay que poner los iconos en el producto real, y yo también miro cómo funciona junto todo el grupo de iconos de un mismo módulo. A veces cada icono por separado se ve bien y el grupo no, como una cara en la que cada rasgo es bonito pero que en conjunto no termina de encajar. Así que mi consejo es sencillo: cuando cambies los iconos, míralos en el producto real, todos juntos, que es donde salen bien.

Las pequeñas ideas dan vida al producto

Segundo, desde hace tiempo pienso que los productos que hacemos deberían tener alma, una sensación de vida, en lugar de ser el resultado frío de un AI Coding sin ningún pensamiento tuyo. Los detalles pequeños como los iconos son una buena puerta para darle esa vida. Para «Mantener pantalla encendida» usé una taza de café, la metáfora de Caffeine: tu Mac se ha tomado un café y no puede dormirse. «Acerca de Mole» suele llevar una i en un círculo, pero para mí es un hola, así que es una mano que saluda. «Doctor» normalmente tendría un símbolo de diagnóstico, y aquí es un estetoscopio, como un médico que revisa tu problema. En un producto caben muchas pequeñas ideas así, y juntas lo hacen mucho más divertido.

Alineación, tamaño y centrado

Por último, el buen diseño casi siempre vuelve a los mismos principios: alineación, orden y un ritmo bien medido. Conseguir que los iconos, el contenido y los bloques de arriba y de abajo se vean alineados, del mismo tamaño e incluso centrados en vertical, tal como los ve el ojo, exige mirarlos y ajustarlos uno por uno. Eso incluye alinear el texto con los iconos, y cómo tratar caracteres chinos y latinos que de entrada no comparten el mismo centro vertical. Se puede pulir durante mucho tiempo, y me resulta muy interesante.

Algunos ejemplos de esta ronda. La batería al principio era un contorno vacío, igual con cualquier nivel de carga, así que una batería llena parecía vacía; ahora se llena por cuartos. Los iconos de los menús seguían al principio el tamaño de los iconos del sistema y se veían demasiado grandes y gruesos; de 14,3 pt bajaron a 12,5 pt, todavía algo grandes, y se quedaron en 11 pt. Unos iconos se dimensionaban por su ancho y otros por su lado más largo, así que la escoba y la flecha de cerrar sesión, altas y estrechas, se veían grandes, mientras que el insecto y la gráfica de líneas, anchos y bajos, se veían pequeños. Ahora se dimensionan por el promedio del ancho y el alto, con un límite para el lado más largo, y los iconos nuevos seguirán la misma regla automáticamente. Y en la imagen comparativa que hice para un tuit, la palabra Mole del título está compuesta con una tipografía china con serifa cuyas letras latinas quedaban 4 pt más altas que el chino de al lado: tuve que bajarlas aparte para que ambas escrituras quedaran en la misma línea.

Escuchar a los usuarios y otra vuelta más

Después de publicar el artículo fueron llegando, poco a poco, comentarios de los usuarios. Algunos iconos que a mí me gustaban a ellos les parecían poco bonitos o poco familiares: «Buscar actualizaciones» usaba un icono de descarga y se leía como una descarga, el pequeño cubo de la GPU no parecía una tarjeta gráfica, el icono del archivo comprimido no se entendía, dos módulos apilados no terminaban de decir memoria, y algunos encontraban feos la esponja de «Limpiar pantalla» y la mano que saluda de «Acerca de Mole».

Justo en ese momento, hablar un poco con los usuarios vale más que estar convencido por tu cuenta, así que cada uno de estos iconos pasó por otra vuelta siguiendo sus sugerencias. La búsqueda de actualizaciones pasó a ser una flecha en el sentido de las agujas del reloj, la GPU una tarjeta gráfica con dos ventiladores, el archivo comprimido una caja de archivo, y el audio pasó de las notas musicales a unos auriculares. «Limpiar pantalla» volvió al pincel del primerísimo icono del sistema, «Acerca de Mole» recuperó la i en un círculo de toda la vida, redibujada con el grosor del resto de la columna, y la memoria volvió a ser un chip. Varios cambiaron tres veces por el camino.

El tiempo que ahorra la IA, para pulir

Este tipo de trabajo puede parecer inútil, pero es algo que me gusta mucho hacer. La IA impulsa muchísimo el buen código y un gusto aceptable, y puede parecer que a las personas solo les queda dar instrucciones. Yo creo lo contrario: aquí el papel de la persona es todavía mayor. El tiempo que la IA te ahorra es justo el que puedes dedicar a pulir el producto, para que ese 1% de usuarios que se fija sienta de vez en cuando, al usarlo, que lo entiende al instante, que diga «guau», que vea un pequeño truco de magia. Eso sí que tiene valor y es divertido, y quizá sea lo que más me interesa de crear productos independientes.