Ocho cosas que debes saber sobre los sistemas de diseño

Asistí a muchas charlas para que no tengas que hacerlo.

Está en cada descripción de trabajo. Lo ves en la versión más reciente de la herramienta de diseño. Incluso podría haber escuchado a su familia mencionarlo en Acción de Gracias. Pero, ¿cuáles son los hechos sobre estos "sistemas de diseño" de los que habla toda la industria?

El diseño de puentes e ingeniería ha sido un gran interés para mí desde la transición al diseño de la ingeniería de software, por lo que estaba ansioso por aprender todo sobre los sistemas de diseño tan pronto como supe que eran herramientas poderosas para los equipos de diseño y sus partes interesadas en ingeniería. Afortunadamente, RETHINK y SF Design Week organizaron una gran cantidad de eventos sobre el tema durante el último mes y traté de ir a cada uno de ellos.

Eso significa que asistí a más de quince charlas diferentes de diseñadores en diferentes organizaciones. Cada diseñador aportó ideas únicas y procesables sobre los sistemas de diseño. Aquí están.

Esta es una lectura más larga, por lo que he aplicado un poco de negrita liberal si desea escanear los bits importantes.

1. ¿Por qué los sistemas de diseño son importantes?

Fuente. Figma‘s designsystems.com es su recurso para el aprendizaje del sistema de diseño.

Diana Mounter, Gerente de Sistemas de Diseño @ GitHub, lo resumió bastante bien:

  • Los sistemas de diseño dan orden al caos. Todos se mantienen en la misma página, por lo que todo el producto permanece constante y pulido en todo momento.
  • Los sistemas de diseño mejoran la experiencia del usuario mediante el uso repetido de patrones familiares y probados. Diseñar cualquier cosa desde cero deja margen para el error, así que intente usar lo que ya funciona.
  • Los sistemas de diseño mejoran la eficiencia del flujo de trabajo. Los equipos de productos saben exactamente cómo deben verse los componentes de las nuevas características y cómo implementarlos.

Noah Levin, jefe de diseño de Figma, realmente llevó el último punto a casa. Predicó la filosofía de la repetibilidad en su charla, explicando que lo mejor que puede hacer después de pasar su tiempo haciendo algo como construir un nuevo ícono es automatizar esa práctica para la siguiente persona. Al hacerlo, no solo habrá aportado valor a su propio trabajo, sino al trabajo de toda la organización. Para Noah, Comportamiento = Motivación * Habilidad * Activador. Cuando alguien en su equipo se activa para completar un diseño, podemos hacer poco para cambiar su motivación, pero podemos hacer mucho a través de los sistemas de diseño para mejorar su capacidad. El resultado final es un comportamiento que produce un diseño más consistente y probado mucho más rápido.

2. Qué es un sistema de diseño.

Karri Saarinen, Líder de Sistemas de Diseño @ Airbnb, dio esta definición:

Un conjunto de patrones y principios compartidos e integrados que definen el diseño general del producto.

Si tiene poca experiencia con los sistemas de diseño, una definición tan amplia podría percibirse como ambigua o poco útil. Sin embargo, la falta de detalles es clave. Los sistemas de diseño no requieren una definición más específica. Necesitan el espacio para ser lo que una organización requiera para el diseño y su implementación para moverse rápidamente sin romper las cosas.

Pero aquí hay un poco más de información, directamente del hombre:

Hojee los sistemas de diseño existentes para comprender mejor lo que son en la práctica. Aquí está el diseño de materiales. Este es el Protocolo de Mozilla. Y aquí están las Pautas de interfaz humana de iOS, que no llamamos oficialmente un sistema de diseño para algunos matices de Apple, razón por la cual no deberíamos llamar al HomePod un altavoz inteligente. Todos estos sistemas están construidos de manera diferente, pero entienden cómo todos se ajustan a los límites de la definición de Karri.

