Optimización de archivos Sketch: lecciones aprendidas en la creación de la aplicación Reduce (estudio de caso)

Sketch había traído estándares totalmente nuevos para los tamaños de archivo. Ya no verá archivos de Photoshop de 10 GB por todas partes. Sin embargo, existen enormes archivos de Sketch que ralentizan a Sketch. Como resultado, su productividad también se ralentiza.

Seamos honestos: no son los archivos de diseño los que aumentan de tamaño por arte de magia. Son los diseñadores quienes llenan sus archivos con elementos sin usar, sin optimizar y ocultos que ocupan un espacio innecesario.

Nos hemos enfrentado a este problema en nuestra startup, Flawless App. Tendemos a tener un archivo Sketch separado para cada producto. Por "producto", me refiero a nuestra aplicación principal de barra de menú, sitio web, materiales sociales, dossier de prensa, ilustraciones para los artículos de nuestro blog de Medium, etc. Estos archivos solían crecer mucho con el tiempo debido a las constantes iteraciones y pruebas de diferentes decisiones de diseño. Como resultado, a Sketch le resultaba cada vez más difícil administrarlos con el rendimiento adecuado.

Como haría cualquier otro ingeniero, decidimos escribir un pequeño script que limpia y optimiza los archivos de Sketch automáticamente.

Los scripts son geniales, es decir, si hablas el mismo idioma que Terminal. Eventualmente, decidimos que necesitábamos un enfoque más humano para permitir que más personas del equipo lo usaran. También queríamos que fuera gratis y disponible públicamente más adelante.

El primer prototipo

Tenía algunos conceptos abstractos en mente antes de dibujar cualquier interfaz de usuario. El objetivo principal era hacer algo que estuviera al alcance de nuestras manos todo el tiempo y nos permitiera optimizar los archivos lo más rápido posible. Una aplicación de barra de menú era una opción obvia:

1. Ya teníamos un marco interno para aplicaciones de barra de menú, con muchas funciones personalizadas implementadas. Para brindarle algunos antecedentes: nuestro producto principal, Flawless App, es una aplicación de barra de menú que compara el diseño esperado con la implementación del desarrollador en tiempo real. Este marco interno se creó para nuestro producto principal.
2. Puede usar la aplicación de la barra de menú incluso cuando Sketch no está abierto.
3. Desarrollar una aplicación macOS nativa fue mucho más rápido para nosotros que un complemento de Sketch con CocoaScript (debido a nuestra experiencia previa).

También fue crucial brindarle al usuario la capacidad de alternar entre diferentes opciones de optimización para diferentes archivos.

Aquí está la primera estructura alámbrica, dibujada en un papel anticuado, sin herramientas de creación de prototipos sofisticadas.

Lección aprendida #1

Antes de hacer cualquier interfaz de usuario, prototipos en herramientas sofisticadas o incluso wireframes en papel, piense en los objetivos que necesita lograr con un diseño. Quién lo usaría y cómo interactuaría el usuario con la aplicación.

Paleta de colores y tipografía

Hablando con el equipo, no encontramos ningún problema crítico de UX en los wireframes. Comencé creando una paleta de colores y eligiendo un esquema de fuente.

Quería que la aplicación fuera liviana y visualmente diferente de nuestro producto principal, Flawless App. Entonces, se me ocurrieron las siguientes paletas:

La primera fila es para los colores del texto (más el fondo claro al principio). La segunda fila es para los colores de acento. Todos los colores se derivaron de un color de acento base mediante la aplicación de reglas simples para el sistema de color HSB (H significa matiz, S para saturación y B para brillo).

Digamos que tenemos un color base de #4A90E2 (azul), que es (212, 67, 89) en HSB. Para obtener un color un poco más oscuro, necesitamos disminuir el brillo, aumentar la saturación y mover el tono solo un poco. Entonces, obtendríamos #2477C9, que es (210, 82, 79) en HSB. Usé el mismo enfoque para todos los demás colores.

Finalmente, había elegido la primera paleta de colores (naranja). Los archivos de Sketch y el logotipo de Sketch también son de color naranja, por lo que nuestra aplicación se vería más orgánica con ellos.

Lección aprendida #2

Los colores siempre fueron complicados para mí. Por lo general, paso mucho tiempo buscando el color correcto. Aquí hay un par de recursos que uso casi a diario para ayudarme a explorar los colores:

• Adobe Kuler puede ayudarlo a encontrar un compañero de color para cualquier color.
• Khroma es una herramienta basada en IA para generar paletas de colores según sus preferencias.
• El artículo de Erik Kennedy, "Color en el diseño de la interfaz de usuario: un marco (práctico)" es una auténtica joya. Lo leí hace unos ocho meses, y desde entonces he usado el sistema de color HSB mucho más que RGB en Sketch.

Con respecto a la tipografía, en la mayoría de los casos, es mejor usar la fuente predeterminada para una aplicación macOS nativa, a menos que esté creando algo súper personalizado. El tiempo de renderizado es más rápido y es más fácil de implementar durante el desarrollo. Pero estaba tan emocionado de probar Montserrat en una aplicación nativa de macOS que no pude resistirme.

