Diseño UI

¿Qué es el Atomic Design?

El Atomic Design es una metodología creada por Brad Frost, a quien yo personalmente considero un verdadero genio. Su principal característica es que nos ayuda a entender la importancia de construir sistemas de diseño. Esto nos ayuda a crear productos digitales más fáciles de entender, tanto para nuestros usuarios como para del equipo de desarrolladores que debe ejecutarlo.

La propuesta conlleva la aplicación de un modelo mental para crear un sistema de diseño más eficiente. La base de esta metodología es la modularidad de elementos, lo que nos permite crear distintas estructuras combinando y re-utilizando sus distintas formas. En palabras más simples, se trata de llevar a los elementos a su mínima expresión y desde ahí combinarlos para crear elementos/estructuras más complejas.

¿En qué consiste el Atomic Design?

Está compuesto por 5 etapas distintas: átomos, moléculas, organismos, templates y páginas. Estas trabajan conjuntamente para crear los sistemas de diseño de una forma estructurada y jerárquica. Esto nos ayuda a entender toda la interfaz como un sistema de elementos que interactúan entre ellos.

A continuación veremos más en detalle cada una de las etapas que se mencionan anteriormente:

Átomos

Como lo dice la palabra, son elementos que no se pueden desglosar o separar en otros sin dejar de ser funcionales. Pero hay que aclarar que cada átomo tiene una funcionalidad básica. Un ejemplo de esto sería un Botón.

Moléculas

Resulta de varios átomos unidos para componer una unidad funcional. Si lo llevamos al sistema de diseño son grupos relativamente sencillos de elementos UI. Por ejemplo un buscador básico, compuesto por una etiqueta o un ícono más un botón.

Organismos

En esta etapa podemos hablar de componentes UI relativamente complejos. Estos organismos estarían formados de Moléculas y/o Átomos u otro organismo, los que formarían distintas secciones de una interfaz. Un ejemplo de organismo podría ser el Header de un sitio, el que se compone de logo, íconos, botones y buscadores.

Templates

En esta etapa es donde nos comenzamos a fijar más en la estructura de la página, que es donde vamos a situar todo los componentes dentro de un layout. Esto es muy útil y nos ayudará, por ejemplo, a contrastar tamaños de imágenes, verificar que las longitudes de los textos y títulos sea la correcta, revisar el tamaño de las cajas, etc.

Página

Esta es la etapa más específica del Template, donde podemos ver el diseño y contenido final. Aquí es donde se puede visualizar como será la UI del producto digital que comenzamos a crear al inicio con el átomo. Es la etapa más concreta, donde los usuarios interactúan con el diseño final del producto.

Teniendo clara la importancia de estas cinco etapas, lograremos entender el objetivo base del Atomic Design, el cual corresponde a la creación de librerías con pequeños elementos que serán reutilizables y combinables. Así, podremos tener un sistema de diseño rápido, uniforme, escalable y empático. Siendo esto último lo más importante, algo que nunca debemos olvidar como diseñadores UX/UI, que nuestros primeros usuarios que interactúan con nuestro producto digital son los desarrolladores de nuestros equipos.