Tu empresa necesita un Sistema de diseño y no lo sabes

Guía rápida para empezar a crear un “Design System” desde cero a nivel de concepto, diseño UX y desarrollo web.

Qué es un “Sistema de diseño” o “Design System”

Un «Sistema de diseño» o «Design System» es un conjunto de reglas, estilos y principios que guían la creación de una experiencia de usuario consistente y eficiente en una empresa o organización. Es importante tener en cuenta que un sistema de diseño no solo se refiere al diseño visual, sino también al diseño de la interfaz de usuario y la navegación.

El objetivo es garantizar que todos los productos y servicios de una organización se vean y funcionen de manera consistente, mejorando la experiencia del usuario y la eficiencia del desarrollo.

Ventajas de uso e implantación

• Consistencia en la experiencia del usuario

• Ahorro de tiempo y dinero: Un sistema de diseño permite ahorrar tiempo y dinero en el desarrollo de productos, ya que se pueden reutilizar componentes y principios de diseño existentes en lugar de crear cosas desde cero cada vez.

• Mejora de la confianza en la marca: Una experiencia de usuario consistente ayuda a mejorar la confianza en la marca, ya que los usuarios saben lo que esperar de los productos y servicios de una empresa.  Además, si una empresa cambia su estrategia de negocio, será necesario actualizar el sistema de diseño para adaptarse a los nuevos objetivos y metas.

• Mejora en la eficiencia del desarrollo: Un sistema de diseño ayuda a los desarrolladores a trabajar de manera más eficiente al proporcionar un marco de trabajo claro y consistente.

Sin embargo, también hay algunos inconvenientes al usar un sistema de diseño dentro del contexto empresarial, como Costo y esfuerzo de implementación y Limitaciones en la creatividad. Estos dos puntos compensan con creces las ventajas descritas anteriormente.

Los pasos previos, primeros pasos, son los más importantes

Si desea contratar a una agencia de diseño o a un departamento de diseño/UX para crear  un sistema de diseño en su empresa, debe asegurarse previamente de lo siguiente:

• Identificar las necesidades: Antes de contratar a una agencia de diseño o un departamento de diseño/UX, debe establecer los objetivos y metas del sistema de diseño y determinar qué áreas de su empresa se verán afectadas por el mismo.

• Asegúrese que la agencia o equipo de diseño que contrate trabaje o trabajase con sistemas de diseño con anterioridad, del contrario es posible que la entrega sea más parecida a una simple guía de estilos, en lugar de una estructura sólida, dinámica y escalable.

• Negociar los términos del contrato. Tanto presupuesto, establecer un calendario de entregas, establecer las responsabilidades de cada parte y establecer las condiciones de pago.

• Supervisar el progreso: A medida que se implementa el sistema de diseño, es importante supervisar el progreso del proyecto y asegurarse de que se cumplan los objetivos y metas establecidos. Es importante mantener una comunicación fluida y constante.

• Evaluar el éxito: Medir el impacto del sistema de diseño en la experiencia del usuario, el rendimiento de la empresa y la eficiencia del desarrollo.

Figma es la herramienta estándar en el 2023

Figma es una herramienta de diseño en línea popular entre los diseñadores y desarrolladores debido a sus características de colaboración en tiempo real. Esto permite a los miembros del equipo trabajar en el mismo archivo al mismo tiempo, lo que acelera el proceso de diseño y desarrollo. También permite a los miembros del equipo dejar comentarios y hacer sugerencias directamente en el diseño, lo que facilita la comunicación y la retroalimentación.

En comparación con otras herramientas como Sketch o Adobe XD, Figma es una herramienta totalmente online, lo que significa que no se requiere descargar una aplicación de escritorio para utilizarla y puede ser accedida desde cualquier dispositivo con una conexión a internet, lo que facilita la colaboración y el acceso desde diferentes lugares.

Alinea expectativas entre los equipos de Negocio, Diseño y Desarrollo

Transversalidad en el diseño de producto

Un “Design System” funciona como una palanca transversal, requiere una estrategia, objetivos y metas alineadas entre los distintos departamentos de una organización.