Tal vez se pregunte por qué los componentes que creó en Sketch se consideran simplemente "bibliotecas de patrones", "guías de estilo" o "kits de interfaz de usuario". Mike Dick, tecnólogo de diseño en SurveyMonkey, en realidad comenzó con uno de estos kits de interfaz de usuario cuando comenzó a componer sus elementos, pero volvió al tablero de dibujo cuando comenzó a mostrarlo a la ingeniería. En lugar de construir un sistema de componentes para diseñadores, Mike implementó una única fuente de verdad para que el diseño se integrara con la ingeniería. Los diseños creados con este sistema de diseño podrían traducirse fácilmente a CSS, el lenguaje utilizado para definir el estilo y, por lo tanto, podrían cambiar rápidamente el diseño en cascada a sus componentes frontales. Con suficientes recursos, organizaciones más grandes como AirBnb pueden implementar herramientas que traducen pantallas construidas con su sistema de diseño directamente a código (es por eso que Framer X es tan importante).

Mirando hacia atrás en la definición de Karri, vemos una mención de principios. Esto quiere decir que los sistemas de diseño incorporan reglas y pautas, que informan a los usuarios sobre cómo implementar los patrones y estilos organizados dentro del sistema. Rich Fulcher, Jefe de Diseño de Materiales @ Google, explicó por qué los principios eran una pieza definitoria del sistema: porque un sistema de diseño solo existe realmente si se puede usar sin el creador.

3. Cualquier sistema de diseño es mejor que ningún sistema de diseño.

Diana Mounter, GitHub

El sistema de diseño de GitHub, Primer, se estaba renovando interna y privadamente. Al hacerlo, dijo Diana, se debió en parte a que su equipo se enfrentó al Síndrome de Imposter al comparar Primer con los sistemas de organizaciones maduras y más grandes como DLS de AirBnb, Polaris de Shopify y el Sistema de Diseño Web de EE. UU. Imprimación se sentía sin pulir en comparación. Muchos componentes quedaron en desuso.

¿Pero sabes qué es peor que saber que un componente está en desuso? Sin saberlo, y empujando esa atrocidad a la producción.

Primer y otros sistemas usan indicadores para indicar rápidamente si los componentes están en desuso o no.

Es por eso que Diana dice que no debe preocuparse por comparar su sistema de diseño con el sistema de cualquier otra organización, porque eso no es lo que demuestra su éxito. En cambio, dice Diana, expulse su sistema de diseño y analice la utilización para medir su éxito. El caos será una parte natural de algo tan nuevo para la práctica como los sistemas de diseño, así que concéntrate en lo que importa y aprovecha el caos. ¿Están las personas usando el sistema de diseño en su flujo de trabajo y están contribuyendo de nuevo para mejorarlo?

No hay duda de que los sistemas como Polaris, iOS HIG y Diseño de materiales son notablemente completos e incluso geniales de ver. Pero estos sistemas no solo están construidos por empresas con recursos masivos, sino que están especialmente dirigidos a terceros interesados ​​que no trabajan con ellos. Solo viene con el territorio.

Diana mostró este divertido error. Idealmente, los componentes no obstaculizarían la legibilidad del código ejemplificado.

Diana terminó su charla con un tweet para compartir Primer con el mundo, defectos y todo. De esta manera, el sistema de GitHub brinda a los interesados: 1. Acceso a sus recursos, y 2. Oportunidades para mejorar las fallas del sistema.

4. Cómo comenzar con un sistema de diseño.

Lo primero que ves en Shopify’s Polaris.

En primer lugar, necesitas un nombre elegante. Tan pronto como leas Polaris, sabrás que serás llevado a tu salvación bien diseñada.

Es una broma. De hecho, Material Design no se tituló oficialmente hasta un mes antes de ser publicado. Rich Fulcher dijo que era conocido internamente como "Papel Cuántico" la mayor parte del tiempo.

¡Y tampoco comience con un archivo de Sketch! Michael McCombie, diseñador de sistemas @ Mozilla, cometió ese error una vez. Tan pronto como trajo a otras partes interesadas, tuvo que comenzar de nuevo. Un sistema de diseño es una pieza de diseño que resuelve los problemas del usuario. Comprenda el problema y los usuarios primero.