Lección aprendida #3

Hay muchos recursos excelentes para explorar las fuentes. Sin embargo, utilizo Google Fonts a la antigua para tener una idea de una fuente en particular.

Primera iteración de diseño

Empecé exactamente con lo que dibujé en la estructura alámbrica inicial. Aquí está el flujo general de usuarios en la aplicación:

1. Arrastre y suelte un archivo de Sketch.
2. Elija las opciones de optimización.
3. Reducir el archivo seleccionado.
4. Guárdalo.

Estaba haciendo diseños en Sketch y estaba completamente satisfecho con la interfaz de usuario general. Debido a que había diseñado aplicaciones de barra de menú antes, el tamaño del texto y los márgenes eran bastante estándar para mí. Sin embargo, hubo algunos problemas notables con la primera iteración, que describiré más adelante.

Lección aprendida #4

Si nunca antes ha diseñado nada para macOS, definitivamente consulte el kit de diseño de escritorio de Facebook. Allí encontrará todos los elementos comunes de la interfaz de usuario de macOS. Y le dará una idea de los tamaños y compensaciones de los elementos de la interfaz de usuario. Para una aplicación de barra de menús de macOS, un tamaño de fuente de 12 a 14 puntos es totalmente normal.

Problema n.º 1: estado perdido

Todo fue genial, excepto que olvidé crear un estado en el medio cuando la aplicación procesaba el archivo Sketch. Como sé por experiencia, un estado perdido en la etapa de diseño equivale a un dolor de cabeza en la etapa de desarrollo.

¿Con qué frecuencia los desarrolladores se quejan de que los diseñadores diseñan en el vacío? Ya sabes, están hablando de esos problemas con estados faltantes en el medio, estados vacíos, usando conjuntos de datos perfectos, etc.

Lección aprendida #5

Antes de enviar su diseño a los desarrolladores, asegúrese de no haber olvidado nada. Asegúrese de haber especificado todos los estados, para que los desarrolladores no le pregunten más tarde: "¿Cómo debería verse esto en [alguna condición especial]?" Una buena manera de encontrar este tipo de estados perdidos es usar una herramienta de creación de prototipos. Hasta ahora, el complemento Craft para Sketch (creado por Invision), con su función de creación de prototipos, es la forma más rápida de realizar dichas pruebas.

Problema n.º 2: demasiados elementos personalizados

Casi siempre diseñará para una plataforma en particular. En nuestro caso, fue macOS. Y macOS ya tiene elementos algo estándar. Por lo tanto, a menos que su producto no funcione sin una solución personalizada, use elementos estándar donde tengan sentido. Los desarrolladores también te lo agradecerán.

Con estos pensamientos en mente, eliminé las casillas de verificación personalizadas y las reemplacé con las predeterminadas. También simplifiqué la ventana de progreso eliminando todos los indicadores personalizados innecesarios.

Lección aprendida #6

Para tener una idea de los elementos predeterminados para cada plataforma, sugiero mirar estos materiales:

• iOS: recursos de diseño de interfaz de usuario de Apple, disponibles para Sketch, Photoshop y Adobe XD
• Android: kit de diseño de materiales
• macOS: kit de escritorio de Facebook

Problema #3: No hay suficiente énfasis al final

Después de un par de sesiones de retroalimentación con el equipo, quedó claro que la pantalla final estaba sobrecargada. No había indicación de cuánto había cambiado el tamaño de un archivo desde la optimización. Entonces, hice una pantalla separada con una buena ilustración del archivo comprimido y la etiqueta con información sobre el tamaño del archivo.

Lección aprendida #7

Utilizamos Slack como nuestro principal lugar de comunicación. Enviar a Slack es un pequeño complemento que comparte una mesa de trabajo de Sketch directamente con un canal de Slack. Fue realmente útil para las sesiones de retroalimentación del equipo. Comparte más, comparte a menudo.

Número 4: Grandes pequeños detalles

Los siguientes problemas se encontraron durante el desarrollo. Pero los colocaré aquí de todos modos para mantener consistente la estructura del artículo.

Empecé a implementar el diseño. Inmediatamente después del primer lanzamiento, me di cuenta de que no había forma de que el usuario saliera de la aplicación.

También queríamos distribuir nuestra aplicación a través de nuestros propios canales, en lugar de Mac App Store. Por lo tanto, era fundamental para nosotros agregar un sistema de actualización automática a la aplicación. Y el usuario debería poder ver la versión actual y buscar actualizaciones. Terminé con un menú que presenta esta información y acciones secundarias en un solo lugar.

El último detalle perdido fue una función para cerrar un archivo optimizado y volver a la pantalla principal sin guardar nada. Agregué el mismo botón "cerrar" que aparece en la ventana "lista de optimizaciones" en la esquina superior derecha.

Lección aprendida #8

Trabajar en estrecha colaboración con los desarrolladores siempre es gratificante. Incluso en mi caso, con la misma persona haciendo diseño y desarrollo, es un desafío ver todos los problemas de inmediato. De hecho, tuve que comenzar a construir para ver estos problemas funcionales. En cualquier caso, trate de involucrar a los desarrolladores lo antes posible. Puede obtener una gran cantidad de información valiosa sobre cosas funcionales.