Por todo ello, una comunicación fluida entre estos departamentos es claves para garantizar un impacto significativo. Es recomendable establecer un equipo interdisciplinario para trabajar en el sistema de diseño, y establecer un plan de trabajo y un calendario de entregas. Es importante asegurar que el sistema de diseño sea revisado y actualizado regularmente para adaptarse a los cambios en la estrategia de negocio y a las necesidades del usuario.

Estrategias de comunicación eficaces para ello

Establecer un equipo de proyecto interdisciplinario

El equipo de proyecto debe incluir representantes de los departamentos de negocio, desarrollo y diseño. Esto ayudará a asegurar que todas las perspectivas estén representadas y que se tomen en cuenta las necesidades de todos los departamentos.

Lenguaje común

Es importante establecer un lenguaje común entre los departamentos. Esto ayudará a asegurar que todos estén hablando el mismo idioma y a evitar malentendidos como:

• Diferencias en el vocabulario: Los miembros de los diferentes departamentos pueden usar términos diferentes para referirse a los mismos conceptos, componentes o funcionalidades, lo que puede causar confusiones y retrasos en el proyecto.

• Diferencias en las expectativas: Los departamentos pueden tener expectativas diferentes en cuanto a cómo deben funcionar los conceptos, componentes o funcionalidades, lo que puede causar problemas en la implementación.

• Falta de alineación entre los objetivos de negocio y los objetivos de diseño: Pueden tener diferentes enfoques en cuanto a cómo deben funcionar los conceptos, componentes o funcionalidades, lo que puede causar problemas en la implementación.

Proceso de trabajo claro

Es importante establecer un proceso de trabajo claro para el desarrollo del sistema de diseño. Esto incluye un calendario, un plan de trabajo y un sistema de seguimiento para asegurar que todos los miembros del equipo estén alineados en cuanto a los objetivos y las expectativas del proyecto.

Fomentar la retroalimentación continua

Es importante fomentar la retroalimentación continua entre los departamentos de negocio, desarrollo y diseño. Esto ayudará a identificar y resolver problemas de manera oportuna y asegurar que el sistema de diseño se está desarrollando de acuerdo con las expectativas.

Utilizar herramientas colaborativas

Utilizar herramientas colaborativas como Figma, Slack, Trello y Jira permiten una mayor comunicación en tiempo real, lo que ayudará a garantizar que los miembros del equipo estén siempre al día en cuanto a los avances del proyecto y puedan colaborar de manera efectiva.

Claves para un buen diseño web

Evolución o adaptación de tu Identidad Corporativa

La identidad corporativa se refiere a la personalidad, el carácter y los valores de una empresa, y se refleja en su diseño y comunicación. Al desarrollar un nuevo sistema de diseño, es importante considerar cómo se relaciona con la identidad corporativa de la empresa la Consistencia visual, Tono de voz, Accesibilidad y la Flexibilidad.

Consistencia visual

El sistema de diseño debe reflejar los elementos visuales clave de la identidad corporativa, como los colores, las tipografías, los iconos y los elementos gráficos. Esto ayudará a garantizar que el sistema de diseño sea reconocible y consistente con la marca de la empresa.

Tono de voz

Esto se refiere al uso de un lenguaje y una tonalidad adecuados para la marca, así como la inclusión de elementos de diseño que reflejen los valores y la personalidad de la empresa.

Accesibilidad

El sistema de diseño debe ser accesible para todos los usuarios, independientemente de sus habilidades físicas o mentales. Esto incluye consideraciones de accesibilidad en el diseño de los componentes y la funcionalidad del sistema de diseño.

Flexibilidad

El sistema de diseño debe ser flexible para adaptarse a las necesidades cambiantes de la empresa y a las tendencias del mercado. Esto incluye la capacidad de escalar y adaptar el sistema de diseño para diferentes plataformas y dispositivos.

Los “Design Tokens”  son los cimientos sólidos de todo “Design System”

Los «Design Tokens» son un conjunto de valores numéricos y de cadena que representan los elementos visuales clave de un sistema de diseño, como el tamaño de la fuente, los colores, las distancias, las sombras, etc. Estos tokens se utilizan para garantizar la coherencia visual y la consistencia en todos los elementos de un sistema de diseño, desde la interfaz de usuario hasta el diseño de la marca.