Cuando Jordan Girman, Director Senior de Experiencia de Usuario @ Glassdoor, se propuso hacer el primer sistema de diseño de Glassdoor, hizo que el equipo comenzara con estas preguntas:

  1. ¿Cuál es la necesidad de este sistema?
  2. ¿Cómo se implementa el diseño ahora?
  3. ¿Cómo debe implementarse?

A partir de ahí, establecieron objetivos y requisitos para su sistema de diseño que se alinearon con el resto de la organización. Esa alineación, como explicó Mike Dick, se basa en una relación. Sin una relación con sus partes interesadas, se encontrará con algunos desafíos:

  • Nadie hablará el mismo idioma. "Guía de estilo" significa dos cosas diferentes para ingenieros y diseñadores. ¿Cómo sabrá si su terminología y documentación serán entendidas por todos?
  • Hacer que todos participen con su sistema de diseño será mucho más difícil. Su gente no entenderá el valor de algo que no ayudaron a crear.
  • Nadie sabrá cuál es la fuente de la verdad. Besa tu consistencia adiós.
Lo que piensa un ingeniero cuando dices

Mike recomienda especialmente encontrar una contraparte que complemente sus habilidades con una pasión compartida por cerrar la brecha de diseño e ingeniería. Si no eres un gran codificador, hazte amigo de alguien que sea un gran codificador con un profundo conocimiento de las pilas de ingeniería. Eso permitió a Mike comprender que documentar CSS, en lugar de volver a alinear los componentes del sistema, era clave para que la ingeniería hiciera el mejor uso del sistema.

Le recomiendo que busque en Medium recursos sobre qué herramientas usar y cómo usarlas para construir su sistema de diseño. No quieres saber de mí, porque solo voy a decir algo sobre Figma.

5. Los sistemas de diseño documentan todo.

Documentación fluida de Microsoft sobre botones de radio.

Una vez que haya establecido los objetivos y requisitos de su sistema con las partes interesadas, es un buen lugar para comenzar a definir sus principios de diseño generales y orientadores. Los excelentes principios de diseño le permitirán desarrollar su sistema con una consistencia que se alinee con sus objetivos, y pueden ser un acceso directo a la fluidez de todo el sistema por parte de su usuario. Nuevamente, le recomiendo que eche un vistazo a los sistemas de diseño existentes y robustos como Polaris para encontrar los mejores ejemplos de principios en la práctica. Cuando comienzas a crear el tuyo, Rich Fulcher y Selene Hinkley, Content Strategist @ Shopify, tenían algunas cosas a tener en cuenta:

  • Muchos ni siquiera quieren leer principios; si leen, podrían escanear. Si escanean, pueden no entender. Si no entienden, ciertamente no se aplicarán. ¡Entonces, entienda a su audiencia cuando cree su copia y contenido!
  • Sé guía, no prescriptivo. Deje espacio para la creatividad dando un espectro de lo que es aceptable. Los principios deben ser una guía para la toma de decisiones.
  • Limite el número de principios. Shopify comenzó con 13, pero ahora lo han reducido a 4. Quitaron los principios de "arriba hacia abajo" y "gestión media" que no hicieron mucho para aquellos que diseñan e implementan el diseño de primera mano en el día a día. trabajo. Los principios de base son oro.
  • Refleja tus principios en lo que creas. Para el tipo de usuario que se refiere al sistema de diseño en contexto y aprende a través del ejemplo, esto hará mucho para arraigar sus principios y permanecer coherente.
  • No pueden limitar los principios de su marca o producto. Los sistemas de diseño deben ser subsistemas de su organización, así que asegúrese de que se ajusten a la totalidad.
  • Sigue evolucionando tus principios. Aplique un diseño centrado en el usuario a la creación de sus principios para que reflejen su sistema y su realidad con precisión. De lo contrario, la consistencia se romperá a medida que otros usuarios apliquen sus principios.

