Style Tile ‐ UX UI - JuanHerreraP/Proyecto-MISO-Solventa-Grupo-11 GitHub Wiki
2. Avances del prototipo versión web/móvil
Decisiones de diseño visual - Solventa
Propósito
Se definió una guía visual inicial para las experiencias Web y Mobile de Solventa. El objetivo es mantener una identidad coherente entre ambos canales, sin definir todavía pantallas finales ni flujos completos.
Color
Se utiliza una paleta sobria y confiable, alineada con un producto de seguros y servicios financieros. Los tonos principales transmiten seguridad y claridad, mientras que los colores de estado ayudan a comunicar acciones exitosas, alertas o errores de forma inmediata.
Tipografía
Se seleccionó Plus Jakarta Sans para títulos, cifras y textos de mayor jerarquía. Su estilo permite dar una apariencia moderna y estructurada.
Se seleccionó DM Sans para descripciones, mensajes de ayuda y contenido de lectura. Su uso mejora la legibilidad en textos más largos.
La combinación permite diferenciar claramente los títulos del contenido informativo sin perder coherencia visual.
Iconografía
Se utilizarán Google Material Symbols tanto en Web como en Android. Esto permite mantener iconos reconocibles, consistentes y fáciles de implementar en ambas plataformas.
Los iconos acompañan las acciones principales, como consultar información, navegar, reportar un siniestro, recibir alertas o acceder a configuraciones.
Tarjetas y superficies
Las tarjetas agrupan información relacionada y ayudan a presentar contenidos complejos de forma más clara. Se usan bordes suaves, espacios internos amplios y jerarquía visual para facilitar la lectura de pólizas, cotizaciones, alertas y solicitudes.
Botones y campos
Los botones principales se reservan para acciones importantes, como continuar, enviar información o reportar un siniestro. Las acciones secundarias tienen menor peso visual.
Los campos de formulario priorizan etiquetas claras, mensajes de ayuda y estados visibles de error o éxito. Esto busca reducir dudas durante procesos sensibles, como cotización, pagos o carga de evidencias.
Alertas y notificaciones
Las alertas permiten comunicar al usuario información importante sobre sus pólizas, pagos, siniestros o procesos pendientes. Cada tipo de mensaje utiliza un color y un icono coherente con su nivel de importancia.
Web y Mobile
La experiencia Web está pensada para consultar y gestionar información más extensa, incluyendo cotizaciones, pólizas y operación asistida.
La experiencia Mobile prioriza acciones rápidas y frecuentes, como consultar una póliza, reportar un siniestro, adjuntar evidencia o pedir ayuda. También considera el acceso a información con conectividad limitada.
Nota
Este style tile define una dirección visual inicial para Solventa. No representa la interfaz final del producto; los componentes, contenidos y flujos podrán ajustarse con la validación de usuarios, el alcance funcional y las decisiones de implementación.