Atomic Design

¿Qué es atomic design?

Dentro del mundo digital, la Experiencia de Usuario o UX tiene una influencia abismal sobre el éxito o fracaso de un proyecto online.

Y como no puede ser de otra manera, la UX está relacionada con las facilidades que se otorguen a los usuarios al utilizar un producto. Supongamos que entras a una red social que tiene un concepto bastante llamativo, con un modelo de negocios bastante prometedor, pero que su usabilidad es pésima. ¿La seguirías utilizando? Lo más probable es que no, ¿verdad?

Lo mismo ocurre cuando intentas acceder a un mismo producto digital desde diferentes dispositivos y de pronto te das cuenta que en un ordenador funciona al 100%, pero en tu móvil la experiencia decae y como consecuencia la experiencia de usuario cae a niveles subterráneos.

Hasta la fecha esa incompatibilidad entre dispositivos era una constante que afectaba a millones de personas alrededor del mundo, pero finalmente, llegó la respuesta que tanto esperábamos: el atomic design.

Se trata de un concepto un poco rompedor porque en realidad es bastante reciente. El atomic design o diseño atómico es una filosofía de diseño digital que se basa en la modularidad y la compatibilidad.

Recibe su nombre porque es como una especie de referencia al mundo biológico en donde todo está conformado por tres estructuras: átomos, moléculas y organismos. A eso se le añaden dos nuevas fases ya relacionadas con el mundo digital: plantillas y páginas.

¿Para qué sirve el atomic design?

Dicho de una forma bastante simplificada, se puede categorizar que el atomic design sirve para facilitar la vida de los desarrolladores y diseñadores web, para cumplir con esa meta se busca un punto de unión entre ambas disciplinas.

Si tienes experiencia en el ramo habrás notado lo tedioso que es crear una web, página a página. Lo mismo ocurre cuando tienes que desarrollar una App pantalla a pantalla, cuantos más elementos tengas que desarrollar más probabilidades tendrás de fallar.

Y no solo estamos hablando de fallos catastróficos, sino los pequeños detalles: desde una línea de código mal escrita hasta un encabezado cuyo tamaño es diferente a los otros.

Pero con el atomic design eso no sucede más, ya quecon su implementación se unen los esfuerzos de desarrolladores y diseñadores para adoptar una forma de trabajo minimalista.

¿Para qué exponerse a errores a gran escala? Lo mejor es optimizar lo que sucede desde los elementos más pequeños.

De esa forma, ahora tanto los desarrolladores como los diseñadores se ocupan de construir pequeños átomos que luego serán insertados en estructuras más grandes. De ahí viene eso de “atomic design”.

Lo mejor de todo es que ahora resultará mucho más sencillo adaptar esas pequeñas cápsulas de un formato a otro. Eso quiere decir que en el momento de adaptar los recursos para una página web a diseño responsive no será tan complicado, tan solo deberás ajustar cada uno de los pequeños elementos en lugar de hacerlo con toda una página completa.

Quizás un desarrollador web experto pensará que eso no es un gran problema y en cierta medida tiene razón. Pero recuerda que uno de los principios de toda industria es la optimización de procesos y cuanto más sencillo sea mejor.

Fases del atomic design

El atomic design está conformado por cinco fases crecientes, de lo micro a lo macro. Te contamos de qué va cada una de sus etapas:

1. Átomos: Tal como ocurre con la biología, los átomos serán las unidades más pequeñas de desarrollo y es que los átomos sí que son minúsculos, por eso en esta fase se tendrán en cuenta todos esos pequeños elementos que cumplen alguna función, como es el caso de los botones o avatares, así como tipografías y combinaciones de colores.
2. Moléculas: Volviendo al mundo biológico, las moléculas están conformadas por la unión de al menos dos átomos para dar vida a un elemento más grande. En el caso del desarrollo y diseño web será lo mismo, se podrán unir dos o más de los átomos desarrollados para obtener elementos un poco más complejos. Como ejemplo tienes la ficha del autor de un blog donde se muestra un avatar acompañado de un texto con una tipografía específica.
3. Organismos: Llegados a este punto, la apuesta sube un poco más. En este caso se unen más de dos moléculas para dar forma a un elemento mucho más importante. Los resultados ya se asemejan mucho más a los componentes de una página web o una aplicación. Sería el caso de una descripción de autor con un recuadro de color detrás de él a modo de fondo.
4. Plantillas: Ya se reúnen varios organismos para dar forma a lo que en el mundo del desarrollo web se conoce como “wireframes”, unas maquetas bastante similares a una página web, pero que aún no lo son.
5. Páginas: Aquí se pulen los detalles finales, se agregan un par de imágenes, quizás algunas animaciones y listo, proyecto terminado.

Ventajas y desventajas del atomic design

Las experiencias obtenidas a partir de la implementación del atomic design han demostrado que es una metodología muy beneficiosa.

• Obtendrás diseños mucho más homogéneos entre sí y adaptables a todo tipo de pantallas.
• El trabajo suele ser más rápido gracias a la posibilidad de exportar e importar recursos.
• Todas las tareas siguen una secuencia lógica, facilitando así la organización del trabajo.
• La transición entre la fase de detalles y la etapa de resultados es mucho más rápida.
• Con el atomic design es más fácil delegar trabajo sin poner en riesgo aspectos de estilo.
• Tanto el desarrollo como el diseño serán más llevaderos gracias a la modularidad del proceso.

Para ser sinceros, tenemos que admitir que el atomic design también tiene algunos atenuantes que debes que tener en cuenta:

• No todos están acostumbrados a este tipo de trabajo, por lo que será difícil encontrar colaboradores dispuestos a adoptar esta metodología.
• En un principio debes concentrarte en desarrollar cada átomo por separado, eso puede ser un poco desgastante, en especial porque invertirás mucha energía a cambio de resultados poco tangibles.

Y hasta aquí todo sobre el atomic design, sin duda alguna un modelo de diseño muy interesante que dará mucho de qué hablar.