A partir de ahí, agregue los componentes de su sistema de diseño mientras se asegura de documentar sus principios específicos. Las cosas se moverán mucho más rápido, los compañeros de equipo despistados no te molestarán y tu nombre no será maldecido cuando no estés cerca. Esto es lo que Selene dijo sobre la documentación de su sistema de diseño:

  • Divide los párrafos en viñetas y listas.
  • Use ejemplos visuales siempre que sea posible.
  • Mantenga las oraciones cortas y procesables.
  • Use dos / no hacer.
  • Haz que tu no sea menos obvio. Modelarlos después de errores realistas que podrían resultar de una mala interpretación
Fuente: material.io

6. Los sistemas de diseño deben integrar la accesibilidad.

Consulte esta herramienta para comprobar las relaciones de contraste accesibles en WebAIM.

John Cassidy, diseñador sénior en Google, comenzó su charla con una estadística enorme:

1 de cada 7 personas están discapacitadas. Eso es más de mil millones de personas.

Aun así, John tenía más que decir. Un usuario se desactiva en cuanto sus manos están llenas de comestibles. Si se encuentran viajando en un país extranjero sin conocimientos del idioma local, están discapacitados. Si vives lo suficiente, probablemente terminarás deshabilitado permanentemente algún día.

Si todavía está convencido, John tiene este consejo para brindar accesibilidad a su sistema de diseño.

  • Aplique restricciones de diseño con mentalidad de accesibilidad. Asegúrese de que sus componentes tengan en cuenta los escenarios que necesitan accesibilidad, como el tipo redimensionado para la hipermetropía y el texto alternativo para los lectores de pantalla. No te olvides de la discapacidad temporal; ¿Qué pasa si su producto es utilizado por los conductores a plena luz del día?
  • Conozca la tecnología de accesibilidad disponible para sus usuarios. La tecnología de sistema operativo como iOS Magnifier y Windows Narrator están más disponibles, pero también existen productos complementarios como Xbox Adaptive Controller. Y algunas tecnologías no están limitadas al uso por parte de usuarios discapacitados, especialmente asistentes de voz.
  • Pruebe sus componentes con esas tecnologías de accesibilidad activadas. Bastante simple. Active tecnologías como iOS VoiceOver y asegúrese de que funcionen con los componentes de su sistema de manera útil.
  • Pruebe su producto con usuarios con diferentes discapacidades. Por supuesto, debe presentar su producto frente a los usuarios que se encuentran en un espectro de diferentes discapacidades mentales, físicas y situacionales.
El Xbox Adaptive Controller de Microsoft es una de las últimas tecnologías de accesibilidad para los usuarios.

7. El color y la ilustración pueden y deben ser sistemáticos.

Paleta de colores Polaris de Shopify

Es posible que su organización ya tenga colores de marca que serían útiles para completar su interfaz de usuario, pero no tan rápido. No elija los colores de su IU copiando y pegando los colores de su marca. Los colores de la marca no tienen en cuenta la usabilidad, aunque derivar los colores base de su marca es probablemente el mejor lugar para comenzar. Linda Dong, Gerente de Diseño @ Lyft, recomienda crear espectros de colores de marca con texto superpuesto para establecer colores de interfaz de usuario que satisfagan proporciones de color accesibles. Por supuesto, pruebe todo esto en las situaciones en que se utilizará su producto. Lyft necesita trabajar para conductores en plena noche y en los días más brillantes.

Cuando se decida por sus colores, no haga referencia a esos colores en su sistema de diseño con su código hexadecimal o su nombre "oficial". Linda señaló esto con un divertido cuestionario de nombres de colores. Resulta que la paloma es de un gris medio. Llámame poco sofisticado, pero creo que pidgeon es lo que estás buscando.

En su lugar, defina su esquema de color a través de tokens de color. Michael McCombie y el sistema Protocol utilizan nombres de colores básicos como $ color-red, mientras que Linda y Lyft usan un formato $ ColorName-Value debido a sus espectros de color. Por supuesto, traiga a todas sus partes interesadas a medida que construye su sistema de color, y publicítelo cuando esté listo, para garantizar la adopción.

