SCROLL
TO EXPLORE

4 ventajas de utilizar Atomic Design

Felipe SilbersteinJuly 29, 2021

La metodología de desarrollo Atomic Design simplifica de manera preventiva el escalamiento y maduración de una plataforma para que pueda seguir el ritmo de crecimiento de la empresa.

Permite incrementar la consistencia en los desarrollos en cuanto a estructura y diseño, reduciendo los tiempos de entrega al facilitar la coordinación entre programadores y diseñadores.

Ventajas de usar atomic design 2
spare-parts
spare-parts

Los orígenes del Atomic Design

Cuentan que todo inició como una inspiración de Brad Frost respecto a una manera de simplificar el desarrollo de sitios, pero que podía llevarse a cualquier tipo de plataforma. La idea era sencilla: todo el proceso de creación debía documentarse y a partir de ello generar diferentes combinaciones de elementos para conformar componentes mayores.

Independiente de la complejidad, todos compartirán las unidades básicas, lo que implica coherencia visual pero también de funciones. Así, el equipo de Brad y todos quienes comenzaron a seguir esta metodología, dejaron atrás gran parte de los puntos de roce entre diseño y desarrollo; ya no habría más páginas most likely o muy parecidas (casi, pero no).

Cuando se desarrolla y diseña desde cero todo es una aventura, lo excitante de cuando cada componente encaja y además funciona convirtiendo la idea en producto. Sin embargo, cuando el negocio prospera, se van requiriendo complementos, nuevas páginas y habilitar nuevos canales. Para esos momentos, está esta metodología permite normar y mantener la coherencia en los diseños.

La estructura que le da vida a este enfoque

Atomic Design es una metodología enfocada en el desarrollo de la interfaz y su sistema de diseño. Establece cinco etapas que atraviesa la creación de una plataforma en los dos aspectos ya mencionados, y aunque no es un proceso lineal, se entiende un progreso incremental entre ellas.

  • Los Átomos son la unidad funcional básica, con propiedades únicas como etiquetas en HTML, paletas de colores o botones. Son la estructura base que al asociarse, conforman cualquier organismo y páginas más complejas.
  • Las Moléculas se componen de 2 o más átomos y constituyen funcionamientos operacionales de mayor nivel y alcance que un átomo, como un buscador con sus botones de ejecución.
  • Los Organismos son desarrollos que trabajan en conjunto, al punto de constituir una sola unidad funcional compleja dentro de la UI; como un panel de categorías o un formulario de contacto.
  • Las Plantillas son estructuras de páginas completas con los contenidos establecidos por tipo. Alojan las funcionalidades intrínsecas de los componentes, lo que permite estimar con mayor precisión los tiempos de implementación y puesta en producción.
  • Las Páginas son el resultado final de la interacción entre los átomos, moléculas y organismos. Representan también el producto funcional de un sistema de diseño.
    • En el fondo ocupó toda la analogía de física, química y biología que pudo para facilitar el entendimiento de que la creación de sitios no podía seguir basándose en una estructura rígida de código y ajustar el contenido a su funcionamiento. Si no que el diseño debe crearse de forma libre.

“Sistema de Diseño”: de idea a superpoder

La idea de Frost fue pensar que las páginas son producto de ensamblar diferentes átomos combinables entre sí y que las formas de relacionarse entre ellas podían ser definidas de antemano.

Al regular las relaciones estandarizas el diseño, y luego de eso ya no importa si necesitas crear 3 nuevas páginas o transformar un sitio con miles de páginas. Un sistema de diseño permite mantener una gobernanza en el desarrollo a cualquier escala.

Así que para materializar su idea creó su producto atomizado y demostró a su equipo de desarrollo - según relata su libro - que podía reducir considerablemente los tiempos de lanzamiento de nuevos sitios, incluso aumentando la calidad de estos al mantener consistencia a lo largo del tiempo.

Con esto terminó superando gran parte de los problemas recurrentes de los equipos de desarrollo y diseño. La limitante que significaba disponer solo de un puñado de templates para las diferentes necesidades de cada empresa fue quedando en el olvido. Al crear sistemas de diseño liberas la capacidad de crear alternativas propias y esto dinamiza completamente el desarrollo de interfaces.

A medida que Brad junto a sus compañeros fueron documentando su propuesta surgió Atomic Design como una metodología. Pudiendo exportar la capacidad de crear sistemas de diseño a cualquier organización que busque sofisticar sus plataformas, dándole a los equipos de trabajo un superpoder jamás pensado en el tiempo en que lo crearon y que hoy supone la mejor alternativa para los grandes sitios.

Así, un sistema de diseño entrega a las empresas la capacidad de crear futuras páginas y a expandirse a cualquier escala. Incluso marcas con oficinas en diferentes continentes pueden normalizar su diseño en los diferentes sitios locales.

Una jerarquía en el diseño mejora la identidad de la marca

