Sistemas de Diseño ¿Qué son? ¿Cómo se hacen?

Todos dicen que lo hacen, pero tampoco saben cómo hacerlo. Un Sistema de Diseño es lo que habilita la conexión entre Diseño y Desarrollo, traduciendo una experiencia a código. Realmente suena más complicado de lo que realmente es. En este Solcast entramos a detalle de qué es un Sistema de Diseño y cómo hacerlo bien para tu organización.

Contexto

Para hablar de Sistemas de Diseño, tenemos que hablar un poco de la historia del Internet. Hace unas semanas hicimos un Solcast explicando cómo funcionaba el Internet, así que si no lo han visto, les va a ayudar a entender mejor algunas cosas que vamos a ver hoy.

Cómo vimos en ese programa, el Internet es funcionalmente un sistema de comunicación entre computadoras. Hay unas computadoras que almacenan la información que se llaman servidores, porque “sirven” la información; y hay otras computadoras que utilizan la información que se llaman clientes, porque son a quién se les sirve.

Esta relación Cliente-Servidor es con lo que está construído esto que usamos todos los días. Google está almacenado en un servidor, y cuando tú quieres buscar algo, tu cliente le solicita información a Google, Google hace su magia y te sirve la información.

Pues bueno. Durante mucho tiempo, esa información estaba presentada en una unidad de contenido llamada “página”.

Las páginas es cómo hicimos sentido del contenido en Internet durante muchos años. El Internet nació en formato de puro texto y el formato que conocíamos que tenía puro texto eran libros, y los libros tienen paginas. Hace sentido ¿No? De ahí “web page” Página Web.

El formato de la página también hace sentido en el formato cliente-servidor, porque yo pido una página, y el servidor me manda la página.

Pero, el Internet no se quedó en formato de texto mucho tiempo. Eventualmente se agregaron imágenes, videos, Conforme avanzó la tecnología podíamos enviar más que una página, podíamos enviar sitios completos, con todo su contenido. Incluso el formato de la página empezó a quedar un poco obsoleto.

Piensa en Facebook o Twitter. ¿Son páginas? ¿Son páginas muy largas? ¿Qué hay de cosas com Netflix o Spotify? ¿Son páginas? Pero cuando haces scroll no cambias de página, aparece más contenido, y luego el contenido aparece dentro, o al lado, aparecen componentes laterales, inferiores.

Estos sitios con los que interactuamos hoy en día, ya no se sienten tanto como páginas, sino como módulos ¿No? Como conjuntos de componentes que interactúan entre ellos.

Todos los componentes se “sienten” como parte de la misma estructura. Tienen colores o formas, tamaños en relación con ellos mismos que hacen que se sientan.

Esto fue un poco de lo que reflexionó Brad Frost por ahí del 2013, a su reflexión le llamó “Atomic Design” o Diseño atómico, y recae en la realización de que hoy en día ya no construímos páginas, sino colecciones de componentes. Y es esta reflexión la que llevó al concepto del Sistema de Diseño como lo conocemos hoy.

Definición

Un Sistema de Diseño es un conjunto de patrones interconectados y prácticas coherentemente organizadas. Sirven como apoyo en la creación de productos digtiales com apps y sitios; y contienen librerías de patrones, lenguajes de diseño, guías de estilo, componentes codificados, lenguaje de marca y documentación.

Para entender qué es un Sistema de Diseño, tenemos que entender cómo está construído un producto digital.

Como lo vimos en la introducción, todo producto digital requiere de dos actores, un cliente y un servidor. El servidor almacena y reparte la información, y el cliente la solicita y la ensambla para que el usuario pueda interactuar con ella.

Pues bueno, antes el cliente le pedía al servidor una página. Le decía “dame inicio.html”. Esa página tenía una serie de instrucciones que le decía al cliente dónde poner un título, qué texto tiene que llevar, qué tamaño de fuente, qué color, etc. Esto es lo que se le conoce como HTML, lenguaje de marcado de hiper texto.

Esto es parecido a cómo hacían los periódicos o las revistas. Cada página tenía una estructura en particular que seguía una guía o un patrón establecido.

Pero llegaron pantallas de todos tamaños y resoluciones, y tuvimos que empezar a adaptar nuestras páginas web a una gran cantidad de formatos. Antes, hacer páginas requería hacer 3,4, 6 versiones. Que si la versión wide, que si la narrow, que si la 320, que la 1024.

Llega Brad y dice: tiene que haber una manera más fácil. Y nació el concepto del Sistema de Diseño.

Brad dice, dejemos de Diseñar páginas completas. Dejemos de anclar nuestros componentes a una estructura rígida que cambia todo el tiempo, que cuando queremos actualizar tenemos que actualizar todo.

Es como si cada vez que quisieras reacomodar tus muebles o reacondicionar un espacio en tu casa tuvieras que demolerla toda. Suena absurdo ¿No? Pero eso hacíamos.

