Uso del diseño atómico en el desarrollo web moderno

Si hay algo que he aprendido trabajando para una empresa de tecnología, es que para construir un sitio web, un sitio web realmente asombroso, hermoso y de alto funcionamiento, una multitud de diferentes talentos y elementos deben unirse y trabajar en armonía. A veces puede sentirse como trabajar en la Torre de Babel: una persona está revisando una paleta de códigos hexadecimales, los chicos del otro lado de la habitación están recitando una sopa de letras de diferentes acrónimos de codificación, y el gerente de cuentas está a mi lado en el teléfono. explicando cómo usar un sistema de gestión de contenido a un cliente, todo mientras intento escribir este artículo en un lenguaje sencillo.

Todos esos elementos necesitan una forma de unirse sin que nada se pierda en la cacofonía, y hay un concepto relativamente nuevo que realmente nos ha ayudado a trabajar mejor como equipo: diseñadores, desarrolladores, probadores… todos.

Se llama Diseño atómico.

¿Qué es el diseño atómico?

Los componentes del diseño atómico se derivaron del diseñador Brad Frostla fascinación por la química; siendo los átomos la unidad más pequeña, se unen en moléculas, que a su vez forman organismos más complejos, creando eventualmente toda la materia del universo.

Entonces, si estamos en la Estación Espacial Internacional, mirando el proyecto completo como un todo, aquí está el arte de la página de inicio completo para un proyecto reciente al que aplicamos Diseño Atómico, Molino de pizza Route 93:

La página de inicio de Route 93 Pizza consta de todos nuestros elementos como un sitio web unificado y funcional. Ahora, si colocamos el sitio bajo un microscopio, podemos ver sus componentes granulares:

Átomos: A continuación se muestran los átomos del sitio web de Route 93 Pizza Mill. Los átomos son los bloques de construcción básicos, como etiquetas, etiquetas de formulario, botones, paleta de colores y fuentes. Aunque no son muy útiles por sí mismos, los átomos son su punto de referencia preliminar: los comienzos de su creación.

Moléculas: las moléculas son el lugar donde los átomos se ponen a trabajar, donde el diseño completo del sitio web comienza a sentirse tangible. En las moléculas de la Ruta 93, puede ver que la paleta de colores, las fuentes y la iconografía se unen en campos de formulario, superposiciones de imágenes y botones. Son, como dice Frost, su herramienta para «hacer una cosa y hacerlo bien».

Organismos: cuando llegamos a los organismos, podemos crear el pie de página completo para la Ruta 93. Combina todos los componentes antes mencionados en un sitio web estético y funcional.

El inventario de interfaces: ahora que tenemos todos los ingredientes, necesitamos un menú tangible en el que colocarlos en algo digerible; un documento que contiene todos los elementos anteriores como un recurso legible y utilizable: un inventario de interfaz.

Si bien algunas organizaciones llaman a esto un Biblioteca de patrones o Guía de estilo y use Inventario de interfaz específicamente para referirnos a una auditoría que han realizado en un sitio web existente, usamos el término Inventario de interfaz para nuestros propios proyectos (así como auditorías de otros sitios) como parte de un proceso de evaluación continuo.

Debido a que el flujo de trabajo de Atomic Design imita de alguna manera un dilema del tipo de la gallina o el huevo, el inventario de la interfaz generalmente toma forma de manera algo orgánica después de la creación de la página de inicio y otra página del sitio web, pero no mucho después de eso. A medida que estas dos páginas iniciales toman forma, el diseñador se asegura de que los elementos de ambas sean consistentes. Para todas las páginas a partir de entonces, tienen la capacidad de extraer del inventario. Esto produce una fuente canónica de cómo se deben aplicar los estilos visuales en todo el proyecto, un lenguaje común literal, en inglés simple, de códigos hexadecimales, estilos de botones, anchos de relleno, etc., al que los desarrolladores y todo el equipo pueden consultar.

Al diseñar un inventario de interfaz con el proceso de diseño atómico, podemos comenzar con módulos primitivos y ensamblarlos en elementos completos. Este proceso mejora la eficiencia, la comunicación entre los miembros del equipo y produce un sitio web más hermoso en general.

Que hace el diseño atómico por nosotros

Atomic Design nos ayuda tanto a descubrir “verdades” sólidas sobre el diseño del proyecto en el que estamos trabajando, como a crear un vocabulario común entre sus aspectos artísticos y técnicos. Fomenta un sistema más robusto en general que mejora la UX y proporciona una metodología para que los diseñadores puedan adherirse a las pautas basadas en componentes de los desarrolladores mientras mantienen la creatividad.

Naturalmente, los desarrolladores codifican desde cero, mientras que el enfoque de un artista generalmente comienza de una forma más nebulosa, que luego se solidifica en una página web funcional después de algunas modificaciones. Atomic Design alienta, y requiere, a los diseñadores a trabajar desde cero también, para hacer que todos los componentes de la interfaz sean consistentes y tengan un propósito en el nivel más bajo posible.

El establecimiento de este lenguaje común, representado por el inventario de interfaces, asegura que los diseñadores y desarrolladores no estén inventando nuevas soluciones a problemas que ya han sido resueltos. Por ejemplo, si se agrega un nuevo formulario de contacto a un proyecto, los estilos necesarios para crear ese formulario ya existen y pueden emplearse fácilmente para crear la página, considerando que no es necesario que el diseñador haga un esfuerzo adicional. No necesariamente le quita trabajo al diseñador, sino que hace que sea más fácil para los desarrolladores crear soluciones rápidamente en lugar de requerir que el diseñador haga una maqueta de cada página, u organismo, primero. El rol del diseñador luego se cambia a algo más parecido a la dirección de arte después de que se han creado las páginas. Estas “verdades” tangibles también eliminan la necesidad de utilizar al diseñador como árbitro. Preguntas como, «¿esta elección de diseño es intencional?» o, «¿qué color deberíamos usar en este elemento en particular?» así como los cambios de última hora o adiciones a una página son respondidos por el inventario de interfaz.

El lenguaje común también se aplica a la garantía de calidad. Cuando pruebo una página web tanto para el contenido como para la funcionalidad, abro el Inventario de la interfaz en mi pantalla como guía. Si bien es principalmente una herramienta de diseño y, en segundo lugar, una herramienta de desarrollo, permite que todos los miembros del equipo participen con confianza en conversaciones sobre diseño y coherencia, ya que nos aseguramos de que nuestros sitios sean impecables y estén listos para entregarse al cliente.

Conclusión

Para asegurar la correcta ejecución de un proyecto, especialmente algunos de los más grandes que a menudo nos encontramos abordando, la comunicación es clave; si se están gritando una serie de ideas diferentes a través de la habitación, nunca saldrá nada factible. Atomic Design ayuda a actuar como traductor para estos diferentes departamentos y los «idiomas» que los acompañan para mantener la coherencia en el diseño. Establece un recurso modular para el equipo, lo que permite la coherencia y da como resultado una respuesta eficiente, menos errores y un producto terminado más pulido.