Diseño atómico
Un día, por ahí del 2015 comencé a involucrarme en las comunidades de tecnología, particularmente en las creadas por mujeres para mujeres, con el fin de ayudar a romper la brecha de género en áreas STEAM. Ahí fue donde conocí a mi amiga Kari Esper.
Tuve la oportunidad de liderar toda la comunidad de CDMX, durante poco más de un año al lado de Kari. Después ambas seguimos en el camino de comunidades de tecnología que más nos latían. Un par de años más tarde, ella se mudó a la cuna del emprendimiento: San Francisco; ahí con un equipo super top, organizó Tedx SF.
Una de las ponencias la impartió Daniel Whiteson, centrada en la pregunta: ¿De qué está hecho el universo? Mencionó que solo conocemos el 5% del universo, el 27% es materia gris y el resto no tenemos idea. 🙊
¿Y cómo podríamos responder “De qué está hecho el universo”? Daniel nos sugiere comenzar con una lista de cosas que sabemos existen, para después encontrar patrones y ordenar este conocimiento.
Science is not a list of facts, is a process
-Daniel Whiteson
Alguien si hizo esa lista y terminó de hacer el inventario del universo (o lo que pudo), concluyendo que solo se necesitan algunos bloques de construcción básicos, para crear todo 🤯.
Estos bloques están ordenados en cientos de elementos que encontramos en nuestra tabla periódica; sí, aquella tabla que te obligaron a memorizar en química a tus 12 añitos. Y como buen sistema, es uno de los logros intelectuales más grandes, pero subestimados de nuestra historia.
A su vez, estos bloques ¿de qué están hechos? Pues de átomos, ¿y estos de qué están hechos? Pues de protones y neutrones, y dentro de ellos tenemos electrones, quarks up, quarks down y de eso está hecho el mishis, el Daddy Yankee, Sailorfag, la Tomasa del Real, a mi escribiendo esto y tú leyéndolo.
Por cierto, te dejo el ted chécalo es hermoso. 👇🏻
Ahora, relaciona todo esto: ¿De qué están hechos nuestros productos?
ATOMIC DESIGN
Así es como el creador del Diseño Atómico: Brad Frost, diseñó una metodología para crear un Sistema de Diseño. Con el objetivo de resolver la complejidad al estandarizar un producto, para la infinita variedad de dispositivos y productos que existen.
El diseño atómico es básicamente una forma de crear unidades de UI, hasta crear un producto final. Consiste en 5 stages:
- Átomos: Son los bloques más pequeños, las formas más abstractas cómo colores, fuentes e incluso cosas invisibles como animaciones. Claramente, los átomos no son autosuficientes, pero generan el contexto necesario para formar las bases de tus patrones.
- Moléculas: Aquí los átomos comienzan a combinarse, los componentes comienzan a tener forma, pero sobre todo utilidad. El objetivo de estos es hacer una sola cosa y hacerla bien.
- Organismos: Es el turno de combinar moléculas. Estos grupos de moléculas crean los organismos, componentes con funcionalidades más complejas.
- Templates: Son wireframes, que permiten ver el diseño final en un solo lugar, logrando iteraciones más rápidas, con suficiente contexto rumbo a la versión final.
- Páginas: El nivel más grande de la interfaz, toda la información es real y final, en este nivel es donde nos tomamos más tiempo porque todo es con alta fidelidad. No queremos seguir haciendo cambios en esta versión (aunque #clientada).
Diseño atómico resumido
Así es como Atomic Design desde el 2013, ha tomado fuerza para crear from scratch Sistemas de Diseño. Básicamente es esto es un juego de lego: las piezas solas no tienen sentido ni objetivo, pero entre más piezas unas, más grandes y complejas se hacen.
Este proceso te llevará un buen tiempo, necesitarás distintas herramientas para organizarlo, documentarlo y compartirlo, una de ellas puede ser Pattern lab, creada por Brad también, para crear tu propio Sistema de Diseño atómico.
En mi experiencia esta metodología no solo beneficia al equipo de producto, en realidad impacta a toda la organización ahorrando tiempo y dinero.
Al final simplificará tus procesos, asegurándote que todo tu equipo tenga el mismo conocimiento, replique patrones y a partir de hacer una “lista” de componentes ordenados en átomos, moléculas, organismos, templates y páginas logren tener consistencia y se preocupen por resolver problemas más relevantes de forma más rápida y con la calidad necesaria.
No olvides seguirnos para que sepas de nuestro próximo tema ¡SALCHICHA! saldrá en una semana. 🙌🏻 Tíranos amor, y sugerencias. 🐣
Las jugosas artes del post de hoy de en insta fueron hechas por mi Yandel: la gran Abril 🔥💚
