09

May

Publicado por: Erika Pena | Atomic Design | diseño | Diseño Atómico | UX/UI

¿Qué es Atomic Design y cuáles son sus beneficios?

La metodología “Atomic Design”, o diseño atómico en castellano, es 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, una teoría que creó el diseñador digital Brad Frost.

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, creando así, todo un universo de átomos, moléculas, organismos y sistema.

Pero, ¿qué beneficios aporta el “Atomic Design”?

Cuando se nos presenta un proyecto complejo, es muy difícil visualizar su imagen global. Al aplicar esta metodología podemos ir diseñando paso a paso hasta llegar a un punto de vista más amplio. Una técnica que ayuda a jerarquizar y controlar posibles cambios.

Al trabajar desde elementos más particulares hacia generales, podemos mantener la consistencia y la escalabilidad en una mejor manera. Lo que permite ahorrar tiempo.

¿Cómo funciona el “Atomic Design”?

La metodología de Diseño Atómico se compone de cinco capas que trabajan juntas para crear interfaces, estas son:

Átomo > Molécula > Organismo > TemplateSistema

Desgranando elementos…

Átomos

Un átomo es aquel elemento que por sí solo no tiene sentido. Es el elemento más pequeño que necesita estar acompañado por otros átomos para que tenga coherencia. Para poder conocer cómo se comporta al ser juntado con otros átomos, debe ser nombrado, definido y acotado con sus márgenes. De esta manera no creará una lucha entre los demás elementos unitarios. Un ejemplo claro de átomos puede ser un título, un texto, un icono o un color.

Moléculas

Como en química, las moléculas surgen de la unión de los átomos. Una molécula es aquel elemento que puede utilizarse de forma autónoma, debido a 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 o un post. Al igual que un átomo, las moléculas también deben ser definidas y acotadas para poder determinar su comportamiento en convivencia con sus semejantes.

Organismos

Los “organismos de la interfaz” son formados por el conjunto de moléculas y átomos, unidos para formar una sección más compleja. Estos organismos ya ofrecen una experiencia completa para el usuario.

Template

Las plantillas organizan los organismos y se enfocan en la estructura del contenido en lugar del contenido final de la página. Abandonamos la metáfora de los elementos químicos y regresamos a elementos “editoriales”. Los sistemas dinámicos se adaptan todo el tiempo, y las plantillas definen las propiedades de los componentes que los integran. Como el tamaño, la alineación y estilo.
Si lo traspasamos a un producto digital; como por ejemplo una web, el organismo comprendería las páginas que la conforman: la “Home”, el “About us”, la página de “Contact”, etc. Es en este punto donde la interfaz comienza a tener sentido propio.

Sistema

El sistema se conforma con el conjunto de organismos. Por ejemplo, un conjunto de páginas formaría la web. El conjunto de pantallas y acciones construye una app. El sistema, por lo tanto, sería la suma del todo lo anterior. Es el resultado final; la web, la aplicación, el software o cualquier producto digital que estemos desarrollando.

Conclusión: La organización lo es todo

A modo de resumen, esta metodología inspirada en los principios de la química, nos permite construir y crear interfaces de manera detallada, facilitando el proceso de actualización y ejecución. Lo que nos permitiría ahorrar esfuerzos y tiempo, además de optimizar la gestión de sprints entre diseñador, programador y cliente. Una vez entiendas y apliques eficientemente el concepto Atomic Design, te resultará más sencillo utilizar y mantener esta organización de elementos.

Aunque si todavía te has quedado con dudas o quieres ampliar sobre este tema, te sugiero que visites la página web de Brad Frost donde podrás encontrar información ampliada sobre este tema.

Si te ha parecido interesante, te recomiendo que lo compartas para que otros puedan aprender algo nuevo hoy también.

CTA-interesting-justdigital

 

Barcelona
Passeig Gaiolà 13
+34 933 801 144
Lleida
Carrer Agustins 7
+34 973 988 222
Andorra
(Escaldes-Engordany)
Parc de la Mola 10, AD700
Bogota
Carrera 9A #99-07 Piso 9. Despacho 02
Torre la Equidad