Sistemas de diseño: Hacer que el diseño y el código sean reutilizables, escalables y coherentes

El diseño atómico es útil para definir los componentes, pero sólo es una forma de describir los elementos de un sistema de diseño.

Los sistemas de diseño permiten a los equipos diseñar y desarrollar mejores productos digitales con mayor rapidez. ¿Por qué? Porque la reutilización de estilos bien definidos aplicados a componentes y patrones proporciona escalabilidad y coherencia. Sin embargo, el principal valor de un sistema de diseño es el apoyo al trabajo en equipo y la difusión de los valores y principios de la empresa en todo el equipo, lo que también se traduce en claros beneficios para el usuario.

Los sistemas de diseño permiten a los equipos diseñar y desarrollar mejores productos digitales con mayor rapidez. ¿Por qué? Porque la reutilización de estilos bien definidos aplicados a componentes y patrones proporciona escalabilidad y coherencia. Sin embargo, el principal valor de un sistema de diseño es el apoyo al trabajo en equipo y la difusión de los valores y principios de la empresa en todo el equipo, lo que también se traduce en claros beneficios para el usuario.

Un problema común en el diseño

Si trabajas en o con el diseño UX, con desarrolladores y diseñadores en uno o varios equipos, probablemente te hayas encontrado con el siguiente problema:

Los diseñadores y desarrolladores dedican una cantidad de tiempo notable a encontrar los estándares para un simple elemento de un producto digital, como un botón. Las preguntas más comunes son:

  • ¿De qué color es exactamente el botón?
  • ¿Qué tamaño debe tener el texto si el botón se va a utilizar en una pantalla de escritorio y qué tamaño si se va a utilizar en una tableta o dispositivo móvil?
  • ¿Cuál es el espacio entre el texto y el contenedor?

Los diseñadores y desarrolladores se hacen estas preguntas cuando crean sus productos digitales y pierden tiempo buscando el estilo de un elemento o componente. Naturalmente, buscan normas. Esto puede acumularse fácilmente cuando se buscan componentes y patrones más complejos. Esto puede provocar frustraciones en el equipo, incoherencias y retrasos en el diseño y el desarrollo. El resultado: un producto digital que resulta frustrante para el usuario, por no hablar del coste que supone para la empresa u organización que produce el producto esta pérdida de tiempo.

¿Qué es un sistema de diseño?

O dicho de otro modo: ¿qué NO es un sistema de diseño? Desde luego, no es un software; no es una aplicación que se pueda instalar, y no es un proyecto con un principio y un final. ¿Y qué es?

Describámoslo como la forma en que diseñadores y desarrolladores trabajan juntos con una visión compartida, principios claros y valores sólidos. Trabajar con un sistema de diseño aporta beneficios tangibles a las empresas y organizaciones y, por tanto, a todos sus usuarios, ya sean clientes, ciudadanos o empleados.

Se trata de un proyecto continuo que permite a las empresas y organizaciones innovar y desarrollar sus productos digitales.

Un sistema de diseño comprende una colección de componentes y patrones estandarizados y reutilizables, guiados por un lenguaje visual claro. Llamemos a este lenguaje visual guía de estilo. Estos componentes y patrones pueden unirse para crear cualquier número de sitios web y aplicaciones.

Cada elemento, componente y patrón se diseña y crea una vez, el código coincide con el diseño, y juntos representan la personalidad de la marca del producto. Una aplicación o un sitio web optimizados y coherentes aportan claras ventajas a los usuarios, como un aprendizaje rápido, una mayor productividad y menos errores de uso.

Elementos clave de un sistema de diseño

Elementos clave de un sistema de diseño
Elementos clave de un sistema de diseño – Fuente: The State of UX Report 2020

Otras cuestiones relevantes en un sistema de diseño son: 

  • Principios de diseño
  • Lenguaje visual
  • Normas y especificaciones
  • Contenido: Edición y tono
  • Convenciones de nomenclatura y estructura de archivos
  • Pila tecnológica
  • Kit de herramientas, activos y plantillas
  • Normas y convenciones de accesibilidad
  • Gobernanza y metodología

