Sistema de diseño: ¿Qué trampas se deben evitar cuando usted es el único diseñador?

May 10 2022
O cómo crear un Sistema de Diseño que sirva para un propósito. Td;drUn artículo basado en mi experiencia personal que le brindará buenas prácticas para evitar que usted mismo haga su sistema de diseño demasiado rápido y lo convierta en un documento rígido y no escalable.

O cómo crear un Sistema de Diseño que sirva para un propósito.

Td;dr
Un artículo basado en mi experiencia personal que le brindará buenas prácticas para evitar que usted mismo haga su sistema de diseño demasiado rápido y lo convierta en un documento rígido y no escalable.

L a primera vez que escuché sobre sistemas de diseño fue en 2015 y tuve mi primer trabajo. Alrededor de este tiempo, los niños geniales publicaban #avocadotoasts en Instagram, el logotipo de Google estaba pasando de serif a sans-serif, y había una cantidad impresionante de artículos que definían y redefinieron lo que debería ser un buen sistema de diseño (existe el buen sistema de diseño y el mal sistema de diseño… ) .

Como comencé como el único diseñador en este primer trabajo, no tenía ningún referente que me guiara en la creación de un sistema de diseño. Todo lo que podía hacer era leer artículos contradictorios y confiar en mi reloj confundido. Así que cometí muchos errores. Quería hacerlo todo yo mismo, en un contexto en el que no tenía tiempo, e imponiendo una visión que no controlaba. Si fuera un bingo, ya me hubiera ganado el jamón.

Desde entonces, algunas lecturas me han ayudado mucho a formarme una opinión sobre el tema, y ​​no puedo recomendar su lectura lo suficiente:

Atomic Design de Brad Frost ,
Design Systems de Alla Kholmatova o
Design System Handbook de InVision .

Más allá de una cuerda más al arco de nuestro diseñador, Design Systems nos sumerge en el pensamiento sistémico. Considerando el mundo como un conjunto de interacciones, optimizando nuestra forma de diseñar productos, creando un puente tangible entre diseñadores y desarrolladores (y también entre equipos de una misma organización) , todo esto fue posible gracias a los sistemas de diseño y a las personas que contribuyeron a su definición.

Como toda nueva herramienta, su implementación implica riesgos. ¿Su creación requiere demasiado esfuerzo/demasiado tiempo? ¿Es nuevo pero nadie lo usa? ¿Se ve más como una restricción que como una guía? No hay problema, déjame agarrar mi martillo neumático y lo romperemos todo juntos.

NOTA: Este artículo está aquí para brindarle los recursos teóricos y guiarlo sobre la mejor manera de iniciar su propio sistema de diseño, desde la perspectiva de un diseñador de inicio. Este no es un tutorial práctico de la A a la Z.

Sistema de Diseño — ¿Qué es? De qué sirve ?

La literatura sobre el tema es abundante. Hay tantos artículos y recursos que incluso hay curadores que solo hablan de ello (ver más abajo) . No es necesario ir muy lejos para encontrar una definición clara y completa:

“Un Sistema de Diseño es un lenguaje visual, organizado y en evolución que rige la composición de uno o más productos.” ~ internet firmado

Es decir que cualquier organización con uno o más productos puede tener un sistema de diseño. Una startup puede tener uno, como una gran corporación , un gobierno o incluso una comunidad . En otras palabras, es una documentación completa, que incluye:

  • Principios: ¿Cuáles son los conceptos principales que influirán en las decisiones de diseño del producto? ¿Qué valores debe transmitir el diseño?
  • Una Guía de Estilo: Colores, tipografía, espaciado, logos, íconos e ilustraciones del producto.
  • Componentes: una lista ordenada de los componentes de la interfaz de usuario (por tipo, por familia, en diseño atómico...), sus estados (desplazamiento, error, deshabilitado...) y sus usos (hacer y no hacer).
  • Buenas prácticas: Los estándares de accesibilidad y/o ecodiseño a respetar, la estrategia de contenidos a adoptar, normas relativas al diseño de atención, etc.
100% de posibilidades de que el hombre esté diciendo la verdad.

El sistema de diseño puede tomar una forma más o menos compleja dependiendo de las necesidades de la empresa, desde el más simple (UI Kit & Style Guide) hasta el más complejo . Cuando se implementa y es funcional, un sistema de diseño permitirá a la empresa:

  • Reduzca drásticamente el esfuerzo y el tiempo de producción de interfaz de usuario y front-end,
  • Aliviar la presión sobre la interfaz de usuario para centrarse en problemas más grandes y complejos,
  • Armonizar el diseño de los productos de la empresa a través de un lenguaje coherente e identificable por los usuarios,
  • Alinear los equipos de desarrollo y producto en torno a una visión común,
  • Asistir en la incorporación de nuevos diseñadores al equipo.

En 2015, cuando quise crear mi primer sistema de diseño, uno de los primeros errores que cometí fue crearlo solo. Era la mejor forma de hacer inútil mi trabajo. Luego me agoté tratando de convencer a los desarrolladores de los méritos del enfoque al imponerles mi visión de las cosas a pesar de mí mismo.
Mala idea.

