El término «página web» es una reminiscencia del pasado. Es necesario de ir más allá de diseñar solo «páginas» para comenzar a crear sistemas de diseño. Atomic Design provee un método y las herramientas para lograrlo.

La Web ha evolucionado y ya no está confinada a un navegador web en una PC, sino que ha dado el salto a una enorme cantidad de dispositivos muy diversos, desde dispositivos móviles hasta televisiones inteligentes, todos con diferentes capacidades, tamaños, resoluciones de pantalla, formatos y métodos de interacción.

Pruebas de responsividad en varios dispositivos móviles.

Con una diversidad tecnológica tan grande, los diseñadores y desarrolladores que crean, diseñan y mantienen sitios y apps en la web pueden beneficiarse al utilizar métodos y mejores prácticas que ayuden a mantener la consistencia y la escalabilidad de sus proyectos, utilizando sistemas de diseño.

Aunque se recomienda nunca comenzar desde cero y un diseñador puede utilizar sistemas de diseño como Material Design, las Human Interface Guidelines de Apple o Fluent Design System, en ocasiones es necesario crear un sistema de diseño propio. Para hacerlo con un enfoque metodológico se utiliza la técnica de Atomic Design.

La metodología de Atomic Design

Diseño Atómico (Atomic Design) es una metodología de diseño creada por Brad Frost enfocada en la reutilización acumulativa de elementos modulares sencillos para crear estructuras de información más complejas.

El Atomic Design no se trata de diseñar una sola instancia de una página web a la vez, sino que vistos desde un punto de vista más amplio, se usa para crear la base de sistemas más grandes. Atomic Design ayuda a que el diseño de un producto digital pueda adaptarse con facilidad a diferentes dispositivos o plataformas, y es compatible con procesos de diseño centrado en el usuario, ya que se puede implementar desde las etapas tempranas de diseño usando sketches y prototipos.

La metodología de Atomic Design se compone de cinco etapas para crear interfaces y sistemas:

Atomic Design. Crédito: Brad Frost

1. Átomos

Los átomos son los elementos básicos que se utilizan en la construcción de interfaces digitales que no pueden ser reducidos en componentes más simples sin perder su funcionalidad. Los átomos para una página web incluyen las etiquetas básicas de HTML como párrafos, campos de texto, botones y  etiquetas, así como elementos básicos de estilo como colores y tipografías.

Átomos en HTML

La tabla periódica de elementos HTML de Josh Duck ilustra como los sitios web, web apps, mensajes de correo, intranets y cualquier cosa que se visualice con un navegador web están compuestos de los mismos elementos:

Tabla periódica de elementos HTML. Crédito: MadeByMike

2. Moléculas

Las moléculas son grupos de elementos visuales (o átomos)que funcionan juntos como una unidad y que tienen propiedades y funcionalidades que los átomos individuales no tienen.

Un ejemplo sería juntar un campo de texto, una etiqueta de formulario y un botón para crear la molécula de un formulario de búsqueda.

Molécula de búsqueda. Crédito: Brad Frost

Cuando se combinan, sus átomos tienen un propósito nuevo: la etiqueta define la entrada del campo, y el botón envía la información del formulario para ejecutar una búsqueda. El resultado es un componente simple y reutilizable que puede ser incluirse en cualquier sistema que necesite la funcionalidad de búsqueda.

3. Organismos

Los organismos son componentes más complejos compuestos por combinaciones de átomos y moléculas. Los organismos se integran para crear las secciones y los elementos funcionales de la interface de una página o app.

Si a nuestra molécula de búsqueda le agregamos algunos elementos más, podremos obtener el organismo del encabezado, un elemento común en muchas páginas web.

Organismo de Encabezado. Crédito: Brad Frost

4. Plantillas

Las plantillas son objetos a nivel de una página (en este punto abandonamos la metáfora de los elementos químicos y regresamos a elementos editoriales) que utilizan componentes creados por combinaciones de átomos, moléculas u organismos en una distribución que hace tangible la estructura general de contenido.

Plantilla con contenedores para contenido. Crédito: Brad Frost

Las plantillas organizan los componentes básicos y les agregan contexto para que la página funcione correctamente. Una característica importante de las plantillas es que se enfocan en la estructura del contenido en lugar del contenido final de la página.

Los sistemas dinámicos deben poder adaptarse a contenido dinámico que cambia todo el tiempo y las plantillas proveen los mecanismos para definir las propiedades de los componentes que las integran, como el tamaño y alineación de sus imágenes o la longitud y estilo de sus encabezados y párrafos.

5. Páginas

Las páginas son instancias específicas de las plantillas que utilizan contenido real. Si tomamos la plantilla de la capa anterior y la llenamos contenido real en sus contenedores podremos ver el resultado final del proceso.

Página con contenido final. Crédito: Brad Frost

Ventajas de utilizar Atomic Design

Una de las principales ventajas de utilizar esta metodología es que está enfocada en la modularidad, lo que permite crear elementos simples que pueden reutilizarse constantemente en equipos de diseño y desarrollo de cualquier tamaño sin perder la consistencia del diseño final.

La modularidad enAtomic Design también habilita la transversalidad entre los componentes abstractos y concretos del diseño, lo que permite generar diferentes patrones de interfaz reutilizando los mismos elementos al reorganizar su arquitectura y crear nuevos contextos para ellos.

Modularidad y reutilización de elementos atómicos. Crédito: Brad Frost

Atomic Design es un acercamiento para crear un sistemas de diseño (design systems) para crear prototipos y código más eficiente y que cualquier persona en el equipo de producción puede entender y utilizar para procesos de diseño y desarrollo más rápidos y productivos.

Atomic Design no es un proceso lineal, sino un modelo de pensamiento sobre el que se puede iterar para crear sistemas complejos partiendo de elementos sencillos.

Equipos de producto como los de Airbnb se han beneficiado al implementar Atomic Design en sus procesos de diseño y desarrollo, integrándolo a los procesos que ya usaban.

PatternLab para sistemas de diseño

Brad Frost y Dave Olsen crearon Pattern Lab, un gestor de sistemas de diseño basados en los principios de Atomic Design. Este gestor es opensource y tiene opciones para ajustar el tamaño de las páginas y de agregar comentarios a las secciones del sitio y a los bloques de construcción a nivel de código.

Pattern Lab, un gestor de elementos para Atomic Design

La versión original de Pattern Lab está escrita en PHP, pero ya hay dos versiones para NodeJS: una para Gulp y otra para Grunt. Es recomendable explorar el demo en PatternLab para entender mejor cómo funciona una implementación real de Atomic Design.

Atomic Design con Patternlab

La diversidad en los dispositivos con los que los usuarios navegan la web o consumen información no se detendrá, sino que seguirá creciendo de manera acelerada, y posiblemente los modelos de diseño y desarrollo tradicionales no soportarán esa diversidad sin adaptarse a formas más ágiles de trabajo. Atomic Design es una metodología que puede ayudarnos a crear sistemas de diseño para construir páginas y apps que se puedan adaptar a cualquier plataforma.

Publicado por Mauricio Angulo S.

Mauricio es diseñador de experiencia de usuario desde el año 2004. Es front-end developer, sprintmaster y entusiasta de AI. Es mentor en el programa Google for Startups y parte de la iniciativa de Microsoft Regional Director como mentor para corporativos y startups en diseño de experiencia de usuario, usabilidad y desarrollo de software. Es co-fundador de UX Nights. También es escritor, ponente internacional y profesor.