Cómo construir un sistema de diseño con un equipo pequeño

Ilustración de Chris Gilleard.

Anoche, mi pequeño equipo y yo salimos a hacer un poco de trabajo en red y aprender sobre los sistemas de diseño. Siendo esa la palabra de moda de 2017, estábamos ansiosos por aprender cómo podríamos crear la nuestra.

Habíamos escuchado todos los maravillosos beneficios de crear un sistema de diseño: ahorro de tiempo, reducción de debates, colaboración, adopción y más. ¡Yo estaba emocionado!

Todas las charlas hablaron sobre cómo crear un sistema de diseño. Sin embargo, estos eran grandes equipos o tenían recursos dedicados, incluso un equipo de DesignOps (segunda palabra de moda de 2017) para construir y mantener el sistema de diseño.

Al final de la tarde nos fuimos un poco desanimados. Pero no estábamos solos. Durante la sesión de preguntas y respuestas, muchos preguntaban:

"¿Cómo puedo construir un sistema de diseño como diseñador único?"

"Soy el único diseñador, ¿qué consejo tienes para mí?"

Pero mi equipo y yo decidimos que no íbamos a dejar que esto nos detenga. Todavía vamos a crear nuestro propio sistema de diseño. Antes de sumergirme en eso, aquí hay un poco de historia.

¿Qué es un sistema de diseño?

"Un sistema de diseño ofrece una biblioteca de estilo visual, componentes y otras preocupaciones documentadas y publicadas por un individuo, equipo o comunidad como herramientas de código y diseño para que la adopción de productos pueda ser más eficiente y coherente". - Nathan Curtis

En pocas palabras, un sistema de diseño es una colección de componentes reutilizables para unir productos completos.

Muchas personas han escrito artículos y libros en profundidad sobre sistemas de diseño. Aquí hay algunos que pueden serle útiles:

Guía de estilo vs. Sistema de diseño

Puede estar pensando, genial, pero ¿no es eso solo una guía de estilo?

“Una guía de estilo es un artefacto del proceso de diseño. Un sistema de diseño es un producto vivo y financiado con una hoja de ruta y una cartera de pedidos que sirve a un ecosistema. ”- Nathan Curtis

Además, un sistema de diseño es un conjunto de componentes (o moléculas) de diferentes tamaños que se pueden unir de infinitas formas para crear una serie de componentes más grandes. El diseño atómico de Brad Frost es la inspiración para el diseño de componentes.

Beneficios de un sistema de diseño

“El desafío al que nos enfrentamos hoy es que las herramientas no se comunican entre sí muy bien, los detalles se quedan atrás, hay una gran brecha entre el diseño y la ingeniería y necesitamos hacer mucho trabajo manual para asegurarnos de que siempre estamos encima de todo ". - UX Bootcamp

Como un pequeño equipo que trabaja en software empresarial B2B, nos sumergimos en la creación de un sistema de diseño con tiempo, presupuesto y recursos limitados. Quería recordarle a nuestro equipo los beneficios.

En general, nuestro equipo estaría ahorrando tiempo debido a:

  • Debate reducido: no es necesario perder el tiempo revisando las decisiones de diseño para el mismo componente
  • Componentes reutilizables que hacen posible la escala
  • Mayor colaboración: mejore el trabajo de forma remota y en diferentes oficinas

Tenía una razón egoísta para querer construir un sistema de diseño. Rápidamente me di cuenta de que, si tenía éxito, podríamos "automatizar" muchas tareas, lo que nos permitiría tener tiempo para hacer algo que me encanta, ¡resolver los problemas de los usuarios! Ese es el núcleo de UX.

Estructura del sistema de diseño

Para crear un sistema de diseño, necesitamos desglosarlo y comprender sus partes:

Pin UX - Sistema de diseño

También implica un poco de búsqueda del alma. Algunas preguntas para hacer al crear un sistema de diseño:

  • ¿Cómo funciona el sistema hoy y en el futuro?
  • ¿Cuál es nuestra visión?
  • ¿Qué problemas estamos tratando de resolver?
  • ¿A quién impacta más este problema?
  • ¿Qué impacto queremos que tenga un sistema de diseño sobre cómo trabajamos?

Cómo otros intentan abordar esto:

¿Cómo puede nuestro pequeño equipo hacer un sistema de diseño?

