¿Qué es Atomic Design? Explicación y ventajas de su uso

¿Qué es Atomic Design? Explicación y ventajas de su uso

Emilio Rodríguez Consultoría

Si estás interesado en conocer cómo trabajamos en el equipo de diseño UX / UI cuando un cliente nos propone un nuevo producto, te contamos cómo seguimos en Cloud District la metodología Atomic Design y las ventajas que nos ofrece trabajar con ella.

Diseñamos componentes, no páginas

Los diseñadores de interfaces trabajamos creando las pantallas con las que luego los usuarios interactúan. Pero esas pantallas en la actualidad ya no se crean una a una ni tampoco son algo aislado del resto del producto, el cual debe de tener un diseño uniforme y fluido. Por eso, antes de diseñar páginas o pantallas lo que diseñamos son los componentes que luego nos permitirán construirlas. En definitiva, no diseñamos una pantalla, diseñamos los componentes con los que se forman esas pantallas.

Cuando creamos estos componentes, estamos creando un diseño modular que nos permite sistematizar esos elementos para que puedan ser replicados tantas veces como hagan falta y de diversas maneras, a veces variando en ciertas características.

Para realizar todo esto, previamente el equipo de diseño necesita tener un estilo general, por ejemplo, de uso de logotipos, colores o tipografía. El mismo cliente puede aportarnos su guía de marca para respetar el estilo del equipo de branding en el diseño final o nosotros podemos darle un estilo.

Qué es Atomic Design

La metodología Atomic Design fue teorizada por el diseñador web estadounidense Brad Frost en su libro titulado Atomic Design. Tras su publicación, el paradigma de diseñar productos por pantallas cambió a diseñar productos por componentes. 

Imagina que acabas de comprar un LEGO. Nada más sacarlo de la caja, tendrás en tu poder todas las piezas desordenadas que puedes utilizar para construir una representación de algo real. Diseñar con la metodología Atomic Design es algo parecido; se trata de ir uniendo correctamente las piezas para poder lograr el objetivo final. Pieza a pieza iremos consiguiendo partes y parte a parte lograremos construir todo.

La metodología establece que a la hora de diseñar un producto nos encontramos con cinco niveles de detalle que tenemos que atacar: átomos, moléculas, organismos, plantillas y páginas.

ejemplo de diseño en atomic design: ¿qué es atomic design?

La terminología utilizada en sus tres fases iniciales está basada en la misma que encontramos en los elementos químicos, siendo usados como metáfora para explicar la función de los mismos. La relación es la siguiente:

  • Los átomos son los elementos que no pueden ser divididos porque perderían su función elemental.
  • Las moléculas son los grupos de dos o más átomos y adquieren propiedades únicas.
  • Los organismos son moléculas funcionando juntas como una unidad que pueden formar desde organismos muy pequeños a organismos muy grandes.

Vamos a ver a continuación cómo funciona cada una de las cinco etapas aplicadas al diseño de un producto.

Los componentes de Atomic Design

Átomos

Los átomos son los elementos más básicos que podemos diseñar. Como hemos comentado antes, serían componentes que no podrían romperse porque dejarían de tener esa función. Para realizar muchos de ellos nos basamos en la identidad visual que tiene o quiere tener el producto o la compañía y, si los hubiese, en los componentes de diseño del framework en los que se va a desarrollar el producto.

Para entender mejor un átomo, pongamos de ejemplo un botón. Cualquier botón tiene como mínimo dos elementos: una caja que lo contiene y un texto indicativo de su acción. Estos dos podrían ser por sí solos, volviendo a la terminología química, como los protones, los neutrones o los electrones. Cogiendo entonces el color primario y la tipografía que tengamos de la identidad del producto, establecemos el estilo de la caja y creamos el átomo. A este botón que hemos creado le podría acompañar por ejemplo un icono que acompañe a la acción que realice dicho botón.

Normalmente de un mismo átomo tenemos que crear otros porque muchos de ellos necesitan variantes para expresar estados activos, con errores o completados.

Moléculas

Las moléculas son elementos muy simples que forman una unidad. Están compuestos por grupos de dos o más átomos y cumplen solamente una función concreta.

Por ejemplo, si unimos el botón que hemos creado antes a un input, que también sería un átomo, podemos crear con ellos la función de una barra de búsqueda.

Organismos

Los organismos son componentes más complejos debido a que pueden llegar a formar secciones dentro del diseño. Estos ponen en contexto a las moléculas que hemos creado previamente.

Un ejemplo de un organismo podría ser el menú de una web. En él podríamos juntar la barra de búsqueda que hemos creado antes con un grupo de botones que nos lleve a las secciones.

Plantillas

Las plantillas son la estructura que la página o pantalla a diseñar va a tener. Definiremos las guías maestras en las que se asentará el contenido y estableceremos cómo va a ser la disposición de los organismos ya creados en la retícula que vamos a utilizar. En esta fase realizaríamos Wireframes para validar todo el trabajo inicial y la experiencia que tendrá el usuario al utilizar el producto.

Es importante por ello tener una idea clara del contenido que queremos mostrar y los organismos que queremos utilizar para ello. En la plantilla, para seguir con el ejemplo, debemos darle espacio al menú que acabamos de crear y comprobar cómo se adapta al resto de elementos por si hubiese que hacer alguna modificación.

Páginas

Las páginas o pantallas son el entregable final, la representación diseñada de toda la interfaz del producto. En el diseño de las páginas cobran vida finalmente todos los componentes que hemos estado creando hasta ahora.

Para terminar con el ejemplo, nuestro menú y todos los organismos dispuestos en la plantilla de la página formarían el producto completo.

Ventajas que ofrece Atomic Design

La metodología Atomic Design nos permite empezar a crear desde lo más pequeño a lo más grande, lo cual nos permite ofrecer varias ventajas:

  • El diseño del producto, al ser trabajado de esta manera, es más coherente y ofrece así al usuario una experiencia consistente. Podemos definir el mismo componente para que sea utilizado de esa manera en todos los dispositivos o plataformas en los que el producto se desarrolle.
  • La creación de menos componentes implica que el tiempo de diseño y desarrollo sea más corto. Por ejemplo, se pueden reutilizar muchos de los átomos ya creados y combinarlos para obtener nuevas moléculas.
  • Es un proceso que va de lo abstracto a lo concreto. Esto es perfecto porque trabajar y validar componentes abstractos hace que la iteración reduzca el coste de tiempo.
  • Permite crear un inventario de todos los componentes creados. Así se puede hacer rápidamente una auditoría y tener controlados todos ellos.
  • Todos los elementos básicos quedan jerarquizados en las fases iniciales para facilitar posteriormente las iteraciones. 
  • Una vez tenemos definida la plantilla, la creación de páginas se hace de forma mucho más rápida.

En definitiva, sistematizar el diseño nos permite hacer nuestro trabajo mejor y más rápido y la metodología Atomic Design ofrece los pasos necesarios para cumplir esto.

Contáctanos

INFORMACIÓN IMPORTANTE SOBRE COOKIES

Este sitio web utiliza cookies propias y de analítica para mejorar tu experiencia. Algunas de estas cookies son imprescindibles para que el site funcione correctamente.
Puedes ver más información sobre las cookies en nuestra Política de privacidad.

Aceptar