Un diseñador = una solución

Mientras que el desarrollo va por delante en la invención de formas de reutilización de componentes, el diseño lucha por escalar las aplicaciones que soporta, ¿por qué? Porque las aplicaciones a medida suelen estar diseñadas para cada solución específica. Los diseñadores están muy interesados en resolver problemas y tienden a desarrollar soluciones específicas. Esta es una buena calidad, no me malinterpreten, yo mismo soy un diseñador.

Se vuelve problemático cuando estas soluciones específicas se vuelven más extensas, se aplican a múltiples productos o a múltiples equipos. Entonces surgen problemas de escalado, como incoherencias que ralentizan el proceso de diseño y desarrollo y se vuelven difíciles de mantener con el tiempo.

Si hay más de un diseñador en su empresa, puede empezar a crear un sistema de diseño ahora. Incluso si sólo hay un diseñador, éste puede empezar a construir un sistema de diseño. Esto significa que puede aplicar una mentalidad o filosofía de sistema de diseño, un enfoque específico en la estructuración de su diseño y organización.

Filosofía del sistema de diseño

Una forma de cambiar la estructura del diseño y permitir la reutilización de componentes es hacerlo escalable aplicando la filosofía de diseño atómico en la que se basan los sistemas de diseño.

El diseño atómico utiliza una analogía práctica de la química:

La analogía atómica desglosaría el diseño en sus elementos individuales que siguen siendo funcionales, como un botón.

Luego se pueden combinar estos átomos en grupos más pequeños que funcionan juntos, estos se llaman moléculas. Piensa en un campo de entrada.

Los organismos son un poco más complejos y combinan moléculas y/o átomos; un ejemplo podría ser una cabecera.

Luego hay plantillas y páginas que están fuera de la analogía pero que siguen siendo utilizadas por Atomic Design

Estructura atómica ilustrada de forma sencilla según Brad Frost:

Diseño atómico de la ilustración según Brad Frost
Ilustración de diseño atómico – Quelle: http://atomicdesign.bradfrost.com/chapter-2/

El diseño atómico es útil para definir los componentes, pero sólo es una forma de describir los elementos de un sistema de diseño. No es necesario utilizar la misma terminología ni la misma denominación exacta para los elementos y componentes, pero es importante utilizar el mismo principio y entender cómo funciona. También puedes utilizar bloques de construcción reutilizables u otra analogía como los ladrillos de Lego.

Resumen sobre los sistemas de diseño

Los principales beneficios y valores del uso de sistemas de diseño en la creación de productos digitales son

  • Reutilización de estilos bien definidos en elementos, componentes y patrones que proporcionan escalabilidad y coherencia a los productos digitales.
  • Mejorar la coherencia = mejorar la calidad de la interfaz de usuario = mejorar la usabilidad del producto digital
  • Promover una visión compartida dentro del equipo
  • Hacer que el proceso de diseño y desarrollo sea más centrado y eficiente
  • Definir y documentar un vocabulario común, un lenguaje visual, para proporcionar una orientación clara y reconocible que sea fácil de usar
  • Ahorrar tiempo en la búsqueda de componentes y especificaciones para su uso
  • Los usuarios reciben un producto digital bien diseñado y optimizado que mejora la capacidad de aprendizaje, la percepción de la marca y la reducción de errores.

 

Autor: Laura Chavarria

Keen Design ist eine reine UX Agentur und bietet seit 2003 maßgeschneiderte UX Lösungen auf großen Projekten, u.a. für das Redesign der Online-Steuererklärung in den Niederlanden. Wir bieten Unternehmen UX Services, mit denen Innovation ermöglicht, Digitalisierung vorangetrieben und User Journeys hochwertig erlebbar werden. Damit sind wir Vorreiter bei den spezialisierten UX Lösungen. Keen Design hat UX-Design-Spezialisierungen in verschiedenen Branchen entwickelt und dedizierte Geschäftseinheiten für den Finanzsektor, Software, den öffentlichen Sektor und das Gesundheitswesen eingerichtet. Weitere Informationen unter www.keen.design

Los comentarios están cerrados.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More