A menudo, el medio más efectivo para gestionar la complejidad es un enfoque preciso en la simplificación: dividir un proyecto en sus componentes más pequeños y visualizar los pasos incrementales hacia la finalización comenzando con los componentes básicos más pequeños. Esto es lo que defiende el diseñador Brad Frost con su propuesta de atomic web design basado en guías de estilo que permiten que los UI sean coherentes a lo largo de toda la interfaz.

No hay mejor forma de entender este concepto que tomando sus propias palabras: “El diseño atómico no es un proceso lineal, sino más bien un modelo mental que nos ayuda a pensar en nuestras interfaces de usuario como un todo cohesivo y una colección de partes al mismo tiempo”.

¿En qué consiste?

En otras palabras, el atomic web design considera la interfaz de usuario de una página web como la suma de cinco factores que se acumulan y conectan entre sí:

• Átomos: son los elementos esenciales y hacen referencia a las etiquetas HTML, etiquetas de formulario y botones, paletas de colores y fuentes. Básicamente, todos los factores que los diseñadores definen como punto de partida para poder crear la guía de estilo de una web.
• Moléculas: químicamente hablando, las moléculas consisten en átomos unidos entre sí. Dentro de este modelo, Atomic Design, una molécula constituye bloques de construcción distintos y se refiere a especificaciones de diseño para combinaciones funcionales y reutilizables de átomos, como una barra de búsqueda de palabras clave con un botón de búsqueda.
• Las combinaciones de bloques de construcción moleculares forman organismos que, a su vez, forman distintas secciones de una interfaz de usuario. Aquí es donde el diseño comienza a tomar forma con la creación de componentes reutilizables. Como un pie de página que consta de un logotipo, iconos de redes sociales, un enlace de llamada a la acción y otros elementos de marca.
• Plantillas. Los grupos de organismos dispuestos juntos forman una plantilla. El factor que cambia el juego dentro del diseño basado en componentes es la flexibilidad inherente del diseño con plantilla. Esto permite que una amplia gama de opciones, como cambiar una imagen por un bloque de texto y obtener una vista previa de los diseños receptivos para varios dispositivos.
• Páginas. Las páginas se refieren a representaciones específicas de plantillas que toman forma más allá de un ejemplo teórico y cobran vida como una visión del mundo real de lo que el usuario verá y experimentará en el sitio. Es en la etapa de la página donde tienden a ocurrir los mensajes de texto y la revisión sobre la totalidad del sistema de diseño y se realizan los ajustes.

El atomic web design combina estos cinco elementos para crear aplicaciones y páginas web desde lo más particular a lo más general y complejo. Este método tiene la ventaja de poder cambiar algo de manera rápida en la creación más general sin cambiar el resto. Es decir, se crea paso a paso y puedes variar cualquiera de esos pasos, porque no influye en el resultado final.

Este modelo sostiene que los elementos HTML más básicos pueden combinarse para crear algo tangible y funcional. Pero que unirlos requiere un enfoque de abajo hacia abajo. Por tanto, no es un diseño lineal, sino un modelo que usamos para pensar en el producto como la suma de todas sus pequeñas partes. Cada etapa tiene un papel fundamental e imprescindible en el producto final.

Beneficios del atomic web design

Aunque a priori puede requerir un esfuerzo adicional para su desarrollo y planificación, genera múltiples beneficios:

• Construir un sistema de componentes. Al descomponer sus partes en etapas, es más fácil ver qué partes de un sitio se pueden reutilizar. Y también cómo puede mezclarlas y combinarlas para crear más moléculas y organismos.
• Diseño más intuitivo. Las interfaces suelen ser más fáciles para cualquier tipo de usuario, y sobre todo, para un nuevo desarrollador que quiere comprender el código base.
• Reduce el riesgo de código duplicado. Al utilizar átomos en el diseño inicial, es más sencillo ver dónde está utilizando otros componentes. Así, para replicar el código existente en otra parte del proceso es más sencillo de localizar.