Atomic Design es una metodología para crear sistemas de diseño de forma estructurada y modular, propuesta por Brad Frost. Se basa en la analogía de la química, organizando la interfaz en cinco niveles jerárquicos:
-
Átomos (elementos básicos como botones, etiquetas o inputs),
-
Moléculas (combinaciones funcionales de átomos, como un campo de búsqueda con botón),
-
Organismos (secciones completas como un header con navegación),
-
Templates (estructuras de página con contenido ficticio),
-
Pages (versiones finales con contenido real).
Esta metodología promueve la reutilización de componentes, la consistencia visual, y facilita el mantenimiento y escalabilidad del producto digital.
Ejemplo:
En una plataforma de educación virtual, un «botón de inscripción» es un átomo, que junto con un campo de nombre forma una molécula. Esta molécula se incluye en un formulario completo (organismo), que es parte de una plantilla de página de curso (template), la cual finalmente se convierte en una página lista para el usuario (page).
Referencias:
-
Frost, B. (2016). Atomic Design. CreateSpace Independent Publishing Platform. https://atomicdesign.bradfrost.com
-
Nielsen Norman Group. (n.d.). Component-Based Design Thinking. https://www.nngroup.com/articles/component-based-design-thinking/
-
UX Collective. (2020). Atomic Design: Building Interfaces with Efficiency and Consistency. https://uxdesign.cc/atomic-design