Design System

Vicens vives Redesign

UX/UI DESIGN

Desing System construido y diseñado desde cero para la unificación y creación de un lenguaje de diseño común entre todos los squads de digital.

El problema

Vicens Vives carecía de un Design System robusto y consistente. Los diferentes squads acostumbraban a crear sus propios componentes, módulos y colores. Esto generaba un largo listado de componentes inconexos entre si.

  Por lo que se encontraban problemas como:

  • Listados interminables de códigos de color.
  • Duplicación de componentes comunes.
  • Inconsistencias en diferentes pantallas en un mismo flow.
  • Equipos aislados que trabajan con comunicación inconexa.

No design system = experiencia de usuario desconectada

Foundations

Los foundations son los elementos visuales necesarios para crear experiencias de usuario. Los foundations de Vicens Vives están compuestos por sistemas de color, escalas tipográficas, iconografía, sistemas de cuadrícula y escalas de espaciado.

Components

Se ha creado una librería de componentes para agilizar y facilitar tanto el desarrollo como el diseño de la interfaz del usuario. De esta forma, todos los miembros del equipo tienen a su disposición una librería con todos los componentes disponibles.

Junto al equipo de frontend se definieron las clases de los componentes para así unificar el lenguaje entre diseño y desarrollo.

En cada uno de los componentes y siempre que sea preciso, se utiliza la función Variants que permite obtener de un mismo componente diferentes casos de uso, permitiendo así una agilidad a la hora de preparar un diseño. Además de un uso del auto-layout que permita estructurar componentes de forma que puedan crecer automáticamente, haciendo que el contenedor se adapte al tamaño de su contenido

Documentación

La documentación es una de las partes más importantes para una correcta implementación. El uso de esta es muy importante en la comunicación entre product designers y los developers para mantener la sostenibilidad del sistema de diseño.

Se creó un espacio en Confluence, asegurando de qué se incluyera nuestros principios de diseño, guías, estándares de accesibilidad y mejores prácticas para el diseño y casos de uso.

Aplicación visual

A.RAMON97@HOTMAIL.COM