Atomic design: Que los árboles no te impidan ver el bosque

Atomic Design es un modo de diseñar aplicaciones y sitios web, comenzando desde lo más particular para poder cambiar de forma flexible y rápida en lo general, manteniendo la consistencia a lo largo de todo el sistema. En cierto modo, trabaja de forma parecida a frameworks como bootstrap o knockout, pero en vez de utilizar uno estándar que se adaptará mejor o peor a nuestras necesidades, nos da un marco de trabajo para crear el nuestro propio.

Atomic design, patrones para crear sistemas web

Atomic design, patrones para crear sistemas web

Este enfoque no es necesariamente nuevo, ya se utilizaban sistemas de componentes en Yahoo y en aplicaciones Microsoft como Sharepoint hace más de 5 años, pero ahora toma una importancia renovada porque cada componente necesita adaptarse a múltiples tamaños de pantalla. El comportamiento en diferentes tamaños de pantalla es una característica más de cualquier componente web.

Atomic Design es el nombre que ha dado Brad Frost a esta forma de diseño web, explicándolo para el común de los mortales con la analogía atómica, y creando incluso un conjunto de herramientas para crear sistemas web desde cero de este modo.

¿En qué consiste?

Se trata de construir sistemas de diseño de forma más metódica, para que soporten con el menor mantenimiento posible los cambios y evoluciones que tiene un sitio web a lo largo del tiempo. De este modo, se crean reglas desde lo más particular a lo más general, para crear sistemas más robustos, tanto para que cambien y evolucionen fácilmente, como para soportar cualquier tamaño de pantalla.

Se distinguen 5 niveles de abstracción en Atomic Design:

Niveles en Atomic Design

Niveles en Atomic Design. Imagen de Brad Frost

  • Átomos: Los átomos son el nivel más básico en Atomic Design. Cualquier etiqueta HTML es un átomo: img, input, button, h2, table, etc. También incluye elementos más abstractos como paletas de colores, tipografías, o animaciones. Son los elementos menos prácticos, pero establecer estilos a este nivel facilita el trabajo en niveles más complejos, y como referencia al crear nuevos componentes (moléculas), organismos o plantillas.
  • Moléculas: Al agrupar los átomos formamos moléculas, que vienen a ser los componentes web que conocemos: una caja de búsqueda (que usualmente se compone de un label o título, un input y un botón), un menú de navegación, o una tabla (que es un etiqueta table, pero necesita más etiquetas para crearse: tbody, thead, th, tr, td, etc).
  • Organismos: Agrupando varias moléculas podemos crear organismos más complejos. Ejemplos de esto podrían ser una cabecera (que suelen agrupar un logo, un menú y una caja de búsqueda), la barra lateral de un blog (que suele mostrar últimos artículos, comentarios destacados, etc) o una rejilla de productos o de una galería de fotos (que serían el mismo tipo de molécula pero con diferente información una y otra vez).
  • Plantillas: Varios organismos se combinan para hacer plantillas de página concretas. Así un ecomerce tiene plantillas para páginas de categorías, de producto, de formularios, etc. Cada plantilla soluciona una necesidad concreta y recurrente (crear nuevas páginas de producto, nuevos formularios, etc) de modo que un desarrollador o gestor de contenidos pueda utilizarlas y hacer páginas finales sin conocer los detalles del diseño.
  • Páginas: Las páginas son instancias de plantillas con contenido específico, que son lo que acaba viendo el usuario final. Es en este nivel cuando realmente comprobamos la consistencia del trabajo anterior, y donde se decide si hay que aplicar cambios y a qué nivel.

¿Cuando utilizar Atomic Design?

Esta forma de diseño agiliza los cambios y la consistencia de un sistema web a lo largo del tiempo. Pero hay varios frameworks que hacen esto y pueden servir en muchos proyectos. Incluso hay plantillas para wordpress que facilitan trabajar de esta forma modular, aunque sin llegar a tanto nivel de abstracción.

Por esto, no recomendaría este sistema para la creación de webs sencillas o con poco contenido, porque hay soluciones que nos permiten buenos resultados con menos trabajo (tanto si optamos por frameworks como por gestores de contenido como wordpress, joomla, drupal, prestashop, magento u otros). Eso sí, podríamos crear nuestro propio framework o plantilla para CMS y reutilizarlo en varios proyectos.

Sin embargo, si se trata de sistemas grandes, con mucho contenido, que vayan a mantenerse y cambiar a lo largo del tiempo, optar por esta metodología para el diseño puede ser tremendamente útil, tanto para agilizar cambios y mantenimiento del diseño, como para mantener un sistema coherente y robusto, que facilite su uso a los gestores del sitio web.

Ventajas

Es típico en diseñadores juniors quejarse de los cambios impuestos desde fuera, clientes, comerciales, jefes, etc. Todos pretenden saber más que el diseñador. El senior, normalmente comprende mejor los motivos de estos cambios y su necesidad, usualmente porque trata directamente con estas personas. Esto hace que trabaje de forma más estructurada desde un primer momento, porque ha previsto desde el principio que estos cambios se darán en el futuro.

De ahí el título del artículo. La analogía de los árboles y el bosque, que utiliza a menudo Javier Cañada, se refiere a abordar el proceso de diseño tanto desde la perspectiva micro (los árboles) como desde la macro (el bosque). Atomic Design permite trabajar con diferentes niveles de detalle, pero debemos también mirar niveles aún más generales: Cuanto más conozcamos al cliente, a sus usuarios, los procesos y la capa de negocio y funcionalidad en general, mejor entenderemos como afectan a nuestro diseño, y podremos crearlo anticipándonos a lo que necesita ahora y necesitará en el futuro.

Para saber más:

Enlace en inglés Atomic web design, por Brad Frost

Enlace en inglés Pattern Lab (herramientas para la creación de Atomic Design)

Enlace en inglés The “Other” Interface: Atomic Design With Sass, por Robin Rendle

Enlace en inglés Your Frontend Methodology Is All of Them: Atomic Design & Pattern Lab, por Christopher Bloom

Imagen de portada de Comfreak

Suscribete a Dispersium