El sistema de diseño Full Stack

Emmet Connolly es diseñador de productos digitales como Google Flights, jefe del equipo de diseño de Intercom y cofundador de Android Wear. En este post comparte sus ideas sobre las bibliotecas de patrones, concebidas sólo como una parte de un sistema de diseño Full Stack.

Conolly concibe. Las librerías de patrones permiten mantener la consistencia de los elementos más pequeños que integran un diseño, pero falta una opinión sobre la manera de reunirlos, ni saben nada acerca de tu producto o de los conceptos que subyacen tras él. Los sistemas de diseño son más que un kit de piezas. En una analogía con los bloques de construcción de Lego, el tener una biblioteca limitada de patrones de bloques para elegir no imposibilita que construyas auténticas locuras. Los mejores sistemas de diseño tienen un fuerte punto de vista, una fuerza gravitacional que fuerza a componentes dispares a integrarse en patrones, y el resultado es un todo coherente.

Problema común del Atomic Design

Pero existe un malentendido común sobre el Atomic Design, que Connolly sugiere que es una limitación. El Atomic Design dice que tomes sus elementos básicos (etiqueta, entrada, botón), pegues juntos esos átomos y llames al conjunto molécula. Entonces podrás reutilizar esa molécula una y otra vez; o pegarla varias para constituir un organismo también reutilizable. El problema de un sistema como este (en cada ejemplo del mundo real que Conolly se ha encontrado) consiste en que permanece deliberadamente inconsciente del producto que se está construyendo.

El diseño atómico promueve la reutilización. Sin embargo, muchos confunden esta filosofía con un proceso lineal, que exige que todo el diseño comience primero por construir sus piezas más pequeñas antes de proceder al diseño a nivel de página o de sitio. Es un enfoque que antecede las tácticas de diseño por delante de la estrategia de diseño, y por tanto la concepción pasa a un plano secundario y avanzamos a ciegas hacia el resultado final. Para Conolly, los sistemas complejos deben diseñarse a partir de un boceto del contorno, y sólo entonces puedes empezar a rellenar los detalles.

Enfoque no Lineal del Atomic Design

Brad Frost jamás enfoca los proyectos como un trayecto lineal de pequeño a grande; sino como una constante ida y vuelta entre las dos escalas. Como cuando Brad desarrolló sus herramientas y metodologías en los diseños de TechCrunch y Entertainment Weekly, cuyo proceso se amplió constantemente de un lado a otro entre el nivel de página y el nivel atómico.

Los proyectos de diseño atómico siempre comienzan con las preguntas genéricas: ¿Cuáles son los objetivos empresariales del proyecto? ¿Cuáles son las necesidades del usuario? ¿Cuál es la promesa de la marca? Cuando llegamos a páginas individuales, las preguntas se plantean acerca de la experiencia del usuario y sobre los trabajos a realizar, tanto para él, como para la empresa. A partir de ahí, se realiza el bosquejo del proyecto e identifican los patrones amplios de diseño que necesita la página. Empezamos a imaginarnos los componentes necesarios para dar vida a esos patrones y sólo entonces comienza el trabajo de construcción a nivel atómico. Según se diseñan páginas y componentes de mayor nivel, hacemos zoom hacia atrás para revisar átomos y molécula; y se ajustan para aumentar su flexibilidad y que ofrezcan soporte a una gama más amplia de organismos: el diseño de alto nivel es el creador del sistema global.

Al final, una biblioteca de patrones emerge, y el sistema de diseño está implícito en el proceso que condujo a su construcción. Para un equipo pequeño, en un proyecto de poco tamaño, ese conocimiento implícito puede ser suficiente. Pero tal conocimiento se queda corto cuando aumenta la magnitud del proyecto y la cantidad de personal implicado en los equipos. El sistema de diseño tiene que ser documentado. Ahí es donde entran en juego el resto de instrumentos de un sistema de diseño completamente articulado: principios de diseño, guía de estilo, voz y tono, directrices UX, repositorio de código, etc.

Photo by Álvaro Serrano

Éste post ha sido creado sobre la base de The Full Stack Design System

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *