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 increíble, 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 tipos al otro lado de la sala están repitiendo una sopa de letras con diferentes acrónimos de codificación, y el gerente de cuenta está a mi lado en el teléfono explicando cómo usar un sistema de administración de contenido para un cliente, todo mientras trato de escribir este artículo en inglés 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 de Atomic Design se derivaron del diseñador Brad Frost Fascinación con la química; los átomos son la unidad más pequeña, se unen en moléculas, que a su vez forman organismos más complejos, y finalmente crean toda la materia en el universo.
Entonces, si estamos en la Estación Espacial Internacional, mirando hacia abajo a todo el proyecto como un todo, aquí está el arte de página de inicio completo para un proyecto reciente al que aplicamos Atomic Design, Route 93 Pizza Mill :
La página principal de Route 93 Pizza consiste en 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 componentes básicos, como etiquetas, etiquetas de formularios, botones, paleta de colores y fuentes. Aunque no son muy útiles por sí mismos, los átomos son su punto de referencia preliminar: el comienzo de su creación.
Moléculas: las moléculas son donde los átomos se ponen a trabajar, donde el diseño del sitio web completo 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 formularios, superposiciones de imágenes y botones. Son, como dice Frost, tu herramienta para "hacer una cosa y hacerlo bien".
Organismos: en el momento en que 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 funcional y estético.
El inventario de la interfaz: ahora que tenemos todos los ingredientes, necesitamos un menú tangible para organizarlos en algo digerible; un documento que contiene todos los elementos anteriores como un recurso utilizable y legible: un inventario de interfaz.
Mientras que algunas organizaciones lo llaman Biblioteca de patrones o Guía de estilo y usan el Inventario de interfaz específicamente para referirse 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 continua.
Debido a que el flujo de trabajo de Atomic Design imita de alguna manera el dilema de un huevo o una gallina, el inventario de la interfaz generalmente toma una forma un tanto 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. A medida que estas dos páginas iniciales toman forma, el diseñador asegura que los elementos en ambos 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 a lo largo del proyecto, un lenguaje común literal, en inglés simple, de códigos hexadecimales, estilos de botones, anchos de relleno, etc. a los que los desarrolladores, y todo el equipo, pueden hacer referencia.
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 completados. Este proceso mejora la eficiencia, la comunicación entre los miembros del equipo y produce un sitio web más hermoso en general.
Lo que Atomic Design hace por nosotros
Atomic Design nos ayuda a descubrir "verdades" sólidas sobre el diseño del proyecto en el que estamos trabajando, así como a crear un vocabulario común entre sus aspectos artísticos y técnicos. Fomenta un sistema general más sólido que mejora el UX y proporciona una metodología para que los diseñadores puedan cumplir con 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 en una forma más nebulosa, que luego se solidifica en una página web funcional después de algunas molduras. Atomic Design alienta y requiere que los diseñadores trabajen desde cero, para que todos los componentes de la interfaz sean coherentes y resueltos en el nivel más bajo posible.
El establecimiento de este lenguaje común, representado por el inventario de interfaz, garantiza que los diseñadores y desarrolladores no inventen nuevas soluciones a problemas que ya se han resuelto. 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 construir la página, considerando que es innecesario para el diseñador realizar un esfuerzo adicional. No necesariamente le quita trabajo al diseñador, sino que facilita a los desarrolladores la creación rápida de soluciones en lugar de requerir que el diseñador se burle de cada página, u organismo, primero. El papel del diseñador se desplaza a algo más parecido a la dirección artística después de que se hayan construido las páginas. Estas "verdades" tangibles también eliminan la necesidad de utilizar al diseñador como árbitro. Preguntas tales 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 las adiciones a una página son respondidas por el Inventario de la interfaz.
El lenguaje común continúa en la garantía de calidad también. Al probar una página web para contenido y funcionalidad, realizo el inventario de interfaz en mi pantalla como una guía. Aunque principalmente es una herramienta de diseño y, en segundo lugar, una herramienta de desarrollo, permite que todos en el equipo participen con confianza en las conversaciones sobre diseño y consistencia, ya que nos aseguramos de que nuestros sitios sean impecables y estén listos para ser entregados al cliente.
Conclusión
Con el fin de garantizar la correcta ejecución de un proyecto, especialmente algunos de los más grandes a los que a menudo nos enfrentamos, la comunicación es clave; si gritas una serie de ideas diferentes a través de la sala, nada será posible. Atomic Design ayuda a actuar como un traductor para estos diferentes departamentos y los "idiomas" que los acompañan para mantener la consistencia en el diseño. Establece un recurso modular para el equipo, lo que permite coherencia y resultados en respuesta eficiente, menos errores y un producto final más pulido.