Sobre esta plantilla
Mostar Guide se capturó a 798x584 y se conserva como especificación, no como imagen de galería. Abre con “A cinematic three-screen scroll story for Mostar city” y le da el marco a esa línea en lugar de encogerla en una tarjeta. El color se limita a #111411 de base, tono claro #FDF1E1 para la tipografía y azul #7FB4D4 para los acentos y la página se compone en Inter. La referencia está construida con vanilla JS, y las decisiones de maquetación se documentan aparte. El brief gasta su presupuesto de movimiento en transiciones de 640ms, cubic-bezier(0.22, 1, 0.36, 1) y un vídeo en bucle de fondo. Tómalo como el brief de landing page para una marca de viajes que tiene que aguantar una reconstrucción, no solo un primer vistazo.
Pensado para
- Pensado para agencias que presentan propuestas de viajes y necesitan incluir un breakpoint de 560px en la primera respuesta al cliente.
- Este diseño de landing page sirve a fundadores que necesitan una pantalla de prueba de que los textos de viajes aguantan 7,4s de vídeo en bucle.
- Pensado para un fundador en solitario que saca un único diseño de landing page para una marca de viajes y no tiene ningún sistema de diseño detrás.
Qué incluye
- Una barra de navegación que no estorba. Marca, enlaces y la acción #7FB4D4 comparten una línea base, y eso es lo que evita que una fila fina parezca accidental. Las etiquetas son lo bastante cortas para caber en una línea a 560px, y el elemento activo se marca con peso y no con una píldora. Si tu propia página tiene más secciones, agrúpalas en lugar de ensanchar la barra.
- El vídeo es el fondo, no un panel. Un clip de 7,4s a 798x584 hace el trabajo atmosférico; el brief fija su recorte y deja el tipo intacto por encima. Un fotograma de póster a 798x584 sostiene la composición cuando no hay reproducción automática, así que la maquetación nunca se desmorona.
- La navegación es fina a propósito. Por debajo de 560px los enlaces colapsan en lugar de saltar a una segunda línea.
- Valores que puedes comprobar. Los tamaños se citan, no se heredan: tipografía de 12px a 24px, secciones de 19vh, una cuadrícula de 2 columnas y esquinas de 24px. Cambia la tipografía o el texto y esas relaciones se mantienen. Cada valor se puede comprobar contra el prompt capturado, y eso hace que un remontaje sea verificable y no aproximado. Donde el brief calla, calla a propósito.
Movimiento e interacción
Todo el presupuesto de animación
El movimiento de los controles es corto y repetible: 640ms en cada cambio de estado. La misma duración se reutiliza en todos los controles, lo que mantiene las interacciones como un solo sistema.
Hover solo donde aporta
La interacción se queda en cada control (un elemento fijo que mantiene la posición mientras el contenido pasa por debajo y un carrusel que pasa páginas de contenido a demanda), así que nada más de la página se mueve como efecto secundario. Como los estados son simples, se portan a cualquier sistema de componentes.
Hacer tuyo este tipo de landing page
Cuando pongas tu propio material, conserva el recorte y el orden de capas. El medio es un bucle de 7,4s en 798x584. Esa colocación es lo que mantiene legible el texto. Tu acento tiene que superar la misma prueba de contraste que el de la referencia.
El reflujo de landing page
Aquí responsive significa que cambia la escala y no la secuencia: la tipografía se limita entre 12px y 24px, la maquetación cambia a 560px y la sección se mantiene a 19vh, y el orden de lectura se queda donde lo puso el brief. La maquetación estrecha es una decisión y no un ajuste forzado, y la jerarquía sobrevive a ella.
Cómo ordena Mostar Guide la primera lectura
Este tipo de landing page tiene un recorrido de lectura declarado. La navegación presenta el producto y le da al visitante que vuelve una forma de moverse que ya reconoce. A partir de ahí la mirada recorre navegación, la insignia de anuncio, la fila de cifras, la cuadrícula de tarjetas y la lista de funciones en secuencia, y eso es lo que impide que una sola pantalla se lea como una lista. Quien busca viajes recibe la oferta antes que las opciones.
Preguntas frecuentes
¿Cómo está organizada esta ficha de Mostar Guide?
Todo lo que se cita en la página procede del brief capturado de 27.876 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Qué contiene en realidad el brief que hay detrás de Mostar Guide?
Es un brief de construcción, no una descripción de ambiente: fija la escala tipográfica, el espaciado y los valores de movimiento en 798x584. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Por qué la ficha nombra vanilla JS?
Mostar Guide se construyó en vanilla JS, y la ficha lo dice por procedencia. El brief describe posiciones, tamaños y tiempos, así que se puede reconstruir en cualquier framework capaz de componer tipografía y colocar elementos.
