¿Qué es atomic design?
La esencia de la composición del universo indica que los átomos se combinan para formar moléculas, que se mezclan aún más para formar organismos. Esta teoría atómica significa que toda la materia del universo conocido se puede descomponer en un conjunto finito de elementos atómicos. La teoría de Atomic Design nos enseña que nuestras interfaces se pueden dividir en un conjunto finito de elementos, igual que la materia del universo. Pero, ¿en qué nos beneficia esta filosofía y cómo se lleva a la práctica?
La creación de componentes simples ayuda a los diseñadores y desarrolladores de UI a adherirse al principio de responsabilidad única, un antiguo precepto de las ciencias de la computación que fomenta una mentalidad de “haz una cosa y hazla bien”. Cargar un solo patrón con demasiada complejidad hace que el software sea difícil de manejar. Por lo tanto, la creación de moléculas de IU simples facilita las pruebas, fomenta la reutilización y promueve la coherencia en toda la interfaz.
Las distintas etapas del diseño atómico
El diseño atómico es una metodología compuesta por cinco etapas distintas que trabajan juntas para crear sistemas de diseño de interfaces de una manera más deliberada y jerárquica. Las cinco etapas del diseño atómico son:
El atomic design no es un proceso lineal, sino más bien un modelo mental que nos ayude a pensar en nuestras interfaces de usuario como un todo cohesivo y una colección de partes al mismo tiempo. Cada una de las cinco etapas juega un papel clave en la jerarquía de nuestros sistemas de diseño de interfaces. Vamos a sumergirnos en cada etapa con un poco más de detalle.
1. El átomo en el diseño atómico
Si los átomos son los componentes básicos de la materia, los átomos de nuestras interfaces sirven como los bloques de construcción fundamentales que componen todas nuestras interfaces de usuario. Estos átomos incluyen elementos HTML básicos como labels, inputs, botones y otros elementos imposibles de “atomizar» más sin dejar de ser funcionales.
Cada átomo del mundo natural tiene sus propiedades únicas. Un átomo de hidrógeno contiene un electrón, mientras que un átomo de helio contiene dos.
De esta manera, cada átomo de la interfaz tiene sus propiedades únicas, como las dimensiones de una hero image o el tamaño de fuente de un encabezado principal. Estas propiedades innatas influyen en cómo se debe aplicar cada átomo al sistema de interfaz de usuario más amplio.
En el contexto de una biblioteca de estilos, los átomos demuestran todos sus estilos básicos de un vistazo, lo que puede ser una referencia útil a la que recurrir a medida que desarrollas y mantienes tu sistema de diseño. Pero al igual que los átomos en el mundo natural, los átomos de interfaz no existen en el vacío y solo cobran vida dentro de una aplicación.
2. La molécula en el diseño atómico
En química, las moléculas son grupos de átomos unidos entre sí que adquieren distintas propiedades nuevas. Por ejemplo, las moléculas de agua y las moléculas de peróxido de hidrógeno tienen sus propiedades únicas y se comportan de manera bastante diferente, a pesar de que están formadas por los mismos elementos atómicos (hidrógeno y oxígeno).
En el diseño de interfaces, las moléculas son grupos relativamente simples de elementos de UI que funcionan juntos como una unidad. Por ejemplo, un label form, un search input y un botón pueden unirse para crear una molécula de formulario de búsqueda.
Cuando se combinan, estos átomos abstractos de repente tienen un propósito. Al hacer clic en el átomo botón ahora se envía el formulario. El resultado es un componente simple, portátil y reutilizable que se puede colocar en cualquier lugar donde se necesite.
3. Un organismo en el diseño atómico
Los organismos son componentes de UI relativamente complejos, compuestos por grupos de moléculas, átomos y otros organismos. Estos organismos forman distintas secciones de una interfaz. Por ejemplo, el típico formulario de búsqueda que a menudo encontramos en la barra superior de una web, en realidad es un molécula dentro del organismo cabecera.
La cabecera forma una sección independiente de una interfaz, aunque contiene varias piezas de interfaz más pequeñas con sus propiedades y funciones únicas. Los organismos pueden constar de tipos de moléculas similares o diferentes. Un organismo de cabecera puede tener elementos diferentes, como una imagen de logotipo, una lista de navegación principal y un formulario de búsqueda.
Ahora que tenemos organismos definidos en nuestro sistema de diseño, podemos romper nuestra analogía química y aplicar todos estos componentes a algo que se parezca a una página web.
4. La plantilla en el diseño atómico
En el diseño atómico, la plantilla es el contexto en el que se colocarán las moléculas y los organismos. Pero antes de ubicarlos en su interior, es necesario delimitar las zonas en las que se localiza cada elemento y como funcionan entre ellos, juntos en un mismo contexto. Hay que hacer constancia de que todas las partes se suman a un todo que funciona bien.
En esta fase, las plantillas son representaciones alambicas a muy bajo nivel, cuyo objetivo es meramente esquemático y organizativo, compuesto por contenedores vacíos que solamente pretenden mostrar el contexto en el que se encuentran. Una referencia de una plantilla de atomic design puede ser un wireframe.
5. La página en el diseño atómico
Las páginas son instancias específicas de plantillas que muestran cómo se ve una interfaz de usuario con contenido representativo real en su lugar. Sobre la base de nuestro ejemplo anterior, podemos tomar la plantilla de la página de inicio y agregar texto, imágenes y medios representativos en la plantilla para mostrar contenido real en acción. Una página sería un mockup de medio/alto detalle.
La etapa de la página es el proceso más concreto del diseño atómico y es importante por algunas razones bastante obvias. Después de todo, esto es lo que los usuarios verán e interactuarán al visitar nuestra experiencia. Y aquí es donde se ven todos esos componentes que se unen para formar una interfaz de usuario hermosa y funcional .
Ventajas del diseño atómico
Entonces, ¿para qué sirve el diseño atómico? Es una pregunta razonable considerando que hemos estado construyendo interfaces de usuario durante mucho tiempo sin necesidad de tener una metodología explícita de cinco etapas. Pero el diseño atómico nos proporciona algunas ideas clave que nos pueden ayudar a crear sistemas de diseño de UI más efectivos y deliberado.
«El pintor, cuando se encuentra alejado del caballete, puede valorar y analizar el conjunto de la obra desde esta perspectiva. Él escudriña y escucha, elige el siguiente trazo por hacer, luego se acerca al lienzo para hacerlo. Luego, retrocede nuevamente para ver lo que ha hecho en relación con el todo. Es una danza de contextos cambiantes, un ritmo de golpeteo a través del suelo del estudio que produce un circuito de retroalimentación estrecho entre marcar y evaluar. «
– Frank Chimero
La parte y el todo del diseño atómico
Una de las mayores ventajas que ofrece el diseño atómico es la capacidad de cambiar rápidamente entre lo abstracto y lo concreto. Podemos ver simultáneamente nuestras interfaces divididas en sus elementos atómicos y también ver cómo esos elementos se combinan para formar nuestras experiencias finales.
El diseño atómico nos permite bailar entre contextos como el pintor Frank describe tan elocuentemente. Los átomos, moléculas y organismos que componen nuestras interfaces no viven en el vacío. Y las plantillas y páginas de nuestra interfaz están compuestas por partes más pequeñas. Las partes de nuestros diseños influyen en el todo y el todo influye en las partes. Los dos están entrelazados y el diseño atómico acepta este hecho.
Saber más sobre Atomic Design
Si quieres saber más sobre esta metodología, te invito a que te leas el libro de su creador y diseñador web, Brad Frost.
