El término «página web» es una reminiscencia del pasado. Es necesario de ir más allá de diseñar solo «páginas» para comenzar a crear sistemas de diseño. Atomic Design provee un método y las herramientas para lograrlo.
La Web ha evolucionado y ya no está confinada a un navegador web en una PC, sino que ha dado el salto a una enorme cantidad de dispositivos muy diversos, desde dispositivos móviles hasta televisiones inteligentes, todos con diferentes capacidades, tamaños, resoluciones de pantalla, formatos y métodos de interacción.
Con una diversidad tecnológica tan grande, los diseñadores y desarrolladores que crean, diseñan y mantienen sitios y apps en la web pueden beneficiarse al utilizar métodos y mejores prácticas que ayuden a mantener la consistencia y la escalabilidad de sus proyectos, utilizando sistemas de diseño.
Aunque se recomienda nunca comenzar desde cero y un diseñador puede utilizar sistemas de diseño como Material Design, las Human Interface Guidelines de Apple o Fluent Design System, en ocasiones es necesario crear un sistema de diseño propio. Para hacerlo con un enfoque metodológico se utiliza la técnica de Atomic Design.
La metodología de Atomic Design
Diseño Atómico (Atomic Design) es una metodología de diseño creada por Brad Frost enfocada en la reutilización acumulativa de elementos modulares sencillos para crear estructuras de información más complejas.
El Atomic Design no se trata de diseñar una sola instancia de una página web a la vez, sino que vistos desde un punto de vista más amplio, se usa para crear la base de sistemas más grandes. Atomic Design ayuda a que el diseño de un producto digital pueda adaptarse con facilidad a diferentes dispositivos o plataformas, y es compatible con procesos de diseño centrado en el usuario, ya que se puede implementar desde las etapas tempranas de diseño usando sketches y prototipos.
La metodología de Atomic Design se compone de cinco etapas para crear interfaces y sistemas:
1. Átomos
Los átomos son los elementos básicos que se utilizan en la construcción de interfaces digitales que no pueden ser reducidos en componentes más simples sin perder su funcionalidad. Los átomos para una página web incluyen las etiquetas básicas de HTML como párrafos, campos de texto, botones y etiquetas, así como elementos básicos de estilo como colores y tipografías.
La tabla periódica de elementos HTML de Josh Duck ilustra como los sitios web, web apps, mensajes de correo, intranets y cualquier cosa que se visualice con un navegador web están compuestos de los mismos elementos:
2. Moléculas
Las moléculas son grupos de elementos visuales (o átomos)que funcionan juntos como una unidad y que tienen propiedades y funcionalidades que los átomos individuales no tienen.
Un ejemplo sería juntar un campo de texto, una etiqueta de formulario y un botón para crear la molécula de un formulario de búsqueda.
Cuando se combinan, sus átomos tienen un propósito nuevo: la etiqueta define la entrada del campo, y el botón envía la información del formulario para ejecutar una búsqueda. El resultado es un componente simple y reutilizable que puede ser incluirse en cualquier sistema que necesite la funcionalidad de búsqueda.
3. Organismos
Los organismos son componentes más complejos compuestos por combinaciones de átomos y moléculas. Los organismos se integran para crear las secciones y los elementos funcionales de la interface de una página o app.
Si a nuestra molécula de búsqueda le agregamos algunos elementos más, podremos obtener el organismo del encabezado, un elemento común en muchas páginas web.
4. Plantillas
Las plantillas son objetos a nivel de una página (en este punto abandonamos la metáfora de los elementos químicos y regresamos a elementos editoriales) que utilizan componentes creados por combinaciones de átomos, moléculas u organismos en una distribución que hace tangible la estructura general de contenido.
Las plantillas organizan los componentes básicos y les agregan contexto para que la página funcione correctamente. Una característica importante de las plantillas es que se enfocan en la estructura del contenido en lugar del contenido final de la página.
Los sistemas dinámicos deben poder adaptarse a contenido dinámico que cambia todo el tiempo y las plantillas proveen los mecanismos para definir las propiedades de los componentes que las integran, como el tamaño y alineación de sus imágenes o la longitud y estilo de sus encabezados y párrafos.
5. Páginas
Las páginas son instancias específicas de las plantillas que utilizan contenido real. Si tomamos la plantilla de la capa anterior y la llenamos contenido real en sus contenedores podremos ver el resultado final del proceso.
Ventajas de utilizar Atomic Design
Una de las principales ventajas de utilizar esta metodología es que está enfocada en la modularidad, lo que permite crear elementos simples que pueden reutilizarse constantemente en equipos de diseño y desarrollo de cualquier tamaño sin perder la consistencia del diseño final.
La modularidad enAtomic Design también habilita la transversalidad entre los componentes abstractos y concretos del diseño, lo que permite generar diferentes patrones de interfaz reutilizando los mismos elementos al reorganizar su arquitectura y crear nuevos contextos para ellos.
Atomic Design es un acercamiento para crear un sistemas de diseño (design systems) para crear prototipos y código más eficiente y que cualquier persona en el equipo de producción puede entender y utilizar para procesos de diseño y desarrollo más rápidos y productivos.
Atomic Design no es un proceso lineal, sino un modelo de pensamiento sobre el que se puede iterar para crear sistemas complejos partiendo de elementos sencillos.
Equipos de producto como los de Airbnb se han beneficiado al implementar Atomic Design en sus procesos de diseño y desarrollo, integrándolo a los procesos que ya usaban.
Karri Saarinen
en AirBnb. Crédito:
Karri Saarinen
en AirBnb. Crédito:
Karri Saarinen
en AirBnb. Crédito:
Karri Saarinen
Karri Saarinen
en AirBnb. Crédito:
Karri Saarinen
PatternLab para sistemas de diseño
Brad Frost y Dave Olsen crearon Pattern Lab, un gestor de sistemas de diseño basados en los principios de Atomic Design. Este gestor es opensource y tiene opciones para ajustar el tamaño de las páginas y de agregar comentarios a las secciones del sitio y a los bloques de construcción a nivel de código.
La versión original de Pattern Lab está escrita en PHP, pero ya hay dos versiones para NodeJS: una para Gulp y otra para Grunt. Es recomendable explorar el demo en PatternLab para entender mejor cómo funciona una implementación real de Atomic Design.
La diversidad en los dispositivos con los que los usuarios navegan la web o consumen información no se detendrá, sino que seguirá creciendo de manera acelerada, y posiblemente los modelos de diseño y desarrollo tradicionales no soportarán esa diversidad sin adaptarse a formas más ágiles de trabajo. Atomic Design es una metodología que puede ayudarnos a crear sistemas de diseño para construir páginas y apps que se puedan adaptar a cualquier plataforma.
