Problema: Los tiempos de desarrollo y diseño son demasiado largos
Durante la trayectoria de la empresa VT-Lab, se presentó un momento en el que la velocidad de diseño y desarrollo no respondía a las necesidades de la empresa.
Tras un análisis de las causas, tomé la decisión de crear un sistema a medida que garantizara tiempos de diseño y desarrollo más eficientes y adecuados a los objetivos del negocio.
Platform system es un sistema de diseño basado en Figma y Bootstrap, creado de forma colaborativa junto al equipos de desarrollo, Negocio y Diseño, escuchando sus necesidades y problemas.
El sistema está centrado en el usuario y busca establecer un lenguaje visual claro y accesible que facilite la comprensión y el uso de aplicaciones complejas en múltiples dispositivos.
El diseño cromático se fundamenta en una paleta de colores primarios (tonos azules) y secundarios (blancos y grises), complementada con variaciones que permiten aclarar u oscurecer dichos matices.
Los colores primarios se aplican de manera consistente para destacar acciones clave y dirigir la atención hacia las secciones más relevantes de la interfaz.
Color system
El esquema de color se fundamenta en una paleta principal compuesta por nueve colores.
Los tonos azules predominan como colores principales, ya que representan el vínculo de la empresa con la tecnología y la innovación.
Para generar contraste y reforzar la usabilidad, se emplea el color naranja en elementos de advertencia y el rojo en acciones de cancelación.
Tema oscuro y accesibilidad
El diseño de un tema oscuro basado en el contraste asegura una mejor accesibilidad.
Este sistema se implementa reemplazando los colores pastel por gamas de azul y empleando tonos oscuros en lugar de claros, optimizando así la legibilidad y la experiencia visual.
Typograpy system
El sistema tipográfico se basa en el uso exclusivo de la fuente Arial, lo que optimiza el desarrollo y facilita la creación de interfaces consistentes en múltiples dispositivos.
Este enfoque garantiza una alta capacidad de adaptación frente a nuevas tecnologías emergentes.
Además, los tamaños tipográficos se han definido de manera responsiva, ajustándose a las dimensiones de cada pantalla. Se han establecido espaciados específicos tanto para entornos de aplicaciones web, movil y desktop como para algunas tecnologías emergentes, asegurando legibilidad y coherencia visual en cualquier contexto digital.
La iconografía se desarrolla a partir de outline icons priorizando la simplicidad y la claridad visual para garantizar una comprensión rápida e intuitiva.
Los íconos se aplican principalmente en botones específicos, optimizando el uso del espacio y contribuyendo a un diseño ordenado y minimalista.
Sistema de iconografía
Con el fin de asegurar que la iconografía se adapte de manera óptima a distintos entornos, se han desarrollado dos versiones clara y oscura diseñadas sobre una cuadrícula sencilla y funcional.
Tokens de diseño
Con el fin de optimizar el trabajo en Figma, se han definido tokens, variables, elementos primitivos y estilos, garantizando que diseñadores y desarrolladores trabajen bajo un mismo lenguaje visual y construyan interfaces consistentes.
Espaciados, radios y bordes
El espaciado y los bordes se basan en múltiplos de 4, creando un sistema versátil que garantiza proporcionalidad y jerarquía.
El grosor de la línea se ha definido en 1 o 3 píxeles, según corresponda, con el fin de resaltar o atenuar determinados componentes y secciones.
Grid system
Para el desarrollo, se han definido tres tamaños de cuadrícula: uno para dispositivos móviles, basado en una única columna, y dos para tablets y ordenadores de sobremesa, estructurados con 12 columnas.
Este enfoque optimiza la implementación y garantiza una integración eficiente con Bootstrap.
El sistema se sustenta en el uso de modales, los cuales facilitan la creación de flujos lineales, como el proceso de generación de un nuevo proyecto, el cual esta creado y guiado en una modal.
Para su implementación, se diseñó una cuadrícula de 12 columnas especifica para modales que garantiza consistencia y orden en la disposición de los elementos.
Componentes
Se han desarrollado más de 200 componentes para el sistema de diseño, entre los que se incluyen botones, iconos, formularios, divisores, paginadores, logotipos, menús, interruptores, selectores de color, deslizadores, modales y muchos otros elementos.
El proceso inició con el diseño de cada componente en Figma y posteriormente se implementaron en código, utilizando Bootstrap como base de desarrollo.
Documentación
Para que tanto desarrolladores como diseñadores entiendan bien el uso del sistema, se ha elaborado una guía integral para el uso del sistema, en la que se detalla su sistema de gobernanza, así como las principales herramientas a emplear durante el desarrollo.
Adicionalmente, se ha preparado un documento general que expone los fundamentos del sistema y describe el flujo de trabajo desde la perspectiva del equipo de diseño.
El resultado
Se ha desarrollado un sistema de diseño sencillo, eficiente y de fácil implementación, creado específicamente para VT-Platform con el propósito de optimizar la construcción y comprensión de una aplicación de alta complejidad.
Este enfoque ha permitido consolidar una identidad de marca clara, distintiva y fácilmente reconocible frente a la competencia.
Se han reducido los tiempos de diseño y desarrollo un 35%.
Asimismo, el sistema destaca por su practicidad y por ofrecer una curva de aprendizaje ágil, facilitando su adopción tanto por parte de nuevos usuarios como de equipos de desarrollo.
Echa un vistazo a este proyecto de plataforma multi-dispositivo en el que se aplica este sistema de diseño