¿Qué es Atomic Design?

El concepto de Atomic Web Design surge del libro Atomic Design de Brad Frost, publicado por primera vez en 2013. Sus teorías se han convertido en un referente para la creación de los sistemas de diseño.

Brad Frost concibe el diseño de la interfaz web como un todo compuesto de unidades más pequeñas, que él llama átomos. Reutilizando y combinando estos componentes se generan elementos mayores, que son partes del diseño de un producto digital.

“Atomic design” es una metodología utilizada para construir sistemas de diseño efectivos y orientados al medio web o digital, inspirada en los principios de la Teoría General de Sistemas, que considera los sistemas vivos como sistemas abiertos, en constante interacción con otros sistemas.

Según su teoría, un sistema de diseño se compone de elementos de cinco niveles:

  • Átomos
  • Moléculas
  • Organismos
  • Plantillas
  • Páginas

Átomos

Los átomos son la unidad básica en “Atomic Design”, no pueden ser divididos en otras unidades, y componen los bloques más elementales de una interfaz de usuario.

Ejemplos de átomos son iconos, el titular de una página, un botón o la imagen principal de un post.

A nivel de código comprenden etiquetas HTML como las propias de los encabezados, imágenes, párrafos, botones, etiquetas de formularios o tablas.
Pero un átomo carece de significado si no forma parte de un sistema mayor.

Moléculas

Las moléculas son agrupaciones de átomos que, unidos, adquieren nuevas características y funcionan como una unidad. Forman componentes de interfaz relativamente simples, como un menú, una tabla o un formulario de búsqueda.

A través de la reutilización de las moléculas, allí donde se necesiten, eliminamos complejidad, facilitamos el testado y aseguramos la coherencia gráfica, estructural y conceptual de la interfaz.

Organismos

Los organismos son conjuntos de moléculas y átomos que crean elementos más complejos de una interfaz.

Por ejemplo, una cabecera contiene moléculas y átomos, como un logotipo, la navegación principal y de su sección, la selección del idioma o un formulario de búsqueda.

Organismos son elementos reutilizados asiduamente como cabeceras y pies, un menú completo de navegación o un listado de elementos.

Plantillas

Las plantillas son el último nivel de abstracción del sistema. En ellas se disponen los diversos componentes que hemos visto de forma jerarquizada para conformar una estructura de contenidos determinada.

Páginas

Las páginas son instancias específicas de las plantillas, creadas aplicando contenidos reales.

En las páginas todos los componentes se conjuntan para crear un efectivo producto digital.

¿Qué ventajas tiene el Atomic Design?

Como se puede deducir y explica su autor, Brad Frost, “Atomic design” no es un proceso secuencial, sino un marco conceptual que nos ayuda a pensar en la interfaz de usuario como un todo cohesivo y holístico y una colección de partes, simultáneamente.

Atomic design permite reducir un diseño a sus elementos fundamentales. Integra en su concepción ideas como flexibilidad, optimización, modularidad o neutralidad.

Utilizar componentes reutilizables y fáciles de testear hace que la labor de generar una página sea un proceso mucho más ágil y colaborativo, evitando errores de código y repeticiones innecesarias.

La solución a esta uniformidad en el diseño es la generación de un conjunto de normas y guía de estilo, que se convierte así en la base del sistema de diseño.

Considerar las páginas web como un sistemas de componentes reutilizables a partir de unos patrones de diseño y unos estilos definidos, organizados en un Pattern Lab o biblioteca de patrones y una guía de estilo.

Atomic Design, un modelo de trabajo para la UX

Los componentes básicos del Atomic Design definen un sistema de diseño basado en una jerarquía que ha de ser flexible y escalable. Brad Frost ha desarrollado una herramienta de código abierto, denominada Pattern Lab, que ayuda e inspira la creación de guías de estilo respetando los principios del Atomic Design.

Una de las funcionalidades más interesantes del Pattern Lab es que permite testear variaciones de un mismo componente con diferentes características: cantidades añadidas en el carrito, longitud de los títulos, velocidad de carga o resoluciones de pantalla.

Una guía de estilo es una colección de componentes y reglas que todos los involucrados en el diseño y desarrollo web deben aplicar. De esta forma, todas las partes de una web o un app serán coherentes y proporcionarán una experiencia de usuario consistente y compacta.

La guía de estilo sirve para documentar y organizar los componentes ofreciendo instrucciones y normas para su correcto uso. Debe contener lo siguiente:

  • Diseño y descripciones de los componentes
  • Código HTML, CSS y JavaScript de cada componente
  • Visualización de los componentes con distintas resoluciones y variantes
  • Ejemplos reales para las plantillas
  • Información sobre su uso adecuado

La documentación contenida en la guía ayuda a que todas las partes implicadas en el desarrollo puedan trabajar de forma coherente en cualquier fase del proyecto. Pero para que cumpla su función debe ser accesible, clara y fácil de usar.

Disponer de una guía de estilo bien elaborada no solo aporta consistencia a las interfaces sino que mejora la productividad de los desarrolladores web economizando tiempo y dinero. Esta metodología favorece los entornos colaborativos y la comunicación entre las partes implicadas en el sistema de diseño.

Contactar | ¿Qué es Atomic Design?

¿Necesitas una aplicación web a medida?

Damos solución a tus necesidades de gestión, procesos de trabajo o comunicación.

¿Te suscribes a nuestra newsletter?

Información de la buena, de la que te hace crecer. La que te da los consejos que necesitas.