Aquí puede ver una lista de «Design Tokens» más representativos en un sistema de diseño para los productos web de una empresa:

Colores

• Color principal de la marca
• Colores secundarios de la marca
• Colores de fondo
• Colores de texto
• Colores de iconos
• Colores de botones de acción
• Colores de enlaces

Tipografía

• Familia de fuente principal
• Tamaños de fuente para el título
• Tamaños de fuente para el cuerpo de texto
• Tamaños de fuente para los subtítulos
• Tamaños de fuente para los botones
• Tamaños de fuente para los iconos

Espaciados

• Tamaño de los márgenes
• Tamaño de los paddings
• Tamaño de las líneas
• Tamaño de las sombras

Iconos

• Conjunto de iconos estandarizado
• Tamaño de los iconos

Grid layout (Retícula o rejilla)

• Tamaño de las columnas
• Tamaño de las filas
• Espacio entre las columnas y las filas.

Animaciones

• Velocidad de las transiciones
• Duración de las animaciones

Es importante mencionar que esta lista puede variar dependiendo de las necesidades específicas de una empresa, pero son un ejemplo de los tokens que podrían ser incluidos en un sistema de diseño.

Entregables imprescindibles

Dependiendo si se ha preestablecido una serie de fases de entrega, esta lista puede variar. A continuación, puede ver una propuesta de sobre el material a entregar de mayor a menor relevancia:

Archivos de diseño. Archivos editables, como Sketch, Adobe XD, Figma, etc. que se utilizaron para crear el sistema de diseño.

1. Design Tokens: Un conjunto de valores numéricos y de cadena que representan los elementos visuales clave del sistema de diseño.
2. Documentación técnica: Documentación técnica que describe cómo implementar el sistema de diseño en el código, incluyendo instrucciones para utilizar los Design Tokens y los componentes de diseño.
3. Componentes de diseño: Un conjunto de componentes de diseño pre-construidos, como botones, formularios, grillas, iconos, etc. que se pueden utilizar en el sistema de diseño
4. Ejemplos de uso: Ejemplos de cómo se utilizan los componentes de diseño y las plantillas en diferentes tipos de páginas web.

Otro material opcional, pero de mucho valor:

• Plantillas: Plantillas pre-construidas para diferentes tipos de páginas web, como páginas de inicio, páginas de destino, páginas de productos, etc.
• Pruebas de usuario: Informes de pruebas de usuario que muestran cómo los usuarios interactúan con el sistema de diseño y cualquier retroalimentación que puedan proporcionar.

Del figma al código, ahora toca implementarlo

Análisis de la integración actual del front

Una vez que se ha completado el diseño en Figma, es hora de pasar a la siguiente etapa: la implementación del diseño en código. Esta etapa es crucial para garantizar que el producto final se ajuste a los diseños originales y funcione correctamente en todos los dispositivos y plataformas.

Sin embargo, antes de comenzar la implementación, es importante analizar la integración actual del front-end.

¿Está el equipo de desarrollo actualmente utilizando las mejores prácticas y tecnologías adecuadas? ¿Están los diseños actuales fácilmente traducibles en código? ¿Hay algún problema con la actual arquitectura del front-end que podría causar problemas en la implementación?

Resolver estos problemas antes de comenzar la implementación puede ahorrar tiempo y esfuerzo a largo plazo. Por ejemplo, si se descubre que el equipo de desarrollo no está utilizando las mejores prácticas, puede ser necesario realizar cambios en la arquitectura del front-end antes de comenzar la implementación.

Una vez que se han analizado y resuelto los problemas actuales, es hora de comenzar la implementación del diseño en código. Es importante seguir estrechamente los diseños originales y trabajar en colaboración con el equipo de diseño para garantizar que el producto final se ajuste a los diseños originales y funcione correctamente en todos los dispositivos y plataformas.

Refactorizar y evolucionar la capa de Frontend

