Cómo y por qué diseñé una variante de color y una herramienta de accesibilidad

Como desarrollador, elegir colores para mis diseños siempre ha sido una de las tareas más difíciles. Para ayudar, suelo usar herramientas como Coolors, SASS Color Generator y este verificador de contraste de color.

Mi proceso solía verse algo así:

  1. Genera una paleta usando Coolors
  2. Elija variantes para cada color utilizando SASS Color Generator
  3. Empareje las variantes en combinaciones de fondo / primer plano.
  4. Compruebe que se pueda acceder a los pares mediante el comprobador de contraste de color.
  5. Agregue los colores elegidos a la herramienta de diseño que elija (Figma).
  6. Modifique los colores y repita desde el paso 2.

¿Entonces, Cual fue el problema?

Mi antiguo proceso implicaba muchos intercambios entre diferentes aplicaciones. No pude modificar mis colores y ver el impacto en la accesibilidad en tiempo real. En cambio, tuve que copiar / pegar códigos HEX de una aplicación a otra. Luego, cuando estaba listo para comenzar el desarrollo, tuve que crear manualmente las variables en SASS / CSS y copiar los valores nuevamente.

¿Y la solución?

Crear una herramienta donde pudiera hacer (casi) todo en un solo lugar. Mi objetivo era avanzar hacia un proceso como este:

  1. Genera una paleta usando Coolors
  2. Elija variantes, empareje colores y realice ajustes con una sola aplicación.
  3. Agregue los colores resultantes a la herramienta de diseño que elija.

También quería que la aplicación pudiera exportar mis colores al código para tener un buen punto de partida para el desarrollo.

La prueba de concepto inicial

Quería poner algo en funcionamiento lo más rápido posible para poder empezar a probarlo. Con ese fin, me dediqué a crear un prototipo.

Casos de uso

El primer paso para armar un prototipo fue definir los casos de uso que lo impulsarían.

  1. Como usuario, quiero generar variantes para mis colores base.

Quería poder abrir la aplicación, agregar mis colores base, elegir las variantes y luego volver a exportarlas a mi herramienta de diseño. Simple ?.

2. Como usuario, quiero comprobar si se puede acceder a un par de colores de fondo / primer plano.

A partir de los colores base ingresados ​​o sus variantes, quería poder verificar si dos colores eran accesibles cuando se combinaban.

3. Como usuario, debería poder ver el impacto que tiene el cambio de un color base en la accesibilidad.

Quería poder obtener comentarios en tiempo real sobre los pares de colores que había elegido cada vez que hacía ajustes a mis colores base.

Una versión de trabajo (muy tosca)

Una vez definidos los casos de uso, me puse a diseñar el prototipo. Se me ocurrió una paleta de colores, diseñé un conjunto limitado de componentes y finalmente llegué a una solución que tenía tres "modos" o páginas, y el usuario tenía que cambiar entre ellos para realizar sus tareas.

En lugar de describirlo más, echemos un vistazo.

Como puede ver en la imagen de arriba, el prototipo logró todo lo que quería en base a los casos de uso iniciales ... Más o menos.

Haga clic aquí si desea probar el prototipo usted mismo, gracias a la magia de las vistas previas de implementación de Netlify.

Lo bueno y lo malo del diseño original.

Nunca pretendí que el primer prototipo fuera algo más que un trampolín, y puedes ver por ti mismo que era bastante tosco y defectuoso.

Para la próxima versión, comencé mirando lo que me gustaba del prototipo.

Modo variante

Estaba bastante contento con el resultado de la parte generadora de variantes del prototipo. Fue bastante sencillo elegir un color y obtener su lista de variantes. Además, el enfoque con pestañas funcionó bastante bien para agregar múltiples colores base.

Poder ver cambios en la accesibilidad después de cambiar un color

Como puede ver en la breve demostración anterior, no hubo necesidad de copiar / pegar códigos HEX entre aplicaciones. Ahora podía cambiar uno de mis colores y ver cómo eso afectaba la accesibilidad del color muy rápidamente.

