Diseño Atómico
Jueves 22:59 el diseñador de productos Jeff Johnson sigue en su oficina trabajando en unos cambios de último momento.
Jeff es un diseñador joven con un gran talento que trabaja en un Startup en pleno crecimiento, la cual lo desafía y lo motiva a crear productos de gran calidad, aunque es un poco desordenado y eso le juega en contra, ya que cuando tiene que realizar cambios en sus enormes y alocados diseños, se le hace muy difícil encontrar las cosas y ni que hablar en cuanto al mantenimiento del mismo, de repente en algunas pantallas tiene un estilo de boton y en otras como no actualizo tiene estilos más viejos. Pero cuando tiene que reemplazar objetos que están en muchas partes de sus diseños se vuelve loco, rara vez le atina a sus estimaciones.
A menudo su jefe cambia de opinión con respecto a funciones y objetos que agregan en su aplicación móvil. Lo cual lo pone en esta situación.
Jueves 22:59 Jeff sigue en su oficina, trabajando en cambios de último momento.
— No puede ser, me faltan 50 pantallas por cambiar el color y la forma del botón. Maldita sea la hora que se me ocurrió agregar tantos botones en distintas pantallas.
Casi dos horas más tarde.
— Por fin, acabé. Ahora solo queda subir y mañana será otro día. Buuua mejor dicho hoy será otro día, ya son la 01:49.
Ti ti ti ti, Ti ti ti ti, Ti ti ti ti.
Jeff estira la mano hacia el despertador y apaga la alarma, mira la hora una vez y la vuelve a mirar sorprendido.
— No puede ser son las 10:00, ya se me hizo tarde, mierda.
Rápidamente se levantó de la cama, corrió al baño, mientras se intentaba colocar el pantalón.
Termino de vestirse, agarro su bici y comenzó a pedalear a toda prisa hacia la oficina, que le quedaba a 15 minutos de su casa.
Una vez frente a la oficina, se tiro de su bicicleta y corrió hacia su puesto de trabajo.
— Buenos días — Con voz de cansado y casi sin aire.
— Otra vez tarde Jeff — Dijo Tom, amigo de Jeff y colega.
— Si, me dormí, es que ayer me quede hasta tarde haciendo cambios de último momento y estuve horas cambiando todo.
— Si fueras más ordenado, seguro demorarias mucho menos.
Jeff se encogió de hombros y realizó una mueca con la boca.
— Jeff te enteraste de la meetup qué hay hoy en la tarde en Look&Cool Co-Work
— ¿No, quien van a hablar?
— Hay una de las charlas de un tipo llamado Bernd Forest, que va a hablar de la quimica, moléculas y el diseño, no sé muy bien, es un concepto nuevo. Dicen que es bastante interesante.
— No se, no me atrae mucho.
— ¿Tenes algo mejor que hacer ?, además de estar en tu casa tirado en el sillón mirando Game of Thrones
— Emmmm, creo que no, esta bien, vamos.
Ya entrada la tarde, Jeff y Tom salieron de la oficina y caminaron por Monroe Street, desde. Fremont St, hasta Santa Clara St, en el camino debatieron sobre lo que habían realizado en el día y los nuevos cambios que había pedido su jefe.
— Es increíble que cambien las funcionalidades de la aplicación a cada rato, no entiendo a donde quieren llegar ?, me hacen diseñar y rediseñar constantemente las mismas cosas, es un retrabajo constante y ni que hablar de todo lo que tengo que reemplazar después. — dijo Jeff con vos de frustrado.
Siguieron debatiendo hasta que llegaron al Co-Work. Miraron por todas partes y había una multitud de personas.
— Woow, este tipo se ve que es famoso por que atrae mucha gente. — comentó Tom
— Creo que si — respondió Jeff
Se escabulleron entre las personas y entraron en el lugar, y se dirigieron a la sala donde sería la charla.
El lugar estaba repleto de diseñadores, entonces rápidamente se ubicaron en un buen lugar para poder ver la charla.
Minutos después, todos comenzaron a sentarse y el organizador del meetup se subió a una especie de pequeño escenario y dijo.
— Buenas noches a todos, muchas gracias por venir, sin dudas hoy va a ser una noche más que interesante, nuevamente gracias a todos y espero que disfruten de esta charla, los dejo con Bernd Forest.
Cuando Bernd subió a escenario la sala estalló en aplausos.
— Gracias, Gracias — haciendo un gesto con las manos como intentando calmar los aplausos.
— Espero que no se gasten los aplausos y los dejen para el final — dijo en tono chistoso
Y surgió una carcajada grupal en toda la sala.
— A medida que el Diseño de interfaces va evolucionado, reconocemos la necesidad de desarrollar sistemas de diseño, en lugar de crear colecciones simples de interfaces, ¿Verdad ?
Algunas personas asisten con la cabeza, otros lo miran con cara de no entender que es lo que está diciendo.
— Se ha dicho mucho sobre la creación de Sistemas de Diseño, sobre todo más relacionado con la marca o ya conocido manual de marca. Pero yo hoy no les voy a hablar de un manual de marca, les voy hablar de un manual de interfaces.
Las personas lo escuchan atentamente.
— Ustedes se preguntarán ¿qué tiene que ver un manual de una interfaz, con los átomos? Pues ya verán qué hay bastante, pero primero analizemos la Química, si vemos a toda la materia (ya sea líquida, sólida, gaseosa, etc), está compuesta por átomos, Estas unidades atómicas se unen para formar moléculas, que a su vez estas se combinan para formar organismos más complejos que finalmente se crea toda la materia en el universo. ¿Interesante no?. Del mismo modo las interfaces están formadas por componentes más pequeños, esto significa que podemos dividir interfaces enteras en bloques de construcción fundamentales y trabajar desde allí. Esta es la base fundamental del diseño atómico. ¿Me siguen?
Algunos con cara de confundidos mueven la cabeza como aprobando lo que decía Bernd
— ¿Que el diseño atómico?, el diseño atómico es una metodología que nos permite crear sistemas de diseño. El mismo está conformado por cinco niveles:
1 — Átomos
2 — Moléculas
3 — Organismos
4 — Template
5 — Páginas
1 — Átomos
Un átomo es la pieza más básica para poder construir materia. Entonces si esto lo pasamos a interfaces web, podríamos decir que son los tags HTML, por ejemplo Campos de textos, etiquetas, botones, etc.
De igual forma que en la naturaleza estos elementos son bastantes abstractos y a menudo no son útiles por sí solos. Sin embargo son buenos como referencia en un contexto de biblioteca de patrones, ya que nos permite ver todos los estilos globales de un solo vistazo. ¿Me siguen?
– ¿Alguna pregunta?
Jeff levanta la mano tímidamente.
– Tu chico — y lo señala
– ¿Comentas que los átomos son el bloque más básico que te permite crear una materia verdad? ¿Por ejemplo un Buscador sería un átomo?
– No, un buscador no es un átomo, y les voy a explicar por que, un átomo no se puede subdividir en bloques más chicos, ya que el mismo átomo es lo más chico. En cambio un buscador se puede subdividir en dos átomos, por ejemplo en un input y un botón, entonces estaríamos en frente de un grupo de átomos, lo cual sería una Molécula que es el siguiente nivel del diseño atómico.
2 — Molécula
Como recién comentaba, 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 nuestro sistema de diseño.
Por ejemplo como comentábamos anteriormente una etiqueta, un campo de texto y un botón por si solos no son útiles, pero combinados juntos pueden hacer algo interesante, como por ejemplo una molécula de un formulario de búsqueda.
Si bien las moléculas pueden ser complejas, son combinaciones relativamente simple de átomos construidos para poder reutilizarlos. ¿Me van siguendo?
— ¿Alguna pregunta?
Nuevamente Jeff levanto la mano con menos timidez y dijo.
— ¿Es posible combinar átomos y moléculas en un mismo bloque?, por ejemplo tengo mi molécula de un Formulario de Búsqueda y después tengo átomos de Links y un átomo de el Logotipo, ¿es posible crear una molécula de header que contenga estas 3 cosas?
— Interesante, ¿como te llamas? — Respondió Bernd
— Jeff Johnson
— Bien Jeff, respondiendo a tu pregunta, si, es posible realizar esa combinación, pero no seria una molécula, sería otra cosa, pero volviendo a la combinación lo ideal seria ver de todos esos átomos sueltos que tenes cuales podrían ser combinables en una molécula, por ejemplo tú nombraste átomos de links, ¿verdad?, tal vez podemos crear una molécula que sea Navegación Principal y que contenga estos átomos de links. Ahora tenemos dos moléculas, y solo nos sobra un átomo de logotipo, este último no tenemos con que combinarlo, por ende lo dejamos así.
Pero como comentaba antes, este nuevo grupo no seria una molécula sino que seria un Organismo, que le podemos llamar Header, y que está compuesto por una Molécula de Navegación Principal, una Molécula de Formulario de Búsqueda y un Átomo de Logotipo. Y como venimos viendo y ya se darán cuenta los Organismos son el tercer nivel del Diseño Atómico.
3 — Organismos
Como comentamos los Organismos son grupos preferentemente de moléculas unidas para formar una sección relativamente compleja. En este momento comenzamos a ser cada vez más concretos.
Digamos que le contamos a un cliente de este método, el cliente puede no estar interesado en las moléculas de un sistema de diseño, pero con los organismos cambia la cosa, ya que podemos comenzar a ver como las interfaces empiezan a tomar forma.
Entonces como decíamos recién, el Organismo Header está compuesto de dos moléculas y un átomo. La acumulación de moléculas a organismos fomentan la creación de componentes independientes, portátiles y reutilizables. Por lo tanto podemos definir distintas partes de una interfaz, ya sea un Listado de productos, un Formulario de contacto, un Footer, etc. ¿Se entiende?
— ¿Alguna pregunta?, ¿Jeff algo que quieras comentar?
El lugar estallo en risas.
— La verdad si, tengo una duda, ¿es posible tener en una interfaz organismos y moléculas al mismo nivel?, por ejemplo en mi interfaz tengo un Organismo Header, un Organismo Listado de Productos, pero quiero poner una Molécula de Formulario. ¿Es posible?
Bernd mira al muchacho como interesado en lo que el muchacho comentaba y le responde.
— Como posible es posible, ahora lo importante es saber que propósito va a cumplir esa molécula en esa parte de la interfaz. Si no tiene ningún propósito rara vez lo dejes en ese lugar ya que no va a servir de mucho, pero por lo contrario si ese Formulario tiene como propósito que se subscriban a un Newsletter, la molécula se transforma en un organismo de Suscripción de Newsletter, ya que le estamos dando un propósito. Posiblemente esa sección vaya a tener algún otro objeto estético ya sea un átomo de imagen o alguna otra molécula o aunque fuese solo el propósito de ese organismo es ser una Sección de Suscripción de Newsletter, por lo tanto dejaría de ser una molécula por si sola.
Ahora, que pasa cuando agrupamos organismos en una misma interfaz, esto se transforma en un Template, que es el cuarto nivel del diseño atómico.
4 — Template
Supongo que deben de pensar ¿por que no lo llaman materia o algo relacionado con la analogía química?. El lenguaje de los átomos, las moléculas y los organismos conlleva una jerarquía útil para que construyamos los componentes de nuestro sistema de diseño. Pero en esta etapa tenemos que entrar en un lenguaje que sea más apropiado para nuestro resultado final y que tenga sentido para nuestros clientes, jefes y colegas. Ya que la analogía de la química en estas etapas podrían llegar a ser confusas y podría hacer que pienses que estas un poco loco.
Los Templates son objetos a nivel de interfaz/página que está compuesto por organismos y moléculas abstractas, pero este ayuda a proporcionar un contexto para estas. Al diseñar un sistema de diseño efectivo es importante demostrar que las partes se suman a un todo que funciona bien.
Otra característica importante de los templates es que se centra en la estructura del contenido subyacente a la página en lugar del contenido final de la página. Es importante que los sistemas de diseño tengan en cuenta la naturaleza dinámica del contenido, por lo que es muy útil articular propiedades importantes como tamaño de imagen, longitudes de caracteres para títulos y párrafos.
Mark Boulton analiza la importancia de definir estructuras de contenido y dice:
Que se puede crear buenas experiencias sin conocer el contenido, pero no se puede hacer buenas experiencias sin conocer la estructura del contenido.
Si es necesario saber de que está hecho el contenido, no cual es su contenido.
— ¿Quedo claro esta ultima característica de los templates?, ¿Alguna duda?
Esta vez Jeff quedo callado pero su amigo Tom levanto la mano y comento:
— Entonces tú dices que los templates son un marco contextual para los organismos y las moléculas, que a su vez ayuda a demostrar el funcionamiento de estos objetos abstractos compartiendo este contexto. Pero también nos ayuda a ver la estructura del contenido, sabiendo los tamaños de las imágenes, el largo de los textos y esto nos permite tener en cuenta el contenido dinámico. Por lo tanto los Templates vendrían a ser como una especie de Wireframe
— !Exacto!, algo así. Por lo tanto una vez que tenemos el template de nuestra interfaz definida le agregaríamos el contenido real y esto se aplica en la quinta y ultima etapa, las Páginas.
5 — Páginas
Las páginas son instancias especificas de una plantilla que muestran como se ve una interfaz con contenido representativo real. Esta etapa es la más concreta del diseño atómico, y es importante ya que después de todo es lo que el usuario vera cuando interactúe con sus experiencias, a de más de ver todos sus componentes unidos formando una interfaz de usuario.
Las páginas son esenciales para poner a prueba la efectividad del sistema de diseño. Es en la etapa de la página que podemos ver como se mantienen todos esos patrones cuando se aplica contenido real al sistema de diseño. ¿Se ve todo bien y funciona como debería? Si nuestra respuesta es no, podemos volver a nuestras moléculas, organismos y templates, para poder atacar mejor las necesidades de nuestro contenido.
Nosotros deberíamos crear sistemas que establezcan patrones de diseño reutilizables y que también refleje con precisión la realidad del contenido que estamos poniendo dentro de esos patrones.
Las páginas nos permiten proporcionar un lugar para realizar variaciones en los templates lo cual es crucial para establecer sistemas de diseño robustos y confiables.
— ¿Alguna duda?
Una chica de entre las personas, levanta la mano y comenta
— Entonces esta etapa básicamente es para poner a prueba nuestro sistema de diseño ya que es lo que vamos a ver y nuestros usuarios van a interactuar al final.
— Exacto, es la etapa que todo lo dice, en esta etapa comprobamos que nuestros componentes funcionen y validamos que el contenido mantiene la estructura.
Las personas escuchaban atentamente a Bernd la respuesta que le deba a la chica, algunos aprobaban moviendo la cabeza de arriba a bajo, pero la mayoría parecían hipnotizados por las palabras.
— En fin esto es Diseño Atómico, consiste ir de lo más abstracto a lo más concreto, pasando por cada etapa para poder crear sistemas de diseño robustos y confiables. Muchas Gracias.
En ese instante el lugar estalló en aplausos, personas muy motivadas salían hablando de Diseño Atómico y Jeff no era la excepción, salio discutiendo con Tom, sobre Átomos y Moléculas.
Al lunes siguiente, Jeff volvió a la oficina y comenzó a crear un sistema de diseño utilizando la metodología de Diseño Atómico.
Meses después, Jeff logro que el producto en el que trabaja tenga un sistema de diseño robusto. Utilizando el potencial de herramientas de diseño como Sketch y Figma, logro poder ser más eficiente a la hora de crear nuevas interfaces, ya que utilizaba moléculas y organismos que tenia previamente diseñado, creando templates y poniéndolo a prueba con contenido real permitiéndole seguir avanzando en el producto y hacer crecer el sistema y a él como profesional.
En definitiva Diseño Atómico, no es más que una metodología que nos ayuda a organizar Sistemas de Diseño de lo más abstracto a lo más especifico, permitiéndonos crear sistemas robustos con componentes reutilizables, teniendo en cuenta la naturaleza dinámica del contenido.
Referencias:
Espero que les haya gustado si llegaste hasta aquí y te gusto, te pido que le des un like y lo compartas así sabré que les interesa este formato.
Si tiene algún comentario o algo que quieras compartir, no dudes escribirlo el la caja de comentarios, voy a estar encantado de leer lo que tienes para decir.
Dejo mis redes aquí abajo para que pases a darte una vuelta.
Twitter | Instagram| Dribbble | LinkedIn
Sin más, nos vemos en la próxima entrega de Diseño Constructivo ;)
