Comprender los sistemas y patrones de diseño
Publicado: 2022-03-11Si bien puede parecer una nueva forma de abordar el flujo de trabajo digital, el concepto de un sistema de diseño no es "nuevo" para las industrias creativas. En el centro de cualquier sistema de diseño se encuentra un lenguaje de patrones de diseño que resuelven problemas comunes que un diseñador podría enfrentar.
La idea de un lenguaje de patrones se originó en la arquitectura y el diseño urbano hace más de 40 años y se puede aplicar a casi cualquier disciplina de diseño.
Los sistemas de diseño como Material Design son un tema de moda, sin embargo, un enfoque sistemático del diseño ha sido parte integral de los editores de revistas durante décadas. Al hojear las páginas de cualquier revista importante, es fácil ver que cada sección está definida de manera única como una plantilla con diseño, fuentes, colores, etc. comunes.
Los patrones de diseño utilizados para las secciones de la página permiten que el texto y las imágenes se organicen de manera uniforme y eficiente de una manera que complemente la visión creativa de una publicación.
Al mirar las revistas de la competencia, es fácil ver cómo se compara el lenguaje de diseño de una con la otra.
Si aún no lo han hecho, los diseñadores de numerosas industrias pronto incorporarán un lenguaje de diseño y plantillas en su flujo de trabajo. Para los diseñadores de productos digitales, este tema está evolucionando y muchos están aprendiendo a diseñar a partir de bibliotecas de patrones dentro de sistemas complejos por primera vez (o incluso ayudan a definirlos).
Existe una complejidad adicional cuando se alinean los patrones de diseño de software con una base de código frontal, lo que puede hacer que aprender un lenguaje de diseño se sienta abrumador.
Los lenguajes de diseño son holísticos
Un lenguaje de diseño, como cualquier lenguaje, es complejo y contiene matices que pueden parecer confusos de aprender al principio. Por eso es útil pensar en un lenguaje de diseño como un sistema complejo “compuesto por muchos componentes que pueden interactuar entre sí”.
Para comprender un sistema complejo, es importante pensar en el lenguaje de diseño de manera integral :
- Comience con una vista panorámica de cómo el diseño impacta una marca o negocio.
- Luego, contempla el rol del diseño con equipos multifuncionales y otros diseñadores.
- Finalmente, considere cómo el diseño afecta el producto y los usuarios en un momento particular.
Esta perspectiva holística enfatiza una forma sistemática de pensar sobre los flujos de trabajo de diseño y permite aplicar fácilmente un lenguaje de diseño al resolver problemas específicos.
En la práctica, un lenguaje de diseño es un recurso que se utiliza para ayudar a reducir la redundancia y mejorar la continuidad en la forma en que los diseñadores abordan problemas comunes de diseño. Por ejemplo, un problema común al que se enfrentan los diseñadores de productos es: "Necesito hacer una llamada a la acción para que los usuarios hagan clic".
Esto es algo que se ha resuelto antes, por lo que en lugar de reinventar la rueda (o el botón), el lenguaje de diseño definiría un "patrón de diseño" de botón reutilizable con propiedades preestablecidas, como el color y la forma, junto con pautas para las mejores prácticas.
Un lenguaje de diseño de productos digitales suele ser un recurso multifuncional con el objetivo de mejorar la eficiencia del flujo de trabajo y la colaboración de los equipos.
En algunos casos, el lenguaje se extiende a una biblioteca de patrones en vivo que está conectada directamente al código base de front-end y al análisis métrico de patrones. Este tipo de sistema complejo con varias dependencias hace que sea muy necesario un enfoque holístico para la resolución de problemas.
Lo increíble de aprender un lenguaje de diseño es que los compañeros de equipo suelen ser bastante apasionados por la interfaz y las interacciones que se utilizan para definir un producto. Aprender un nuevo idioma es generalmente un desafío, ¡pero también puede ser una experiencia inmersiva que une a un equipo!
Preguntas comunes sobre el pensamiento sistémico de "diseño"
La fluidez con un lenguaje de diseño garantizará la calidad del sistema a través del evangelismo, que puede incluir:
- Formación de nuevos diseñadores;
- Tutoría de empleados subalternos y gestión de contratistas; o
- Trabajar directamente con ingenieros para refinar el front-end del producto antes de su lanzamiento.
A través de estos esfuerzos de colaboración, un diseñador podrá garantizar que las pautas para el sistema se mantengan o perfeccionen según las necesidades.
Cualquiera que sea el deber, hay un par de preguntas comunes sobre los sistemas de diseño por las que se puede responsabilizar a un diseñador:
¿En qué debo pensar al diseñar dentro de un sistema de diseño?
Dependiendo de la complejidad del sistema de diseño, es importante comenzar por adoptar un enfoque integral del problema que se está resolviendo. Considere el ejemplo del botón de antes.
Si el color está predeterminado para ser #1f9efc y un diseñador lo convierte en #1b3e9b sin consultar primero a otros diseñadores que usan la misma biblioteca de patrones, esto podría causar un error del sistema.
Cuando trabaje dentro de un sistema de diseño, piense en cómo el problema que se está resolviendo afectará todo el ciclo de desarrollo del producto. En muchos casos, no habrá, ni debería haber, mucho impacto porque la biblioteca de patrones ya ha sido validada.
Si un problema que se está resolviendo es nuevo para el sistema de diseño, podría haber una oportunidad de evolucionar la biblioteca de patrones y ayudar a definir un nuevo patrón de diseño.
Cuando el sistema está evolucionando, es nuevo para el flujo de trabajo de un equipo. Aquí, se necesita flexibilidad porque los patrones de diseño se repetirán con el tiempo. Sin embargo, si bien es fácil cambiar el color de un botón, en todo momento se debe considerar la mayor complejidad del sistema.
Para esto, es útil definir una taxonomía para organizar el sistema de diseño y la biblioteca de patrones. La terminología utilizada debe ser fácilmente comprensible de forma transversal.
Haga clic para ver la imagen a tamaño completo.
Al agrupar los artefactos de diseño en temas comúnmente entendidos, la biblioteca de patrones permite que el sistema opere en los flujos de trabajo del equipo y desarrolle la comunicación en la forma en que se habla de los patrones de diseño.
¿Cómo sé cuándo necesito romper un patrón o crear un nuevo patrón dentro de un sistema de diseño?
La necesidad de romper o crear un nuevo patrón de diseño generalmente depende de la madurez del sistema. Cuando un sistema de diseño está evolucionando, los patrones cambian con frecuencia. A medida que se establece el sistema, debe existir un proceso de solicitud de cambio para ayudar a garantizar la continuidad y la calidad.
También es importante considerar la complejidad de un sistema. Si cambiar un patrón afecta a otros diseñadores y equipos, el proceso puede tardar más en implementarse y, a menudo, requiere un mayor nivel de esfuerzo o recursos (por ejemplo, actualizar las pautas del lenguaje de diseño, las bibliotecas de patrones o la base de código de front-end).
En general, una biblioteca de patrones no debe ser rígida. Piense en ello como una caja de herramientas que puede resolver problemas y completar tareas. Si todos los intentos de diseñar dentro de los límites de la biblioteca de patrones no logran los objetivos del proyecto, la intuición puede conducir a la búsqueda de una nueva herramienta, o tal vez a un cambio en el patrón existente.
Eche un vistazo al diagrama a continuación. Una regla general es que la identidad y los elementos , que son los componentes básicos de la marca, rara vez cambian porque ayudan a definir la marca y los artefactos de diseño.
La mayoría de las grandes organizaciones tienen guías de estilo separadas para elementos relacionados con la marca, especialmente logotipos, colores y fuentes, que no cambian con frecuencia. Para elementos como los botones, esto puede iterarse o no según la evolución del lenguaje de diseño, pero estos también tienen cambios menos frecuentes debido a su conexión con todos los aspectos del producto.
Los cambios en los patrones de diseño o los nuevos patrones a menudo surgen en el nivel de componentes e interacciones porque estos definen los flujos de usuario y los conjuntos de funciones. Es común que los nuevos flujos de usuarios se definan en una hoja de ruta del producto, especialmente cuando se implementan funciones.
Los nuevos patrones de diseño tendrán propiedades similares a los patrones ya definidos en la biblioteca (como fuentes y colores), pero pueden requerir actualizaciones de la interfaz o estados interactivos que se suman al lenguaje de diseño.
El gerente de producto o el propietario del producto que trabaja con un diseñador proporcionarán los requisitos para las nuevas funciones que se alinean con los objetivos comerciales. Cuando decida romper o crear un nuevo patrón de diseño, recuerde la teoría de los sistemas complejos y asegúrese de que la solución sea una decisión compartida.
Aquí hay algunos pasos a considerar al pensar en cómo romper o cambiar un patrón de diseño:
Garantice el control de calidad y la continuidad
Recuerde que la calidad es un objetivo de producto compartido. Todos son responsables de garantizar que el sistema de diseño esté haciendo su trabajo.
Siempre adopte ese enfoque holístico y piense en el impacto potencial de romper un patrón o crear un nuevo patrón.
Pregúntese:
- ¿Romper un patrón es la única forma de resolver mi problema?
- ¿Cómo se verían afectados otros equipos si rompo este patrón?
- ¿Qué pasaría con la biblioteca de patrones si rompo este patrón?
Comunicarse con los colaboradores
Hable con los diseñadores y los miembros del equipo multifuncional para ver si alguien más tiene las mismas restricciones. Aprenda todo sobre los requisitos de la plataforma y cómo funcionaría un patrón propuesto en toda la familia de productos.
Pregúntese:
- ¿Quién más ha trabajado en este producto o plataforma?
- ¿Cuáles son las mejores prácticas de la plataforma para la que estoy diseñando?
- ¿Con quién puedo hablar que pueda ayudarme con mi decisión y recomendaciones?
Comprender las capacidades de front-end
Aprenda lo que es posible para la implementación front-end. Si el cambio es simplemente una actualización de las propiedades de HTML/CSS/JavaScript, por lo general no es necesario romper un patrón o crear algo completamente nuevo.
Más bien, podría ser una simple actualización de la guía del lenguaje de diseño. Como diseñador, es importante trabajar de cerca con el front-end y potencialmente encontrar formas de colaborar semanal o diariamente.
Pregúntese:
- ¿Se ha conectado al equipo de front-end con esta actualización de diseño?
- ¿El cambio que estoy considerando es una actualización de front-end?
- ¿Hay algo que falta en las pautas de mejores prácticas?
Validar la decisión
Si se determina que se necesita un nuevo patrón, la decisión debe validarse con los colaboradores y usuarios finales y alinearse con los objetivos comerciales.
Si los componentes front-end están vinculados a métricas, una prueba A/B rápida ayudará con la validación. Si no, la realización de pruebas de usabilidad funcionará muy bien.
Pregúntese:
- ¿Nuestro equipo tiene un proceso de solicitud de cambios para validar nuevos patrones de diseño?
- ¿Qué debo hacer para validar mi decisión?
- ¿Esta decisión crea un nuevo flujo de usuarios o es una función adicional?
Mismo trabajo, diferente mentalidad
Cuando se diseña dentro de un sistema, es crucial que los diseñadores de productos adopten la mentalidad global que se requiere para la toma de decisiones. Los principios de un sistema complejo y el pensamiento sistémico ayudarán a los diseñadores a medida que crecen en sus carreras. Lo mismo es cierto para el proceso de construcción a partir de una biblioteca de patrones.
Estos enfoques son útiles para comenzar un nuevo lenguaje de diseño o contribuir a uno existente porque una vez que se establece la mentalidad, los métodos sistemáticos se vuelven, bueno, "sistemáticos".
Saber que otras industrias y disciplinas de diseño han utilizado métodos similares para optimizar los flujos de trabajo durante muchos años brinda a los diseñadores de productos un excelente punto de referencia para las mejores prácticas.
Al final del día, diseñar dentro de un sistema no transformará por completo la forma en que se realiza el trabajo. Claro, habrá algunas herramientas nuevas para conectar y administrar complejidades, pero en última instancia, es un cambio a una mentalidad holística que realmente ayudará a mejorar los flujos de trabajo.
• • •
Lectura adicional en el blog de diseño de Toptal:
- Cómo crear una guía de estilo de boceto, una biblioteca y un kit de interfaz de usuario
- Enunciados de problemas de diseño: qué son y cómo enmarcarlos
- Usa tu inspiración: una guía para los tableros de humor
- Diseño colaborativo: una guía para el diseño exitoso de productos empresariales
- Diseñe el futuro: las herramientas y los productos que nos esperan