Para definir las relaciones entre todos estos átomos o módulos ensamblables se basan en la identidad de la marca. Es decir, son la filosofía y los valores de la marca quienes guiarán las reglas en la creación de sitios y no al revés como ocurría anteriormente.

Desde esas reglas se conforma una guía de estilo, o también se puede entender como una guía de identidad. Que contiene tanto aspectos de contenido como de estructura, permitiendo por un lado crear un lenguaje común entre los equipos y por otro trabajar en simultáneo.

Un ejemplo de cómo pueden operar estas definiciones de cada marca, podría ser un eCommerce, el que necesitará constantemente estar incorporando o editando páginas de productos. En ellas también debe ir un sistema de sugerencia y búsqueda. Por lo que un átomo será el campo para input, otro átomo será el botón y con él un cuadro de texto “Search”. Al juntarlos forman una molécula a la que por cierto siempre también puedes definirles previamente una serie de colores específicos de acuerdo a las características de la marca y su sistema de diseño.

Frost entendía que el hecho de que una marca sea coherente con su diseño a lo largo del tiempo es clave para las personas; pero también que aun cuando cambie elementos en el sistema de diseño, la capacidad de replicar con la misma consistencia en todos los canales digitales que se quiera es crítico para el negocio.

Las ventajas de usar atomic design

Las 4 ventajas de emplear esta metodología

Esta intersección entre el diseño y el desarrollo trae diversas ventajas a un proyecto, entre las que destacan:

  • La creación de sistemas de diseño en la parte temprana del proyecto, permite acelerar los desarrollos de UI y escalar en conjunto al crecimiento de la empresa, al disponer de librerías de átomos y moléculas listas para desplegar un nuevo producto.
  • El basarse en átomos busca cumplir un principio de que dichos elementos deben realizar una función y deben realizarla bien, por lo que fomenta la reutilización de ellos en las diferentes fases de creación de moléculas y organismos de prueba, lo que reduce los tiempos entre ideación y puesta en producción.
  • La creación de contenido modularizado permite navegar de lo abstracto a lo concreto, permitiendo probar desde nuevos formularios a grandes actualizaciones de la interfaz, sin condicionar o afectar el backend de la plataforma.
  • El usuario final percibe una mayor consistencia en la experiencia digital, gracias a la percepción de un mismo ecosistema con una combinación de átomos que formaron parte de la estrategia de UX.

Acelera el desarrollo de tus sistemas de diseño con Contentful

Contentful provee un punto central de integración para muchas otras herramientas que forman parte de la solución. Permite centralizar los diferentes modelos de contenido y mantener una clara gobernanza de los datos y el diseño.

Al integrar extensiones de UX desde un enfoque API-First las plataformas ganan en experiencia digital desde el lado del usuario, aunque los equipos de contenido y desarrolladores también se verán beneficiados al disponer de un repositorio centralizado del contenido, entregando coherencia en cualquier futuro desarrollo.

Lo mejor es que Contentful además de ser compatible con atomic design, potencia los desarrollos acortando los tiempos de puesta en producción, al disponer lógicamente del contenido en espacios listos para ser reutilizado; sin tener que duplicar ni recrear tediosas páginas most likely.

Atomic Design para la Buparización, el caso de Chile

Cuando en Reign conocimos la propuesta de Brad Frost, entendimos claramente que esta metodología era la pieza que necesitábamos. Así, el enfoque Reign desde su génesis es construir plataformas de forma modular y ajustada a las necesidades específicas de las marcas. Y crear un Sistema de Diseño era justo eso.

Un ejemplo de cómo lo utilizamos fue durante abril de este 2021, cuando realizamos la Latam Headless Commerce Week, una semana de charlas de partners y presentaciones de casos de éxito de headless eCommerce. De ellos, destacó Bupa Chile, filial de un grupo de salud de británico de escala global y que en Chile buscaba hacía un año una alternativa para gestionar el contenido de todas sus plataformas nacionales.

Como Reign les propusimos una arquitectura headless gestionada mediante Contentful, junto con la estandarización y acompañamiento en la creación de sistemas de diseño, al que por cierto llamaron BADS (Bupa Atomic Design System).

Según Jean Paul Staig, jefe de experiencia digital & performance de Bupa Chile, el resultado fue la mejora en la experiencia de atención, generando que el cliente se sienta parte de un mismo ecosistema. Y por el lado de la organización, los beneficios de aplicar Atomic Design son que luego de haber creado sus sistemas de diseño y generado cada átomo necesario, pueden lanzar un nuevo producto con todas sus páginas y componentes en menos de una semana.

En el ecommerce el éxito está en la capacidad de incorporarse rápidamente a los cambios y siempre estar disponible en tu mejor versión. En ese desafío, Reign será tu mejor partner para implementar un headless commerce basado en atomic design, buscando estar siempre preparados para lo nuevo.

Follow us