Diseño web UX/UI
Destino local, turismo y producto digital
Estepona Travel
Diseñamos y construimos Estepona Travel: una guía viva del destino donde agenda diaria, mapa interactivo, rutas, gastronomía y planificador funcionan como un mismo producto en tres idiomas.
Cliente
Proyecto propio
Año
2026
Sector
Destino local, turismo y producto digital
Lugar
Estepona, Málaga
Categorías
Servicios
Contexto y reto
El problema de partida no era la falta de información sino su fragmentación. Un visitante que llega un jueves de agosto puede encontrar el cartel de un concierto, una reseña de un restaurante y un mapa de playas en tres lugares distintos, ninguno actualizado el mismo día, y seguir sin saber qué hacer esa tarde. La información existía; lo que faltaba era un lugar donde convertirla en una decisión.
Un destino no se explica, se recorre
Estepona tiene 74 murales de gran formato repartidos por el casco antiguo y las barriadas, un paseo marítimo largo, un puerto, calles con macetas que son una atracción en sí mismas, mercados, playas muy distintas entre sí y una agenda cultural que no para. Todo eso funciona como experiencia física y se rompe al pasarlo a pantalla: se convierte en listados. El reto era diseñar un producto que mantuviera esa lógica de recorrido.
El visitante y el que vive aquí no son la misma persona
Un residente quiere saber qué pasa este fin de semana. Alguien que llega por primera vez quiere entender el sitio. Alguien que tiene dos horas antes de coger el coche quiere una respuesta corta. Los tres tenían que caber en el mismo producto sin que ninguno se sintiera fuera de lugar, y sin fabricar tres webs distintas.
Enfoque estratégico
Planteamos Estepona Travel alrededor de cuatro intenciones, no alrededor de un menú. La estructura de navegación, la portada, el mapa y la agenda son distintas caras de las mismas cuatro preguntas.
Descubrir
Para quien todavía no sabe qué busca. Contenido editorial sobre el casco antiguo, la ruta de los murales, las playas, el mercado, la historia local y los lugares que no salen en la primera búsqueda. Aquí el producto se comporta como una revista con criterio, no como un directorio.
Saber qué pasa
Para quien quiere el pulso del destino. La portada abre con la temperatura, el estado del mar y lo que ocurre hoy, con pestañas de hoy, mañana y este fin de semana. Es la capa que obliga al producto a estar vivo: si no está actualizada, se nota inmediatamente.
Decidir
Para quien ya tiene opciones y necesita elegir. Fichas con horario, ubicación exacta, contexto y por qué merece la pena. El mapa interactivo cruza más de una docena de categorías —murales, playas, dónde comer, jardines, museos, arte urbano, historia, naturaleza— sobre la misma superficie geográfica.
Planificar
Para quien tiene un tiempo concreto. La pregunta que hace el planificador no es "¿qué te gusta?" sino "¿cuánto tiempo tienes?": una mañana, un día, un fin de semana, una semana, o ya conozco Estepona. El tiempo disponible es la variable que de verdad condiciona la decisión, y es la que casi ninguna guía pregunta.
Alcance del trabajo
Dirección de producto y estrategia
- definición del producto y de su razón de existir
- modelo de intenciones como base de la arquitectura
- criterio editorial y política de qué entra y qué no
- hoja de ruta de evolución por fases
Marca e identidad visual
- identidad visual completa y logotipo
- sistema cromático con roles semánticos por sección
- dirección de arte fotográfica y tratamiento de imagen
- tono de voz y normas de escritura
Arquitectura de información y UX
- estructura de secciones a partir de las cuatro intenciones
- sistema de navegación, búsqueda y descubrimiento transversal
- diseño del planificador por tiempo disponible
- fichas de lugar, evento, ruta y restaurante como piezas reutilizables
Interfaz y sistema de diseño
- sistema de componentes, tipografía y jerarquías
- módulos editoriales, carruseles, exploradores y mapas
- diseño responsive de todas las superficies
- estados vacíos, cargas y transiciones
Contenido y SEO
- redacción y edición de las páginas editoriales
- estructura semántica, metadatos y datos estructurados
- versiones en español, inglés y alemán
- sitemap, indexación y arquitectura de enlaces internos
Tecnología y desarrollo
- frontend y backend sobre Next.js y React
- base de datos para agenda, lugares, rutas y directorio
- integración de mapa con Google Maps
- datos meteorológicos y marítimos en tiempo real
- panel de administración para gestión de contenido
- comunicación por email y newsletter
Desarrollo visual del proyecto
La dirección visual parte del sitio, no de una tendencia. Estepona es cal, buganvilla, macetas de colores, jardines botánicos y mar: un destino cromáticamente ruidoso. La decisión fue no competir con eso. El sistema se apoya en un verde botánico profundo que actúa como fondo y como autoridad, deja que la fotografía ponga el color, y reserva los tonos vivos para señalizar, no para decorar.
Cada familia cromática tiene un trabajo asignado. El verde jardín marca la acción y lo que se puede hacer; el coral, la agenda y los eventos; la arena dorada, la gastronomía; el turquesa, las rutas y el litoral; el azul mediterráneo, la planificación y la cultura. Cuando alguien navega lo suficiente, empieza a orientarse por color sin haberlo aprendido conscientemente.
El resto del lenguaje es deliberadamente editorial: titulares grandes en minúscula alta, mucho aire, retículas amplias, la fotografía a sangre cuando el sitio lo merece y contenida cuando lo que importa es el dato. La percepción premium no viene de efectos, viene de espaciado, contraste y de no meter un elemento más del necesario.
Guía de color
Colores primarios
Verde Botánico Profundo
#1D614D
Verde Jardín Vivo
#6FAF45
Azul Mediterráneo
#4170B4
Turquesa Mar
#37B3BE
Colores secundarios
Coral Buganvilla
#C35D5F
Arena Dorada
#DE9F2C
Carbón
#17211D
Sistema, replicabilidad y profundidad
Estepona Travel no es un conjunto de páginas: es un sistema donde el contenido entra una vez y aparece donde tiene sentido. Un evento vive en la agenda, asoma en la portada el día que ocurre, aparece en el mapa si tiene ubicación y entra en un plan si encaja en el tiempo disponible del usuario. Esa es la diferencia entre publicar y operar.
La agenda como sistema, no como listado
La agenda es la pieza que sostiene la promesa del producto. Está organizada por meses navegables, por proximidad —hoy, mañana, este fin de semana— y por tipo de evento, y cada entrada lleva su franja de vigencia. Un evento que dura hasta el 16 de agosto se comporta distinto de uno que es solo esta noche, y el sistema lo entiende. La portada consume la agenda, no la duplica: lo que se ve en "hoy" es la agenda filtrada por el momento en que alguien abre la página.
Explorador de la ruta de los murales
Los 74 murales son el activo cultural más reconocible del destino y merecían más que una galería. Se resolvieron como un explorador con tres entradas: la galería completa con imagen, autor y dirección exacta; el mapa con todos los murales geolocalizados; y un constructor de ruta donde el usuario selecciona y ordena los que quiere ver y se lo lleva en el móvil. La misma información sirve para mirar, para llegar y para caminar.
Mapa interactivo como capa transversal
El mapa no es una sección: es otra manera de leer todo el contenido. Filtra por categorías sobre la misma superficie —murales, playas, restaurantes, jardines, museos, arte urbano, historia, naturaleza, puerto— y permite pasar de "qué hay cerca" a la ficha completa sin salir del contexto geográfico.
Multiidioma como decisión de producto
Español, inglés y alemán no son una traducción encima del sitio: son tres versiones con sus propias rutas, sus propios metadatos y su propio contenido indexable. En un destino donde el visitante internacional es una parte importante del público, tratar los idiomas como una capa superficial habría limitado el producto justo donde más se juega.
Diseño y SEO trabajados a la vez
La estructura editorial y la estructura semántica se decidieron en el mismo momento. Cada página tiene una razón de existir para una persona y una razón de existir para un buscador, y cuando las dos no coincidían, la página se replanteaba en lugar de forzarla. Eso incluye jerarquías de encabezado, datos estructurados, enlazado interno entre secciones relacionadas y sitemap generado desde el propio contenido.
Base tecnológica
Next.js
frontend y backend bajo la misma arquitectura, rutas por idioma y renderizado adaptado a contenido que cambia a diario
React
interfaz componible; exploradores, mapas, carruseles y fichas comparten los mismos bloques base
TypeScript
tipado de eventos, lugares, rutas y categorías; el modelo de datos es explícito y se sostiene al crecer
Base de datos MySQL
agenda, directorio de negocios, lugares de interés y rutas con relaciones reales entre entidades
Google Maps
geolocalización de los puntos del destino y navegación directa desde cada ficha
Datos en tiempo real
temperatura, estado del mar y condiciones del día integrados en la portada
Tailwind CSS
sistema de estilos consistente con la identidad, sin desviaciones entre secciones
Resend
comunicación transaccional y newsletter con la identidad del proyecto
Panel de administración
gestión propia de agenda, fichas, rutas y contenidos sin depender de un CMS externo
La web
La identidad, extendida al entorno digital.
Estepona.travel abre con la pregunta que el producto existe para responder: qué hacer en Estepona hoy. Debajo del titular está el dato del momento —temperatura, mar, viento— y lo que ocurre en las próximas horas. No es una portada de presentación: es una portada de uso.
A partir de ahí el recorrido se abre en las cuatro intenciones. Descubrir lleva al contenido editorial; la agenda al calendario completo; el mapa a la lectura geográfica; y el planificador a la conversación más corta que puede tener una guía con alguien que tiene prisa. Cada superficie mantiene el mismo sistema visual y el mismo criterio de escritura, en español, inglés y alemán.
Es un proyecto vivo. La agenda cambia cada día, las secciones editoriales siguen creciendo y el producto se sigue ajustando a partir de cómo se usa. Esa es la parte que no se ve en una captura y la que más trabajo tiene detrás.
Resultado y transformación conseguida
El resultado es un producto digital que funciona como infraestructura del destino: un lugar donde la información dispersa de Estepona está reunida, ordenada y conectada con la decisión que alguien tiene que tomar.
La transformación se traduce en:
una guía que responde a "qué hago ahora" y no solo a "qué ver en Estepona"
una agenda operativa que alimenta el resto del producto en lugar de vivir aparte
los 74 murales convertidos en una experiencia que se puede mirar, planificar y caminar
un mapa que unifica categorías que antes estaban en fuentes distintas
un planificador que parte del tiempo disponible, la variable que de verdad decide
tres idiomas tratados como tres productos indexables, no como una traducción
una identidad que ordena el contenido por color y hace el sitio navegable por intuición
una base técnica preparada para seguir creciendo en secciones, datos y funcionalidad
Aprendimos que...
Un destino no necesita otra web que lo describa: necesita algo que lo haga usable. Estepona Travel no compite por tener más contenido que nadie, compite por convertir el que hay en una decisión que alguien pueda tomar en treinta segundos. Diseñar eso obliga a decidir mucho antes de dibujar nada —qué preguntas importan, qué información sobra, qué se enseña primero— y obliga a construirlo de forma que siga siendo verdad mañana. Un producto que promete estar al día solo funciona si su arquitectura lo permite; el diseño y la ingeniería, ahí, son la misma conversación.
Más proyectos
