PROYECTO PROPIO · DISEÑO WEB E INTERFACES
Cádiz · Un estado de luzUna experiencia visual que termina ayudándote a viajar.
Queríamos presentar Cádiz con una identidad visual reconocible y convertir ese recorrido en una herramienta útil. Diseñamos una página que une escenas animadas, contenido de destinos y un planificador de visitas de 1, 3 o 7 días, con o sin coche.
EL PROYECTO DE UN VISTAZO
De mostrar un territorio a preparar un recorrido.
- Necesidad
- Crear una demostración propia de diseño web donde el impacto visual y la información práctica convivieran.
- Problema
- Las animaciones podían acaparar la atención y dificultar el acceso a los destinos, las rutas y las decisiones del viaje.
- Qué hicimos
- Diseñamos dos modos de lectura conectados: un viaje visual y una guía con controles de duración, transporte y base.
- Resultado entregado
- Una web pública que permite explorar Cádiz, comparar bases y preparar, compartir, copiar o imprimir una propuesta de recorrido.
01 · DIRECCIÓN VISUAL
Una identidad que nace de la luz, el mar y el territorio.
La apertura parte de una imagen artística de Cádiz frente al Atlántico. No funciona como una fotografía documental: introduce el tono del proyecto. El título de gran tamaño, el horizonte y la paleta cálida crean una primera pantalla con una idea clara antes de entrar en la información práctica.
La composición combina azules profundos, tonos arena y acentos luminosos. A lo largo del recorrido, costa, ciudad y sierra tienen tratamientos propios, pero comparten recursos gráficos y un mismo lenguaje de navegación. Así podemos cambiar de ambiente sin que cada escena parezca una web distinta.
Tipografía con funciones diferentes
Cormorant Garamond aporta carácter editorial a los titulares; DM Sans sostiene la lectura y los controles; Syne introduce acentos gráficos. La diferencia entre estas voces permite distinguir un momento expresivo de una instrucción práctica.
Jerarquía antes que decoración
En la portada hay dos acciones reconocibles: explorar o preparar la visita. El texto introductorio explica que la guía trabaja con días, transporte y bases. La imagen crea el ambiente; los textos y enlaces explican qué puede hacer la persona.
02 · NARRATIVA Y MOVIMIENTO
El desplazamiento marca el ritmo de las escenas.
En lugar de encadenar bloques aislados, construimos un recorrido visual con capítulos y transiciones. La posición de la página se traduce en un progreso: aparecen elementos, se desplazan composiciones y se transforman los recursos que conectan una escena con la siguiente.
La continuidad no depende solo de mover objetos. Las transiciones utilizan interpolaciones suaves y elementos compartidos para que el cambio tenga una dirección visual. El visitante puede avanzar o volver atrás: la escena responde a su posición, en lugar de reproducir una película con un tiempo fijo.
Capas con distinta profundidad
Transformaciones, opacidad y escalas separan el fondo, las ilustraciones y el texto. Los ritmos distintos crean profundidad y ayudan a conducir la mirada sin cambiar de página.
Movimiento que se puede reducir
La experiencia consulta la preferencia de movimiento reducido del navegador y ofrece un control de movimiento. La guía práctica también dispone de accesos directos: no obliga a recorrer todas las escenas para preparar la visita.
Estas decisiones muestran una aplicación concreta de nuestro trabajo en diseño de interfaces de usuario: la animación debe acompañar las acciones y los estados de la pantalla.
03 · DE LA CONTEMPLACIÓN A LA CONSULTA
Una misma web con dos ritmos de lectura.
La parte visual invita a descubrir; la guía permite buscar y decidir. Al llegar al contenido práctico, la cabecera cambia de presentación y la interfaz da prioridad a la navegación, las fichas y los recorridos.
El planificador utiliza tres decisiones comprensibles: cuántos días tienes, si viajas con coche y dónde harás base. Los distintos accesos comparten la selección. Cambiar un control actualiza la propuesta y evita que cada formulario actúe como una herramienta independiente.
Las propuestas se apoyan en contenido ya presente en el HTML. No son itinerarios generados por IA ni reservas de disponibilidad en tiempo real. La interfaz selecciona y presenta recorridos editoriales, con sus límites, alternativas y fuentes.
04 · DISEÑO DE LA INFORMACIÓN
El mapa orienta; las fichas explican las condiciones.
La cartografía local sitúa bases y destinos. Al seleccionar un punto, aparecen su descripción y enlaces para leer la ficha, consultar un mapa de calles o utilizar el lugar como base cuando corresponde.
Las conexiones dibujadas representan relaciones conceptuales entre una base y los destinos del plan. No equivalen a carreteras, tiempos de viaje ni navegación GPS. La información de cada recorrido explica los desplazamientos y las precauciones que el mapa no puede resumir.
Separar estas funciones evita cargar una sola pantalla con todo: el mapa responde a «¿dónde está?»; las fichas y rutas responden a «¿cómo encaja en mi visita?». Los enlaces externos a mapas se abren solo cuando el visitante decide consultarlos.
05 · DISEÑO RESPONSIVE
Adaptar la composición, no encoger el escritorio.
En móvil, titulares y espacios cambian con tamaños fluidos. Los controles se apilan y la información seleccionada puede recibir foco y quedar a la vista después de actuar. El mapa dispone de desplazamiento interno cuando su contenido necesita más anchura.
La portada mantiene la imagen y las dos acciones principales con una distribución ajustada a una pantalla vertical. No pretende reproducir a escala la composición panorámica del escritorio.
Para conservar la relación entre diseño y carga, el proyecto utiliza imágenes WebP de distintos tamaños, fuentes locales WOFF2 y precarga de dos fuentes. Son decisiones de implementación verificables, no una garantía de una puntuación concreta de rendimiento.
06 · IMPLEMENTACIÓN Y COMPROBACIÓN
La técnica sostiene la experiencia.
HTML, CSS y JavaScript
Contenido, presentación e interacción se distribuyen en archivos locales. La versión publicada no necesita un framework, una compilación ni una API privada para mostrar los destinos y construir los recorridos.
Un ciclo de animación controlado
El movimiento utiliza requestAnimationFrame; los avisos de desplazamiento son pasivos y las actualizaciones se agrupan. Al ocultar la pestaña, el ciclo de animación se cancela y se recupera al volver.
Estado que puede compartirse
Duración, transporte y base se reflejan en parámetros de la URL. El enlace conserva la selección y el historial permite restaurarla. También hay acciones para copiar el recorrido e imprimir una versión de lectura.
Comprobaciones sobre la publicación
Comprobamos la carga de los 80 archivos y las 48 combinaciones de días, transporte y base en el planificador, además de la portada en móvil y escritorio. Esas comprobaciones no sustituyen una auditoría completa de accesibilidad ni mediciones de uso real.
RESULTADO
Una demostración donde el diseño tiene una función.
El resultado es una experiencia pública de dev2bit que permite pasar de una presentación expresiva de Cádiz a una propuesta de visita consultable y compartible. No es un encargo de una entidad turística ni se le atribuyen ventas, reservas o mejoras de conversión no medidas.
El proyecto demuestra cómo el diseño y desarrollo web puede unir identidad, contenido e interacción. Si tu web necesita una experiencia visual propia o una interfaz que ayude a tomar decisiones, podemos estudiar qué parte de este enfoque tiene sentido para tu proyecto.