El diseño atómico es una metodología que se basa en construir la interfaz en base a un pequeño grupo de componentes atómicos y un conjunto de reglas para agruparlos en componentes cada vez más complejos. Es una forma de organizar un Sistema de Diseño.

El concepto del diseño atómico fue introducido por Brad Frost en 2012, con un libro titulado Atomic Design, en el que detalla lo que implica crear y mantener sistemas de diseño robustos, implementando interfaces de usuario más consistentes. 

Frost utilizó el nombre de diseño atómico para transmitir la idea de que tanto en la química como en el diseño web, se debe trabajar desde los elementos particulares hacia los generales, creando un universo de átomos, moléculas, organismos, plantillas y páginas. 

Por qué utilizar el diseño atómico

Cuando los proyectos de diseño UX son muy complejos puede resultar complicado visualizar el producto digital en su conjunto. Pero aplicando la metodología del diseño atómico podemos ir diseñando poco a poco los componentes hasta llegar a un punto más amplio.

Al trabajar desde los elementos más pequeños hasta los más generales podremos mantener la consistencia y mejorar la escalabilidad del producto digital, lo que permite ser más eficiente en el desarrollo del producto digital.

Con el diseño atómico podemos conseguir:

  • Más coherencia y estabilidad del sistema. Con este modelo podemos definir muy claramente patrones comunes en toda la interfaz, lo que promueve la consistencia y la escalabilidad del Sistema de Diseño. Lee también: Qué son los patrones de diseño y por qué utilizarlos.
  • Código más consistente. Es más fácil ver el código que se utiliza para los diferentes componentes del proyecto y ayuda a evitar el código duplicado. 
  • Mayor velocidad de trabajo. Acelera el proceso de trabajo porque facilita mucho el proceso de mantenimiento del sistema. Además, permite hacer un “mix and match” de los componentes, sin tener que empezar de cero cada vez que hay que crear una nueva pantalla.
  • Resolver problemas de forma más efectiva. Al crear los átomos y las moléculas básicas, ganaremos tiempo para centrarnos en los problemas realmente importantes.

El diseño atómico es muy útil para jerarquizar y abordar el diseño de interfaces muy complejas. Permite que los desarrolladores puedan construir el código de una forma muy limpia y clara, paso a paso. Además, ayuda a los UX Designers en el proceso de comunicación y control de los cambios del diseño.

Si quieres aprender más sobre Sistemas de Diseño y los proceso de colaboración entre los equipos de Diseño y Desarrollo no te pierdas nuestros Cursos UX Online:

Etapas del diseño atómico

Modelo de diseño atómico
Representación del Diseño Atómico extraído de la página de Brad Frost

Para crear las interfaces, la metodología del diseño atómico se divide en cinco capas:

  • Átomo. Un átomo es el elemento más pequeño del diseño. Son elementos de UI que por sí solos no tienen sentido ni funcionalidad y necesitan estar acompañado por otros átomos para que tengan coherencia. Es importante nombrarlos, definirlos y acotar sus márgenes para que no colapsen con el resto de elementos. Un ejemplo de átomo es una etiqueta, un icono o un color.
  • Molécula. Las moléculas se crean a partir de la unión de átomos. En el diseño atómico las moléculas son elementos que se pueden utilizar de forma autónoma, ya que funcionan como una unidad. También hay que definirlas y acotarlas para que funcionen correctamente con el resto de moléculas. Un ejemplo de molécula es un buscador y un botón para ejecutar la búsqueda. Todo esto forma una molécula que tiene sentido a nivel funcional (y a nivel perceptivo también, porque las personas usuarias pueden interpretar cuál es el sentido de esa molécula y qué función tiene).
  • Organismo. Los organismos de la interfaz se forman a partir del conjunto de moléculas y átomos. Al unirlos se crea una sección más compleja y pueden ofrecer una experiencia completa para las personas usuarias. En esta fase podemos visualizar que la interfaz empieza a tomar forma. Un ejemplo de organismo es un header, un footer, un post o un formulario.  
  • Plantillas. A partir de esta etapa ya no se utiliza la metáfora de la química. La unión de los organismos forma plantillas. Las plantillas son grupos de organismos, representados de forma esquemática. Con las plantillas se definen las propiedades de los componentes que los integran, como el tamaño o el estilo. Por ejemplo, en una página web, las plantillas serían las estructuras de las páginas que la conforman, como la página de inicio, que puede estar compuesta por el menú de navegación, el body con la estructura que corresponda y el footer, por ejemplo. En esta fase la interfaz ya tiene un sentido propio.
  • Páginas. Por último, las páginas se conforman por un conjunto de plantillas. Las páginas son la suma de todas las etapas anteriores. Son plantillas con contenido real y con funcionalidades finales. En una web es el conjunto de páginas que la forman, y en una app es el conjunto de pantallas. 

La esencia del diseño atómico se basa en que podemos dividir las interfaces en pequeños bloques de construcción (o átomos), y trabajar a partir de ahí para crear el producto digital completo.

La finalidad del diseño atómico es construir interfaces facilitando el proceso de ejecución y actualización, lo que nos permitirá ahorrar esfuerzos y tiempo. La clave está en mantener la organización de los elementos para conseguir estructuras escalables.

Planifica e integra las mejores prácticas de la experiencia de usuario en tu organización con UX-PM Nivel 3: Liderar UX.

Aprende todo lo que necesitas saber sobre el diseño de servicios.

Más información sobre la certificacion internacional en UX Learn.


En Torresburriel Estudio desarrollamos las capacidades técnicas de tu equipo en temas de usabilidad, experiencia de usuario y diseño de producto a través de nuestros cursos online y presenciales.