Atomic Design: ¿qué es y cómo usarlo?
En el mundo del diseño de una página web, la metodología Atomic Design ha adquirido mucha popularidad durante los últimos años. Queremos acercarte a esta visión particular del diseño para que puedas introducirte en ella y aprender cuáles son los pasos para poder ponerla en marcha en tu trabajo como diseñador UX.
Qué es Atomic Design
Atomic Design es una metodología de diseño que se inspira en cómo las moléculas se combinan en los procesos químicos del mundo real, para crear compuestos más elaborados a base de compuestos simples, en distintos niveles de complejidad, hasta llegar a organismos realmente sofisticados. Esa idea, llevada al diseño, consiste en empezar por crear interfaces de usuario simples, como un elemental icono o un campo de texto de un formulario, pasando luego por interfaces de usuario todavía sencillas, que combinan una o varias interfaces de usuario simples, como una caja de búsqueda decorada por un icono. Esta progresión de combinación de interfaces se va dando hasta llegar a compuestos tan grandes como sería una aplicación completa.
¿Por qué es importante el Atomic Design en el desarrollo web?
El Atomic Design es un enfoque que se puede aplicar a cualquier área del diseño. En diseño web resulta muy importante porque se adapta muy bien a la naturaleza de los proyectos de Internet, que requieren una flexibilidad muy grande y favorecer características como la escalabilidad y el mantenimiento.
A la vez, el desarrollo actual está basado comúnmente en componentes, en los que unos componentes sencillos se componen de otros más complejos, por lo que la idea del Atomic Design encaja perfectamente con esta arquitectura.
Beneficios del Atomic Design para desarrolladores y diseñadores
Aunque en vista de lo anterior seguramente muchos de los lectores tendrán ya una idea formada sobre las ventajas que este tipo de organización nos puede ofrecer, queremos destacar algunos de los beneficios más importantes que nos ofrece Atomic Design.
Consistencia visual en los proyectos
Por la manera en la que trabajamos bajo el enfoque Atomic Design conseguimos una elevada consistencia y coherencia visual en el diseño UX. La definición de un conjunto de componentes básicos y otros más elaborados en base a los básicos facilita que cada elemento de la página web tenga una apariencia y funcionalidad uniforme.
Reutilización eficiente de componentes
A la hora de crear componentes complejos siempre podemos reutilizar el trabajo realizado en el diseño de los componentes más simples, lo que facilita muchas facetas habituales del diseño en proyectos web, como el trabajo en equipo y la productividad.
Reducción de tiempo y costes de desarrollo
Gracias a la reutilización de los componentes de diseño conseguimos ahorrar tiempo en el desarrollo de los componentes más complejos. Menores tiempos de desarrollo y recursos utilizados impactan significativamente en la disminución de los costos del desarrollo del producto.
Mejora en la colaboración entre equipos
Atomic Design no solo permite que varios diseñadores puedan trabajar de manera sencilla en un mismo proyecto. Además, permite que los desarrolladores que implementan las interfaces gráficas tengan unas guías de diseño claras desde el principio, haciendo que también puedan participar de manera activa cuando se necesitan nuevas interfaces de usuario complejas, ya que pueden reutilizar los componentes de partes más sencillas, simplemente adoptando las guías de diseño elementales.
Flexibilidad y adaptabilidad en el diseño
En el mundo de la web, que tiene una naturaleza cambiante, enfoques como Atomic Desing son especialmente deseables, ya que las interfaces y componentes pueden modificarse o reorganizarse sin que ello impacte en un cambio de las bases del diseño definidas inicialmente.
Facilidad para realizar actualizaciones y mantenimiento
Gracias al uso de componentes elementales en sistemas gráficos complejos tenemos dos ventajas importantes en este sentido. Primero la mencionada flexibilidad a la hora de introducir cambios derivados por las actualizaciones o el mantenimiento. Pero, además, cuando se tiene que hacer actualizaciones en el diseño en sí, este enfoque también permite que los cambios en componentes sencillos se propaguen automáticamente a lo largo de toda la aplicación, ya que los componentes complejos estarán utilizando sus actualizaciones.
Mejora de la experiencia del usuario (UX)
La consistencia del diseño y la correcta estructuración que fomenta Atomic Design deriva finalmente en la mejora de la experiencia de usuario de los sitios y aplicaciones web, ya que permite comprender más fácilmente las interfaces complejas y añade una consistencia muy deseable en términos de UX.
Fundamentos del Atomic Design
Ahora vamos a describir de manera más detallada los fundamentos de este enfoque de diseño, de manera que podamos entender correctamente el proceso de diseño UX derivado de la aplicación de Atomic Design.
Átomos: unidades básicas del diseño
En Atomic Design llamamos átomos a las unidades básicas de diseño. Estos son elementos sencillos como iconos, botones, inputs o etiquetas. Reconocemos los átomos porque son componentes que no se pueden descomponer en partes más pequeñas.
Moléculas: combinación de átomos
Las moléculas se dan cuando tenemos interfaces que son combinaciones de distintos átomos. Por tanto, las moléculas son un poco más complejas, pero en un nivel todavía elemental. Por ejemplo, una molécula podría ser un campo de búsqueda que se compone de un campo input que tiene dentro un icono con una lupa. Una molécula también podría ser un chip que se compone de una etiqueta con una interfaz que permite eliminarla.
Organismos: estructuras complejas de moléculas
El siguiente nivel en Atomic Design serían los organismos, que están compuestos por moléculas y átomos. Ejemplos podrían ser una barra de navegación o una tarjeta.
Plantillas: diseño de páginas completas
A continuación tenemos las plantillas, que permiten combinar varios organismos para generar una estructura de contenido más compleja, donde se define la disposición de distintos componentes para secciones determinadas de un sitio web.
Páginas: implementación final del diseño
A nivel de diseño tenemos el último nivel en las páginas, que son implementaciones de plantillas donde se han introducido contenido real que pueden usar los visitantes del sitio web.
¿Cómo implementar el Atomic Design en proyectos?
Para implementar Atomic Design en proyectos simplemente necesitamos trabajar de manera estructurada y enfocar nuestro trabajo de forma progresiva, de menos a más. Para detallar este proceso vamos a especificar los pasos clave para implementar esta metodología:
1. Análisis y desglose de interfaces existentes
Antes de ponernos a diseñar, siempre es adecuado realizar un análisis previo, en el que debemos partir de los wireframes definidos durante la etapa de especificación. Gracias a este análisis será posible identificar las interfaces complejas y sus componentes, lo que nos permitirá conocer los átomos, moléculas y organismos que tendremos que definir.
2. Creación de átomos
Entonces nos podemos poner a diseñar los átomos, es decir, los elementos más pequeños del diseño, como los botones, campos de formulario y otros elementos fundamentales.
3. Desarrollo de moléculas
A partir de los átomos debemos continuar con el desarrollo de elementos compuestos. Este segundo paso consistirá en diseñar las moléculas a base de combinaciones de átomos. Esto puede incluir botones con iconos, campos de búsqueda asociados a botones para ejecutar la búsqueda, interfaces de tipo chip, listas, etc. Para ser consistentes utilizaremos los átomos y tendremos en mente que estas moléculas deberán usarse todavía en diseños más complejos.
4. Construcción de organismos
A continuación diseñaremos los organismos, con la unión de distintas moléculas y átomos. Al reutilizar los elementos definidos en pasos anteriores, podremos mantener la consistencia del diseño. Algunos organismos que podrán salir de este paso son barras de navegación, que pueden incluir varios enlaces, un logo y botones de acciones o menús de aplicación, cards, etc.
5. Montaje de plantillas
Después de los organismos podremos ya montar las plantillas. Este paso consiste en un ensamblaje en el que se deben unir todos los organismos de pasos anteriores, definiendo la estructura y colocación de los elementos que formarán una futura página completa.
6. Creación de páginas completas con Atomic Design
El último paso consiste en crear páginas con contenido real, lo que nos permitirá verificar el diseño de una manera objetiva. Este paso puede ayudarnos a encontrar y resolver posibles problemas.
Después de esta etapa el diseño estará listo para pasar por el proceso de verificación, que generalmente realizará el cliente u otros integrantes del proyecto, para validar que está todo bien y cumple las expectativas del diseño del producto. Con este análisis probablemente salgan detalles a pulir en los últimos ajustes del diseño.
7. Integración del Atomic Design en sistemas de diseño
En el momento que la línea de diseño ha sido aprobada es ideal crear un sistema de diseño que permita establecer unas líneas que deberán seguirse por todos los integrantes del equipo de desarrollo, para garantizar la correcta aplicación del diseño y su consistencia. En el sistema de diseño se deberán documentar todos los componentes y sus usos. A la vez, se crearán guías de estilo que faciliten la reutilización y el mantenimiento de las interfaces.
8. Herramientas y recursos para facilitar la implementación
Durante la fase de diseño podemos usar diversas herramientas orientadas a diseñadores de interfaces de usuario. Algunos ejemplos de herramientas son:
- Figma: Un software online y desktop que ha tomado mucha tracción en los últimos años por su facilidad de uso y las herramientas de trabajo en equipo que incorpora.
- Sketch: una aplicación para diseño e interfaces de usuario. Solo disponible en MacOS.
- Adobe XD: la clásica herramienta de Adobe para el diseño de aplicaciones, interfaces y experiencias de usuario.
- Penpot: una herramienta de diseño muy similar a Figma, no tan avanzada pero muy destacable por ser gratuita y de código abierto.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.