Brad dice: ¿Por qué no en vez de ver la página como una unidad de contenido, la dividimos en componentes más pequeños. En su mínima expresión, en sus átomos, y vemos que toda la interfaz de nuestro producto realmente es una combinación de esos átomos?

Esos son los patrones que menciona la definición, arreglos de átomos.

Tengo un texto, y tengo un botón. Los junto y tengo un cuadro de texto. Junto dos cuadros de texto y tengo una pantalla modal. Agrego un campo de texto y tengo un login. Cambio el texto original y tengo una pantalla de Regístrate.

En vez de tener que hacer 40 pantallas modales, puedo hacer 1, y solo cambiar el texto en cada una.

Lo que esto implica, es que el servidor solo tiene que mandarme 1 componente, y luego el cliente puede interpretar la instrucción de cambiar el texto en cada componente. Después de todo, esa instrucción es mucho más ligera que mandarte 40 componentes independientes, cada uno con su instancia única y peso único.

Entonces, los Sistemas de Diseño se centran en la reutilización de componentes. Que el mismo botón va a ser el mismo en todo el sistema. Pero se va a utilizar en diferentes patrones, que a su vez todos son componentes reutilizados.

Con un Sistema de Diseño, puedes hacer un sitio con millones de contenidos diferentes, como Spotify o Netflix y solo un puñado de instrucciones.

¿Se imaginan que Netflix tuviera que hacer una página web para cada programa? ¿Para cada región en la que operan? ¿Para cada episodio? ¿Se imaginan que tuvieran que hacer una petición para cada una de esas páginas?

O AirBnb. ¿Se imaginan? AirBnb tiene 81mil ciudades en 191 países ¿Se imaginan el número de páginas que tendrían que construir y mantener?

Los Sistemas de Diseño son la clave para crear sistemas escalables, que puedes traducir a cualquier idioma, que no se tardan una semana en cargar. Pero todo está en hacerlos bien.

¿Cómo funciona?

Pues bueno, esta es la parte más interesante.

Cuando ustedes Googlean “Design System” aparecen cosas como esta:

El problema con estos resultados es, lo mismo con lo que lidiamos aquellos que Diseñamos, estamos únicamente viendo la superficie, y pensamos que eso es el Sistema de Diseño.

¿Qué es un Sistema? Solcast #1. El primer y más importante concepto, mi principal inspiración para empezar este programa, que todos entendamos qué es un sistema y aprendemos a pensar en sistemas.

Un sistema es un conjunto de componentes interconectados cuyo resultado integrado es mayor a la suma de las partes individuales.

Esto que vemos en estas imágenes no es un Sistema. Esto es algo que se conoce como UI Kit, Kit de Interfaz de usuario. Es una librería de componentes visuales. Pero con esto no podemos construir un sitio. Un sitio no está hecho de componentes visuales.

Piensen en Spotify. Spotify no es el reproductor, es la funcionalidad que ese reproductor habilita, es el hecho de que en ese reproductor puedes poner lo que quieras escuchar y puedes controlar tu música. Un programador tiene que habilitar ese funcionamiento.

No se si alguno de ustedes ha trabajado con programadores, pero ellos tienen sus propias cosas de las que preocuparse para habilitar que ese botón funcione como para andar descifrando el tamaño en pixeles y luego adaptándolo que sea responsivo, el color exacto ¿Y en esa lista no aparece qué pasa en hover? O si hay una animación de transición

Los UI Kits son una herramienta para Diseñadores, y pueden ser parte de un Sistema de Diseño en especial cuando hay varios Diseñadores en el equipo. Pero este Kit NO ES un Sistema de Diseño, es solo la parte que “se ve”.

Un Sistema de Diseño se compone de las siguientes cosas:

Los átomos — Son la mínima expresión de los elementos que componen nuestra experiencia. Piezas individuales. Cómo se ve un texto, cómo se ve un botón, cómo se ve un ícono.

Luego, como en la naturaleza, esos átomos forman moléculas. Un botón y un texto hacen un tipo de molécula, un ícono y un botón hacen otro tipo de molécula.

Buego podemos crear patrones con estas moléculas. Como por ejemplo Netflix tiene un patrón para presentar un show. Video de fondo, texto de título, texto descriptivo, año, calificación y el reproductor.

Cada uno de estos elementos, para considerarse un Sistema de Diseño, no solo necesita documentar cómo se ve, sino como funciona, cómo se declara en código, qué opciones de personalización tiene. He visto Sistemas de Diseño que incluso muestran como un mismo componente se declara en varios lenguajes, según lo que usa la compañía.

Normalmente también vienen las reglas de cómo se aplica. Si es un componente con el logo de la marca, por ejemplo, cuáles son las reglas para presentarlo, los espacios, las alturas, los colores permitidos.

Básicamente un Sistema de Diseño no es un repositorio de elementos visuales. Es un documento de trabajo para la organización