Un sistema de diseño es un puente entre diseñadores y desarrolladores. Si sólo es construida por uno u otro, entonces pierde su carácter vinculante y se convierte en una documentación impuesta, incomprendida y difícil de adoptar. Por eso es crucial co-construirlo con los desarrolladores para garantizar su adopción.
Es una historia de equilibrio.

Ilustraciones de Adrien Coquet

Imaginemos que estamos en un pequeño equipo de producto clásico (1 PM, 1 Diseñador, 3-4 Devs) , entonces tendríamos que iniciar el proyecto y llevarlo a cabo en pareja con el Lead Developer . Las ventajas de este dúo son que pensamos con el enfoque técnico y de diseño desde el principio. Además, al incluir un líder técnico, involucramos por extensión a todo el equipo de desarrollo en el proceso.

Hablando de fundamentos, es ahora que la pareja puede ponerse de acuerdo sobre la base, es decir:

  • Una arquitectura: dependiendo del stack técnico utilizado (React, VueJS…), es necesario determinar cuál es la arquitectura de componentes más lógica a utilizar. ¿Será por familia, por uso o por atómica? No existe una solución universal, pero solo hay una buena solución: comprender cómo funcionan las tecnologías front-end para alinear la organización del sistema de diseño y la lógica del código.
  • Principios de diseño: es también con los desarrolladores que definimos qué valores estructurarán el resto de la colaboración. En caso de conflicto sobre un componente, o una diferencia sobre la priorización, ¿qué principios arbitrarán la discusión?
  • Una convención de nomenclatura: es esencial alinear a todos en la nomenclatura de los elementos porque aquí es donde comienza la creación del lenguaje de diseño/desarrollo. ¿Se nombrarán los componentes en camelCase, PascalCase o kebab-case (sí, es algo real ) ? ¿Cómo se llama un componente (por ejemplo: familia-padre-hijo…) y de una variable compuesta?
  • Herramientas: sobre la base de todo esto, un pequeño benchmark del sistema existente es esencial para definir cuál será la mejor herramienta para abordar su contexto. Por ejemplo, he trabajado mucho con las pilas ReactJS/NodeJS, por lo que la combinación perfecta para nosotros ha sido durante mucho tiempo FigmaZeroheightStorybook .
    Pero hay muchas herramientas que encontrarás en mis recursos .

Trampa #2: "¡No tenemos tiempo!"

En 2017, cuando quise crear mi segundo sistema de diseño, lo creé con los desarrolladores. La colaboración fue excelente, pero tuvimos muy poco tiempo y recursos para construirla. Como ya había un producto existente, quisimos apurar todo a la vez, pero eso nos agotó y luego tuvimos muchos problemas para mantener el sistema de diseño actualizado…
Mala idea.

Un sistema de diseño es un producto por derecho propio y, como cualquier producto, tiene su propia hoja de ruta. Es decir, una vez realizado el encuadre anterior con el equipo técnico, es absolutamente necesario incluir al responsable de producto. El objetivo en esta etapa es minimizar el riesgo de cuellos de botella y ahorrar tiempo rápidamente en la implementación del sistema de diseño:

  • Dividiendo el proyecto en iteraciones. El desglose dependerá mucho de cómo priorices los temas. Para ello, cada equipo de producto tiene su receta. Sin embargo, sigue siendo interesante preguntarse si es mejor para usted dividir por componente, por página, por ruta. ¿O hacerlo de acuerdo con las necesidades de la hoja de ruta del producto?
  • Mediante la automatización de cambios. Algunas herramientas como Zeroheight ofrecen “ tokens de diseño ”, es decir, claves que los desarrolladores pueden usar para vincular automáticamente el código base y el sistema de diseño. También puede configurar el control de versiones de su sistema de diseño para evitar conflictos de fusión, especialmente si trabaja con varios diseñadores, con herramientas como Abstract , Kactus o este complemento de Github .
  • Cuanto más avanzan las iteraciones, menos componentes hay que fabricar.

En 2020, cuando quise crear mi tercer sistema de diseño, lo creé con los desarrolladores y por iteración. Todo iba muy bien pero rápidamente se me hizo muy complicado modificar/quitar componentes, porque a medida que se desarrollaba, el sistema de diseño se volvía tan rígido que al mínimo cambio se trababa…
Mala idea.

Un sistema de diseño es un documento vivo y en evolución. Verlo como una ley escrita en piedra es olvidar que en el mundo del trabajo, las marcas, las organizaciones y los contextos están en constante evolución. Para ser incluido en este mundo cambiante, el sistema de diseño debe ser capaz de adaptarse:

  • Permitiéndote fallar. Si un componente responde a un problema en un momento dado, eso no significa que siempre responderá a él. Probablemente sea lo más difícil de aprender, pero permitirte fallar es permitirte aprender.
  • Creando procesos simples y flexibles. Solo debe haber desarrolladores, diseñadores y gerentes de producto involucrados. Una idea sería hacer una prueba beta de ciertos componentes durante las pruebas de usuario, otra sería manejar los cambios de componentes como correcciones de errores. Es importante experimentar con los métodos antes de decidir cuál se adapta mejor a usted.

Si te ha gustado este artículo, no dudes en darle pulgar arriba y compartir este contenido

Yeita

Para ir más lejos…

Todos los recursos a continuación son gratuitos y se pueden compartir, date un gusto ♥️

© Copyright 2021 - 2022 | unogogo.com | All Rights Reserved