Cómo el diseño atómico encontró a Brad Frost

Ocho años después de que Brad Frost descubriera el diseño atómico, en R / GA todavía lo usamos en innumerables proyectos. Pero, ¿cómo empezó todo? ¿De dónde vino el diseño atómico? ¿Cómo encontró a Brad Frost?

Había algo pegajoso en la química de la escuela secundaria. Dondequiera que fuera en busca de inspiración, algo traía a Brad Frost de regreso a esa clase de tabla periódica.

Patio cubierto de nieve R / GA New York en una fina manta blanca. Dentro había un espacio cálido y oscuro que fue recibido por muchos desarrolladores web ávidos. Nike goteó cuando el hielo se derritió. Las tablas eran abundantes. Los teclados chasquearon armoniosamente.

La cueva donde los desarrolladores habían codificado en la oscuridad olía a sándwiches de desayuno.

Brad Frost presentó su última boleta de calificaciones antes de dejar el trabajo que amaba. Como diseñador y desarrollador web móvil, estaba encantado de poder finalmente convertir su trabajo adicional en su trabajo diario. Pero dejar tu lugar favorito siempre es amargo.

Brad Frost, diseñador, desarrollador, consultor de sistemas de diseño, orador, escritor

En R / GA, Brad Frost tuvo la suerte de desarrollar sitios web móviles justo antes de la proliferación de teléfonos inteligentes. Una mata de cabello castaño lacio adornaba su cabeza, comprendió que Internet se estaba desarrollando rápidamente y que los sitios debían ser más flexibles que nunca. Al final, necesitaban acomodar más dispositivos, más ventanas gráficas y más navegadores que nunca antes en la historia.

Los recuerdos de Brad de una lección de química en la escuela secundaria comenzaron a cristalizar cuando se embarcó en una carrera como uno de los primeros desarrolladores web móviles. Comenzó a notar similitudes, de hecho paralelos, entre la química y los sitios web receptivos que estaba construyendo. La oficina de R / GA era conocida por exhibir arte alienígena, cortesía de la colección personal del entonces CEO Bob Greenberg. Las muñecas de Bob decoraron la oficina.

Una muñeca de la colección personal de Bob Greenberg en la exposición R / GA

Buscando inspiración en todas partes, Brad pensó en una analogía con las muñecas rusas para anidar. Al igual que las muñecas anidadas, la química y el diseño web, parecía haber un patrón predecible en este sentido: una cosa pequeña y simple se convirtió en una cosa más grande y compleja. Luego, esta gran cosa se convirtió en algo aún más grande y complejo, y así sucesivamente.

El caos se ha rendido al orden.

El tamaño aumentó a medida que continuaba el proceso.

La simplicidad ha dado paso a la inevitable complejidad.

“¡Eureka!” – pensó Brad.

Después de golpearlo como una tonelada de ladrillos, de repente se dio cuenta de que tanto la química como los sitios web se pueden dividir en la misma jerarquía básica. En el nivel más bajo, tienes átomos que no se pueden encoger más. Sin embargo, pueden unirse entre sí para formar moléculas. Las moléculas pueden luego combinarse para formar organismos. Resulta que todo se reduce a los mismos componentes centrales.

Al igual que la materia, los sitios web se pueden construir desde los átomos hasta las moléculas y el nivel del organismo. Por ejemplo, en los sitios web, un botón simple (como se muestra a continuación) se puede considerar como un átomo. Por sí solo, un botón puede hacer poco. Si no tiene etiqueta, ni siquiera sabes lo que hace. Además, si no lo lleva a ninguna parte o no toma una acción, es inútil.

Ejemplo de un libro de cuentos

Sin embargo, para crear un sitio web con botones funcionales, es muy útil pensar en un botón como átomo… Porque una vez que diseñe ese átomo, puede aplicarlo a todo el sitio en otras áreas donde necesite botones. De esta manera, puede limitar la cantidad de componentes desechables en su repositorio. Todos sus botones tendrán el mismo aspecto y no tendrá que reinventar la rueda cada vez que necesite un botón nuevo. También reduce el riesgo de escribir código repetitivo.

Ejemplo de un libro de cuentos

Lo que es aún más interesante, cuando se combina con otros átomos como la barra de búsqueda, el átomo de su botón ahora realmente puede ayudar al usuario a lograr algo muy real y funcional. Aquí es cuando los átomos se unen para formar moléculas.