Luego, comencé a elegir cosas que no me gustaban y necesitaban ser mejoradas .

Las interacciones no eran obvias

Al llegar a la página de inicio, no era obvio de inmediato cómo elegir variantes y verificar la accesibilidad. Probablemente podría darse cuenta de que finalmente tuvo que hacer clic en los mosaicos, pero fue realmente torpe.

Los modos eran confusos

En los diseños iniciales, solo podía agregar pares desde la vista de paleta y solo podía agregar / eliminar variantes de la vista de variantes. Todo implicaba muchos cambios entre pantallas y me sentí frustrado por la cantidad de trabajo que me estaba haciendo hacer la aplicación. Esto me lleva al siguiente punto.

Se necesitaban demasiados clics

Tienes que hacer clic para agregar una variante. Luego tiene que hacer clic para pasar a la vista de paleta. Luego tienes que hacer clic varias veces para crear un par. Luego, debe hacer clic un poco más para ver el par que acaba de agregar. Como mencioné anteriormente, todo fue bastante torpe y esta fue probablemente la peor parte del prototipo y algo que sabía que necesitaba cambiar.

No había suficiente información visible en la pantalla a la vez

Cuanto más lo usaba, más empezaba a disgustarme el concepto de "modos" que creé. Creo que fui influenciado por el proceso original que inspiró la aplicación y diseñé las pantallas en silos en lugar de diseñar una experiencia unificada. Después de usar el prototipo, decidí que necesitaba migrar del concepto de "modos" a algo que, idealmente, se podría hacer todo en una sola página.

Un segundo intento

Tomé las lecciones que había aprendido del prototipo y me puse a crear una mejor versión de la aplicación.

Para reducir la cantidad de interacciones requeridas, reducir la ambigüedad en las interacciones y aumentar la cantidad de información disponible para el usuario a la vez, decidí pasar a una interfaz de usuario basada en arrastrar y soltar donde el usuario podría arrastrar mosaicos alrededor para agregar a su paleta o crear controles de accesibilidad.

El objetivo de arrastre siempre se mostraría y esto evitaría la necesidad de cambiar entre pantallas.

Echemos un vistazo a lo que se me ocurrió.

Puede acceder a la versión actual de la aplicación aquí.

Próximos pasos

La aplicación está todavía muy en pañales y aunque la segunda versión se acerca mucho más a la idea que tenía en mente, todavía hay mejoras que se pueden hacer.

Importar desde código

Además de exportar la paleta, planeo agregar la capacidad de leer los colores base iniciales del código que contiene variables (variables SASS y CSS para comenzar)

Exportar a más formatos

Actualmente, solo puede exportar SASS. Planeo agregar soporte para Variables CSS y otros formatos en el futuro.

Integrar con herramientas de diseño

Exportar a código es genial, pero sería aún mejor si pudiera exportar la paleta y luego importarla como una capa o estilo compartido en una herramienta de diseño como Figma o Sketch.

Refina la interfaz de usuario

Seamos realistas, no es la aplicación más atractiva del mundo. Planeo modificar los componentes de la interfaz de usuario para mejorar la aplicación visualmente.

Comentarios e informes de errores

Éste habla por sí mismo. Solo puedo mejorar la aplicación con la participación de quienes la usan. Para hacer eso, planeo agregar un formulario de comentarios en el futuro.

Retroalimentación

Hablando de comentarios ... escribí este artículo por dos razones. El primero fue guiarte a través del proceso por el que pasé para llegar al diseño actual con la esperanza de que puedas aprender de él.

La segunda razón es que quería mostrar la herramienta a la comunidad de desarrollo y diseño, ya que creo que puede ser útil para muchas personas, y también recopilar comentarios sobre ella en su estado actual.

Entonces, si tiene alguna idea sobre el diseño, la funcionalidad, el proceso por el que pasé para crear la herramienta o cualquier otra cosa, ¡me encantaría escucharla!

Enlaces

Prototipo

Versión actual

Biblioteca de componentes