Sistemas de diseño: Diseño atómico

Una de las mejores maneras de entender un nuevo concepto es comparar ideas desconocidas con algo que ya se comprenda o asimile, así sea de un área totalmente diferente o parezca que no tiene relación a primera vista. Actualmente, el diseño atómico resalta entre diversas técnicas para estructurar una solución tecnológica, y con palabras conceptuales, potencia un desarrollo más ordenado de los proyectos.   

En el mundo de las interfaces de usuario, el diseño atómico, como filosofía de creación de sistemas, es un concepto que he venido asimilando inconscientemente desde hace tiempo; probablemente desde que estaba en el colegio, cuando hacía esculturas de átomos y células en icopor en la clase de Ciencias Naturales.

La ventaja es que ahora, como desarrollador de software, le encuentro sentido a conceptos, que me permiten crear y estructurar, en conjunto con un diseñador gráfico, no solo la solución a una necesidad sino  también a un sistema de diseño completo, cuyos componentes son reusables, modulares, mantenibles y evolutivos en el tiempo. 

A continuación detallaré las ideas claves para entender esta filosofía de creación de sistemas.

 ¿Qué es un sistema de diseño?

Es un grupo de componentes individuales y reutilizables, guiados por estándares definidos, que se pueden ensamblar para construir cualquier número de aplicaciones. Entre las ventajas de crear sistemas de diseño en el mundo del software están:

• Consistencia en la línea gráfica.
• Reuso constante de componentes y funcionalidades.
• Entendimiento rápido de componentes y jerarquía.
• Orden y mantenibilidad del código fuente.
• Separación de responsabilidades de componentes dentro del código.
• Integración con otros sistemas para evolución en el tiempo.

Diseño atómico

En su libro online Atomic Design, el pionero del concepto Brad Frost habla de la necesidad evidente que hay en el entorno del diseño de interfaces, de crear sistemas completos y bien pensados en vez de crear una colección de sitios. La relación que hizo Brad, ha ayudado a que muchos diseñadores UI y desarrolladores entiendan, con unas cuantas ideas, las ventajas de asimilar la metodología y aplicarla a su flujo de implementación.

AsÍ como la estructura de organismos en ciencias naturales, el diseño atómico aplicado al desarrollo de software, ayuda a entender que no solo hay unos componentes que tienen responsabilidades puntuales, sino que también tienen una relación entre ellos, donde los más grandes contienen a los más pequeños, con lo que hay una jerarquía. Las partes del concepto son:

• Átomos: elementos bases que no pueden dividirse, como inputs de formularios o botones con una apariencia determinada.
• Moléculas: grupos de elementos de la interfaz que funcionan como una unidad. Por ejemplo un campo de búsqueda, que contiene un input, un label y un botón de búsqueda. 
• Organismos: grupos de elementos de moléculas o átomos. Por ejemplo, un header de un sitio/app.
• Plantillas: son estructuras de páginas que se mantienen o se reutilizan en la interfaz. Se centran más en conservar la estructura que el contenido final.
• Páginas: son los componentes más completos en una interfaz. Incluyen todos los diseños, elementos y contenido final. Las páginas son componentes que deben estar relacionados directamente con lo que ve el usuario en cada pantalla.

Dentro del código, independiente del framework que se use, el diseño atómico se traduce en una estructura de carpetas que le ayudan a un desarrollador a entender intuitivamente qué componentes contienen a otros, y esto ayuda a que haya una separación coherente de responsabilidades funcionales y a que el proyecto esté más ordenado.

Abordar el concepto con las ideas que propone el diseño atómico, me ha servido para entender y explicar conceptos de programación que solucionan necesidades de todos los días. Me emociona pensar en todos los mundos en los que estas ideas pueden tener sentido y pueden ser aplicables, por fuera de las interfaces de software.