Atomic Design es un sistema de diseño. En sí, el Atomic Design son los átomos, las moléculas, los organismos, las plantillas y las páginas trabajando conjuntamente para crear sistemas de diseño de interfaces eficaces. ¡Vamos a ver de que se trata!
El atomic design ha hecho furor en la industria del diseño UX. Los diseñadores de todo el mundo están aprendiendo a amar un enfoque más calculado para diseñar cosas nuevas, pero ¿qué significa el Atomic Design en la práctica?
Utilizando conceptos de la química en el diseño web, la mayoría de los equipos de diseño descubren que su vida es más fácil. Este marco de trabajo consiste en ver la interfaz y los componentes que la componen con ojos nuevos, ganando perspectiva.
El proceso en sí suele dar lugar a un sistema que enumera todos los componentes y patrones, como un sistema de diseño que contiene todos los materiales y entregables. Es una forma apasionante de abordar el diseño, que alimenta la creatividad de una forma que no deja nada al azar.
Qué es el Atomic Design
Todos los diseñadores saben que en el mundo del diseño UX hay muchos enfoques diferentes. El atomic design consiste en elegir un enfoque científico para la interfaz, aplicando un marco de trabajo que proviene de la química.
Piensa en tus días de clases de química en el colegio. Probablemente tu profesor invirtió mucho tiempo y esfuerzo en que vieras el mundo con nuevos ojos. De repente, todo lo que hay en el planeta podría considerarse grandes grupos de moléculas, que trabajan juntas para crear nuestra realidad tal y como la conocemos.
Nuestro propio cuerpo está formado por átomos, cada uno de los cuales desempeña un papel importante por derecho propio.
El atomic desgin toma prestada esa forma de ver las cosas, aplicándola a los productos digitales. Un ejemplo tonto son los componentes individuales de la interfaz de usuario que, juntos, forman un formulario de inscripción. En el diseño atómico, los componentes son átomos, el formulario es la molécula. Toda la página es un organismo vivo.
Hay quienes dicen que el Atomic Design es realmente un modelo mental en contraposición a un estilo o marco de trabajo. Invita a los diseñadores a considerar sus páginas y productos como un complejo grupo de organismos, en el que cada pequeño elemento desempeña un papel crucial por derecho propio. Pero, ¿cómo aplican esto los equipos de diseño en sus propios proyectos? Esto nos lleva al siguiente tema.
La metodología del Atomic Design
Al igual que la metodología del design thinking, el atomic design tiene un determinado marco que pretende ayudar a los diseñadores a organizar sus esfuerzos y guiarlos en el proceso de diseño.
En el mismo sentido, cuando se adopta el enfoque atómico, los diseñadores no deben instalar un flujo de trabajo lineal. En su lugar, hay muchas idas y venidas para que las decisiones de diseño se tomen con una base sólida de validación.
Niveles que componen el Atomic Design
- Átomos
Los átomos son conocidos los bloques de construcción (legos) del universo. Cada átomo, por pequeño que sea, acaba teniendo un gran impacto en las moléculas y el organismo en su conjunto. El diseño atómico invita a los diseñadores a ver los componentes individuales como si fueran átomos: cada uno de ellos puede verse como una captura de pantalla del estilo y la función de la página.
Es cierto que en el atomic design hay que ver el valor real y el impacto de cada pequeño componente. Dicho esto, los diseñadores no deben caer en la trampa de limitar su visión a cada componente, sino ver el valor que añaden al conjunto.
- Moléculas
En química, las moléculas son un grupo de dos o más átomos que se unen y demuestran nuevas cualidades. Consideremos la molécula de agua. Es una combinación de hidrógeno y oxígeno que, juntos, crean algo nuevo. Con el diseño atómico, los diseñadores pueden decir lo mismo de los grupos de componentes.
Esto puede abordarse de diferentes maneras. Cuando se trata de un grupo de componentes, los equipos se enfrentan a conceptos como el espacio vacío o negativo, junto con la necesidad de agrupar elementos de forma que tengan sentido para los usuarios.
Por lo general, la agrupación de elementos individuales lleva a los usuarios a creer que funcionan juntos. Esto debe hacerse de acuerdo con otros conceptos de diseño, como la creación de una jerarquía visual que sea coherente en la interfaz.
- Organismos
Una vez que tenemos una molécula, podría ser tentador ver cada pantalla como un solo organismo, pero eso sería quitarle parte del poder al Atomic Design. En cambio, este marco nos anima a ver cada página como varios organismos que, juntos, crean la interfaz.
Nuestra molécula de, por ejemplo, un formulario de inscripción, podría tener otros elementos, como un tono basado en texto, que funcionan en combinación con el formulario para crear un organismo. Un gran carrusel de imágenes, botones y flechas de navegación pueden crear juntos la parte de la cabecera de la pantalla, creando un organismo.
Es importante pensar en estos grandes grupos como organismos por derecho propio, sobre todo porque este enfoque facilita la creación de interfaces modulares.
- Plantillas
Aquí es cuando mucha gente se pierde, principalmente porque perdemos la analogía de la química. A decir verdad, es inteligente abandonar el vocabulario de la química después de un cierto punto para que los diseñadores puedan comunicarse con las partes interesadas que no están en el equipo de diseño.
Cuando se ponen las cosas juntas y se muestran a los usuarios o clientes clave, llamarlas con términos de la industria del diseño puede hacer que la conversación sea más directa.
Hasta ahora, el equipo de diseño ha prestado mucha atención a los pequeños detalles de cada organismo y sus moléculas y átomos. Cosas como la funcionalidad y la practicidad han sido protagonistas en el juego, ofreciendo toda una serie de opciones para montar las pantallas del producto. Es entonces cuando empezamos a crear lo que el enfoque del Atomic Design llama plantillas.
Ahora, la atención se desplaza de la mera funcionalidad al contexto. Equipados con los patrones y organismos establecidos, los diseñadores tienen que juntarlo todo para crear la estructura general del contenido de las páginas que formarán el producto completo.
- Páginas
Aquí es cuando tomamos las plantillas que estableció el equipo de diseño y las desarrollamos. Si antes teníamos wireframes que mostraban la estructura esquelética, ahora es el momento de añadir todos los detalles finales. Poco a poco, las plantillas se van dejando atrás para formar las páginas reales con las que interactuarán los usuarios finales.
La fidelidad crece hasta dejar un prototipo realista de alta fidelidad en la página, utilizando una herramienta profesional de creación de prototipos para llevar el diseño a un lugar más sofisticado.
En este punto, hay varios factores importantes que entran en juego. En primer lugar, todo el contenido de los marcadores de posición debe dar paso al contenido real: imágenes reales, texto real. Una vez que todo está en su sitio, el equipo de diseño debe realizar pruebas de usuario para ver si los organismos y sus respectivas moléculas han funcionado tan bien como se esperaba. ¿Lo aprueban las partes interesadas? ¿Lo aprueban los usuarios? El equipo, al verlo evolucionar hasta su forma final, ¿aprueba la experiencia de usuario que ofrece la página?
No hay duda de que el atomic design puede ser un nuevo enfoque del diseño UX. Al fomentar una nueva forma de ver los componentes y sus grupos, los diseñadores pueden crear un sistema completo que funcione a largo plazo. ¿Pensando en reformular tu sitio web? ¡Contáctanos para que podamos asesorarte respetando este gran patrón!
Si te interesan las aplicaciones, no dudes en visitar nuestra nota sobre el desarrollo de aplicaciones multiplataforma.
