Atomic Design es una metodología creada por el diseñador web Brad Frost, que busca optimizar al máximo el desarrollo de productos digitales bajo el concepto de diseñar por componentes.

Frost dividió a esta metodología en 5 distintos niveles:

Nivel 1: Átomos

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

Trasladado al mundo del diseño, un átomo es un elemento UI que en solitario no tiene ninguna funcionalidad. Hablamos de botones, avatares, tipografías o paleta de colores, por citar algunos ejemplos.

Nivel 2: Moléculas

La unión de dos o más átomos da como resultado una molécula con nuevas propiedades.

La unión de dos o más elementos UI da como resultado un elemento UI más complejo. Como por ejemplo, un avatar junto a un nombre y la ubicación del usuario, o una entrada de búsqueda junto a una etiqueta de formulario y un botón.

Nivel 3: Organismos

La unión de las moléculas conforma un organismo.

La suma de los niveles anteriores da como resultado elementos más complejos. Un organismo puede constar de un logotipo, una lista de navegación principal y un formulario de búsqueda. Algo que encontramos usualmente en los sitios web que visitamos.

Algunos organismos pueden estar formados por una misma molécula que se repite una o más veces. El listado de los productos en un e-commerce es una muestra de este sistema.

Nivel 4: Plantillas

Dejando de lado las analogías químicas, las plantillas son en esencia los wireframes.

Cumplen con la función de graficar cómo se ven y funcionan los componentes juntos en el contexto de un diseño, para demostrar cómo las partes se suman e interactúan en un todo de forma óptima como por ejemplo, la muestra de una página de inicio.

Las plantillas son entregables de alta fidelidad, mas no el diseño final.

Nivel 5: Páginas

Estamos en el último nivel. Se trata del diseño final, listo para el desarrollo o la etapa de test.

Las páginas muestran cómo se ve una interfaz de usuario, con contenido representativo real. Continuando con el ejemplo de la plantilla, en este nivel agregaremos textos, imágenes y elementos para mostrar el contenido real en “acción”.

Las páginas son esenciales para probar la eficacia del sistema. Es la etapa en donde vemos cómo se mantienen y conviven todos los patrones. Si algo no se ve como esperábamos o no funciona como debería, entonces, podemos retroceder y cambiar nuestras moléculas, organismos y plantillas, para hallar posibles soluciones o alternativas.

¿Cuáles son las ventajas del Atomic Design?

El Atomic Design nos permite:

• Diseñar unas bases sólidas desde el comienzo, con todos los elementos necesarios: tipografías, paleta de colores, avatares, botones, etcétera.
• Crear sistemas que puedan sernos de utilidad en futuros diseños, ya que tendremos los átomos listos para combinarse de otras maneras, creando otras moléculas y organismos.
• Construir prototipos de alta fidelidad de forma mucho más veloz.
• Realizar cambios en el sistema de diseño de forma mucho más práctica, de manera tal que no sea necesario programar desde cero.

Como así también, nos ayudará a plantear los elementos básicos de la interfaz con la que los desarrolladores trabajarán. Con esta base, podrán llegar con mayor rapidez y facilidad al diseño final, creando previamente moléculas, organismos y plantillas.

Además, comprender y poner en práctica esta metodología nos ofrece la posibilidad de diseccionar el diseño y entender la importancia de cada elemento partícipe en él. Por esta razón, creemos que aplicar el Atom Design es brindar herramientas valiosas para todos los profesionales del diseño, desde un enfoque distinto, práctico e innovador.