¿Dónde comienzas cuando no tienes suficientes recursos, tiempo o presupuesto?

1. No empieces desde cero

"Si desea hacer un pastel de manzana desde cero, primero debe inventar el universo". - Carl Sagan

Nuestro equipo está revisando los sistemas de diseño existentes en la naturaleza para que podamos, como dice Austin Kleon:

Robar como y artista - Austin Kleon

Muchas empresas han hecho públicos sus sistemas de diseño e incluso han compartido archivos de croquis. He compartido una lista a continuación. Este hecho, y los muchos otros recursos de croquis, hacen que sea sencillo usar Sketch como nuestra herramienta de elección.

Además, existen herramientas que pueden ayudarlo a crear rápidamente una línea base para su sistema de diseño:

2. Sepa con qué está trabajando

Hemos decidido que es obligatorio completar una auditoría de UI de todos nuestros sitios y propiedades. Es posible que tengamos que pedir algunos favores para hacer esto. Pero dado que solo se trata de documentar lo que existe, obtener la ayuda de otros puede no ser tan difícil. Esto llevará mucho tiempo, pero al final valdrá la pena. Podremos diseñar de manera integral al crear nuevos componentes.

Esto puede ser útil para aprender a realizar una auditoría de IU:

3. Construye sobre la marcha

Un sistema de diseño es un documento vivo. Al darnos cuenta de que el trabajo nunca termina, hemos decidido participar y construir a medida que avanzamos. A medida que trabajemos iterativamente en nuestros proyectos, diseñaremos con componentes en mente y eventualmente tendremos un sistema de diseño. Afortunadamente, hay algunos de nosotros, lo que nos permite ser colaborativos y "robarnos" unos a otros.

Consejo rápido: crea símbolos en Sketch. Lo sé, parece que lleva mucho tiempo, pero una vez que vea el poder de los símbolos, apreciará el viejo dicho:

"Tienes que ir despacio para ir rápido".

4. Conoce tus límites

Empieza pequeño.

Algunos sistemas de diseño incluyen fragmentos de código. Ese es el objetivo final, porque aumentará la adopción en toda la empresa y creará una experiencia de usuario coherente. Sin embargo, mi pequeño equipo no puede hacer eso. Todavía no, eso es.

Estamos planeando comenzar con un archivo de boceto de componentes simples. Una vez que estemos lo suficientemente lejos, trabajaremos con nuestros desarrolladores frontend para crear CSS. Permitir a los desarrolladores usar su "arma de elección" cuando se trata de código puede permitir que el sistema de diseño viva. Y con las bases de código cambiando en lo que parece ser una base diaria, mantener nuestras manos fuera de él puede ser lo mejor.

5. Mantente organizado

Suena simple, pero con los proyectos acumulados y los plazos inminentes, se siente más fácil hacer las cosas de la manera "rápida y sucia". Mantenerse organizado lleva tiempo y nunca se hace, pero mantiene a todos cuerdos y reduce el correo electrónico o el desorden de archivos que vuelan de un lado a otro. A medida que comenzamos a trabajar en cosas nuevas con un kit de interfaz de usuario que vamos a construir con una de las herramientas enumeradas anteriormente, debemos realizar un seguimiento. De lo contrario, terminaremos donde comenzamos: ¡diferentes estilos en todas partes!

El diseño de versiones de documentos es un sueño para todos los diseñadores. Ningún producto lo ha conseguido al 100%. Vamos a probar Abstract and Plant para ver cómo puede ayudarnos a mantenernos en el camino. Al trabajar para una empresa, la única plataforma en línea que podemos usar para el almacenamiento de archivos es One Drive. Google Drive y Dropbox son otras opciones si no está restringido.

Estos son los primeros pasos que mi equipo y yo vamos a intentar al comenzar este viaje. Los dedos cruzados avanzamos un poco. Me encantaría saber de otros equipos pequeños, incluso de un "equipo de uno", para saber cómo están abordando este desafío.

Directorio del sistema de diseño

Como se prometió, aquí hay algunos sistemas de diseño para la inspiración o para "robar como un artista":

Bibliotecas de patrones / Guías de estilo

Si esto le resultó útil, ya sabe qué hacer ahora. Sígueme para obtener más artículos y tutoriales en tu feed.