Don't you want to read? Try listening to the article in audio mode 🎧
El design system de definición indica un conjunto de especificaciones que permiten la creación de interfaces de usuario (UI) consistentes en términos de estilo, colores, tipografías, marcas de referencia y cualquier otro componente que pueda garantizar una experiencia de usuario (UX) optimizada. Con un sistema de diseño se definen lineamientos, patrones y reglas para el diseño de UI que los desarrolladores front-end pueden explotar sin importar el dispositivo elegido para el uso de un contenido o servicio. Pero, ¿cuánto puede pesar la subjetividad en la elección de los elementos que participan en la composición de la interfaz de un sitio web o de una aplicación? Esta pregunta la hizo el diseñador web Brad Frost, cuya respuesta se resume en una nueva metodología llamada Diseño Atómico e inspirada en la Química.
¿Qué es el diseño atómico?
Los átomos son las estructuras que hacen posible la organización de la materia y representan la fracción más pequeña de ella. La materia puede adoptar diferentes estados (sólido, líquido, gaseoso) en los que los átomos se agregan en moléculas que son la unidad básica de los elementos químicos. La combinación de varias moléculas conduce finalmente a la formación de organismos que pueden ser más o menos complejos. Atomic Design sigue en parte esta dinámica al identificar 5 fases (o niveles) ordenadas jerárquicamente que permiten la creación de un sistema de diseño completo. De hecho, estamos hablando de una metodología modular en la que los elementos que componen una UI se piensan en primer lugar como átomos que pueden agregarse en moléculas que a su vez pueden combinarse en forma de organismos.
Las cinco fases del Diseño Atómico
Respetando una analogía parcial con los procesos químicos, Frost distinguió las tres primeras fases del Diseño Atómico en átomos, moléculas y organismos. A estos se suman dos más, plantillas y páginas. Cada una de las fases indicadas anteriormente adquiere un significado específico en el camino que conduce a la formación de una interfaz.
Átomos
En el contexto de una interfaz de usuario, los átomos representan elementos que no se pueden subdividir más e inseparables, se pueden describir como ladrillos que, usados, juntos, hacen posible construir una casa. Desde el punto de vista del diseño de UI para Internet, los átomos pueden asimilarse a etiquetas HTML, botones en un formulario o un campo de texto. Una de las características peculiares de los átomos es su alto nivel de abstracción, por lo que también se pueden considerar como tales las animaciones o tipografías.
Moléculas
A diferencia de lo que ocurre con los átomos, que por naturaleza son mónadas, las moléculas aparecen como totalidad. Una molécula es básicamente un grupo de átomos que se pueden combinar para realizar una función. La etiqueta de un formulario, un campo de entrada y un botón de envío son átomos inutilizables si se toman individualmente, si se combinan se convierten en un formulario para enviar comentarios o para formular una consulta a un motor de búsqueda. Hay moléculas más o menos complejas y, como en el caso de los átomos, se pueden unir entre sí para obtener estructuras articuladas.
Organismos
En Diseño Atómico un organismo es el resultado de la combinación de varias moléculas. Considera, por ejemplo, en el caso del header de una página Web que eligió Frost para describir esta fase. Puede contener un buscador interno, un menú, un logotipo de marca e iconos para conectarse a redes sociales. Cada una de estas moléculas participa por tanto en la formación de un organismo que es precisamente la cabecera, pero existen diferentes tipos de organismos y su naturaleza depende del tipo de moléculas agregadas en ellos. Por esta razón, los organismos también pueden ser considerados como componentes de una interfaz de usuario, como un pie de página o la sección de una página web destinada a alojar los contenidos.
Template
Con la fase de la plantilla, Atomic Design supera parcialmente el modelo inspirado en la Química al comenzar a proponer cuál debería ser el resultado final del diseño de una UI. Una plantilla es, de hecho, un conjunto de organismos que, cuando se unen, conducen a la formación de un esquema (layout) para las páginas. Gracias a las plantillas es posible proponer una ubicación para todos los elementos que componen un diseño, de esta manera los componentes que participan en la formación de una interfaz finalmente tienen una estructura. Queriendo proponer una definición de plantillas, podemos decir que se pueden representar como agregadores capaces de ofrecer un contexto a átomos, moléculas y organismos.
Páginas
Las páginas representan plantillas, lo que significa que le permiten ver la interfaz de usuario en su forma final, incluido el contenido que pretenden alojar. Frost define las páginas como instancias de los template, ya que proporcionan una representación completa de lo que muestra el usuario. Además de ser la fase culminante del Diseño Atómico, las páginas permiten probar la efectividad del Sistema de Diseño adoptado, si las pruebas revelaran problemas críticos, será necesario intervenir en moléculas, organismos y plantillas para aplicar las medidas necesarias. los cambios en un rendimiento superior al de la interfaz de usuario diseñada.
Las Ventajas de diseñar para átomos
Frost destaca que el Diseño Atómico no debe considerarse una regla, sino un estado de ánimo basado en el principio de "haz una cosa y hazla bien", es decir, concentrarse en los elementos individuales de un proyecto y desarrollarlos al máximo. Sobre esta base es posible retomar el discurso inicial sobre la a veces excesiva relevancia de la subjetividad en los Sistemas de Diseño, con el riesgo de privilegiar la estética en favor de la usabilidad. El Diseño Atómico, por su parte, representa una metodología escalable y fuertemente orientada a la resolución de problemas con la que obtener interfaces coherentes que tengan en cuenta en primer lugar cuál podría ser el comportamiento de los usuarios durante su uso. Al ser una metodología modular, permite operar a través de componentes reutilizables con indudables ventajas también desde el punto de vista de la productividad.
El maestro de diseño de interfaz de usuario de Talent Garden
Cualquier persona interesada en abordar un curso de formación con el que profundizar en el potencial del Atomic Design y los sistemas de diseño, tiene la oportunidad de asistir al próximo UI Design Master de Talent Garden que tendrá lugar del 6 de mayo al 16 de julio de 2022 llegando a su décima edición. El Máster, accesible a través de selección, está reservado para profesionales como Diseñador Gráfico, desarrolladores front-end, Web y móvil, Director de Arte, Diseñador Web y Gerente de Proyectos Digitales con al menos 3 años de experiencia laboral que quieran estar siempre actualizados en el últimas noticias de Diseño de Interfaz de Usuario. La duración total del Máster es de 120 horas en formato semipresencial repartidas entre contenidos bajo demanda, sesiones de aprendizaje online en directo y clases presenciales en el Campus Calabiana de Talent Garden en Milán. Para más información sobre la iniciativa, puedes consultar la página oficial del Máster en Diseño de UI en la web de Talent Garden.
Conclusiones
Atomic Design es una metodología que revoluciona el concepto de sistema de diseño para la creación de interfaces de usuario. Siguiendo el ejemplo de la Química, el diseño atómico subdivide cada elemento de una UI en sus componentes esenciales y agregados, lo que permite agruparlos en formas diferentes y gradualmente más y más articuladas, hasta obtener un resultado óptimo en términos de usabilidad.
Artículo actualizado el: 09 agosto 2023
Escrito por
Talent Garden, Digital Skills Academy
