Atomic Design: Qué es, Para qué sirve y Ejemplos
Atomic Design es un metodología creada por el diseñador Brad Frost para el diseño de interfaces de productos digitales. Esta teoría pretende darle un acercamiento científico al proceso de diseño de interfaces. Lo hace partiendo de los elementos químicos que contribuyen a la creación de organismos vivos.
La forma más sencilla de entender qué es Atomic Design es relacionarlo con las clases de química que tuvimos en la escuela. Aunque técnicamente el Atomic Design y la Química no tienen ninguna relación, sí se parecen mucho en la forma como están organizadas
La idea es que toda la materia (ya sea sólida, líquida, gaseosa) está compuesta de átomos. Esas unidades atómicas se unen para formar moléculas, que a su vez se combinan en organismos más complejos para finalmente crear toda la materia en nuestro universo.
De manera similar, las interfaces del Atomic Design están formadas por componentes más pequeños. Esto significa que podemos dividir interfaces completas en bloques de construcción fundamentales y trabajar desde allí. Esa es la esencia básica del diseño atómico.
¿Qué es Atomic Design?
Atomic Design es un metodología creada por el diseñador Brad Frost para el diseño de interfaces de productos digitales. Aunque no es el único método de diseño UI, sí ha generado un nuevo acercamiento a la forma de trabajar el diseño y la experiencia de usuario para freelancers, equipos y compañías enteras.
La teoría de Atomic Design de Frost pretende darle un acercamiento científico al proceso de diseño de interfaces. Lo hace partiendo de los elementos químicos que contribuyen a la creación de organismos vivos.
Como recordarás en aquellas clases de la secundaria y preparatoria, el mundo natural está hecho, en principio, de pequeñas partículas indivisibles llamadas átomos. Cuando dos o más átomos se juntan, forman moléculas que, a su vez, pueden conformar organismos. Por ejemplo, dos moléculas de hidrógeno más una de oxígeno, que son elementos atómicos, terminan creando lo que conoces como la molécula del agua.
Entonces, Frost considera que, si entiendes cómo funciona el orden Átomos-Moléculas-Organismos, puedes traspasar estos conceptos a la metodología para diseñar interfaces de productos digitales. Es aquí donde empieza la aplicación de Atomic Design.
Recuerda todos los elementos básicos para diseñar una Página Web. De seguro, aparecen en tu mente íconos, fuentes y botones. Luego, cuando estos elementos se juntan, forman barras de navegación, formularios de contacto, etc. Finalmente, todas estas secciones juntas generan una página funcional para el usuario.
A partir de esa analogía, en un artículo de su blog, Frost divide el significado de Atomic Design en 5 niveles y, además, asegura que funciona como un modelo mental para el trabajo de diseñadores, en el cual los 5 niveles tienen una importancia fundamental:
¿Para qué sirve el Atomic Design? Aquí sus principales beneficios:
Permite hacer más rápido los prototipos, puesto que los elementos ya existirán
Hace más rápido el proceso de actualizar el diseño del producto y/o añadir nuevas funcionalidades, ya que los cambios no harán que se deba programar todo desde cero.
Menos componentes hará el diseño y el código más consistentes y eficientes.
Permite reutilizar átomos para crear cualquier diseño que se requiera.
Permite que el diseñador genere una guía de estilo simple y directa.
Mejora la calidad de colaboración en el equipo de diseñadores y desarrolladores.
Potencia la experiencia de usuario UX y la satisfacción del cliente.
Sus características pueden contribuir a un incremento en los ingresos para el proyecto o empresa.
Los 5 niveles del Atomic Design
Para terminar de entender en qué consiste Atomic Design, es necesario detenernos en cada uno de sus niveles. Existen 5 etapas de Atomic Design. Las primeras 3 toman sus nombres del mundo de la química y las 2 últimas sí provienen del lenguaje del diseño.
Antes de aplicar esta metodología en tu trabajo independiente o de tu equipo, recuerda que el flujo de trabajo de Atomic Design necesita que cada nivel o etapa se construya sobre la anterior. Por eso, no olvides ninguno de los 5 pasos del Atomic Design.
1- Átomos
Los átomos son los componentes básicos de la materia. Aplicados a las interfaces web, los átomos son nuestras etiquetas HTML, como una etiqueta de formulario, una entrada o un botón.
Los átomos también pueden incluir elementos más abstractos como paletas de colores, fuentes e incluso aspectos más invisibles de una interfaz como animaciones.
Al igual que los átomos en la naturaleza, son bastante abstractos y, a menudo, no son muy útiles por sí solos. Sin embargo, son buenos como referencia en el contexto de una biblioteca de patrones, ya que puedes ver todos sus estilos globales presentados de un vistazo.
Esta es una lista con elementos que pueden funcionar como “átomos” de Atomic Design de un Sitio Web:
Símbolos
Botones
Animaciones
Imágenes individuales
Etiquetas
2- Moléculas
Las cosas se vuelven más interesantes y tangibles cuando empezamos a combinar átomos. Las moléculas son grupos de átomos unidos entre sí y son las unidades fundamentales más pequeñas de un compuesto. Estas moléculas adquieren sus propias propiedades y sirven como la columna vertebral de nuestros sistemas de diseño.
La construcción de moléculas a partir de átomos fomenta una mentalidad de "haz una cosa y hazla bien". Si bien las moléculas pueden ser complejas, por regla general son combinaciones relativamente simples de átomos creados para su reutilización.
Por eso, debes crear secciones en el Sitio Web respetando los principios básicos de diseño de interfaces y algunos de sus conceptos importantes, como los siguientes:
Jerarquía visual
Arquitectura de la información
Espacio en blanco
El principio de la proximidad
La ley de Hick UX
3- Organismos
Las moléculas nos brindan algunos componentes básicos con los que trabajar, y ahora podemos combinarlos para formar organismos. Los organismos son grupos de moléculas unidas para formar una sección distinta y relativamente compleja de una interfaz.
Estamos empezando a ser cada vez más concretos. Es posible que un cliente no esté muy interesado en las moléculas de un sistema de diseño, pero con los organismos podemos ver que la interfaz final comienza a tomar forma.
Podemos usar collages de elementos, que articulan ideas para algunos organismos clave para facilitar las conversaciones con los clientes y dar forma a la dirección visual (todo sin tener que construir composiciones completas).
La construcción de moléculas a organismos fomenta la creación de componentes independientes, portátiles y reutilizables.
Esta es una lista con otros ejemplos de “organismos” de Atomic Design en un sitio web:
Barras laterales
Pop-ups
Sección de perfiles
Footer
Caja de formulario
4- Plantillas
En la etapa de Plantillas o Templates, rompemos nuestra analogía química para entrar en un lenguaje que tenga más sentido para nuestros clientes y nuestro resultado final. Las plantillas consisten principalmente en grupos de organismos unidos para formar páginas. Es aquí donde comenzamos a ver cómo se une el diseño y comenzamos a ver cosas como el diseño en acción.
Las plantillas son muy concretas y brindan contexto a todas estas moléculas y organismos relativamente abstractos. Las plantillas también son donde los clientes comienzan a ver el diseño final en su lugar.
Las plantillas comienzan su vida como estructuras HTML, pero con el tiempo aumentan la fidelidad para finalmente convertirse en el producto final. Bearded Studio en Pittsburgh sigue un proceso similar, donde los diseños comienzan en escala de grises y sin diseño, pero aumentan lentamente la fidelidad hasta que el diseño final está en su lugar.
Plantillas de páginas de productos
Plantilla de la página de inicio
Plantilla de la página del blog
Plantilla de la página de usuarios
5- Páginas
Las páginas son instancias específicas de plantillas. Aquí, el contenido del marcador de posición se reemplaza con contenido representativo real para brindar una descripción precisa de lo que finalmente verá un usuario.
Las páginas son el nivel más alto de fidelidad y, debido a que son las más tangibles, generalmente es donde la mayoría de las personas en el proceso pasan la mayor parte de su tiempo y en torno a lo que giran la mayoría de las revisiones.
La etapa de la página es esencial ya que es donde probamos la efectividad del sistema de diseño. Ver todo en contexto nos permite retroceder para modificar nuestras moléculas, organismos y plantillas para abordar mejor el contexto real del diseño.
Las páginas también son el lugar para probar variaciones en las plantillas. Por ejemplo, es posible que desee articular cómo se ve un título que contiene 40 caracteres, pero también demostrar cómo se ven 340 caracteres. ¿Cómo se ve cuando un usuario tiene un artículo en su carrito de compras versus 10 artículos con un código de descuento aplicado?
Una vez más, estas instancias específicas influyen en la forma en que retrocedemos y construimos nuestro sistema.
UNA HERRAMIENTA PARA EL TRABAJO EN EQUIPO
Esta metodología permite diseñar productos digitales escalables, consistentes, eficientes y que te permiten potenciar el trabajo en equipo.
Esperamos que con esta guía de Atomic Design hayas aprendido una nueva metodología útil para tu trabajo como diseñador. A pesar de que existen otros métodos de diseño con múltiples ventajas, este puede ser un acercamiento al diseño de productos digitales que produzcan mejores resultados para tu equipo.