Diseñadores pueden crear nuevos componentes y documentarlos
Programadores pueden agregar documentación
Marketing puede agregar sus manuales y guías de uso
Producto puede saber qué cosas ya son posibles de hacer y reutilizar componentes
Hasta podemos poner Analytics, o guías de atención a clientes
Todos utilizamos una herramienta colaborativa. Y lo mejor, hacemos un cambio aquí y se refleja “automáticamente” (cuando está bien hecho) en todas las interfaces.

¿Ustedes creen que cuando Airbnb lanzó su nuevo logo rehizo 3 millones de pantallas? O ustedes creen que cada aprendizaje que Netflix integra de su investigación de usuarios de que el botón tiene que ser, por ejemplo, 10% más grande, implica modificar todas las instancias? ¡Obvio no!

Un Sistema de Diseño bien hecho es una fuente única de verdad para todo lo que se necesite para construir un producto y abarca:

Identidad del producto: Colores, tipografías, imágenes, tono y voz
Principios: Valores de la marca, propósitos, objetivos
Mejores prácticas: Guías de implementación, manuales, preguntas frecuentes, solicitudes de nuevos componentes, hallazgos de usuarios
Componentes y patrones: Con su respectiva documentación funcional (Cómo se usa) y técnica (Cómo se implementa)

¿Cómo funciona?

Implementar un Sistema de Diseño varía de organización a organización, pero hay algunas características que te ayudarán a tener un mayor éxito en la adopción.

Primero, la adopción de la idea. Los beneficios que genera el concepto varía dependiendo de a quién se lo estás explicando. A un directivo tal vez no le guste la idea de “gastar” en crear un sistema, pero tal vez le guste la idea de no tener que gastar en “rehacer” un sistema cada que hay que hacer alguna actualización. A Marketing tal vez le vale madres la idea de mejorar la comunicación entre Diseño y Desarrollo, pero tal vez les guste la idea de tener sus manuales y estilos en un solo lugar para gestionar acceso con sus agencias y que no tengan que enviar el logo por enésima vez “en alta”
Luego, necesitas un lugar en dónde comenzar a crearlo. Muchos usan un repositorio en Github, porque es fácil para los devs de usar y ya es un recurso compartido, pero la verdad es que un Sistema de Diseño puede comenzar mucho más sencillo, en un Google Sites o hasta en un documento de texto. El chiste es adoptar lo que genere la menor fricción en la organización, con el tiempo puedes ir escalando. Es más, probablemente lo crees para un proyecto en específico.
Luego necesitas empezar a poner cosas en él. Comienza por la interfaz que ya existe, los botones que ya existen, las tipografías ya seleccionadas. Comienza a identificar los “átomos” en tu diseño, documenta como se ven, como funcionan y agrega el bloque de código que los declara. Por eso Github es una gran herramienta, porque puedes apuntar exactamente al branch donde está declarado y decir “este bloque, es este componente, solo copia, personaliza y pega”.

Comenzar un Sistema de Diseño tiene un costo, como cualquier esfuerzo de documentación. Va a tener una inversión de tiempo al crearlo y va a consumir tiempo mantenerlo, crecerlo, documentarlo. En organizaciones muy grandes hay gente dedicada 100% a crecer y mantener el Sistema de Diseño, porque es un sistema que soporta decenas o cientos de productos.

En organizaciones muy grandes, que abarcan varios países o varios equipos de Diseño y Desarollo, y que los creadores del sistema no son los que lo utilizan, es necesario definir un sistema de gestión, para centralizar las decisiones de ajustes, pero exactamente cómo hacerlo depende fuertemente de la cultura de cada organización (jerárquica, ágil, etc.) Y de eso podríamos hacer un programa completo.

Cierre

Los Sistemas de Diseño es cómo los niños grandes crean productos. Los equipos maduros, prefieren perder menos tiempo haciendo “páginas” y más tiempo creando soluciones escalables, haciendo uso inteligente de tus recursos.

La pregunta no es si necesitas un Sistema de Diseño o no, la pregunta es ¿Cuánto te está costando no tener un Sistema de Diseño? Revisa la cantidad de horas que los equipos se la pasan creando cosas desde cero, retrabajando, trabajando las mismas cosas en paralelo, duplicando.

Equipos de producto que aún no tienen uno, muy probablemente son equipos ineficientes, propensos a errores, retrabajo y desperdicio, y pues, tú decides si ese es el equipo que quieres tener en tu organización.

Vamos a dejarla ahí. Si aprendieron algo invítenme un café con la liga en la descripción, compartan este episodio a quien creen que puede servirle y déjenme un like y un comentario platicandome lo que aprendieron.

Háganme llegar sus dudas por acá, Twitter o Linkedin para contestarlas en las siguientes ediciones y no olviden revisar la descripción del video para notas y referencias.

Nos vemos el próximo miércoles y… Felices trazos.