Jennifer Hom, Gerente de Diseño de Experiencia de Illustration @ Airbnb, se unió para renovar su sistema de ilustración. Antes, Airbnb tenía ilustraciones compartidas en diferentes tamaños o diferentes ilustraciones entre tamaños. Jennifer cambió las ilustraciones para aumentar sistemáticamente los pesos y detalles de los vectores a medida que aumentaban los tamaños de exportación (1x, 2x, 3x), lo que permite un diseño consistente pero apropiado para la plataforma entre dispositivos.

Jennifer también tuvo en cuenta estos principios para su sistema de ilustración:

  • Asegúrese de que sus ilustraciones estén conectadas a tierra. Las ilustraciones deberían permitir que la mayoría, si no todos, se relacionen con su producto y sin pensar en minutas.
  • No dejes que tus ilustraciones sean el centro de atención. Deben aumentar el deleite sin distraer al usuario de su objetivo.
  • Usa colores accesibles. ¡Comprueba tus proporciones de color!
  • Sé diverso, pero realista. Las ilustraciones de Airbnb se basan en personas reales, por lo que "presentan" a Donald Glover y los amigos de Facebook de Jennifer. Airbnb también habló con organizaciones y autoridades sobre discapacidades que les dieron la idea de usar una señal sutil como los auriculares.
  • Pon a prueba tus ilustraciones. Oh hombre, ¿puedes creerlo? Esta pieza de diseño necesita ser probada también. Mostrar las ilustraciones específicas de China a la oficina de Beijing le permitió a Jennifer darse cuenta de que los hombres chinos de pecho grande no serían los más identificables.

8. Cómo escalar un sistema de diseño.

Karri Saarinen: Cómo evolucionará un sistema de diseño con escala.

¿Que es eso? ¡Su compañía acaba de anunciar una Serie C! Dentro de 3 meses, se espera que tenga un conjunto completo de aplicaciones en todas las plataformas y un equipo de Not-Yous que administre cada una.

No temáis. Otros han llegado al otro lado. Así es como Karri cree que puede escalar su sistema de diseño:

  • Usa primitivas definidas. Defina los esquemas de color, los estilos de texto, las cuadrículas, etc. que serán los componentes básicos de cada adición a su sistema de diseño. Todos los componentes centrales de Airbnb y las bibliotecas específicas del equipo se crean con el mismo conjunto de primitivas.
  • Construya sus componentes usando esas primitivas, y construya sus patrones con esos componentes. Esto asegurará consistencia mientras permite un cierto grado de flexibilidad y maleabilidad.
  • Permanece flexible. Necesita flexibilidad para permitir el espaciado, el truncamiento de texto, diferentes tamaños de texto para accesibilidad e internacionalización, diferentes opciones de color, componentes personalizados y buena creatividad.
  • Haga que sus especificaciones de diseño sean independientes de la plataforma. DLS define sus componentes en JSON, un estándar de datos ubicuo que permite la traducción automática a estilos específicos de la plataforma como CSS.
  • Agregue bibliotecas específicas del equipo, pero manténgalas bajo control. Airbnb limita las bibliotecas de su equipo a componentes experimentales y específicos. Por lo tanto, las bibliotecas del equipo se supervisan y los componentes se envían a la cadena si son componentes básicos adecuados. ¡70 componentes representan el 60% del front-end de Airbnb en todas las plataformas!

Muchas gracias a los increíbles oradores: Diana Mounter, Noah Levin, Karri Saarinen, Rich Fulcher, Michael McCombie, Linda Dong, John Cassidy, Jennifer Hom, Selene Hinkley y Jordan Girman. ¡Y gracias a Julie Stanescu (junto con su equipo en Rethink) y SF Design Week por organizar sus increíbles charlas!

Por último, gracias a Jasmine Rosen y Jodee Cherney por la edición y al resto de Tradecraft por su continuo apoyo, y Tyler Heucke por ser mi "contraparte de ingeniería".