Diseño atómico y elementos digitales

El término “página web” es una reminicencia del pasado académico de la web, y ha sido una metáfora útil para acercar a los usuarios finales a esta tecnología. Desde la perspectiva de diseño, es necesario de ir más allá de hacer páginas para comenzar a crear sistemas multiplataforma.

Con el tiempo, la Web ha evolucionado y ya no está confinada al escaparate de un navegador web en una PC, sino que ha dado el salto a una enorme cantidad de dispositivos diversos, desde dispositivos móviles como smartphones hasta televisiones inteligentes, todos con diferentes capacidades, tamaños de pantalla, formatos y métodos de interacción.

Algunos de los dispositivos con los que las personas navegan la web
Algunos de los dispositivos que las personas usan para navegar en la web.

En este multiverso tecnológico, los profesionistas que crean, diseñan y mantienen la web se benefician al utilizar métodos y mejores prácticas que ayuden a mantener la consistencia y la escalabilidad de sus proyectos. Un concepto que se usa con frecuencia en pláticas sobre diseño de experiencia de usuario es la modularidad. Es aquí donde entran los conceptos de Diseño Atómico.

La metodología de Diseño Atómico

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 Diseño Atómico 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. El Diseño Atómico ayuda a que el diseño interactivo pueda adaptarse rápidamente a diferentes dispositivos, 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 Diseño Atómico  se compone de cinco capas que trabajan juntas para crear interfaces y sistemas:

Los elementos del Diseño Atómico

1. Átomos

En esta metodología, 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 de 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.

Átomos en HTML
Átomos en HTML

La tabla periódica de elementos HTML de Josh Duck ilustra de manera muy clara como todos nuestros 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:

Tabla periódica de elementos HTML
Tabla periódica de elementos HTML

2. Moléculas

En el diseño de interfaces, las moléculas son grupos relativamente simples de elementos visuales que funcionan juntos como una unidad. 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.

Molécula de búsqueda
Molécula de búsqueda

Cuando se combinan, estos á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 de UI relativamente más complejos compuestos por átomos, moleculas y otros organismos. Los organismos se integran para crear las diferentes secciones de una interfaz.

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.

Organismo de Encabezado
Organismo de Encabezado

4. Plantillas

Las plantillas son objetos a nivel de página –noten como aquí abandonamos la metáfora de elementos químicos y regresamos a elementos editoriales– que utilizan componentes basados en átomos, moléculas u organismos en una distribución que hace tangible la estructura general de contenido.

Plantilla con contenedores
Plantilla con contenedores para contenido

Las plantillas organizan los componentes básicos y les agregan contexto para que la página funcione correctamente. Otra 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.

Página con contenido final
Página con contenido final

Ventajas de utilizar Diseño Atómico

Como mencionaba al principio, 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 del Diseño Atómico 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.

Modularidad y reutilización de elementos atómicos
Modularidad y reutilización de elementos atómicos

El Diseño Atómico es muy útil para crear un sistema de lenguaje de diseño (Design Language System o DLS) 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. Al final, el Diseño Atómico 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 productos reales, como el de Airbnb se han beneficiado al implementar Diseño Atómico en sus procesos de diseño y desarrollo, integrándolo a las metodologías que ya utilizaban previamente.

Elementos de diseño en Airbnb creados con Atomic Design
Elementos de diseño en Airbnb creados con Atomic Design

Brad Frost y Dave Olsen crearon un generador de elementos llamado Pattern Lab, basados en los principios de Diseño Atómico. Este generador está creado con el principio de “Móvil primero” (mobile first) con 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.

Pattern Lab, un generador de elementos para Atomic Design
Pattern Lab, un generador de elementos para Atomic Design

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. Recomiendo ampliamente jugar un poco con el demo en la herramienta para entender mejor cómo funciona una implementación real de Diseño Atómico.

* * *

Vale la pena recordar que la diversidad en los dispositivos con los que nuestros 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. Diseño Atómico es una metodología que  puede ayudarnos a crear sistemas e interfaces que se pueden adaptar a cualquier entorno.

Consultor en experiencia de usuario, developer, conferencista, escritor y emprendedor. Trabaja en Tesseract Space, es Google Expert en UX/UI, Microsoft Regional Director y co-fundador de UX Nights.

