Los sistemas de diseño agilizan el desarrollo de componentes con accesibilidad, buenas prácticas y gran performance. Con herramientas como Storybook, Testing Library y algunos addons de a11y obtenemos una sola fuente de la verdad para garantizar la calidad y reusabilidad de nuestro trabajo.
En esta lectura quiero contarte cómo los sistemas de diseño han ayudado a que mis equipos de diseño y frontend mejoren la UX y accesibilidad de nuestros proyectos.
¡Hola, soy Eva Ferreira! Cuando era joven quería ser diseñadora, pero no tenía mucho talento para eso. Por suerte me gustaba programar y de casualidad descubrí el mundo del Front-end, donde a través de líneas de código podemos diseñar lo que queramos. ¡O armar lo que otros diseñen!
Pero no estoy acá para hablar de lo mucho que amo el Front-end, de lo maravilloso que es ese espacio creativo entre ceros y unos; hoy estoy acá para contarles de lo mucho que amo los Design Systems.
Los Design System son como el anillo del Señor de los Anillos, es esa herramienta milenaria que necesitamos para arreglar todos nuestros problemas de Front-end en un solo lugar y por una última vez.
Un sistema de diseño es un set de estándares que informa cómo funciona la UX y la UI de una empresa, proyecto o aplicación. Tiene como objetivo ser la única fuente de la verdad.
Pero ¿de cuál verdad?
La verdad de la cantidad de pixeles que debería tener de borde redondeado los botones, la verdad de qué sombra usa la card principal, la verdad de qué tipografía utiliza el heading de nivel 2. El Design System es el lugar donde consultamos todas estas cosas.
Y también es el lugar donde no reinventamos la rueda.
Porque un buen sistema de diseño tiene su correspondiente librería de componentes, que contiene elementos como botones, dropdowns, tablas, cards, headings, etc. Esos componentes se arman en la librería y la librería los provee a los distintos proyectos usando submódulos de Git o paquetes de NPM.
Los Desing System suelen construirse junto a Storybook, una herramienta que nos permite organizar y visualizar nuestros componentes, cada uno con sus controles, sus distintos estados y su documentación.
A Storybook además podemos agregarle pruebas unitarias con react-testing-library para asegurarnos la calidad de cada componente; y por qué no, agregarle jest y definir un coverage mínimo del 80 o 90%.
Storybook también lanzó recientemente un addon de accesibilidad muy fácil de instalar y utilizar. Se llama addon-a11y y pueden encontrar la documentación en el sitio oficial de Storybook: storybook.js.org/addons/@storybook/addon-a11y.
Este addon se ocupa de correr tests básicos automáticos de accesibilidad en nuestros componentes para ayudarnos a encontrar errores de contraste de colores, atributos ARIA mal utilizados, falta de labels en elementos de formularios, entre otros.
Estos tests automáticos nos van a ayudar a cubrir un ~40% de problemas de accesibilidad. Pero el resto depende del testeo manual que debemos realizar cada vez que creamos un componente nuevo o modificamos uno ya existente.
Podemos comenzar a testear navegando con nuestro teclado. Luego utilizando un lector de pantalla. No necesitamos ser expertos en lectores de pantalla para probar la accesibilidad de un componente, solamente con navegar a través y comprobar que puede utilizarse cómodamente es suficiente.
La magia de las librerías de componentes es que nos permiten asegurarnos de que si armamos un componente con mucha calidad y cuidado, ese componente podrá reutilizarse en otras aplicaciones. De esta manera sabemos que todas las aplicaciones que utilizan el componente de, por ejemplo, un acordeón desplegable, serán responsive, accesibles y con buen rendiminto.
Se arma bien, a conciencia una vez y luego esto se replica en todas las instancias donde se lo utilice. Y si necesitamos modificarlo, con una sola modificación impactamos todas esas instancias de manera instantánea. Esa es la importancia real de un Design System.
Una herramienta que nos trae confianza en nuestras aplicaciones, que nos evita rehacer trabajo que ya hemos realizado, que nos ayuda a mantener consistencia en los diseños y que también… desliga a desarrolladores que no se dedican a Front-end de tener que ocuparse de programar HTML y CSS.
Por supuesto, lo ideal que todo el equipo de programación de mi empresa sepa sobre accesibilidad, pero no es lo común y tenemos que adaptarnos a las circunstancias. Los Design System nos permiten desligar a los programadores de back-end, por ejemplo, de preocuparse por la accesibilidad de los componentes y les permite concentrarse en hacer lo que hacen mejor.
Hay muchos sistemas de diseño que son públicos, que podemos encontrarlos sueltos en la web. Son un lugar perfecto para aprender cómo una empresa resuelve sus problemas de Front-end y diseño, cómo organiza sus componentes y cómo crean código fácilmente escalable.
Para despedirme de este blogpost, les dejo mis Design Systems favoritos de toda la internet:
💡 Más información sobre Design Systems: designsystems.com
Quiero invitarte a tomar el nuevo Audiocurso de Accesibilidad Web: Casos de Estudio. Te voy a contar diversas experiencias (algunas positivas… y otras no tan buenas) donde trabajamos la accesibilidad de aplicaciones web, cómo impactaron en los usuarios, ventas de la empresa y agilidad de los equipos de diseño y desarrollo.
Además, si quieres poner en práctica todos estos principios y recomendaciones para crear sitios web accesibles con HTML, CSS y JavaScript, también te recomiendo tomar el Curso de Accesibilidad Web.
¡Nos vemos en los cursos de accesibilidad!
Mi momento ah llegado ya se programar sitios bonitos ahora hagámoslos 100% accesibles
Excelente información. Gracias por compartir
Soy del team backend pero este blogpost me inspiró a profundizar en el front-end. Voy a tener que tomar esos cursos.
Me alegra ver más contenido relacionado sobre accesibilidad. Es un tema que me genera interés pero que he estudiado muy poco.
Y que decir de los Design Systems, una obra de arte ver la composición completa de un proyecto usando este sistema!
Cuando un negocio recién comienza y word hurdle tiene poco personal, la fuerza de los lazos entre los fundadores determina el contenido y el estilo de comunicación entre los miembros del equipo. Ese, a juicio de Barajas, es el secreto para poner en marcha una empresa.
Very good and informative article. Please continue to maintain it. I will follow you. Octordle