Los sistemas de diseño están hechos de muchos ingredientes que se unen para ayudar a la organización a contar la historia de cómo diseñan y construyen cosas digitales
~ Brad Frost
Durante nuestro proceso y crecimiento en el desarrollo de software, hemos ido conociendo algunas metodologías, técnicas o estándares que nos ayuden a mejorar la manera en cómo construimos un producto. Es bien sabido que en nuestro comienzo como desarrolladores atacamos el problema directamente en la fase de desarrollo, como si el resolverlo constara solo de programar, generando un bucle constante de prueba y error.
Por ello es muy importante entender que todo buen software consta de un proceso de construcción bien definido, desde una fase de planeación hasta una de reflexión sobre lo trabajado y la manera en cómo se trabajó. Pero en este post realmente lo importante es quedarnos con esa forma de seccionar lo que hacemos y cómo lo hacemos.
Cuando desarrollamos pantalla tras pantalla, diseñando en cada una de ellas el mismo elemento, como ejemplo un botón, dejamos de lado el término optimización, y por estadística, generará errores y una desarmonía estática en nuestra aplicación; bien podríamos crear un elemento de nuestro botón, con cierto color, fuente, ancho, alto, etc., personalizado y parametrizable para que así pueda ser usado donde sea necesario, cuantas veces queramos. Pues justamente de eso se trata la técnica de diseño atómico.
Entonces, ¿Qué nos dice Brad sobre el diseño atómico?
Existe una delgada línea entre diseñar y desarrollar; con las grandes ideas, creatividad y conocimientos de los diseñadores, nosotros los desarrolladores, podemos hacer que surja la magia. Es aquí donde entra al quite el diseño atómico.
Brad comenta que esta metodología esta basada en 5 niveles:
Átomos
El átomo es la unidad constituyente más pequeña de la materia.
¡Bien hecho! Ya sabemos lo más básico. Ahora ¿Cómo se relaciona este concepto en la técnica?
Bien, un átomo, hablando de UI, se relaciona con aquellos elementos que solo tienen alguna funcionalidad. Ejemplo: un botón, un label, un avatar, campo de texto en un formulario, el título de tu web, etc. Que a su vez representan estados cuando hay un hover, enfoque, se deshabilitan, etc.
Moléculas
Aquí es cuando dos o más átomos se unen, conforman moléculas. Hablando en diseño de interfaces, un botón junto con un label, campo de texto forman un formulario, un elemento UI más complejo.
Organismos
Entre más alto el nivel, más complejo se vuelven los elementos, ya que se van sumando todos los niveles anteriores. Hasta este punto, un organismo es un conjunto de moléculas que a su vez están conformados por átomos. No debes olvidar que, sobre todo, se pueden repetir. Por ejemplo, un organismo puede ser el conjunto de elementos como un card con titulo, descripción y botones de interacción, que puede ser repetido varias veces y se usará con distinta información. Esto ya le da una experiencia completa al usuario.
Plantillas
Las plantilla consisten en agrupaciones de organismos unidos, donde estos a su vez forman páginas, en este punto es donde empezamos a darle mas sentido al diseño, es también donde los clientes empiezan a ver de forma mas concreta el diseño con cada cosa en su lugar, podemos tener como referencia a los wireframes, que se componen de una construcción sencilla de varias moléculas que a su vez forman organismos reutilizables.
Páginas
Básicamente son las mismas plantillas pero con la sustitución de algunos elementos que sean representativos de lo que el usuario final verá, usualmente todas las revisiones giran entorno a estas páginas.
Las páginas son esenciales ya que es donde se pone a prueba la eficacia del diseño, ver todo en contexto nos permite retroceder para modificar nuestras moléculas, organismos y plantillas para así abordar de forma idónea todo lo relacionado con el diseño.
Gracias a esta técnica, el desarrollo de componentes se reduce en complejidad, debido a la manera de organizar y planear las interfaces de usuario, mejorando también la experiencia de este y ayudando a generar disciplina en nosotros los desarrolladores.
La gran ventaja del diseño atómico, es que al crear y diseñar desde un inicio los átomos, en cualquier momento que se necesite un cambio estético en ellos, solo se realizará una sola vez, generando una actualización en cadena para el resto de los niveles. Genial, ¿no?
¿Alguna vez implementaste alguna técnica así? Platícanos la experiencia que has tenido con el diseño atómico.
Deja tu «me gusta» si te ha gustado este post.
Saludos y abrazos a la distancia 🙂