A medida que un producto evoluciona, es probable que surjan problemas en la arquitectura del Frontend y en la implementación del diseño.

Refactorizar el Frontend consiste en mejorar y actualizar la estructura, el código y la arquitectura de la capa de Frontend de una aplicación o sitio web. Esto puede incluir reestructurar el código existente para mejorar su legibilidad y mantenibilidad, actualizar las tecnologías y librerías utilizadas para aprovechar las últimas características y mejoras, o cambiar la arquitectura para adaptarse a los cambios en los requisitos del negocio.

Empieza pequeño, piensa en grande

El concepto «Empieza pequeño, piensa en grande» se aplica mediante la creación de una estructura escalable y modular. En lugar de tratar de abarcar todo el sistema de una sola vez, se comienza con un conjunto pequeño de componentes y se va construyendo sobre ellos a medida que se van necesitando más.

La idea es empezar con los componentes básicos y fundamentales, como botones, encabezados, formularios, etc. y construir sobre ellos para crear componentes más complejos. Esto permite ir probando y mejorando los componentes a medida que se van construyendo, lo que ayuda a detectar problemas y a encontrar soluciones a medida que se va avanzando en el proyecto.

La capa de Frontend debería ser agnóstica al tipo de frameworks backend que utilice

La capa de Frontend no debería depender del framework de Backend. Esto es importante porque permite a la empresa tener flexibilidad en su elección del Backend y cambiarlo si es necesario sin afectar a la capa de Frontend. Esto permite a los desarrolladores de Frontend trabajar de manera independiente a los desarrolladores de Backend, lo que mejora la eficiencia del desarrollo y reduce los conflictos de código. (y viceversa)

Siendo muy sintéticos, podríamos decir que las tres patas que sostienen al Frontend son el HTML generado, el CSS aplicado y el JavaScript que interactúa y solicita datos al backend.

Toda arquitectura de un sitio o aplicación web suele tener lo que llamamos un ‘sistema de plantillas’ Este está formado por archivos que contienen el diseño y la estructura básica de una página, como el encabezado, el pie de página y la navegación.

Los desarrolladores web pueden utilizar estas plantillas para crear nuevas páginas rápidamente y de manera consistente, sin tener que crear el diseño y la estructura desde cero cada vez. Un sistema de plantillas también puede incluir variables y componentes reutilizables.

Finalmente, es el navegador quien interpreta el HTML generado por este sistema, visualiza de una manera determinada gracias al CSS y actualiza e interactúa con el usuario gracias al JavaScript. Todo ello permite a los desarrolladores web crear páginas personalizadas utilizando elementos predefinidos dinámicos.

Entonces, ¿qué entregables he de solicitar al equipo de desarrollo para la implantación del sistema de desarrollo?

Archivos clave gestionados generalmente por los frameworks Frontend actuales tipo React, Angular o Vue.

• Archivos HTML: El código HTML que define la estructura y el contenido de las páginas del sistema de diseño.

• Archivos CSS: El código CSS que define la presentación visual de las páginas, incluyendo estilos de texto, colores, imágenes, etc.

• Archivos JS: El código JavaScript que proporciona la interacción y la funcionalidad en las páginas, como la validación de formularios, la navegación, las animaciones, etc.

Documentación y configuración

• Documentación del código: La documentación del código, que explica cómo funciona el código y cómo se debe utilizar.

• Archivos de configuración: archivos de configuración necesarios para el correcto funcionamiento del sistema de diseño, como el archivo de configuración de webpack.

Testing y opcionalmente test de rendimiento

• Archivos de pruebas unitarias: conjunto de pruebas automatizadas que se utilizan para garantizar que el código funciona como se espera.

• Informe de rendimiento: Un informe que detalla el rendimiento del sistema de diseño, incluyendo información sobre el tiempo de carga, la velocidad de respuesta, el uso de memoria y la compatibilidad con diferentes dispositivos y navegadores.

Este artículo está enfocado en aspectos menos técnicos y más divulgativos, lo que significa que se presenta la información de una manera fácil de entender para el público en general. En lugar de profundizar en detalles técnicos, el artículo se centra en explicar los conceptos de manera clara y accesible para todos.