¿Por qué es importante un sistema de diseño para su organización? Inversión, coherencia y escalabilidad. Vamos a ahondar en ellos uno por uno. Un sistema de diseño realmente ayuda a ahorrar dinero en el proceso de desarrollo a largo plazo. ¿Por qué? Los requisitos empresariales bien definidos permiten a los diseñadores y desarrolladores crear más rápido y mejor. Levitt afirma en «Los sistemas de diseño cambiarán las tareas de UX/UI» que, sin una biblioteca de componentes o un sistema de diseño, alguien tiene que diseñar visualmente cada estado de cada pantalla (2020). Esto ralentiza mucho el proceso de diseño y desarrollo. El sistema de diseño proporciona orden, orientación, ayuda y mejora el trabajo en equipo y muchos otros beneficios en los que profundizaremos más adelante en el artículo. Al utilizar componentes validados, reducimos el costo de mantenimiento a largo plazo. La inversión puede ser mayor al principio cuando la curva de aprendizaje es más pronunciada, pero a la larga, los ahorros son mayores. Además de esto, también es ventajoso para la consistencia y escalabilidad del producto. Las grandes empresas, que tienen una amplia variedad de productos y servicios, en los que los productos digitales son muy valiosos para sus negocios, necesitan prácticas de reutilización para agilizar el proceso de desarrollo y favorecer la coherencia.
¿De dónde proviene el sistema de diseño?
Los sistemas de diseño están relacionados con los manuales de marca. Los manuales de marca de la NASA o de los Metros de Nueva York son bastante populares e incluyen directrices que la agencia de publicidad o el periódico utilizaban y seguían en ese momento. El sistema de diseño consiste en la transferencia digital de lo que solía ser el manual de la marca a papel impreso, pósters y todo lo que formaba parte del «mundo físico».
En última instancia, esos manuales de marca son manuales de uso que establecen reglas mínimas para mantener la identidad de la marca y sobre cómo implementar diferentes elementos. Cuando los diseñadores gráficos hacían algo en la imprenta, necesitaban saber dónde «vivía» su marca. En los productos físicos y tangibles en los que era necesario imprimir los elementos de la marca, había que saber qué colores se utilizarían para representarla. El manual de la marca respondía a todas estas preguntas y más; el sistema de diseño es su traducción al «mundo digital». Son la única fuente de información fiable para el desarrollo, lo que permite disponer de documentación en tiempo real que crece a medida que es necesario implementar nuevos componentes o historias de usuario.
Hay síntomas que se pueden encontrar dentro de las necesidades de una organización: la escalabilidad y las inconsistencias de los patrones en el flujo de una aplicación. Esto se debe, por ejemplo, a los diferentes colores o tamaños de los botones, a las jerarquías y fuentes no establecidas y a los símbolos no delimitados. Las inconsistencias son muy habituales en los botones y más aún en los colores. Para saber si los tienes, hay un sitio web en el que uno puede insertar el enlace a su producto digital (por ejemplo, su sitio web) y muestra todas las variaciones de estilos y colores. El sistema de diseño puede ser la solución a un problema que tengas y no te des cuenta de que tienes, por lo que, aunque pienses que no tienes incoherencias, comprobarlo no te hará daño y puede ayudarte.
¿Qué es el sistema de diseño y qué se debe tener en cuenta?
Un sistema de diseño tiene los componentes, elementos y guías de estilo reutilizables de una empresa o marca. Es su lenguaje: cómo se ve, se siente y suena, la voz de la marca (Levitt, 2020). Es un documento vivo que se comparte constantemente entre diseñadores y desarrolladores. No es solo una guía de estilos creada exclusivamente por diseñadores, sino que los desarrolladores tienen que crear código para cada componente. Por eso los programas y métodos que utilizamos son realmente importantes. Los diseñadores tienen que diseñar ya con una mentalidad de desarrollo, algo que ha cambiado mucho en su puesto. Tienen que empezar por entender la cuadrícula base, los principios del diseño, qué tipos de dispositivos usar, qué colores o textos usar, qué tipo de íconos y cómo se desarrollarán. Todo está traducido a código, por lo que el diseñador debe tener en cuenta las limitaciones que pueda tener el código en el momento del diseño, de modo que los diseños puedan implementarse posteriormente. Al desarrollar algo para iOS nativo, Android nativo o React Native, tienen que tener en cuenta las restricciones o limitaciones de cada tecnología, que tienen sus propios estilos, así como en qué dispositivo se utilizará, incluso si están diseñando para la visualización de datos en la que participan otros actores, como Tableau. Esto tiene muchas restricciones en la interfaz de usuario, en cuanto a lo que se puede hacer y cómo se recupera la información. Esta, al igual que Docker y muchas otras, son interfaces que tienen su propio sistema o principios de diseño de una forma u otra.
En última instancia, un sistema de diseño es un resultado que debe ser cohesivo, dinámico, reutilizable y mantenido simultáneamente por diseñadores y desarrolladores. Por eso es una fuente única de verdad, creada por un equipo, tiene que ser un proyecto en sí mismo. Más que una guía de componentes, un sistema de diseño ofrece respuestas sobre cómo hacemos las cosas y por qué las hacemos de esa manera. A veces, incluso incluye un tono de voz, en el que interviene la escritura de la experiencia de usuario, que indica cómo comunicar ese tono de voz, cómo hablar con un público objetivo específico, cómo debe ser la escritura y cómo debe ser la llamada a la acción. Además, contiene fichas (colores, tipografía, iconos, ilustraciones, la cuadrícula e incluso un mapa del sitio relacionado con la arquitectura de la información) y componentes (botones, entradas, paginación, navegación, alertas, aspectos relacionados con la visualización de datos). No hay una sola forma o plantilla para llevar a cabo esto, como se mencionó anteriormente, es un documento «en vivo», necesitamos tener la flexibilidad y la comprensión de que cada sistema de diseño es un nuevo desafío.
Desde la perspectiva conceptual, podemos encontrar todo lo relacionado con el diseño atómico, empezamos a diseñar un elemento y los tokens generan un componente. Por ejemplo: un botón es un rectángulo que tiene color y texto. ¿Qué tamaño tendrá ese texto? ¿Qué grosor tendrá? ¿Cómo permitirá el color al usuario diferenciar que se trata de una acción y no de otro texto? Hay que pensarlos y tenerlos en cuenta. Posteriormente, todos estos componentes generarán un módulo y esos módulos generarán una plantilla o una interfaz. Estos son, en pocas palabras y de forma sencilla, los principios del diseño atómico de Brad Frost.
El valor agregado que aporta el Sistema de Diseño
Hay mucha información sobre la parte conceptual hoy en día y, afortunadamente, se está profundizando mucho. Hay muchas maneras de acercar la parte conceptual al código. Existe una herramienta de código abierto llamada Storybook que permite a los diseñadores y desarrolladores crear componentes y páginas de la interfaz de usuario de forma aislada. Pueden trabajar juntos cargando el código de cada componente diseñado para reutilizarlo más adelante. Ofrece independencia entre las diferentes áreas del equipo. El diseñador puede trabajar en el sistema de diseño y luego comunicarse con el desarrollador, tal vez hacerlo en un equipo pequeño, y así el resto de los desarrolladores no necesitan preguntarle al diseñador qué color va a usar, cómo obtener algo, cómo crear un modal o cómo crear una alerta. «No necesito pasar mi trabajo al siguiente escalón de la línea de montaje y que otra persona se encargue de la estética de todas las pantallas o páginas» (Levitt, 2020). Todo está dado en el sistema de diseño, lo único que tienen que hacer es entrar y comprobar cómo está hecho. Esto es fundamental para los tomadores de decisiones. Para los diseñadores y desarrolladores, este proceso es imprescindible, pero para los propietarios del producto es beneficioso para el ROI. Los sistemas de diseño ahorran tiempo y dinero; solo si se suprime la redundancia del código, se puede recuperar más del 20% del tiempo de un desarrollador. Si calculamos 75 dólares por hora para un desarrollador de un equipo de 10 desarrolladores, se ahorrarían 2,5 horas a la semana, lo que se traduce en un ahorro anual de 97500 dólares. Al principio, la curva de aprendizaje puede ser más pronunciada, pero luego se vuelve más estable y se reduce a menos horas de desarrollo, menos horas de diseño, menos horas de toma de decisiones y desarrollo de un flujo.
En Onetree tenemos diseñadores y desarrolladores enfocados en sistemas de diseño. La relevancia de esto radica en el hecho de que existe una comunidad de práctica, ya que hay muchas maneras diferentes de construir un sistema de diseño, por lo que tenemos que compartir conocimientos y llegar a un acuerdo sobre cuáles son las mejores prácticas. Esto es importante para educar y concienciar al propietario del producto sobre todo este proceso y para el desarrollo del producto. Una de las principales ventajas que ofrece el sistema de diseño es que acorta la brecha entre el desarrollo y el diseño. Cuando los elementos forman parte de un sistema de diseño de una manera determinada, cuando el diseñador trabaja junto con el desarrollador y piensa en el diseño teniendo en cuenta el código, hacen que el producto final sea perfecto en píxeles. Esto es posible si se produce esa sincronización entre el diseño y el desarrollo y se generan buenas prácticas. Estas áreas deben trabajar en conjunto, porque son dos dominios que se cruzan y no pueden separarse; el sistema de diseño es «la bandera común del producto» y lo que une a todos. No hay otra fórmula secreta que no sea aprender, compartir y generar una cultura de equipo que comprenda la importancia de los sistemas de diseño.
Referencias
Levitt, D. (2021, 13 de septiembre). Los sistemas de diseño cambiarán los trabajos de UX/UI
Delta CX. Medio. https://medium.com/delta-cx/design-systems-will-change-ux-ui-jobs-e29f1d978553
.svg)