¿Qué es el Atomic Design?

Piensa en cualquier aplicación que hayas diseñado o que uses a diario. Normalmente, son diseñadas pantalla a pantalla, diseñando cada elemento necesario al momento, lo que por estadística, acaba generando errores.

Esto tiene distintas repercusiones:

• Dificulta el desarrollo, porque cada elemento hay que programarlo uno por uno.
• Genera un diseño que se percibe como poco consistente y afecta la experiencia del usuario.

La metodología Atomic Design, ideada por Brad Frost, pretende acabar con las inconsistencias y optimizar al máximo el diseño y el desarrollo de productos digitales.

Los 5 niveles del Atomic Design

Nivel 1: Átomos

Un átomo es la unidad de partículas más pequeña que puede existir.

Aplicado al diseño, hablamos de átomos cuando hablamos de elementos UI que por sí solos tienen alguna funcionalidad: botones, cards, avatares, inputs de formulario, sin embargo, también las tipografías, paleta de colores, espaciados, párrafos…

Y, cada uno de ellos, tiene sus propias variaciones que representan estados: seleccionados, con foco, deshabilitados, etc.

Nivel 2: Moléculas

Una molécula es una unión de dos o más átomos.

Del mismo modo, una molécula en Atomic Design es la unión de diferentes átomos para formar un elemento UI más complejo.

Por ejemplo, un campo de formulario con un botón de enviar y un label. O un rectángulo con un avatar, nombre y ubicación del usuario (es decir, avatar con texto en un área determinada). O un icono junto con un texto que ocupa un área determinada.

Nivel 3: Organismos

Cuando llegamos al tercer nivel estamos hablando de elementos que son más complejos, ya que son sumas de los niveles anteriores.

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.

En este sentido, podríamos considerar un organismo una unión de moléculas. Por ejemplo, cuando juntamos los rectángulos con el avatar y los nombres, cuando unimos los iconos y texto para crear una navegación de una aplicación, etc.

Nivel 4: Plantillas

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, pero que no termina de ser el diseño final. Para que nos entendamos, se trata del esqueleto de la aplicación o página web.

Nivel 5: 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.

Para qué sirve el Atomic Design y ventajas

La metodología del Atomic Design es muy útil porque nos permite tomar cada diseño y diseccionarlo para poder separar cada átomo.

Esto nos ayudará a plantear los elementos básicos de la interfaz del Usuario con los que los desarrolladores tendrán que trabajar y después podrán ir creando fácilmente las moléculas, organismos y, finalmente, los componentes necesarios para el producto digital.

El Atomic Design plantea bien de inicio el sistema de diseño, con las tipografías, jerarquías, paleta de colores, etc. que se necesitarán en un momento dado.

Ayuda a planificar y, lo que es todavía mejor, permite crear un sistema que en un futuro podrá asumir fácilmente el diseño de nuevas funcionalidades, ya que probablemente ya estarán los átomos creados y solo habrá que “combinarlos” de otro modo para crear moléculas y organismos distintos.