Hipnos Design System
Proyecto Figma open_in_newSistema de diseño para una red social de creadores de contenidos · Desarrollo Android
“Hipnos - un sistema de diseño con carácter único”
Hipnos ha nacido para dar forma a un proyecto con grandes ambiciones. Es un sistema de diseño que combina la robustez necesaria para un proyecto de gran escala con la versatilidad y una identidad visual propia. Inspirado en la mitología griega y en Hipnos, el dios del sueño, este sistema busca atraer la atención de manera natural, sin forzar, generando una experiencia fluida y envolvente.
Su estructura, basada en las reglas de Material 3 Design, integra los componentes esenciales de una interfaz para Android junto con componentes personalizados que aportan un carácter distintivo y refuerzan su personalidad única.
Base nativa
- ✅ Un conjunto de componentes y utilidades nativas de Material 3 como base de la UI.
- ✅ Una experiencia predecible y una curva de aprendizaje rápida para el usuario.
- ✅ Implementación sencilla en el desarrollo.
Estructura modular
- ✅ Evolución independiente de cada componente.
- ✅ Colección de variables de espaciado y tamaños por componente.
- ✅ Sistema de variantes y propiedades para máxima flexibilidad.
Un toque distintivo
- ✅ Valor añadido gracias a los componentes personalizados.
- ✅ Variables de color específicas del proyecto para categorías.
- ✅ Iconografía, ilustraciones y animaciones a medida.
Modos de interfaz: Light & Dark
Hypnos incorpora soporte completo para Light y Dark mode, garantizando accesibilidad, consistencia y una experiencia visual óptima en cualquier contexto de uso. Los colores, tipografías y componentes se adaptan automáticamente al modo seleccionado, manteniendo siempre la identidad visual del sistema.
Grid responsive
El sistema de grid, desarrollado con variables por tamaño de breakpoint a través de modos, permite que la retícula se adapte automáticamente al tamaño de pantalla en el que se está diseñando. De esta forma, se asegura la consistencia y el cumplimiento de los estándares de Material 3 Design.
Variables grid responsive
Sistema de color por categoría
Uno de los retos importantes de este proyecto consistía en que la aplicación Beleaf necesitaba un sistema de distinción clara por categorías a través del color. Dado que los colores nativos de Material 3 se limitan principalmente a variables semánticas de colores base, en este sistema de diseño se desarrolló un sistema complementario de color para categorías.
Partiendo de la semántica de color de Material 3 Design, se definieron 6 paletas adicionales, asignadas a cada categoría. Estas paletas se aplican en los componentes correspondientes, permitiendo que el usuario pueda navegar entre categorías y reconocer de manera inmediata en cuál se encuentra en todo momento.
Ilustraciones y animaciones personalizadas
El objetivo en este punto era dotar a la aplicación de un carácter propio, transmitiendo al usuario diversión y alegría a través de la interfaz. Para lograrlo, se creó una serie de iconografías, ilustraciones y animaciones integradas en el sistema de diseño, cuyo propósito es identificar secciones, categorías y acciones específicas, facilitando al usuario la navegación por la app de una forma más entretenida.
¿Te apetece seguir explorando?
Te animo a descubrir el archivo completo del sistema de diseño, donde se reúnen todos los componentes interactivos, así como las variables y modos. También puedes explorar el proyecto Beleaf, un ejemplo vivo de cómo este design system se adapta a un diseño interactivo.