intive Argentina Blog

Design Systems: ¿qué son y por qué se utilizan?

¿Qué tienen en común empresas como Atlassian, Airbnb y Trello? Las tres, entre muchas otras, han adoptado la metodología de Design System a la hora de gestionar la parte visual de sus proyectos. Pero, ¿qué es realmente un “Design System”?

Los componentes de un “Design System”

Un “Design System” es un conjunto de reglas, limitaciones y principios definidos, que aplicamos durante el desarrollo de un proyecto. Está compuesto por un estilo, una voz y elementos, pero es más que la suma de esas partes. En realidad, un “Design System” se basa en la definición y reutilización de esos elementos, a fin de mantener una consistencia a lo largo de todo el producto.

Para explicar cómo se articulan los componentes, vamos a basarnos en “atomic design”, un concepto desarrollado por Brad Frost.

Entre átomos y moléculas de diseño

El modelo de “Atomic Design” consta de 5 etapas:

1 – Átomos. Son las unidades mínimas de las que disponemos y a partir de las cuales creamos interfaces. Incluímos aquí elementos funcionales HTML como inputs, etiquetas y botones. Estos poseen características únicas que los diferencian de los demás. Una vista general de los átomos nos permite entender rápidamente el estilo del sistema.

2 – Moléculas. En esta segunda etapa, la idea es combinar varios átomos entre sí. Esto nos permite crear un elemento mínimo que puede reutilizarse muchas veces, como por ejemplo una etiqueta, junto a un input y un botón.

3 – Organismos. Estos están formados por varias moléculas y átomos, y componen las secciones de una interfase gráfica.

4 – Templates. Los templates articulan organismos dentro de una estructura de página determinada, y permiten mostrar todos los elementos necesarios para dar funcionalidad a esta última.

5 – Páginas. Las páginas son aplicaciones concretas de un template, con sus correspondientes contenidos y detalles finales.

Los beneficios de un Design System

Actualmente, en uno de los proyectos que se desarrollan en intive-FDV, se está trabajando en el armado de un Design System. En este caso, el caso ya lleva bastante tiempo y cuenta con varios equipos que trabajan en diferentes partes del desarrollo del producto, lo que hizo que se generen algunas inconsistencias a lo largo de este tiempo.

Justamente, un Design System busca resolver este problema, busca poner orden. El objetivo final es reutilizar los componentes y, como consecuencia directa, aumentar la eficiencia. Al tratarse de elementos estandarizados se promueve la consistencia dentro del producto y, por último pero no por eso menos importante, se trabaja con una escala, que nos permitirá poder seguir creciendo de manera coherente a lo largo del tiempo.

Una de las primeras cosas que observamos al relevar el estado de la aplicación, fue la inconsistencia en el uso de colores y en los estilos tipográficos. En ambos casos, los elementos utilizados eran completamente diferentes entre secciones, haciendo que la aplicación sea poco amigable visualmente. Los botones eran otro punto de dolor que pudimos detectar dentro de nuestro sistema. El relevamiento nos permitió dar la visibilidad necesaria para priorizar y determinar qué elementos debíamos incluir a la hora de crear nuestro “style guide” y determinar el esfuerzo e impacto que tendría sobre el lado de desarrollo. Ahora estamos comenzando a definir nuestros estándares y patrones dentro de cada uno de los elementos que componen a nuestros sistema, siempre trabajando con el equipo de desarrollo que nos ayuda a validar no solamente el esfuerzo sino también a definir prioridades.

Uno de los motivos principales por el cual los Design Systems tienen tanta aceptación, es la cantidad de beneficios que aportan a los proyectos. Por un lado, tener un único “source of truth” al cual tanto diseñadores como desarrolladores pueden referirse, permite que todos estemos en la misma página constantemente, facilitando la colaboración y la escalabilidad y, evitando a su vez problemas de consistencia. Además, esto impacta directamente en la eficiencia y reduce el retrabajo. Demasiadas ventajas para no considerarlos, ¿no?

Eugenia Torres

Eugenia Torres es diseñadora UX en intive-FDV desde abril de 2018. Diseñadora gráfica egresada de la Universidad de Buenos Aires (UBA), actualmente está cursando una especialización en Design Thinking en la Universidad de Palermo (UP). Fanática de los viajes, disfruta tanto de experimentarlos como de organizarlos con anticipación y revivirlos a través de sus fotos y bitácoras. ¿El culpable? Julio Verne, a quien leía con fascinación de chica. ¿Su mayor sueño? Desde que vio a Indy aventurarse en La Última Cruzada: conocer Petra.

Soledad Mari

Soledad Mari es diseñadora UX en intive-FDV desde septiembre de 2016. Diseñadora Gráfica graduada de la Universidad de Buenos Aires, en la compañía Soledad participa en proyectos web y mobile donde está a cargo de la investigación inicial, la arquitectura, el wireframing, las pruebas de usuario y el diseño UI. Políglota y ex estudiante de teatro, es fan confesa de los paisajes playeros.

Deja un comentario