El rol del Sprint Master en un Design Sprint

Design Sprint es una metodología de trabajo para resolver problemas de diseño en una semana, y utiliza elementos de metodologías ágiles y de design thinking.

Design Sprint es un modelo de colaboración que funciona para empresas o equipos de cualquier tamaño y para resolver casi cualquier problema en unos pocos días, en buena parte porque tiene límites claros sobre el uso del tiempo y los recursos que se utilizan durante el proceso. El responsable de establecer esos límites es una persona en el equipo que tiene el rol del sprint master.

Sprint masterEl sprint master es la persona que lleva el liderazgo de la sesión, y es quien ayuda a definir el reto de diseño en el sprint, define al equipo de trabajo y los ayuda a pasar por todas las etapas del proceso.

El rol de sprint master requiere entendimiento y experiencia profunda en los métodos de diseño centrado en el usuario, desarrollo de estrategias, facilitación de procesos y negociación (pero no es necesario ser un unicornio de UX).

Desarrollar estas habilidades toma tiempo y práctica, pero este rol hace una diferencia crítica al tratar de alinear al equipo para obtener resultados excepcionales.

Normalmente un sprint master es un arquitecto o especialista en experiencia de usuario: una persona con experiencia en la gestión de equipos de trabajo que tiene un conocimiento profundo en el diseño de procesos y que no teme retar a su equipo a colaborar para producir resultados en poco tiempo.

El trabajo del sprint master

El rol del sprint master es muy similar a la del scrum master en Scrum, en el sentido de que su rol en el proceso es de maestro-esclavo; es decir, tiene el control del proceso pero solo puede usar ese control para ayudar al equipo a trabajar.

La sesión de design sprint es algo que también se debe diseñar, y aquí es donde el trabajo del sprint master comienza.

Flujo de trabajo del sprint master en una sesión de design sprint
Flujo de trabajo del sprint master en una sesión de design sprint

Un buen sprint master sigue un flujo de tareas bien definido antes, durante y después del sprint. Su éxito depende de su habilidad para guiar al equipo, hacer gestión del proyecto y entender los métodos de UX que funcionan en periodos de tiempo muy cortos. Este trabajo de planeación toma tiempo, por lo general un día de preparación por cada día de sprint.

Antes del design sprint

La tarea más importante antes de comenzar un design sprint es articular el reto de diseño significativo sobre el que se centrará el trabajo de las sesiones. Un buen reto de diseño debe ser breve, inspirador y debe especificar a los usuarios objetivo y los entregables al final del sprint.

El sprint master debe seleccionar e invitar a las personas que participarán en el equipo, agendar las sesiones con expertos y las entrevistas con usuarios para las fases de “entender” y “validar” del sprint.

Finalmente, el sprint master debe preparar el material de presentación de las sesiones, reservar el espacio de trabajo, consiguir el material de trabajo, los refrigerios, bebidas y en general, asegurárse de que el proceso fluya sin problemas o interrupciones.

Durante el design sprint

Cuando el sprint comienza, el sprint master asume el rol de facilitador y anuncia la agenda y los ejercicios, lleva control del tiempo e invita a todos a participar. Si el equipo necesita cambiar el enfoque del plan original, el sprint master se encarga de que el equipo tome decisiones con rapidez minimizando las discusiones y de que cubran sus objetivos dentro de los límites de tiempo.

Durante el proceso, el sprint master es responsable de Tomar Notas Todo el Tiempo (ABC: Always Be Capturing) en un pizarrón o rotafolio, usando post-its o en una bitácora.

Después del design sprint

Las sesiones de desig sprint normalmente terminan con mucha energía y emoción, cuando el equipo logra crear una idea tangible en unos pocos días. Un buen sprint master mantiene esa energía al crear un plan de seguimiento, compartir los resultados del proceso y solicitando retroalimentación de los participantes para mejorar las sesiones en el futuro.

Consultor en experiencia de usuario, developer, conferencista, escritor y emprendedor. Trabaja en Tesseract Space, es Google Expert en UX/UI, Microsoft Regional Director y co-fundador de UX Nights.