Cómo arreglamos el problema de los iconos

Trello tuvo un problema con el icono. Bueno, tuvimos algunos problemas de íconos. Primero, nuestros iconos no tenían ninguna consistencia visual en las aplicaciones. Android, iOS y la web tenían diferentes iconos hechos por diferentes personas en diferentes momentos. Algunos iconos eran simples y llenos, otros tenían bordes duros, otros tenían un contorno grueso y otros eran delgados como un cabello. A veces ni siquiera éramos visualmente consistentes dentro de la misma aplicación.

En segundo lugar, no fue fácil actualizar o importar los iconos. En la web, usamos una fuente de iconos y tuvimos que usar un software especial (y caro) de edición de fuentes que no todos en el equipo tenían. En el móvil, actualizábamos los archivos individualmente y la fuente se guardaba en una carpeta compartida. Sobrescribir un archivo era destructivo; no podías volver a una versión antigua del archivo. También tuvimos que cortar diferentes tamaños para varios lugares de la aplicación.

Ugh. ¿Exportaciones? ¿Formatos de archivo? ¿Versiones? ¿Visualización? Eso suena como un trabajo de computadora.

Entrar en Automatización

Para quitar el dolor del proceso, escribí un pequeño guión, que se convirtió en un gran guión, que se convirtió en una base de código. Funciona así…

• Cada icono tiene su propio archivo de dibujo . Hay una tabla de dibujo para cada peso, siendo el peso el grosor de la línea en el icono. Los pesos más pesados se utilizan en la web y los más delgados en los móviles.
• Tenemos un guión de trago que toma las exportaciones y corta diferentes tamaños para cada peso. Luego da formato a la salida para Android, iOS, y la web . Por ejemplo, los pequeños iconos de Android estarán en /build/weights/100/16pt18box/android/. También producimos el SVG completo y una fuente de iconos para cada peso.
• También ejecuta una pequeña aplicación web que te permite ver todos los iconos juntos . Podemos comparar los iconos uno al lado del otro para asegurarnos de la consistencia visual y comprobar que la salida es limpia.
• Todo vive en un repositorio bajo control de versiones , así que podemos ver qué ha cambiado y cuándo. También significa que somos capaces de volver atrás y deshacer los errores.

Para el equipo de diseño, es fácil actualizar y añadir iconos. Sólo tienes que añadir otro archivo de Sketch con un par de tableros de dibujo para diferentes pesos y el guión se encarga del resto. Como solo son archivos de bosquejo, podemos arrastrar fácilmente los iconos a las maquetas. Y lo que es más importante, ya no tenemos que cortar en pedazos todo tipo de exportaciones para la producción, lo que supone un gran ahorro de tiempo. Los desarrolladores obtienen archivos que pueden soltar en la base de código sin problemas, todos dimensionados correctamente y en el formato adecuado. ¡Uf!

Viéndolo todo junto

Esta es nuestra demostración de icono. Es una pequeña aplicación web que se ejecuta localmente. Puedes alternar entre los tamaños de fuente de los iconos y los SVG para tener una idea de lo que funciona (o de lo que está totalmente roto). Se ve todo junto a la vez. La aplicación en sí no es tan bonita, pero es algo interno que hace el trabajo. Se suponía que nunca debías ver esto…

Esto era totalmente imposible antes. Es fácil tomar capturas de pantalla y compartir y hablar de todos los iconos juntos.

Hemos empezado a desplegar los iconos en la mayoría de nuestras aplicaciones. No estamos al 100%, pero puedes ver los iconos en acción en las tarjetas de identificación, en la búsqueda y en los menús.

Bienvenido a Iconathon, nuestro icono de código abierto, task runner.

Creemos que cada equipo de producto puede usar algo así, así que hemos abierto el código bajo la licencia del MIT. Llamamos a este proyecto Iconathon, porque es una tarea de iconos corredor … como un maratón… ¿lo pillas? Sí, lo entiendo.

El código incluye algunos iconos de muestra, un extenso readme y muchos comentarios de código. Deberías tener todo lo que necesitas para empezar. Si quieres saber cómo funciona, puedes indagar en el código para ver los detalles. Suelta el tenedor!

Ver Iconathon en GitHub

El futuro

Nos damos cuenta de que este código no es tan sofisticado. Creció torpemente hasta lo que es hoy después de mucho ensayo y error. Hay algunos lugares que podrían acelerarse. No se conecta a ninguna herramienta de construcción. Sólo funciona con OSX y Sketch. No da salida a todos los formatos que puedas querer. Es mayormente un script interno que hace el trabajo por nosotros, que es todo lo que le pedimos.

Así que aunque el código es de código abierto, no vamos a analizar los problemas y sacar las solicitudes (aunque las comprobaremos). Toma el código y hazlo tuyo. Se supone que esto es un punto de partida.

Este método nos da mucha flexibilidad, confianza, seguridad y nos ahorra mucho tiempo. Iconathon ha sido una gran victoria para nosotros. Al hacerlo de código abierto, espero que también lo sea para ti.

Comparte esto:

Agregar este botón de compartirCompartir con EnlaceCompartir con EnlaceCompartir con FacebookFacebookCompartir con BolsilloCompartir con BúferCompartir con InterésCompartir con InterésCompartir con TwitterTwitter

Lo más reciente en TodoTrello: