Glosario

Atomic Design

Una forma de construir interfaces empezando por las piezas más pequeñas y combinándolas en otras cada vez mayores, igual que en química los átomos forman moléculas. Lo propuso Brad Frost y ordena las pantallas en cinco niveles, de lo más simple a lo más completo, para que todo encaje y se reutilice en vez de rehacerse.

En una analogía · Es la química aplicada a las pantallas: los átomos forman moléculas, las moléculas organismos, y así hasta la página completa.


Los cinco niveles

  • Átomos: las piezas mínimas que ya no se dividen, como un botón, una etiqueta de texto o un campo de formulario.
  • Moléculas: pequeños grupos de átomos que funcionan juntos, como un campo de búsqueda (etiqueta + caja + botón).
  • Organismos: bloques más grandes y reconocibles, como la cabecera de una web con su logo, su menú y su buscador.
  • Plantillas: el esqueleto de una página, con los bloques colocados pero todavía sin contenido real.
  • Páginas: la plantilla rellena con contenido de verdad, lista para el usuario.

La utilidad práctica es pensar la interfaz como un sistema de piezas reutilizables y no como un montón de pantallas sueltas. Esa misma idea (construir desde piezas con reglas claras) es la base de cualquier sistema de diseño y la que permite que un agente componga pantallas reutilizando lo que ya existe en vez de inventar.