Preparar el diseño para el desarrollo

Eventualmente, las iteraciones de diseño terminaron. Bueno, técnicamente hablando, las iteraciones de diseño nunca terminan. Entonces, digamos que alcanzamos un estado lo suficientemente bueno, donde podemos avanzar hacia el desarrollo.

Antes de implementar el diseño, arreglé el espaciado de los elementos, asegurándome de que todos los elementos estuvieran alineados con las guías de 4 píxeles. Esta mentalidad basada en guías dará sus frutos en la etapa de desarrollo.

Lección aprendida #9

Cuando todos los elementos estén alineados correctamente, su tiempo de desarrollo disminuirá significativamente. Como también era responsable del desarrollo, obtuve todas las propiedades directamente de Sketch. Pero definitivamente tiene sentido asegurarse de que todos los elementos estén en los lugares correctos, que todos los colores sean de la misma paleta y que los activos estén listos para múltiples resoluciones.

Logotipo y nombre

Por último, pero no menos importante, el nombre de nuestra aplicación llegó bastante rápido. Dos palabras me vinieron a la mente: “reducir” y “reducir”. Revisé Product Hunt y "reducir" ya estaba en uso, así que elegimos "reducir".

El logo fue una verdadera lucha para mí. Debido a que es una aplicación de barra de menús, primero tuve que crear un ícono para la barra de menús.

Debido a que el ícono de la barra de menú debe tener 16 × 16 píxeles, es mejor no usar elementos pequeños. El icono debe ser distintivo y legible al mismo tiempo.

Después de varios días de luchar con formas simples, me rendí y abrí la sección "Destacado" de Google Fonts. Estaba buscando una fuente curva bonita que fuera adecuada para un logotipo (así como para el icono de la barra de menú). Eventualmente, apareció la fuente Pacifico, y fue perfecta para nuestros objetivos.

Lección aprendida #10

Recuerda que hay dos versiones de la barra de menú en macOS: oscura y clara. Prepare su icono de barra de menú para ambos. Además, pruebe cómo funciona su icono con el fondo de selección predeterminado. De forma predeterminada, cuando el usuario presiona el ícono de la barra de menú, macOS lo resaltará con el color que el usuario haya seleccionado en su configuración general. (Apple tiene una excelente guía sobre colores en macOS). Para probarlo, creé símbolos para todos los colores predeterminados, de modo que pudiera cambiar entre ellos y ver cómo se ve el ícono con diferentes fondos.

Usando colores de énfasis de la paleta de colores inicial, puse una "R" en un círculo con un pequeño borde curvo. En ese momento, el logotipo era lo suficientemente bueno para mí.

Conclusión

Todavía hay mucho margen de mejora. Como mencioné, la iteración del diseño nunca termina. Pero si continúa iterando para siempre, el producto permanecerá como una maqueta para siempre. Envío rápido es mejor. Las iteraciones cortas significan una retroalimentación más rápida, y una retroalimentación más rápida significa un mejor producto. La aplicación Reduce se hizo en una semana y media porque nuestro principal objetivo era hacerla rápida y útil.

Recibimos muchos comentarios positivos de nuestro equipo. Resulta que la aplicación de la barra de menús es mucho más rápida y comprensible de usar que el script de Terminal. Además, durante nuestro lanzamiento público, la comunidad nos dio muchas ideas sobre funciones que podríamos implementar a continuación y cómo podemos mejorar la aplicación.

Aquí hay un resumen de las cosas que aprendimos al crear la aplicación Reduce:

• Piense en los objetivos del producto y los casos de uso antes de realizar cualquier estructura o prototipo.
• Use una herramienta como Adobe Color y Khroma para elegir la paleta de colores correcta más rápido. También ayudará una comprensión básica del sistema de color HSB.
• No tenga miedo de experimentar con fuentes personalizadas.
• Cada plataforma tiene su propio conjunto de estándares. Aprenderlos antes de diseñar.
• Utilice una herramienta de creación de prototipos para tener una idea del flujo completo.
• No abrume su diseño con elementos personalizados. A veces es mejor ceñirse a los controles predeterminados para la plataforma dada.
• Obtenga comentarios sobre su diseño lo antes posible.
• Involucre a los desarrolladores lo antes posible. Puede obtener una gran cantidad de información valiosa sobre los elementos funcionales y sobre cuánto tiempo llevaría implementar ese "pequeño botón de degradado con la animación en espiral".
• Utilice una cuadrícula estándar de plataforma para alinear todos los elementos. Los desarrolladores te lo agradecerán más tarde.
• Pruebe su diseño para diferentes casos de uso (como una barra de menú clara y oscura) antes de finalizar la interfaz de usuario.

Si cree que la aplicación Reduce también podría simplificar su vida (y sus archivos de Sketch), puede descargarla de forma gratuita. Y por favor dénos su opinión. Creemos que es lo más valioso que uno puede obtener de los usuarios.