Atomic Design
La metodología Atomic Design fue teorizada por el diseñador web Brad Frost en su libro titulado Atomic Design, en 2013. Luego de su publicación, el paradigma de diseñar productos por pantallas/páginas cambió a diseñar productos por componentes.
Imaginemos que acabás de comprar una caja con LEGOS, donde tenés una gran cantidad de piezas para poder armar el artículo que compraste. Estas piezas las tenés desordenadas, aún no tienen una estructura definida; nosotros podemos entender el resultado final, sí, pero para que nuestro producto esté terminado debemos plantearnos el cómo y de qué forma vamos a construírlo.
Diseñar con la metodología Atomic Design es algo parecido; se trata de ir uniendo correctamente las piezas para poder lograr el objetivo final. Pieza a pieza vamos consiguiendo partes, y parte a parte lograremos construir todo.
La metodología establece que a la hora de diseñar un producto nos encontramos con cinco niveles de detalle que tenemos que atacar: átomos, moléculas, organismos, plantillas y páginas.
Vamos ver cada uno en detalle.
Átomos
Los átomos son los componentes básicos de la materia. Aplicados a las interfaces web, los átomos son nuestras etiquetas HTML, como una etiqueta de formulario, una entrada o un botón. Pero también pueden incluir elementos más abstractos como paletas de colores, fuentes y aspectos aún más invisibles de una interfaz como animaciones,
Al igual que los átomos en la naturaleza son, como mencioné anteriormente, muy abstractos y por si solos no tienen una gran utilidad. Sin embargo, son buenos como a la hora de referenciar patrones, ya que nos permiten, por ejemplo, ver todos nuestros estilos globales presentados en un único lugar… en una misma fuente de la verdad.
Moléculas
Las cosas comienzan a ponerse más interesantes y tangibles cuando comenzamos a combinar y juntar átomos.
Por definición, las moléculas son grupos de átomos unidos entre sí y son las unidades fundamentales más pequeñas de un compuesto. Estas moléculas adquieren sus propias propiedades y sirven de pilar para nuestros system designs (sistemas de diseño).
Por ejemplo, una etiqueta de formulario o botón no son demasiado útiles por sí mismos… pero si los combinamos con un formulario, dándoles así un propósito, pueden hacer algo que le sirva al usuario.
Organismos
Cuando llegamos al tercer nivel estamos hablando de elementos que son más complejos, ya que son sumas de los niveles anteriores.
En este sentido, podríamos considerar un organismo una unión de moléculas. Por ejemplo, cuando juntamos los rectángulos con un avatar y los nombres, cuando unimos los iconos y texto para crear una navegación de una aplicación, etc. La coexistencia de estos elementos en un grupo, forman un organismo.
No debemos perder de vista que estamos hablando de elementos de UI formados por moléculas (que a su vez son átomos) y que, por encima de todo, pueden repetirse.
Plantillas
En la etapa de plantilla, rompemos nuestra analogía química para entrar en un lenguaje que tenga más sentido para nuestros clientes y nuestra salida final.
En esencia, lo que consideraríamos “plantillas” dentro del Atomic Design no dejarían de ser los wireframes: una unión de distintos organismos que forman una página o una aplicación.
Se trata de un entregable de alta fidelidad que no termina de ser el diseño final. Para que nos entendamos, se trata del esqueleto/mockup/prototipo de la aplicación o página web.
Páginas
Este es el último nivel del Atomic Design. Son en realidad el diseño final que ya contiene las imágenes y otros detalles que hacen que ese archivo ya esté listo para el desarrollo o, en su defecto, test con usuarios o el equipo.
Las páginas son el nivel más alto de fidelidad y, debido a que son las más tangibles, generalmente es donde las personas pasan la mayor parte de su tiempo y donde se recibe el mayor flujo de feedback.
Ventajas de implementar Atomic Design
La metodología Atomic Design nos permite empezar a crear desde lo más pequeño a lo más grande, lo cual trae varias ventajas:
- El diseño del producto, al ser trabajado de esta manera, es más coherente y ofrece así al usuario una experiencia consistente. Podemos definir el mismo componente para que sea utilizado de esa manera en todos los dispositivos o plataformas en los que el producto se desarrolle.
- La creación de menos componentes implica que el tiempo de diseño y desarrollo sea más corto. Por ejemplo, se pueden reutilizar muchos de los átomos ya creados y combinarlos para obtener nuevas moléculas.
- Es un proceso que va de lo abstracto a lo concreto. Esto es perfecto porque trabajar y validar componentes abstractos hace que la iteración reduzca el coste de tiempo.
- Permite crear un inventario de todos los componentes creados. Así se puede hacer rápidamente una auditoría y tener controlados todos ellos.
- Todos los elementos básicos quedan jerarquizados en las fases iniciales para facilitar posteriormente las iteraciones.
- Una vez tenemos definida la plantilla, la creación de páginas se hace de forma mucho más rápida. En definitiva, sistematizar el diseño nos permite hacer nuestro trabajo mejor y más rápido y la metodología Atomic Design ofrece los pasos necesarios para cumplir esto.