MIO WEB
Mio Web se mueve rápido. Los requerimientos pueden ajustarse y hay poco margen para la inconsistencia. Sin una estructura sólida, entregar interfaces de alta calidad a ese ritmo se vuelve riesgoso. Como líder frontend, construí el sistema de diseño para darle al proyecto una base firme bajo presión y agilizar la creación de nuevas vistas sin perder coherencia.
Dashboard: El corazón de los datos.
Aplicando el sistema de diseño, creamos un panel de métricas críticas. Tarjetas modulares y gráficos simples que permiten al paciente ver su progreso histórico, reduciendo la carga cognitiva y facilitando decisiones de salud.
Layout y Sistema de Grillas.
Definimos una estructura sólida para vistas complejas, como la autenticación. Separar la pantalla en áreas lógicas (una columna de branding oscura y una de acción clara con gradientes) asegura que el usuario no se pierda al iniciar sesión o completar su perfil médico.
Fundamentos: Tipografía y Color.
La base visual de MIO. Plus Jakarta Sans aporta carácter y legibilidad en los títulos (Display y Heading), mientras que Inter actúa como la columna vertebral para la lectura de datos médicos complejos. La paleta, centrada en tonos violetas vibrantes contrastados con fondos oscuros, define jerarquías claras sin ser abrumadora.
Métricas y Tarjetas Modulares.
Desglosamos la información clínica en componentes independientes y visuales. El diseño atómico permite componer distintas vistas del dashboard sin repetir lógica ni estilos, garantizando jerarquía clara para métricas vitales, gráficos de evolución y títulos de sección en toda la plataforma.
Construido para el trabajo real.
Me enfoqué en los componentes que realmente íbamos a reutilizar. Las variaciones en botones y estados fueron intencionales y limitadas para evitar la sobrecarga de opciones. Las convenciones de nombres se mantuvieron simples y predecibles para que cualquier desarrollador pudiera usarlas sin fricción.
Diseñado para ser compartido.
En un entorno dinámico, el valor del sistema se volvió obvio. Redujo el tiempo de diseño, mejoró la consistencia y facilitó el desarrollo de nuevas secciones. En lugar de repensar decisiones o dudar sobre qué variante usar, el sistema creó una línea base compartida que mantuvo a toda la interfaz alineada.