Introducción a Atomic Design

Atomic Design es una metodología de diseño que facilita la creación de aplicaciones en React. Permite trabajar tomando en cuenta cada componente y establecer la mejor forma de dividir los elementos claves para construir interfaces.

¿Para qué sirve el diseño atómico o Atomic Design?

El diseño atómico o Atomic Design permite reconocer los elementos más simples de una aplicación y poco a poco identificar las estructuras más complejas. De esta forma, la creación de una aplicación se podrá llevar a cabo de manera metódica y eficaz.

Esta metodología no solo hace posible la definición de un sistema de diseño, sino que facilita la construcción de la arquitectura de una aplicación o interfaz web.

Fuente: Atomic Design Methodology

Ventajas de usar Atomic Design

Estos son algunos de los beneficios de usar el diseño atómico para la creación de interfaces web:

1. Es la forma más común de crear interfaces y facilita la inclusión de nuevas funcionalidades cuando el producto madure
2. Permite construir un sistema de diseño y que el equipo trabaje con base en él
3. Facilita la comunicación y la colaboración con otras áreas y roles como desarrollo, producto o negocios
4. Permite crear diseños consistentes y escalables

5 etapas de Atomic Design

El diseño atómico o Atomic Design plantea un paralelo con la composición de la materia en el universo. Por ello, contempla las siguientes 5 fases:

1. Átomos
2. Moléculas
3. Organismos
4. Plantillas o templates
5. Páginas

Fuente: Atomic Design Methodology

1. Átomos. Primer nivel de abstracción

En este nivel se consideran pequeños elementos o unidades claves de la aplicación. Por ejemplo, una imagen, un texto o una figura, entre otros.

Cuando diseñes una Interfaz de Usuario (UI), toma en cuenta en este nivel los botones, etiquetas HTML, imágenes o entradas de texto.

2. Moléculas. Combinación de varios componentes para dar sentido

Las moléculas tienen una función específica para la cual necesitan varios átomos. En interfaces, por ejemplo, una sección como comentario de Twitter, otra de YouTube con la opción “me gusta” o “no me gusta”, un avatar o el menú en los videos de Platzi para avanzar o retroceder en la clase, todos ellos son moléculas.

Están compuestas por elementos más pequeños, como un botón o cuadro de texto. Este es el segundo nivel. Crear moléculas es simple, recuerda que deben tener una función única en la aplicación.

3. Organismos. Sección definida en la aplicación

Los organismos pertenecen a un nivel mucho más complejo. Lo más interesante es que tienen vida propia y pueden interactuar en una manera muy amplia con otros organismos.

En el diseño de interfaces, imagina el header, que está compuesto de varios elementos y tiene un impacto en la app. Imagina también una sección como una tienda de ropa en la página web: Cada artículo consta de una imagen, precio y un orden particular. Puedes verlo así:

Átomo⇒ imagen, precio, descripción.

Molécula ⇒ el cuadro que contiene a la imagen, el precio y a la descripción

Organismo ⇒ todos los cuadros de productos ordenados en forma de tabla

El organismo puede usar moléculas del mismo tipo o diferentes. El punto clave, es que no trates de abarcar tanto y asegurarte de que pertenezcan a una sección definida en la app.

4. Templates o plantillas. Articulan la estructura del contenido

Es la plantilla el elemento en el cual se organizarán los organismos. Es decir, el esqueleto que indica dónde irán, por ejemplo, el header, el footer y la sección de comentarios en la página de inicio.

La estructura del contenido permite identificar los tamaños de las imágenes y la longitud de caracteres.

5. Páginas. Contenido en acción

Las páginas (pages) representan la página de una aplicación funcionando. Son la unión de templates que forman el proyecto final que se presenta al usuario y conjugan lo creado con un sentido y funcionamiento establecidos.

En resumen, las páginas son lo que los usuarios ven y con lo que van a interactuar.

Algo interesante del diseño atómico o Atomic Design es que permite realizar actualizaciones de manera fácil, porque se puede modificar, por ejemplo, un elemento del primer nivel (botón) y esto se replica en los demás niveles.

Contribución creada con los aportes de: Edison Guillermo Casanova Yandún, Braulio_Rivas