¿Qué es Atomic Design?

Cuando nos iniciamos en el diseño de UI, empezamos diseñando pantalla a pantalla toda la interfaz. Pero si nos fijamos bien, una vez tenemos gran parte de las pantallas diseñadas, podemos apreciar como una gran mayoría de los elementos que componen la UI se repiten.

El problema surge cuando, los elementos que se repiten los hemos diseñado con micro variaciones y aun siendo el mismo elemento, 🥴 no son iguales.

¿Qué es Atomic Design?

El Atomic Design es una metodología de diseño basada en componer y diseñar interfaces digitales a partir de elementos replicables y modulares.

En este modelo de diseño encontramos piezas muy simples, que conforman la base de nuestro sistema de átomos con los que diseñamos estructuras más complejas. Además el diseño atómico es una solución perfecta en la colaboración con los desarrolladores, ya que a estos les facilitará la construcción de las UI una vez diseñadas.

¿De donde proviene el concepto de Atomic Design?

Este modelo de diseño, proviene del libro ≪Atomic Design≫ de Brad Frost, en el que encontramos términos como Atomic Web Design y Atomic App Design, en los cuales se explica la estructura y el diseño de la interfaz, a partir de la descomposición en unidades más pequeñas que creando una interfaz final compleja.

Partes del Diseño Atómico

El Atomoic Design se compone de 5 elementos o fases que al unirlas creamos un sistema de diseño coherente.

Átomos

Los átomos son los elementos más básicos, y la unidad mínima de diseño.

En este grupo, podríamos incluir unidades como, colores, tipografía, botones, titulares, iconos, avatares…

Moléculas

Las moléculas serían la unión de varios átomos en forma de agrupación.

Por ejemplo, un campo de texto con un botón de enviar o una tarjeta con su descripción.

Organismos

Los organismos serían una selección más compleja en la que podemos encontrar moléculas definidas y átomos.

Plantillas

Las plantillas son la estructura final de una página, compuesta por la agrupación y colocación de organismos, moléculas ya tomos formando la estructura final.

Estas plantillas podríamos definirlas como layouts o wireframes.

Páginas

Las páginas son el nivel final del Atomic desing, obteniendo como resultado una interfaz con imágenes y más elementos, listos para ser implementadas en test o desarrollo.

Utilidad y Ventajas del UI Atomic Design

El diseño atómico es un modelo mental que ayuda a la descomposición y creación de interfaces.

No es un modelo lineal y único a seguir, ya que sirve también para mejorar e inventariar interfaces ya creadas.

El uso del Atomic Design permite crear coherencia y homogeneidad dentro de un producto o entorno digital.

Esto se ve reflejado en un mejor experiencia de usuario (UX) en la interacción y uso de nuestro producto.

  • Conseguimos una mayor coherencia y consistencia en el producto final.
  • Permite disponer de un inventario de todos los componentes de la UI en la guía de estilo.
  • Facilita y agiliza el diseño de nuevas interfaces.
  • Sencillez y rapidez en las actualizaciones a nivel de diseño y desarrollo.
  • Facilita el trabajo posterior de desarrollo, ya que no hay que crear varias veces lo mismo.

Óscar López Poveda

Diseñador UX/UI y de producto digital.

Soy Óscar López y vivo diseñando y creando ideas, me encanta descubrir, aprender y compartir todo lo que aprendo sobre entornos, productos digitales y UX. Me apasiona el diseño y siempre estoy abierto a apuntarme a un «bombardeo» de poryectos y descubrir personas que les apasione el mundo digital.

Recibe todas las semanas contenido de calidad sobre Diseño UX y UI en tu mail👇🏼👇🏼

Sigue leyendo...

  • Pruebas de usabilidad

    Las pruebas de usabilidad juegan un papel fundamental en el diseño y desarrollo de productos físicos y digitales, a través…
  • Atajos de teclado en Figma

    Si eres diseñador digital y trabajas en el mundo de producto digital…. fijo que conoces y utilizas Figma. Como en…
  • Regla 60 30 10

    En el momento de diseñar, ya sea para interfaces de usuario o publicaciones en redes sociales, existe un momento crucial:…