Las moléculas están compuestas por múltiples átomos que forman un componente web simple. Se pueden combinar con otras moléculas y átomos para crear secciones aún más complejas de un sitio web. Por ejemplo, la navegación global (como se muestra a continuación) es organismocompuesto por muchos átomos y moléculas diferentes.

Aquí los átomos y las moléculas combinan sus fuerzas para formar un organismo que es más grande que la suma de sus partes. La belleza de este enfoque es que cada vez que necesite actualizar los átomos de los botones en su sitio, simplemente puede actualizar ese átomo y esa actualización se puede aplicar al resto de su sistema de diseño.
Brad comenzó a darse cuenta de que la creación de un sitio web no debería centrarse en un conjunto de páginas web, sino en un sistema de componentes flexible que se pueda reutilizar fácilmente en varias páginas: sistema de diseño modular…

“No diseñamos páginas, diseñamos sistemas de componentes”. – Stephen Hay, Flujo de trabajo de diseño receptivo

En 2013, Brad había acuñado formalmente el término “diseño atómico”. Describe un modelo mental simple para construir interfaces web a partir de componentes más pequeños, que juntos forman los bloques de construcción de componentes más grandes. Atomic Design ofrece una metodología de diseño robusta, escalable y reutilizable.

Brad comprendió que cuando construyes un sitio web desde cero, desde átomos hasta moléculas, organismos y, en última instancia, desde plantillas y páginas, obtienes el máximo flexibilidad… Puede mantener la integridad de su código y diseño visual mientras mantiene la modularidad para expandir rápidamente sus componentes a diferentes secciones de su sitio web.

La metodología de diseño atómico ayuda a limitar la cantidad total de componentes en su sistema de diseño. También ayuda a construir y estandarizar el vocabulario de su sistema de diseño. Entonces, cuando varios desarrolladores discuten un componente en particular, todos lo llaman lo mismo.

Al simplificar estos componentes complejos, los nuevos desarrolladores y terceros pueden interpretar más fácilmente la documentación técnica y familiarizarse con la arquitectura del sistema. Esto es más importante que nunca, ya que nuestro trabajo ahora involucra a más partes que nunca para diseñar y desarrollar experiencias de la escala y complejidad que esperan nuestros usuarios.

Cuando el último copo de nieve se desvaneció en el patio de R / GA, la sal de roca lo quemó en pedazos, Brad cerró su MacBook Pro y se apagó para siempre. Sabía que Internet siempre sería móvil y que continuaría la necesidad de innovar en la forma en que diseñamos para ella. Pero hasta ahora, el diseño atómico parecía el mejor modelo.
Estaba orgulloso de su tiempo en R / GA y estaba emocionado de seguir escribiendo y hablando constantemente sobre diseño atómico y otras metodologías que aprendió en el trabajo.

Aunque Internet continúa evolucionando, hasta el día de hoy, en R / GA todavía utilizamos el diseño atómico en innumerables proyectos. Esta no es una fórmula mágica destinada a resolver todos los problemas, pero ayuda a guiar y justificar nuestro diseño. Esto nos permite iterar más rápido mientras aseguramos que los sistemas de diseño de nuestros clientes estén preparados para el futuro.
Ocho años después de que Brad Frost introdujera por primera vez el diseño atómico en el mundo, pude localizarlo y preguntarle cómo ha sobrevivido su metodología de marca a lo largo de los años. Su respuesta fue bastante sucinta. “Todavía es fuerte”, dijo.

A medida que los dispositivos y los tamaños de pantalla cambian, el entorno en línea cambia, surgen nuevas redes sociales, juegos y plataformas de transmisión, los sistemas para los que diseñamos solo se vuelven más sofisticados, no menos. Brad Frost no ha cambiado este hecho. Aceptó esto e inventó un modelo basado en esta verdad.
Internet es cada vez más difícil, no más pequeño. Entonces, ¿por qué no diseñar sistemas de una manera que simplifique y simplifique toda esta complejidad? ¿Por qué no reducir la complejidad a las partes más pequeñas y manejables?

Quizás había una razón por la que Brad seguía regresando a la clase de química. Quizás había una razón por la que la química funcionaba de esta manera. Quizás esto no sea un accidente. Quizás cuando se trata de sistemas de diseño, la madre naturaleza sabe más.