# Prototipo de interfaz de usuario — Web Este es el prototipo navegable de la aplicación web de Travia. **No son capturas**: son las siete pantallas funcionando, embebidas acá dentro. Se puede tipear en los campos, abrir los desplegables, cambiar de pestaña y navegar de una pantalla a otra desde adentro del propio prototipo. Cada pantalla se muestra en un marco de navegador con la ruta que va a tener en la aplicación real, y debajo lleva los requerimientos funcionales que realiza y un enlace para abrirla a pantalla completa en otra pestaña. ## Qué decisiones de diseño hay que mirar **El buscador es la portada.** La primera pantalla no es una presentación institucional de Travia: es el formulario de búsqueda, con origen, destino, fechas y cantidad de viajeros ya visibles. La tarea que trae al viajero está disponible sin un solo clic previo (UX15, simplificación de tareas). **El estado siempre está a la vista.** Los cupos restantes, el estado de una orden, el vencimiento de la suscripción y los límites del plan consumidos se muestran como dato y no como etiqueta: el número es lo que tiene jerarquía visual (UX1 y UX13). **Nada se pierde por error.** Toda acción destructiva —despublicar un paquete, eliminar, cancelar— aparece con su aviso de deshacer, y lo eliminado queda recuperable en una papelera durante treinta días (UX3 y UX16). **Los formularios previenen antes de corregir.** El envío permanece deshabilitado mientras haya un campo inválido, la validación es en vivo y el indicador de fortaleza de la contraseña aplica **la política que publica la API**, no una copia escrita en JavaScript: si hubiera dos definiciones, se desincronizarían en silencio (UX5 y DOC03 S8). **Un solo origen, sin subdominios.** Los paneles se separan por ruta —`/panel` para la agencia y `/administracion` para Travia— y quién entra a cada uno lo decide el permiso, nunca el nombre del servidor. El encabezado `Host` lo manda el cliente exactamente igual que un parámetro de la URL, así que un subdominio puede enrutar y decorar, pero jamás autorizar. ## Por qué esta identidad visual: el cielo **La paleta de Travia está pensada desde el cielo que se ve en un viaje en avión.** No es una gama de azules elegida por gusto: cada tono corresponde a un momento de ese cielo y, sobre todo, a un trabajo concreto dentro de la interfaz. La metáfora sirve para que la marca tenga un sentido reconocible; el rol sirve para que cada color se use siempre en el mismo lugar y signifique siempre lo mismo. | Color | Lugar en el cielo | Rol en la interfaz | |---|---|---| | `#0E3A5C` | La altura de crucero, o el cielo de noche | Encabezados, superficies oscuras (pantalla de carga, pie de página) y texto sobre fondos claros | | `#1E6FA8` | El cielo abierto | Acción primaria, enlaces, foco del teclado y estado activo de la navegación | | `#4FA8D8` | El cielo diurno visto por la ventanilla | Realces: degradé del logotipo, íconos, contornos de foco sobre fondos claros. Nunca texto | | `#EAF6FB` | La bruma y las nubes | Fondo amplio de secciones, chips y estados de selección o de *hover* | | `#FF7A50` | El atardecer o el amanecer desde el avión: el momento de llegar | La acción principal de cada pantalla: comprar, publicar, renovar | | `#E8632F` | El mismo atardecer, más intenso | El acento al pasar el puntero o al presionar | Los neutros acompañan sin competir: `#1A2733` para el texto principal, `#5C7080` para el secundario, `#F4F8FA` para el fondo general y `#DCE7EF` para bordes y separadores, todos levemente azulados para que no aparezca un gris frío ajeno a la gama. **La metáfora está construida en la propia interfaz, no solo en este texto.** Mientras la aplicación revalida la sesión se muestra una ventanilla de avión sobre el azul noche `#0E3A5C` con el mensaje "Preparando despegue...", y el logotipo es un avión con un degradé de `#1E6FA8` a `#4FA8D8`. Las sombras tampoco son negras: se calculan sobre el mismo azul noche (`rgba(14, 58, 92, …)` al 4, 6 y 10 %), de modo que una tarjeta que se eleva proyecta una sombra del mismo cielo y no una mancha gris. ### El coral: la llegada **El único color cálido de la paleta está reservado para la acción que importa.** Sobre una base enteramente fría, el coral `#FF7A50` es el complemento natural del azul y se distingue a simple vista aun en la periferia del campo visual. Por eso no hace falta agrandar el botón de comprar ni rodearlo de adornos: alcanza con que sea el único coral de la pantalla. Si el coral apareciera también en etiquetas, íconos o bordes, perdería esa función; se usa con la misma disciplina que pide UX8 (una sola acción primaria por pantalla, lo demás en segundo plano). La elección del tono tiene su lectura dentro del concepto: es el color del horizonte cuando el avión empieza a bajar, el momento de llegar. Es el color del paso que lleva a la persona a su viaje. **El botón coral lleva texto oscuro y no blanco**, para que se lea con holgura. Estas son las combinaciones que usa la interfaz: | Texto sobre fondo | Contraste | Uso | |---|---|---| | `#1A2733` sobre `#FF7A50` | **5,90:1** | Botón de acento en reposo | | `#1A2733` sobre `#E8632F` | **4,53:1** | Botón de acento al pasar el puntero | | `#FFFFFF` sobre `#1E6FA8` | **5,39:1** | Botón primario | | `#1E6FA8` sobre `#FFFFFF` | **5,39:1** | Enlaces | | `#1E6FA8` sobre `#EAF6FB` | **4,90:1** | Enlaces sobre fondos de sección | | `#FFFFFF` sobre `#0E3A5C` | **11,81:1** | Encabezados y superficies oscuras | | `#1A2733` sobre `#F4F8FA` | **14,22:1** | Texto corriente | | `#5C7080` sobre `#FFFFFF` | **5,14:1** | Texto secundario | Las relaciones están calculadas con la fórmula de luminancia relativa de WCAG 2.x contra el mínimo AA de 4,5:1 para texto normal, que es lo que pide la legibilidad de DOC02 (UX13). Las combinaciones aprobadas están declaradas junto a los colores en el sistema de diseño compartido, con su valor medido. El azul cielo `#4FA8D8` sobre blanco no alcanza ese mínimo, y por eso en la interfaz solo dibuja íconos, degradés y contornos, nunca letras. ### Por qué azul en un mercado donde se paga **En Travia el viajero le entrega dinero a una agencia que probablemente no conoce.** La interfaz no puede resolver por sí sola esa desconfianza —eso lo hacen el legajo de la agencia, el pago por la pasarela y el estado visible de cada orden—, pero sí puede no agravarla. El azul tiene una asociación cultural extendida con la calma, la seriedad y la confianza, y es la gama habitual de los servicios financieros y de transporte; usarla ubica a Travia del lado de "lugar donde se paga con tranquilidad" y no del de "promoción que hay que aprovechar ya". **Una paleta acotada deja que el contenido sea el protagonista.** Lo que el viajero viene a mirar son las fotos de los destinos, los precios y los cupos. Las fotos traen sus propios colores —el verde de una sierra, el turquesa de una playa, el blanco de la nieve—, y una interfaz de pocos tonos, casi todos fríos y claros, las enmarca sin pelearles. Con el mismo criterio, el precio y los cupos restantes se escriben grandes y en `#1A2733`, y la etiqueta que los nombra va chica y en `#5C7080`: el dato pesa más que su rótulo (UX13). ### Tipografía: Sora para orientar, Inter para leer **Los títulos y las cifras destacadas usan Sora; el cuerpo, Inter.** La intención con Sora es que los títulos tengan algo de señalética: es una geométrica de formas abiertas y regulares que se lee de un vistazo, como se lee un cartel en un aeropuerto, y que en pesos altos da a los precios una presencia firme. Inter, en cambio, está pensada para pantalla y para lectura sostenida, y es la que llevan los formularios, las descripciones de itinerario y las tablas de los paneles. La escala está fijada en el sistema de diseño y no se improvisa por pantalla: | Estilo | Familia | Tamaño y peso | |---|---|---| | Título 1 | Sora | 36 px, 800 | | Título 2 | Sora | 24 px, 700 | | Título 3 | Sora | 18 px, 600 | | Precio | Sora | 24 px, 800 | | Cuerpo | Inter | 16 px, 400, interlineado 1,65 | | Cuerpo chico | Inter | 14 px, 400 | | Etiqueta | Inter | 12 px, 700, mayúsculas, espaciado 0,6 | En las tablas donde se comparan cifras fila a fila —el padrón de agencias de la administración, con números de legajo y fechas de vencimiento— se activan las cifras tabulares de Inter (`font-variant-numeric: tabular-nums`), para que los dígitos ocupen el mismo ancho y las columnas se alineen. ### Espacios, radios y sombras **El espaciado sigue una escala discreta de base 4:** 4, 8, 12, 16, 24, 32, 48 y 64 px. Mezclar valores arbitrarios es lo que hace que dos pantallas se vean distintas sin motivo, y una escala cerrada lo impide (UX4). Los radios son tres —6, 12 y 20 px, de los elementos chicos a los contenedores grandes— más el redondeo completo de chips y pastillas. Las tres sombras son suaves y amplias, del tipo de la luz difusa de un cielo nublado, y marcan jerarquía sin dibujar bordes duros. ### Una sola identidad en la web y en Android **La paleta no se copia de una plataforma a la otra: sale de un mismo lugar.** Colores, tipografías, espaciados, radios y sombras están definidos una sola vez en el sistema de diseño compartido. La web genera desde ahí sus variables CSS y la aplicación Android los consume directamente como estilos, de modo que un cambio de tono aparece en las dos a la vez y ninguna puede desviarse en silencio. Es la consistencia que pide DOC02 (UX4): la misma acción con el mismo color, el mismo ícono y la misma etiqueta, sea cual sea el dispositivo. ## Navegación propuesta **La web tiene una sola barra superior, y lo que muestra depende de lo que la persona puede hacer.** No hay menús distintos por tipo de usuario: hay una lista de destinos, y cada uno aparece si la sesión tiene el permiso que la API exige para esa pantalla. El logotipo lleva siempre al inicio de cada quien —la portada para el viajero, el panel para la agencia—, y del lado derecho de la barra está "Ingresar" o, con sesión iniciada, el saludo que abre "Mi cuenta". En pantallas angostas la misma barra se pliega en un menú. ```mermaid flowchart LR subgraph PUB["Público y viajero"] INI["Portada y buscador
/"] RES["Resultados
/paquetes"] DET["Detalle del paquete
/paquetes/:id"] COM["Confirmar compra
(en el detalle)"] PLA["Planes
/planes"] ING["Ingresar
/ingresar"] REG["Registrarse
/registrarse"] REA["Registrar agencia
/registrarse-agencia"] end subgraph SES["Con sesión"] CTA["Mi cuenta
/mi-cuenta"] MCO["Mis compras
/mis-compras"] end subgraph AGE["Agencia"] PAN["Panel
/panel"] PUB2["Publicar paquete
/agencia/paquetes/publicar"] EDI["Editar paquete
/agencia/paquetes/:id/editar"] PER["Mi agencia
/agencia/perfil"] end subgraph ADM["Administración"] APL["Planes
/administracion/planes"] AAG["Agencias
/administracion/agencias"] APA["Países
/administracion/paises"] end INI --> RES --> DET --> COM --> MCO INI --> REA PLA --> REA ING --> REG ING --> CTA ING --> PAN ING --> APL PAN --> PUB2 PAN --> EDI PAN --> PER PAN --> PLA APL --- AAG --- APA ``` **Todo lo que sirve para decidir es accesible sin sesión.** La portada con el buscador, los resultados, el detalle de un paquete y la vitrina de planes se recorren sin registrarse. La cuenta se pide recién cuando hace falta: al confirmar una compra o al entrar a un panel. Los planes son públicos a propósito, porque es lo primero que mira una agencia que todavía no se registró, y esconderlos detrás del ingreso sería pedirle que se comprometa antes de saber el precio. **El viajero avanza en línea recta.** Portada, resultados, detalle y compra siguen el orden de la tarea, y la compra se confirma en el mismo detalle, sin llevarlo a otra sección donde pierda de vista lo que eligió (UX15). Después de pagar, el historial de "Mis compras" muestra el estado de cada orden (UX1). **La agencia tiene su propio inicio: el panel.** Quien opera del lado de la oferta no viene a comprar viajes, así que el logotipo, el ingreso y la portada misma la llevan a `/panel`, donde ve el consumo de su plan, sus métricas de visitas y ventas, y sus paquetes con lo que puede hacer con cada uno —editar, despublicar con deshacer, reactivar—. Publicar tiene puerta propia en la barra porque es lo primero que una agencia viene a hacer; el perfil comercial está en "Mi agencia", y la contratación o renovación del plan se hace desde la misma vitrina de planes, ya con la sesión de la agencia. **La administración se separa por ruta y por permiso, no por servidor.** Sus pantallas cuelgan de `/administracion` y cada una tiene su enlace en la barra con el permiso que la API exige para ella: alguien que administra planes no ve el padrón de agencias si no tiene también ese permiso. Si alguien llega a una ruta protegida sin sesión, se lo lleva a ingresar y, al terminar, vuelve a la pantalla que había pedido; si tiene sesión pero no el permiso, ve una pantalla que le explica que no puede entrar y le ofrece cómo seguir (UX9). Esconder un enlace es comodidad: la autorización real la hace la API en cada pedido. ## Adaptabilidad El prototipo está construido con diseño web adaptable, que es el punto 3 de los requerimientos generales: una sola interfaz que reacomoda su disposición según el ancho disponible, sin pérdida de funcionalidad ni desplazamiento horizontal. Los marcos de abajo muestran el ancho de escritorio; el mismo archivo, abierto en un teléfono o angostando la ventana, reordena la grilla de resultados a una columna, convierte la barra de navegación en un menú y apila los filtros. La paleta, la tipografía y los espaciados salen de un **sistema de diseño compartido** entre la web y la aplicación móvil, de modo que las dos plataformas sostienen la misma identidad visual sin copiar valores a mano.