# Atomic Desing

El diseño atómico es una metodología compuesta por cinco etapas distintas que trabajan juntas para crear sistemas de diseño de interfaz de una manera más deliberada y jerárquica. Las cinco etapas del diseño atómico son:

- **Átomos**: son elementos de la interfaz de usuario que no se pueden dividir más y sirven como bloques de construcción elementales de una interfaz.
- **Moléculas**: son colecciones de átomos que forman componentes de interfaz de usuario relativamente simples.
- **Organismos**: son componentes relativamente complejos que forman secciones discretas de una interfaz.
- **Plantillas**: colocan componentes dentro de un diseño y demuestran la estructura de contenido subyacente del diseño.
- **Páginas**: aplican contenido real a las plantillas y articulan variaciones para demostrar la interfaz de usuario final y probar la resistencia del sistema de diseño.


## Átomos

Los átomos de nuestras interfaces sirven como los componentes básicos que componen todas nuestras interfaces de usuario. Estos átomos incluyen elementos HTML básicos como etiquetas de formulario, entradas, botones y otros que no se pueden desglosar más sin dejar de ser funcionales.


Cada átomo de interfaz tiene sus propias propiedades únicas, como las dimensiones de una imagen principal o el tamaño de fuente de un encabezado principal. Estas propiedades innatas influyen en cómo se debe aplicar cada átomo al sistema de interfaz de usuario más amplio.

En el contexto de una biblioteca de patrones, los átomos muestran todos sus estilos básicos de un vistazo, lo que puede ser una referencia útil a la que volver mientras desarrolla y mantiene su sistema de diseño.

## Moléculas

Las moléculas de interfaces son grupos relativamente simples de elementos de interfaz de usuario que funcionan juntos como una unidad. Por ejemplo, una etiqueta de formulario, una entrada de búsqueda y un botón pueden unirse para crear una molécula de formulario de búsqueda.


Cuando se combinan, estos átomos abstractos de repente tienen un propósito. El átomo de etiqueta ahora define el átomo de entrada. Al hacer clic en el botón ahora se envía el formulario. El resultado es un componente simple, portátil y reutilizable que se puede colocar en cualquier lugar donde se necesite la función de búsqueda.

La creación de componentes simples ayuda a los diseñadores y desarrolladores de UI a adherirse al principio de responsabilidad única, un antiguo precepto informático que fomenta la mentalidad de "hacer una cosa y hacerlo bien". Cargar un solo patrón con demasiada complejidad hace que el software sea difícil de manejar. Por lo tanto, la creación de moléculas de interfaz de usuario simples facilita las pruebas, fomenta la reutilización y promueve la coherencia en toda la interfaz.

## Organismos

Los organismos son componentes de interfaz de usuario relativamente complejos compuestos por grupos de moléculas y/o átomos y/u otros organismos. Estos organismos forman secciones distintas de una interfaz.

Un formulario de búsqueda a menudo se puede encontrar en el encabezado de muchas experiencias web, así que pongamos esa molécula de formulario de búsqueda en el contexto de un organismo de encabezado.


El encabezado forma una sección independiente de una interfaz, aunque contiene varias partes más pequeñas de la interfaz con sus propias propiedades y funciones únicas.

Los organismos pueden consistir en tipos de moléculas similares o diferentes. Un organismo de encabezado puede constar de elementos diferentes, como una imagen de logotipo, una lista de navegación principal y un formulario de búsqueda. Vemos este tipo de organismos en casi todos los sitios web que visitamos.


Mientras que algunos organismos pueden consistir en diferentes tipos de moléculas, otros organismos pueden consistir en la misma molécula repetida una y otra vez.


Construir desde moléculas hasta organismos más elaborados proporciona a los diseñadores y desarrolladores un importante sentido del contexto. Los organismos demuestran esos componentes más pequeños y simples en acción y sirven como patrones distintos que se pueden usar una y otra vez. El organismo de cuadrícula de productos se puede emplear en cualquier lugar donde se necesite mostrar un grupo de productos, desde listados de categorías hasta resultados de búsqueda y productos relacionados.

## Plantillas

Las plantillas son objetos a nivel de página que colocan componentes en un diseño y articulan la estructura de contenido subyacente del diseño. Para aprovechar nuestro ejemplo anterior, podemos tomar el organismo del encabezado y aplicarlo a una plantilla de página de inicio.


Esta plantilla de página de inicio muestra todos los componentes de página necesarios que funcionan juntos, lo que proporciona un contexto para estas moléculas y organismos relativamente abstractos. Al crear un sistema de diseño efectivo, es fundamental demostrar cómo se ven y funcionan los componentes juntos en el contexto de un diseño para demostrar que las partes se suman para formar un todo que funciona bien.

Otra característica importante de las plantillas es que se centran en la estructura de contenido subyacente de la página en lugar del contenido final de la página. Los sistemas de diseño deben tener en cuenta la naturaleza dinámica del contenido, por lo que es muy útil articular las propiedades importantes de los componentes, como el tamaño de las imágenes y la longitud de los caracteres para los encabezados y los pasajes de texto.

Al definir el esqueleto de una página, podemos crear un sistema que puede dar cuenta de una variedad de contenido dinámico, al mismo tiempo que proporciona las medidas de protección necesarias para los tipos de contenido que pueblan ciertos patrones de diseño. Por ejemplo, la plantilla de la página de inicio de Time Inc. muestra algunos componentes clave en acción y al mismo tiempo demuestra la estructura del contenido con respecto al tamaño de las imágenes y la longitud de los caracteres:


## Páginas

Las páginas son instancias específicas de plantillas que muestran cómo se ve una interfaz de usuario con contenido representativo real en su lugar. Sobre la base de nuestro ejemplo anterior, podemos tomar la plantilla de la página de inicio y verter texto, imágenes y medios representativos en la plantilla para mostrar contenido real en acción.


La etapa de la página es la etapa más concreta del diseño atómico y es importante por algunas razones bastante obvias. Después de todo, esto es lo que los usuarios verán e interactuarán cuando visiten su experiencia. Esto es lo que firmarán sus partes interesadas. Y aquí es donde ves que todos esos componentes se unen para formar una interfaz de usuario.

Además de demostrar la interfaz final como la verán los usuarios, las páginas son esenciales para probar la efectividad del sistema de diseño subyacente. Es en la etapa de la página que podemos ver cómo se mantienen todos esos patrones cuando se aplica contenido real al sistema de diseño.

Cuando vertemos contenido representativo real en la plantilla de la página de inicio de Time Inc., podemos ver cómo se mantienen todos esos patrones de diseño subyacentes.


Debemos crear sistemas que establezcan patrones de diseño reutilizables y que también reflejen con precisión la realidad del contenido que estamos colocando dentro de esos patrones.

Las páginas también brindan un lugar para articular variaciones en las plantillas, lo cual es crucial para establecer sistemas de diseño sólidos y confiables.