Subdirección de las Tecnologías de la Información y Comunicaciones

Área de Gobernanza y Calidad

Versión

Tabla de Contenido

Histórico de cambios

1. Introducción

Atomic Web Design es un enfoque metodológico para la creación de interfaces web que organiza los componentes en cinco niveles jerárquicos: átomos, moléculas, organismos, plantillas y páginas. Inspirado en la química, este sistema permite descomponer una interfaz en sus elementos más básicos (átomos), como botones o campos de texto, y combinarlos progresivamente en estructuras más complejas (moléculas y organismos), hasta formar interfaces completas (plantillas y páginas). Este método promueve la coherencia, la reutilización de componentes y la flexibilidad en el diseño, facilitando tanto el desarrollo como la escalabilidad de la interfaz.

2. Objetivo

El objetivo de este documento, es establecer directrices, reglas y procedimientos claros para garantizar la consistencia, calidad y eficiencia en la ejecución de las labores de ingenieria en el desarrollo de interfaces web.

 Este tipo de documento tiene como finalidad proporcionar un marco estructurado que regule las prácticas y criterios a seguir, de manera que todos los involucrados actúen de forma alineada con los estándares definidos. Además, busca minimizar errores, optimizar recursos y promover la adopción de mejores prácticas, facilitando el cumplimiento de objetivos comunes dentro de una organización o equipo de trabajo.

3. Sistemas de diseño

Partiendo de la base de que el diseño de un producto digital es uno de los factores más importantes para una compañía a la hora de ofrecer sus productos o servicios, es significativo contar con un buen sistema para lograr escalabilidad y flexibilidad en el mismo.

3.1 Problemática

Hay que tener en cuenta que el diseño no es una fase concreta del ciclo de vida de un producto, ni algo que se realice una sola vez. A medida que el éste va madurando y evolucionando, el diseño lo hará con el. El mantenimiento del diseño de un producto no es tarea sencilla teniendo en cuenta la naturaleza cambiante de los productos, la inclusión de nuevas funcionalidades, adaptaciones y otro gran factor a tener en cuenta es la parte logística, es decir, las personas que participan en el diseño no serán permanentes y los miembros de un equipo podrán ir rotando lo que puede llevar a causar una pérdida en la esencia de los diseños y la aparición de inconsistencias, que repercutirán directamente en la experiencia de los usuarios finales que consumen el producto y de esta manera de generará deuda técnica.

A continuación, se puede apreciar un inventario de estilos para botones de un sitio web:

Se puede apreciar que existe una falta de consistencia que repercutirá directamente en el mantenimiento del diseño y en la experiencia del usuario final.

Teniendo en cuenta la problemática mencionada, se debe ser consciente de la importancia de la definición de un buen sistema de diseño que permita gestionar un diseño correctamente. Pero, ¿qué es un sistema de diseño?

3.2 ¿Qué es un sistema de diseño?

«Un design system es un conjunto de componentes que se pueden reutilizar en diferentes combinaciones, permitiendo escalar fácilmente el diseño de una interfaz digital.»

El sistema de diseño será una guía y una referencia que permita realizar un diseño de forma colaborativa, bajo un lenguaje unificado y que, desde su creación, permita la documentación de los principales patrones y guías de estilo a utilizar. Durante el ciclo de vida del producto, el sistema ayudará a que el diseño escale de una manera limpia y ordenada.

3.3 Elementos de un sistema de diseño

Un sistema de diseño debe estar compuesto por los siguientes elementos:

• Guías de estilo: Hacen referencia a la parte visual como pueden ser el uso de determinadas tipografías, colores corporativos, paddings… Son indispensables tanto para diseñadores como desarrolladores.
• Estándares: Es importancia una correcta definición de los estándares de diseño y desarrollo para que todos los integrantes del equipo, desde diseñadores a desarrolladores, tengan los conceptos claros y no exista ambigüedad que pueda llevar a confusión. Teniendo en cuenta esto, siempre estará presente el  qué, el  cómo  y el  por qué  de las partes del diseño.
• Patrones: La detección de patrones en fases iniciales de diseños o desarrollos nos proporcionará la posibilidad de re-aprovechar diferentes elementos. Por otro lado, la definición de éstos implica un mayor grado de experiencia en la resolución de problemas de tal manera que, ante la aparición de uno nuevo, no será necesario comenzar una solución partiendo de cero.
• Componentes: A partir de patrones se podrá decidir cómo hacer nuestro diseño modular y de esta manera se tenga como resultado una serie de componentes re-utilizables a partir de los cuales sea posible generar componentes más complejos que no impliquen grandes dificultades en los procesos.

