Hablemos de Atomic Design…

En Digital Hamster utilizamos la metodología de diseño atómico para diseñar nuestras interfaces, crear diseños consistentes y agilizar el trabajo. Pero ¿qué es atomic design?

La metodología del Atomic Design o diseño atómico surge de una teoría ideada por el diseñador Brad Frost, quien la define como un “sistema de trabajo que se basa en la creación de elementos modulares sencillos para crear estructuras de información mucho más complejas”. Es decir, a Frost se le ocurrió utilizar el modelo atómico para transmitir la idea de que, tanto en el diseño como en el desarrollo web, se debe trabajar desde los elementos particulares hacia los generales.

Según su teoría, un sistema de diseño se compone de elementos de cinco niveles: Átomos > Moléculas > Organismos > Plantillas > Páginas.

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. Es aquel elemento que necesita estar acompañado por otros átomos para que tenga coherencia. Un ejemplo claro de átomos podrían ser botones, cards, avatares, inputs de formulario…, pero también tipografías, paleta de colores, espaciados, párrafos, etc.

Nivel 2: Moléculas

Como en química, las moléculas surgen de la 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. Una molécula es aquel elemento que puede utilizarse de forma autónoma, dado que ya ofrece información suficiente y puede funcionar como una unidad. Si llevamos el ejemplo a una interfaz, una molécula podría representar un header, un footer, un post o un campo de formulario con un botón de enviar y un label.

Nivel 3: Organismos

En este tercer nivel ya hablamos de elementos que son más complejos, porque son el resultado de sumar los niveles anteriores. Los organismos están formados por 2 o más moléculas que, a su vez, están formados por dos o más átomos. Un ejemplo de esto sería un listado en el que cada ítem de la lista está compuesto por un avatar y un texto.

Nivel 4: Plantilla

Las plantillas dentro del Atomic Design serían los wireframes: una unión de distintos organismos que forman una web o una app. Se trata de un entregable de alta fidelidad, pero que no termina de ser el diseño final. Las plantillas organizan los organismos y se enfocan en la estructura del contenido en lugar del contenido final de la página.

Nivel 5: Páginas

Las páginas son la última instancia, se conforman con el conjunto de organismos. Las páginas, serían la suma de todo lo anterior y el resultado final: la web, la aplicación, el software o cualquier producto digital que estemos desarrollando.

Resumiendo… ¿Por qué debemos utilizar esta metodología?

Utilizamos Atomic Design porque nos ayuda a plantear los elementos de UI básicos con los que luego los desarrolladores tendrán que trabajar. Con esta base, después podemos ir creando fácilmente las moléculas, organismos y, finalmente, el diseño final. Nos obliga a plantear bien de inicio el “sistema de diseño”, con las tipografías, jerarquías, paleta de colores, etc., que necesitaremos.

Además, ayuda a planificar y nos permite crear un sistema que en un futuro podremos actualizar fácilmente, ya que tendremos los átomos creados y sólo tendremos que combinarlos de otro modo para crear moléculas y organismos distintos. Utilizar componentes reutilizables hace que la labor de generar una página sea un proceso mucho más ágil y colaborativo, evitando errores de código y repeticiones innecesarias, y creando un sistema consistente.