Diseño del Sistema SIGAE
Documentación del diseño en Figma del sistema interno que gestiona estudiantes en riesgo de deserción y coordina su atención con especialistas.
Documentación de referencia del diseño en Figma del sistema web SIGAE. Cubre las decisiones de diseño aplicadas: lineamientos base adoptados, uso semántico del color, patrones de layout, presentación de información y componentes específicos del proyecto.
Contexto
Este artículo documenta las decisiones de diseño del sistema web SIGAE, el sistema está pensado para apoyar a estudiantes universitarios con riesgo de deserción, conectándolos con especialistas que puedan intervenir según su contexto particular. Para esto, el sistema cubre las siguientes funcionalidades principales:
- Gestión de derivaciones: coordinación de intervenciones entre estudiantes, especialistas y el coordinador responsable del proceso.
- Gestión de sesiones: registro y seguimiento de reuniones entre especialistas y estudiantes donde se abordan las dificultades presentadas.
- Identificación de nivel de riesgo: algoritmo que clasifica el riesgo de deserción de cada estudiante en base a su contexto económico, de salud y educativo.
- Portal por rol: acceso independiente para especialistas y estudiantes, donde cada uno puede dar seguimiento o coordinar derivaciones y sesiones según su rol.
- Supervisión de derivaciones: vista del coordinador para supervisar el estado de todas las derivaciones activas en el sistema.
Este artículo está dirigido al equipo técnico (DTI u otros) que necesite entender la estructura visual del sistema, replicar sus patrones de diseño en nuevos proyectos, o dar continuidad al diseño existente.
Nota: Este documento no describe cómo usar el sistema ni detalla sus flujos operativos paso a paso. Su foco son las decisiones de diseño: qué se eligió, por qué, y bajo qué criterios.
Lineamientos base aplicados
El diseño de este sistema no parte desde cero. Se enmarca dentro de los lineamientos definidos en “Lineamientos de componentes y tecnologías base”, que establece los estándares visuales para los proyectos del equipo. A continuación se describe qué lineamientos se adoptaron directamente, cuáles se adaptaron y por qué.
Tokens institucionales adoptados
Los siguientes tokens se aplicaron tal como están definidos en los lineamientos base, sin modificación:
- Tipografía y escala tipográfica: definidos en Tipografía.
- Paleta de colores: definida en Paleta de colores.
- Espaciados: escala basada en múltiplos de 4 px (
--space-xsa--space-4xl), definida en Espaciado y Grilla.
Bordes y redondeo: criterio Angular Material
Para los radios de esquina de contenedores y componentes no se aplicó la escala de tokens institucionales (--radius-none a --radius-pill), sino los valores por defecto de Angular Material. Esta decisión responde a que el frontend del sistema fue implementado en Angular, y el objetivo fue aprovechar la librería existente en lugar de sobreescribirla. Forzar los tokens institucionales sobre Angular Material habría generado inconsistencias entre el diseño en Figma y la implementación real. Priorizar los radios nativos de la librería reduce esa fricción y mantiene coherencia en el resultado final.
Los tokens de radio institucionales siguen siendo válidos como referencia para proyectos que no dependan de Angular Material.
Plantilla Mdash como base estructural
Los lineamientos recomiendan el uso de Mdash Angular como plantilla base para sistemas administrativos y dashboards. En este proyecto se siguió esa recomendación: Mdash aporta la estructura de navegación lateral, tablas, tarjetas y la grilla general del sistema. Sobre esa base se diseñaron los componentes propios que el proyecto requirió y que Mdash no cubría de forma nativa. Esto se detalla en la sección Decisiones de diseño.
Tema oscuro
Los lineamientos base definen la paleta de colores únicamente en su versión clara. Para este sistema se diseñó adicionalmente un tema oscuro, generando variantes oscuras exclusivamente para los colores de la paleta principal. Los tokens de tipografía y espaciado se mantienen sin cambios entre ambos temas.
Las variantes de color para el tema oscuro son las siguientes:
Decisiones de diseño del sistema
Esta sección documenta los criterios y patrones de diseño aplicados en el sistema. Cada decisión responde a una necesidad concreta del proyecto o a un principio de usabilidad establecido.
Uso semántico del color
Los colores de la paleta no son decorativos: cada grupo tiene un rol funcional definido según el contexto de uso. Esta asignación semántica permite al usuario reconocer el significado de la información antes de leerla, reduciendo la carga cognitiva.
A continuación se presentan los contextos de uso de la paleta de colores dentro del sistema.
Estados de derivación
| Estado | Grupo color | Steps claro | Steps oscuro | Descripción |
|---|---|---|---|---|
| Pendiente | Mustard | 100, 400, 10 | 100, 400, 10 | Propuesta de derivación para su ejecución. Espera seguimiento de la secretaria y confirmación de participación del estudiante. |
| Acogida | Blue | 100, 200, 10 | 100, 200, 10 | Derivación aceptada para su desarrollo y en proceso de asignación de especialista. |
| En proceso | Turquoise | 50, 400, 10 | 400, 50, 10 | Derivación en desarrollo. Se organizan sesiones y se da seguimiento a las actividades del estudiante y el especialista. |
| Finalizada | Green | 100, 200, 10 | 100, 200, 10 | Derivación completada con éxito. |
| Cancelada | Red | 100, 200, 10 | 100, 200, 10 | Derivación interrumpida antes de su finalización por decisión del estudiante, el especialista u otro motivo justificado. Puede ser reactivada por la secretaria, retomando el estado previo a su cancelación. |
Nivel de riesgo de estudiantes
| Nivel de riesgo | Grupo color | Steps claro | Steps oscuro | Descripción |
|---|---|---|---|---|
| Nulo | Green | 100, 200, 10 | 100, 200, 10 | El estudiante no presenta riesgo de deserción. |
| Bajo | Mustard | 100, 400, 10 | 100, 400, 10 | El estudiante presenta un nivel de riesgo existente pero no crítico. |
| Alto | Red | 100, 200, 10 | 100, 200, 10 | El estudiante presenta un nivel de riesgo preocupante y requiere atención prioritaria. |
Factores del algoritmo de cálculo de riesgo
El nivel de riesgo del estudiante se calcula en base a cuatro factores. Cada factor tiene asignado un color para identificarlo visualmente a lo largo del sistema, especialmente en el módulo de análisis de riesgo.
| Factor | Grupo color | Steps claro | Steps oscuro | Descripción |
|---|---|---|---|---|
| Académico | Blue | 200, 10, 50 | 200, 10, 100 | Desempeño, hábitos de estudio y progreso académico del estudiante. |
| Financiero | Green | 200, 10, 50 | 200, 10, 100 | Situación económica y disponibilidad de recursos para continuar los estudios. |
| Personal | Turquoise | 400, 10, 50 | 50, 10, 400 | Bienestar físico, familiar y condiciones personales del estudiante. |
| Institucional | Mustard | 300, 10, 400 | 400, 10, 100 | Relación del estudiante con los servicios institucionales disponibles, como becas y beneficios configurados por el administrador. |
Estados de sesión
| Estado | Grupo color | Steps claro | Steps oscuro | Descripción |
|---|---|---|---|---|
| Creada | Mustard | 400, 10 | 400, 10 | Sesión programada, pendiente de realizarse. |
| En ejecución | Turquoise | 400, 10 | 50, 10 | Sesión en curso. |
| Finalizada | Green | 200, 10 | 200, 10 | Sesión completada. |
| Cancelada | Red | 200, 10 | 200, 10 | Sesión cancelada. |
Color de notas del profesional
Las notas son creadas por el profesional al finalizar una sesión. Funcionan como apuntes dirigidos al estudiante: indicaciones, ejercicios o recordatorios que el profesional considera relevantes para que el estudiante lleve a cabo. El estudiante puede consultarlas desde su portal.
A diferencia de los otros contextos de color, el color de una nota no tiene un significado semántico fijo: es el propio profesional quien elige el color al momento de crearla, según su criterio personal. Los colores disponibles son los siguientes:
| Grupo color | Steps claro | Steps oscuro |
|---|---|---|
| Mustard | 400, 10 | 400, 10 |
| Blue | 200, 10 | 200, 10 |
| Turquoise | 400, 10 | 50, 10 |
| Green | 200, 10 | 200, 10 |
| Red | 200, 10 | 200, 10 |
La lógica de color semántico descrita en los contextos anteriores también se aplica a la iconografía asociada a estados: los iconos vinculados a un estado usan el color correspondiente a ese estado y no se reutilizan fuera de ese contexto. Ver Uso de iconografía.
Navegación y profundidad máxima
Se estableció como criterio de diseño que la navegación del sistema no supere 3 niveles de profundidad para acceder a cualquier funcionalidad. Esto reduce la complejidad de interacción y evita que el usuario pierda el contexto de dónde se encuentra.
Para cumplir este criterio sin sacrificar funcionalidad, se adoptaron las siguientes estrategias:
- Formularios en pantalla, no en modales: los formularios del sistema se presentan directamente en su propia pantalla. Usar modales para formularios habría añadido un nivel de profundidad innecesario y limitado el espacio disponible para el contenido.
- Componentes de árbol en pantalla única: en lugar de navegar a una pantalla nueva para expandir una jerarquía de contenido, se usa un componente árbol que despliega la información en la misma vista, evitando así un nivel adicional de navegación.
- Estructura de Mdash como base: la navegación lateral de Mdash organiza el sistema por módulos de primer nivel, lo que naturalmente contiene la profundidad. Se respetó esa estructura como punto de partida.
Vistas por rol
El sistema presenta distintas vistas según el rol del usuario autenticado. Esta separación responde a que las necesidades de cada perfil son suficientemente distintas como para justificar interfaces independientes, evitando sobrecargar una sola vista con funcionalidades que no son relevantes para todos.
- Dashboard de gestión: se presenta para los roles de administrador y secretaria. Está orientado a la gestión y supervisión de las derivaciones activas en la institución.
- Dashboard por defecto: se muestra cuando el usuario no tiene un rol asignado. Presenta una bienvenida al sistema, una descripción de sus funciones y un canal de contacto.
- Portal del estudiante: se activa para usuarios con rol de estudiante. Presenta la información personal del estudiante, permite actualizar los datos relevantes para el análisis de riesgo, y da acceso a sus sesiones, derivaciones y notas activas o pasadas.
- Portal del profesional: se activa para usuarios con rol de profesional. Presenta la lista de sesiones del día, la gestión de las derivaciones asignadas al profesional y la configuración de su disponibilidad horaria para sesiones.
Sistema de columnas
El layout de cada pantalla responde a su propósito principal. Se definieron dos patrones según el tipo de contenido que la pantalla debe presentar:
Columna completa — se usa cuando el objetivo de la pantalla es gestionar o registrar información. El contenido ocupa todo el ancho disponible.
Doble columna — se usa cuando una pantalla necesita presentar simultáneamente una acción principal y el detalle contextual relacionado con ella:
- Columna principal (izquierda, más ancha): contiene el flujo o acción que el usuario debe realizar — el objetivo primario de la pantalla.
- Columna de detalle (derecha, más estrecha): muestra información relevante del elemento con el que se está trabajando, seleccionada según lo más útil para ese contexto. No es navegación adicional; es contexto de apoyo.
Este patrón corresponde al split view o master-detail layout, y permite que el usuario actúe sin perder de vista la información relacionada.
La siguiente tabla detalla qué patrón aplica cada pantalla del sistema:
| Pantalla | Contexto | Patrón |
|---|---|---|
| Pantallas CRUD | Gestión de registros administrativos del sistema | Columna completa |
| Ficha del estudiante | Información académica, financiera y personal del estudiante | Columna completa |
| Análisis de riesgo | Detalle del análisis de riesgo del estudiante | Columna completa |
| Configuración global | Configuración general del sistema | Columna completa |
| Mi agenda (portal profesional) | Configuración de disponibilidad horaria del profesional | Columna completa |
| Mis derivaciones (portal estudiante) | Seguimiento de derivaciones asociadas al estudiante | Columna completa |
| Detalle de derivación | Gestión del detalle de una derivación activa | Doble columna |
| Mi perfil (portal estudiante) | Información general del estudiante. Presenta una variación en la proporción de ancho entre ambas columnas respecto al patrón estándar. | Doble columna |
| Mis sesiones (portal estudiante) | Seguimiento de sesiones realizadas o por realizar | Doble columna |
| Mis sesiones (portal profesional) | Sesiones activas del día y resumen semanal de sesiones programadas | Doble columna |
Presentación de registros: tablas y lista de ítems
Se definieron dos formas de presentar registros según el propósito de la pantalla:
Tablas — se usan en pantallas cuyo propósito principal es la gestión de registros. Ocupan el ancho completo y están optimizadas para visualizar, buscar y operar sobre conjuntos de datos. Están compuestas por dos elementos: un encabezado con acciones y filtros, y la tabla de datos propiamente tal.
| Lista | Pantalla | Contexto |
|---|---|---|
| Lista de derivaciones recientes | Dashboard | Derivaciones con cambios en el período seleccionado. Filtrable por día, semana o mes. |
| Registros administrativos | Pantallas CRUD | Usuarios, áreas, estados, docentes y otros registros gestionados por el administrador. |
| Lista de derivaciones | Módulo de derivaciones | CRUD de derivaciones orientado a una gestión práctica. |
| Historial por semestre | Ficha del estudiante | Semestres del estudiante con información de calificaciones universitarias. |
| Asistencia por materia | Ficha del estudiante | Materias del semestre con su porcentaje de asistencia. |
| Ayuda financiera | Ficha del estudiante | Becas y beneficios aplicados al estudiante. |
Lista de ítems con componente visual — se usa cuando la información de registros aparece en una pantalla cuyo propósito principal es otro y el espacio disponible es parcial. Cada componente de lista fue diseñado para un tipo de información particular y no se reutiliza en contextos distintos. Esto refuerza el reconocimiento visual: el usuario asocia la forma del componente con el tipo de contenido antes de leer.
| Lista | Pantalla | Contexto |
|---|---|---|
| Lista de derivaciones | Dashboard | Derivaciones con cambios recientes, filtrable por período. |
| Días disponibles | Detalle de derivación acogida | Días disponibles del profesional para programar una sesión. |
| Lista de sesiones | Detalle de derivación en proceso, Mis sesiones (portal profesional) | Sesiones asociadas a una derivación. |
| Lista de derivaciones | Mis derivaciones (portal estudiante), Mis sesiones (portal profesional) | Derivaciones asociadas al usuario activo. |
| Lista de sesiones por día | Mis sesiones, Mis derivaciones (portal estudiante) | Sesiones del día seleccionado, presentadas en formato de vista. |
| Lista de factores | Análisis de riesgo | Factores considerados en el cálculo del nivel de riesgo. |
| Subfactores, indicadores y materias destacadas | Análisis de riesgo, ficha del estudiante | Ítems con peso, detalle y nombre. Compartido entre varios contextos del sistema. |
| Notas del profesional | Mis sesiones (portal estudiante) | Notas dejadas al estudiante por el profesional tras una sesión. |
| Especialistas activos | Mis sesiones (portal estudiante) | Profesionales con sesiones activas asociadas al estudiante. |
| Actividades del día | Mis sesiones (portal profesional) | Sesiones del día para el profesional. |
| Lista de subfactores e indicadores configurables | Configuración de análisis de riesgo | Ítems configurables de los factores de riesgo. |
| Lista de niveles configurables | Configuración de análisis de riesgo | Niveles configurables de los factores de riesgo. |
| Configuración de notificaciones | Configuración de notificaciones | Configuraciones para notificaciones de derivaciones y sesiones. |
| Historial de cambios | Modal de historial de derivación | Cambios registrados dentro de una derivación. |
Componentes específicos del proyecto
Los siguientes componentes fueron diseñados a medida para este sistema, al no existir un equivalente adecuado en Mdash ni en Angular Material:
| Componente | Propósito | Pantalla donde se usa |
|---|---|---|
| Información | Presentar contenido aclaratorio sobre un apartado específico que el usuario necesita tener en cuenta. | Detalle de derivación, formularios. |
| Selector | Mostrar información de apoyo contextual mientras el usuario trabaja en un formulario. | Formularios. |
| Ítem historial | Presentar el detalle completo de una modificación realizada en una derivación. | Modal de historial de cambios. |
| Ítem de lista | Presentar cualquier ítem genérico en formato lista. | Sesiones realizadas (derivación finalizada), materias destacadas (ficha del estudiante). |
| Contenedor de subtítulos | Agrupar visualmente componentes relacionados bajo un título de sección. | Historial académico, control de asistencia, becas y beneficios (ficha del estudiante); información, proceso académico, especialistas (portal estudiante). |
| Nota del profesional | Mostrar el contenido de una nota dejada por el profesional al estudiante. | Portal del estudiante. |
| Ítem de sesión | Mostrar el detalle de una sesión. | Portal del profesional. |
| Formulario de sesión | Crear o actualizar una sesión dentro de una derivación. | Configuración de derivación. |
| Gráfico de análisis de riesgo | Presentar el nivel de riesgo del estudiante junto a los factores y su porcentaje de impacto. | Módulo de análisis de riesgo. |
Conclusión
El diseño del sistema SIGAE quedó completo a nivel de Figma, cubriendo todas las pantallas, componentes y flujos necesarios para su implementación. La combinación de los lineamientos institucionales con la plantilla Mdash y los componentes diseñados a medida permitió mantener consistencia visual mientras se atendían las necesidades específicas del dominio.
Las decisiones documentadas en este artículo — el uso semántico del color, los patrones de layout, la separación de vistas por rol y los criterios de profundidad de navegación — conforman un conjunto de criterios reutilizables que pueden aplicarse como referencia en futuros sistemas internos de características similares.
El archivo de Figma con el diseño completo está disponible en el siguiente enlace: Figma — SIGAE