4. Atomic Design

4.1 Introducción

Actualmente existen numerosos sistemas de diseño lo suficientemente escalables y consistentes para tomar como punto de partida o referencia a la hora de crear un nuevo producto. Algunos de estos ejemplos podrían ser los sistemas propuestos por  Microsoft  o  Google. De ellos hacen uso tanto en sus sistemas operativos, plataformas, herramientas o sitios web.

A pesar de la existencia estos sistemas, es conveniente desarrollar uno propio que vaya lo más acorde posible al enfoque de una organización o corporación. En este punto es donde entra en juego la  metodología Atomic Design.

4.2 Metodología

La metodología de Diseño Atómico o  Atomic Design  fue creada por  Brad Frost  con el objetivo de dar a luz sistemas de diseño eficientes.

Su planteamiento se basa en tomar como referencia la química y el modelo atómico haciendo mención a conceptos como Átomos, Moléculas u Organismos. A partir de estos conceptos surgen una serie de etapas que trabajarán de forma conjunta para dar como resultado interfaces de diseño estructuradas y jerarquizadas:

4.2.1 Átomos

Es la unidad más pequeña y abstracta de las interfaces. Se tratan de elementos funcionales que no se pueden descomponer, así como botones, etiquetas de texto, imágenes... Aunque tienen funcionalidad, no presentan utilidad por si solos.

A su vez, también se consideran átomos todas aquellas propiedades únicas que acompañan a estos elementos y que no presentan funcionalidad como los colores, tipografías, animaciones… 

4.2.2 Moléculas

Las moléculas son elementos de la interfaz formados por la composición de varios átomos de forma coherente, es decir, que juntos trabajan como unidad con un propósito simple y determinado. Esto implica una gran re-utilización del mismo en el resto de la interfaz.

4.2.3 Organismos

Componentes más complejos compuestos por átomos y moléculas. Hay que tener en cuenta que existen organismos sencillos y otros más complejos que han sido creados a partir de la combinación otros organismos. Dan como resultado secciones independientes de la interfaz que ayudan a contextualizar la interfaz.

4.2.4 Plantillas

En este punto ya se deja de lado el símil químico y aparece un enfoque más orientado al producto final.

Se trata de objetos de una página que se crean a partir de combinaciones de átomos, moléculas u organismos y que dan lugar a la estructura del contenido de la interfaz, sin entrar en detalle en el propio contenido. No obstante, no hay que olvidar que este contenido puede ser dinámico por lo que una buena simulación del mismo resultaría de gran utilidad a la hora de comprobar longitudes en encabezados, párrafos u otros textos y a la hora de contrastar los diferentes tamaños de los contenedores de imágenes.

Por ejemplo, a través de una plantilla ya sería posible identificar las diferentes secciones de la interfaz, así como cabeceras, pies de página, menús, paneles de contenido…

4.2.5 Páginas

Es la última etapa en la que se aplica el contenido a las plantillas definidas previamente, es decir, es el resultado que se encontrarán los usuarios al interactúa con el sistema. También hay que tener en cuenta que pueden surgir numerosas variaciones respecto a la plantilla ya que entran en juego casuísticas reales como contenido adicional o restringido dependiendo del rol del usuario que está accediendo al sistema.

4.3 Ventajas

Finalmente se hace referencia a una serie de ventajas obtenidas ante la aplicación de la metodología:

• Realizar una buena definición de átomos al inicio del proyecto permitirá alcanzar diseños consistentes y re-utilizables, lo que implica una mayor agilidad a la hora de afrontar nuevas interfaces.
• Basar la categorización y estructuración de librerías de componentes en la metodología facilitará su documentación y distribución.
• Permite una mejora continua y automática debido a la interconexión y relación entre los diferentes elementos del sistema. La actualización de un determinado átomo del sistema implica una actualización en el resto de elementos del sistema que hayan hecho uso de él.

5. Caso Práctico

Teniendo en cuenta estas pautas, se muestra un ejemplo de un proceso completo desde la definición de átomos hasta la página final:

El siguiente paso será combinar átomos para construir moléculas.  Deben apoyarse y complementarse entre sí para que tengan coherencia. Por ejemplo:

A partir de las moléculas y los átomos se pueden definir los organismos.

A continuación se puede ver el proceso completo en una sola imagen: