Atomic Design es una tendencia interesante en el mundo del diseño y desarrollo que debes conocer este 2022. Todo es química, reza el dicho… y al profundizar un poco en Atomic Design no podemos dejar de apreciar cuánto podemos aprender de la composición de la materia.
Ya sea desde el lado de la UX o del desarrollo, Atomic Design debería estar en tu caja de herramientas este año. Aquí te contamos de qué se trata junto a dos de los profesionales de Fusiona.
Qué es Atomic Design
Atomic Design es un sistema de diseño de interfaces creado por el diseñador, programador, autor y speaker Brad Frost, quien enfrentado a la falta de consistencia en el diseño de productos, desarrolló una metodología para crear sistemas de diseño de interfaz sólidos.
En Atomic Design el diseño de interfaz se realiza dividiendo un sitio o aplicación web en sus componentes básicos con una metodología que permite crear sistemas escalables y componentes reutilizables.
“El diseño atómico es un modelo mental que nos ayuda a pensar en nuestras interfaces de usuario como un todo cohesivo y una colección de partes al mismo tiempo”, ha señalado el propio Frost.
Etapas del Atomic Design
El sistema creado por Frost contempla las siguientes cinco etapas:
1-Átomo
Son los componentes básicos y más pequeños de una interfaz. Se trata de elementos indivisibles como los colores y fuentes.
2- Moléculas
Grupos de átomos que juntos obtienen nuevas propiedades al funcionar como una unidad. Algunos ejemplos son formularios, inputs de búsqueda o botones.
3- Organismos
Átomos y moléculas forman los organismos. Estos componentes de interfaz son más complejos y pueden funcionar por sí mismos. Entre ellos están los menú de navegación, side bars y pop ups.
4- Plantillas
Plantillas o templates son el siguiente nivel en Atomic Design y su función es contener la estructura del diseño compuesto por los elementos previos.
5- Páginas
Por último encontramos las páginas. En esta etapa, las plantillas se convierten en páginas con el aspecto final que verá el usuario final.
Por qué utilizar Atomic Design
Porque funciona como una caja de herramientas ordenada y organizada con todas las partes que se utilizarán en la creación de una interfaz.
Esta ‘caja’, permite que tanto diseñadores y desarrolladores tengan una fuente común para realizar su trabajo y facilita la conversación dentro del equipo utilizando elementos consistentes.
“En Fusiona lo usamos en el desarrollo de la Aplicación Gasconnect, ahí utilizamos el concepto de atomizar componentes y poder reutilizarlos en diferentes partes de la app…
De hecho el framework Ionic lo tiene implícito al tener los conceptos de creación de componentes (átomos), directivas (moléculas), páginas (plantillas)”, señala el ingeniero informático Luis Monroy, miembro del equipo de desarrollo móvil de Fusiona.
Camila Rojas, diseñadora UX del equipo del mismo nombre complementa:
“Creo que la gran ventaja de Atomic Design es que permite tener orden y agilizar procesos futuros. Contar con una biblioteca dinámica con elementos flexibles te optimiza el trabajo al momento de diseñar…
También ayuda a que los equipos de diseñadores puedan unificar criterios gráficos al momento de trabajar y no que cada uno aplique su estilo al proyecto”.
Beneficios del diseño atómico
La recomendación entonces es familiarizarse con Atomic Design porque puede ser un buen catalizador del trabajo entre diseñadores y desarrolladores. Con esa visión (experimentar y conocer), podrán descubrir algunos de sus beneficios, entre los que se encuentran:
- Construcción de un sistema basado en componentes básicos donde es más fácil ver qué átomos se pueden combinar o mezclar para formar moléculas u organismos.
- Creación de guidelines más simple. Al crear átomos y moléculas antes de construir el sitio o la app, nos aseguramos de aplicar los mismos principios de diseño en todas las versiones del sitio.
- Codificación más limpia. Atomic Design facilita la escritura de un código más limpio, ordenado y fácil de leer. El código de los sitios web diseñados “atómicamente” suele ser mucho más fácil de leer que uno creado de una manera más tradicional.
- Prototipado y actualizaciones rápidas. Una caja de herramientas de diseño común, ordenada y consistente acelera todas las partes del proceso. Permite crear maquetas velozmente y si se requiere una actualización, solo debes cambiar un átomo, molécula u organismo.
“Las ventajas son directamente proporcionales a la dimensión del proyecto”, continúa Luis Monroy.
“Entre más grande el proyecto, más indispensable y recurrente se hace el uso de componentes atómicos… El problema empieza cuando no tienes el conocimiento de qué piezas existen actualmente y empiezas a crear la rueda nuevamente o peor aún, empiezas a tocar componentes que afectan en varias partes…
Ahí es donde se requiere que el equipo esté bien afiatado y que los nuevos integrantes se sometan sí o sí a inducciones técnicas acerca de cómo queremos desarrollar y qué herramientas disponemos para ello”, complementa el ingeniero.
Para conseguir equipos afiatados y suavizar fricciones entre diseño y desarrollo, Atomic Design puede contribuir a workflows orgánicos que fluyen como la naturaleza. Por eso es una de las tendencias que debes conocer y experimentar este 2022.
