DESIGN SYSTEM · NAVBAR

Rediseño de navegación

3 propuestas para el navbar desktop y 3 para la navegación mobile.

⚠ ACTUAL

El navbar actual

Gradiente horizontal verde que no hace juego con el resto de la identidad. Mobile: botón hamburguesa muy pequeño difícil de acceder.

Desktop actual (scrolleado)
InicioPropuestasNovedadesAyudaSuscribite
Registrarse
El gradiente horizontal `#0e3d35 → #2F7A69 → #3a9b84` se ve genérico y no coincide con la identidad visual refinada del resto del sitio.
Mobile actual
El botón hamburguesa queda pequeño en la esquina superior derecha — zona de difícil acceso con el pulgar en móviles grandes. Aunque ya existe el bottom sheet, falta guiar al usuario hacia él.

Propuestas Desktop

El cambio principal: eliminar el gradiente horizontal y darle carácter.

★ PROPUESTA A

Solid Refined

Sólido `#0e3d35` sin gradiente. Separación con `border-bottom` sutil. Más elegante, sin "efecto bandera".

Con topbar de contacto (modo inicial)
+54 11 3989-3283 modernizacion@uncaus.edu.ar
Registrarse
InicioPropuestasNovedadesAyudaSuscribite
Posgrado
Compact (scrolleado)
InicioPropuestasNovedadesAyudaSuscribite
Registrarse
Posgrado
✓ Sin gradiente horizontal — fondo `#0e3d35` sólido
✓ `border-bottom: 1px solid rgba(255,255,255,0.08)` — separación sutil
✓ Topbar con fondo ligeramente más claro `rgba(255,255,255,0.05)`
✓ Botones de auth con `rounded-pill` y colores más definidos
PROPUESTA B

Glass Premium

Fondo dark con `backdrop-filter blur` — el hero de la página "traspasa" el navbar. Sofisticado. Usado ya en los maquetas actuales.

InicioPropuestasNovedadesAyudaSuscribite
Registrarse
Posgrado
UNCAUS · CURSOS Y DIPLOMATURAS

Capacitación de calidad
para todos los argentinos

Diplomaturas, talleres y cursos con certificación oficial.

Ver cursosConocer más
Scrolleado — navbar glass sobre contenido blanco
InicioPropuestasNovedadesAyudaSuscribite
Registrarse
Posgrado
↑ Contenido de la página debajo del navbar
✓ `background: rgba(14,61,53,0.88)` + `backdrop-filter: blur(16px)`
✓ Se integra perfectamente con el hero de la homepage
✓ Borde inferior `rgba(255,255,255,0.08)` muy sutil
✓ Mismo estilo ya usado en los maquetas de diseño actuales
PROPUESTA C

Accent Line

Sólido oscuro con línea de acento amber/dorado en el bottom. Da identidad visual sin gradiente.

Compact con accent line
InicioPropuestasNovedadesAyudaSuscribite
Registrarse
Posgrado
✓ `border-bottom: 2px solid #FFB300` — acento amber de la paleta
✓ Item activo: subrayado con `#FFB300` en vez de texto blanco plano
✓ Refuerza la identidad de marca con el color de acento
✓ Opcionalmente: gradiente vertical muy sutil `#0e3d35 → #1a4a42`

Propuestas Mobile

Cómo mejorar la navegación en pantallas chicas. El bottom sheet actual es bueno, pero la forma de acceder a él no es obvia.

★ PROPUESTA A

Bottom Tab Bar

Barra fija en el fondo siempre visible — como una app nativa. Sin hamburguesa. Las 4 secciones más importantes siempre a mano.

Logo
Contenido de la página
Inicio
Cursos
Mi Espacio
Más
✓ Los 4 destinos más usados siempre visibles
✓ "Más" abre el bottom sheet actual (buena reutilización)
✓ 0 fricción — sin hamburguesa que buscar
⚠ Requiere eliminar el hamburguesa del top
PROPUESTA B

Header accesible

Se mantiene el header top pero el botón de menú es grande, con label "Menú" y ocupa zona accesible del pulgar.

Logo
Contenido de la página
InicioPropuestasNovedadesVer más →
✓ Botón "Menú" grande con label — obvio y accesible
✓ Barra quick-links debajo del header para acceso directo
✓ Ícono de usuario para acceso rápido a Mi Espacio
✓ Compatible con el bottom sheet actual
PROPUESTA C

FAB + Bottom Sheet

Header mínimo + botón flotante grande en esquina inferior. Abre el bottom sheet mejorado con más info del usuario.

Logo
Contenido de la página
✓ FAB grande (56px) — zona accesible del pulgar
✓ Siempre visible, no requiere llegar al top
✓ Animación de apertura suave desde abajo
⚠ Puede tapar contenido cerca del bottom-right

Recomendación

Desktop
Propuesta A + B

Solid Refined (#0e3d35 sólido) como base, con Glass (backdrop-blur) sobre el hero de la home. El mismo navbar que ya usamos en todas las maquetas — consistencia inmediata.

Mobile
Propuesta A

Bottom Tab Bar permanente. Elimina el problema del hamburguesa completamente. Las 3-4 secciones principales siempre accesibles; "Más" mantiene el bottom sheet actual.