Acceso
Entrar al campus
Correo y contraseña, enlace de acceso por correo, verificación en dos pasos y el error de credenciales en línea, no en un aviso que se va.
Mockup 1 de 3 · Dirección de arte «Aula»
El campus como un sitio donde se lee, no como un panel de control
Formación para el empleo es contenido largo que hay que leer y comprender. Esta propuesta retira el cromo de la interfaz, pone la tipografía a trabajar y deja que respire lo único que importa: el temario, el progreso de una persona y la conversación con quien la tutoriza.
Paleta terrosa de baja saturación, pareja serif + sans, separadores de un píxel en lugar de cajas y sombras, navegación agrupada por tarea y contrastes calculados uno a uno. Sin gradientes, sin cristal esmerilado, sin gamificación y sin emoji.
Las doce pantallas
Alumnado
Panel del alumnado
Una sola pregunta arriba: por dónde iba. Debajo, fechas, avisos de la tutoría, actividad y tiempo dedicado sin cifras de videojuego.
Alumnado
Mis cursos
Tres convocatorias en tres estados distintos: en marcha, terminada con certificado y sin empezar. Con filtros y estado vacío.
Alumnado
Portal del curso
Temario completo con los cinco estados de lección, progreso por módulos, ficha de la tutoría, documentos, foros y próxima sesión.
Alumnado
Visor de lección
La pantalla donde el alumnado pasa el 80 % del tiempo: medida de lectura de 66 caracteres, serif, figuras, vídeo y autocomprobación.
Alumnado
Evaluación
Cuatro tipos de pregunta, temporizador discreto, intentos restantes y el resultado corregido con retroalimentación por pregunta.
Alumnado
Comunicación
Foro de la convocatoria y mensajes privados con la tutoría en una sola pantalla, con hilos, adjuntos y no leídos.
Administración
Panel de administración
Salud del centro, alumnado en riesgo con motivo, convocatorias abiertas, incidencias, cola de correo y accesos rápidos.
Administración
Usuarios y ficha
Tabla con filtros, selección múltiple con acciones en lote, importación CSV y la ficha completa de una persona con su historia.
Administración
Seguimiento
El grupo de una convocatoria de un vistazo y el detalle de una persona con su línea de tiempo, lista para inspección.
Administración
Configuración e identidad
Datos del centro, correo, avisos automáticos y el editor de marca con vista previa en vivo y comprobación de contraste.
Transversal
Perfil y preferencias
Datos, acceso, verificación en dos pasos, preferencias de avisos por canal, accesibilidad y tema.
Sistema de diseño
Todo lo que sigue está vivo: se pinta con la misma hoja de estilos que las doce pantallas. Cambia el tema en la barra superior y comprueba que ningún par de color se rompe.
Color
Los ratios son los del modo activo en este momento y están calculados con la fórmula de WCAG 2.1, no estimados. El mínimo exigido es 4,5:1 para texto y 3:1 para bordes de control.
Papel
#F5F1E9 · #191512
Papel alto
#FCFAF5 · #221D19
Papel hundido
#EDE7DA · #141110
Tinta
14,40:1 · 15,04:1
Tinta media
6,90:1 · 8,53:1
Tinta suave
5,14:1 · 6,28:1
Acento (terracota)
6,19:1 · 7,95:1
Éxito
6,78:1 · 9,03:1
Aviso
6,57:1 · 9,60:1
Error
6,42:1 · 7,85:1
Información
7,24:1 · 8,68:1
Borde de control
3,38:1 · 3,81:1
Tipografía
Prevención de riesgos
Riesgos ligados al medio ambiente de trabajo
La carga de trabajo y la fatiga
El trabajo modifica el medio ambiente en el que se desarrolla. Esa modificación puede generar riesgos para la salud de quien lo ejecuta, y también para terceras personas ajenas a la actividad.
La interfaz usa sans a 16 px porque se opera, no se lee de seguido; el contenido de la lección usa serif a 19 px porque se lee durante veinte minutos sin levantar la vista.
Texto de apoyo, botones y etiquetas de campo.
Espacio, radios y elevación
Escala de espacio
Base de 4 px con ritmo vertical de 8. Diez pasos, del 4 al 88.
Radios
0, 2, 4 y 6 px. Una pastilla solo en contadores y chips.
Elevación
Solo dos sombras en todo el sistema, y ninguna en superficies fijas. La jerarquía la marcan el fondo y el filete de 1 px.
Botones
Campos y errores
El que te dio el centro al matricularte.
Ocho cifras y una letra, sin guiones.
Faltan la última cifra y la letra. Escribe las ocho cifras seguidas de la letra, por ejemplo 47129334X.
Distintivos y estados
Estado de una convocatoria o de una lección
Completada
En curso
Disponible
Se abre el 23 de marzo
Plazo cerrado
Pendiente de corrección
Roles
Alumnado
Tutoría
Gestión
Administración
Inspección
Progreso
Barra con frase
Módulo 2 de 5
68 %
Segmentado por módulo
Anillo
68 %
Tabla densa
| Persona | Progreso | Tiempo | Última conexión | Estado |
|---|---|---|---|---|
| Rosa Iglesias Vega | 94 % | 51 h 20 min | Hoy, 08:12 | Al día |
| Marta Ruiz Peña | 68 % | 38 h 05 min | Ayer, 22:41 | En curso |
| Diego Ferrán Costa | 21 % | 9 h 15 min | 7 de marzo, 19:03 | 12 días sin entrar |
Avisos
El módulo 3 se abre el 23 de marzo
Hasta entonces puedes repasar los módulos 1 y 2, que quedan siempre abiertos.
Llevas 12 días sin conectarte
La convocatoria termina el 17 de abril y te faltan 19 lecciones. Escribe a tu tutoría si necesitas reorganizar el ritmo.
No se ha podido guardar el progreso
Se ha perdido la conexión. Lo que has leído está guardado en este dispositivo y se enviará solo cuando vuelva la red. Puedes seguir estudiando.
Lección completada
Has terminado «2.3 La carga de trabajo, la fatiga y la insatisfacción laboral».
Vacío, carga y permiso
Aún no tienes cursos
Cuando el centro te matricule en una convocatoria, aparecerá aquí y recibirás un correo.
Escribir a secretaríaCargando
Cargando
.
.
.
Esta pantalla es de administración
Tu cuenta tiene el rol de alumnado. Si necesitas acceso, pídelo a la persona que administra el campus.
Volver a mi panelIconografía y personas
MR
JL
DF
RI
AT