LogiQ Design System
Proyecto Figma open_in_newSistema de diseño Multi-Brand para una plataforma logística · Desarrollo en Blazor
“LogiQ - un sistema de diseño 100% adaptable a su marca”
LogiQ Design System es una solución integral que permite construir experiencias digitales coherentes, accesibles y visualmente alineadas con la identidad de cualquier marca. Diseñado para ser completamente personalizable, LogiQ se adapta a múltiples productos y marcas dentro de un ecosistema unificado.
Es un sistema de diseño construído con variables por modos para para una tematización adaptable a cada cliente. Incluye un set completo de variables para tipografía, tamaños, espaciados y un sistema de grid responsive. Una solución integral, personalizable y escalable.
Personalización por modos
- ✅ Un simple switch cambia todo el look & feel para el cliente.
- ✅ Estructira fluida y adaptable a cualquier breakpoint.
- ✅ Reduce tiempos y costes de implementación.
Estructura de variables
- ✅ Variables primitivas y semánticas por cliente para una personalización visual total.
- ✅ Escalado responsive de tipografía, espaciado y layout por modo.
- ✅ Integración simple en CSS con consistencia visual garantizada.
Kit de componentes UI
- ✅ Componentes accesibles, usables y 100% responsive.
- ✅ Con estados lógicos e interacción definidos para crear experiencias inclusivas y funcionales.
- ✅ Diseñados para adaptarse a cualquier dispositivo.
Escalable y sostenible
- ✅ Arquitectura modular y eficiente, lista para crecer con cualquier producto.
- ✅ Permite escalar sin duplicar esfuerzos ni aumentar los costes de desarrollo.
- ✅ Facilita el mantenimiento.
Tematización instantánea
El sistema de color se compone de dos colecciones principales:
- Variables primitivas: Colores base fijos y personalizables que sirven como la base cromática del sistema.
- Variables semánticas: Definidas por modo y personalizadas para cada cliente, permiten una tematización coherente y flexible.
Esta arquitectura facilita una doble ventaja:
- Agilidad en demos y pruebas con clientes, permitiendo cambios rápidos de tematización sin esfuerzo técnico.
- Optimización en implementación y mantenimiento, reduciendo significativamente tiempos y costes tanto para clientes actuales como para nuevas integraciones.
Responsive en un clic
Las variables tipográficas, de tamaños y espaciados están definidas de forma escalable y responsiva, permitiendo realizar switches dinámicos entre modos por dispositivo de manera sencilla. Esto permite:
- Diseños verdaderamente responsive, sin necesidad de redefinir estilos para cada breakpoint.
- Consistencia visual en múltiples plataformas, con ajustes automáticos según contexto o dispositivo.
Componentes accesibles
El sistema de diseño de LogiQ cuenta con un kit de componentes muy completo, que incluye todas las variantes de estado lógico e interactivo y animaciones de interacción. Ha sido construido siguiendo las mejores prácticas actuales de diseño y desarrollo. Todos los componentes cumplen con los estándares actuales de usabilidad y accesibilidad, garantizando una experiencia inclusiva para todos los usuarios.
La estructura basada en properties permite personalizar cada componente según el contexto de uso, lo que hace que el proceso de diseño sea mucho más fluido y eficiente.
Las decisiones de diseño se han centrado en crear un kit que funcione perfectamente dentro de una dashboard, independientemente del breakpoint. Gracias al uso de distintos layouts, se puede adaptar cada componente al breakpoint correspondiente. Se ha apostado por formas redondeadas que transmiten cercanía y confianza al usuario.
¿Quieres ver cómo queda implementado?
Te invito a explorar el archivo completo del sistema de diseño, donde encontrarás todos los componentes interactivos, variables y modos de tematización. Además, puedes visitar el proyecto LogiQ para ver cómo el design system cobra vida en un diseño totalmente responsive. Mientras tanto, ¡pasemos al siguiente proyecto!