Usamos cookies

Utilizamos cookies propias y de terceros para analizar el tráfico y mejorar tu experiencia. Puedes aceptarlas o rechazarlas. Política de privacidad.

Saltar al contenido
CasoDiseño web UX/UI
Proyectos

Estepona Travel

Diseñamos y desarrollamos Estepona Travel: un producto digital que reúne agenda, playas, gastronomía, rutas, mapa y experiencias para ayudar a decidir qué hacer en Estepona.

Cliente
Estepona Travel
Año
2026
Sector
Turismo, destino local y producto digital
Lugar
Estepona, Málaga
Ver la web (se abre en otra pestaña)
Estepona Travel — Turismo, destino local y producto digital
Dirección de productoEstrategiaIdentidad y dirección de arteArquitectura de informaciónUX/UIContenido editorialSistema de agendaMapa interactivoDesarrolloMultiidiomaSEO técnicoAutomatizaciónEvolución continua
00Resumen
Estepona Travel es una plataforma turística digital independiente pensada para una pregunta muy concreta: qué hacer hoy, dónde ir y cómo vivir Estepona. Nació como un producto propio, con su propia lógica: agenda viva, mapa por capas, gastronomía, playas, rutas, experiencias, historia local y herramientas de decisión, en español, inglés y alemán. Desde SIMA lo concebimos, lo diseñamos, lo construimos y lo hacemos crecer: dirección de producto, marca, arquitectura de información, interfaz, contenido, desarrollo y visibilidad forman parte del mismo trabajo.
↗Navega la web

Recórrela, a tu ritmo.

Cada página tal y como la vive quien la usa: cambia de pestaña, desliza y pasa a móvil para ver cómo responde el diseño.

Estás en la web real · estepona.travel/
01Capítulo

Contexto y reto

Estepona tiene información de sobra; el reto era ordenarla y convertirla en una decisión útil. Estaba repartida entre carteles, redes sociales, portales genéricos, listados por actualizar, agendas dispersas y recomendaciones repetidas, y hacía falta responder a lo que alguien necesita saber cuando ya está allí, con dos días por delante y ganas de acertar.

a.Un visitante que decide sobre la marcha

La mayoría de las decisiones turísticas se toman esa misma mañana. El punto de partida era ese: alguien que abre el móvil y quiere saber qué pasa hoy, qué playa le conviene, dónde comer bien cerca y qué merece la pena si solo tiene una tarde.

b.Un destino con más capas de las que se cuentan

Estepona va mucho más allá de la playa. Hay más de setenta murales repartidos por la ciudad, un casco histórico que funciona como recorrido, siete torres vigía, jardines, mercados, mar y una vida cultural que cambia cada semana. Toda esa riqueza estaba ahí, lista para ordenarse y conectarse.

c.Condicionantes reales

El producto tenía que sostenerse solo: contenido que se mantiene actualizado con un equipo reducido, información fiable en tres idiomas, rendimiento en móvil con conexiones irregulares y una estructura capaz de crecer temporada tras temporada sobre la misma base.

estepona.travel/mapaEn vivo ↗

244 puntos10 categoríasMurales · playas · rutas · dónde comer

Estepona Travel — imagen 1 del proyecto
02Capítulo

Enfoque estratégico

Fuimos un paso más allá de la guía: diseñamos un sistema de decisión.

La diferencia es de fondo. Una guía acumula contenido y lo ordena por temas. Un sistema de decisión parte de lo que la persona quiere resolver y organiza todo lo demás alrededor. Por eso la experiencia de usuario se estructuró en torno a intenciones reales: descubrir, saber qué pasa, decidir y planificar.

a.Descubrir

La entrada al producto es visual y editorial. Fotografía grande, jerarquía tipográfica clara y bloques que muestran el destino tal como se vive. Quien llega con todo por descubrir recibe, antes que nada, una imagen del lugar.

b.Saber qué pasa

La agenda es el corazón del producto. Está en la primera pantalla, filtrada por hoy, mañana y fin de semana, porque esa es la pregunta que más se repite y merece una respuesta clara al primer vistazo.

c.Decidir

Gastronomía, playas, murales, rutas y experiencias se presentan con criterio y el contexto justo para elegir de un vistazo. El mapa funciona como capa transversal: mismo contenido, otra forma de entrarlo, esta vez por proximidad.

d.Planificar

El planificador ordena la visita por el tiempo real disponible —una mañana, un día, un fin de semana, una semana— y también para quien ya conoce Estepona y busca otra cosa. Es la traducción más directa de la idea de fondo: convertir información en decisión.

e.Tres idiomas, diseñados desde el primer boceto

Español, inglés y alemán se plantearon como parte de la arquitectura desde el principio: estructura de contenido, rutas, metadatos y agenda están pensados para convivir en tres idiomas desde el primer día.

Estepona Travel — imagen 2 del proyecto
03Capítulo

Identidad de marca

Diseñamos el logotipo de Estepona Travel como un mosaico. Las ocho letras de «estepona» nacen en contraforma, recortadas sobre veintidós teselas de color que traen el mar, los jardines, el sol y la cocina del lugar; la «o» es, literalmente, un sol. Debajo, «TRAVEL» se espacia con calma sobre el mismo eje.

La paleta del logotipo es también el código de color del producto: coral para la agenda, ocre para la gastronomía, azul y turquesa para el mar y las playas, verdes para jardines, naturaleza y rutas. La marca y la interfaz hablan el mismo idioma desde la primera tesela.

Identidad

Ocho letras, un mosaico de ciudad.

Diseñamos el logotipo como un mosaico: cada letra nace en contraforma, recortada sobre teselas que traen el mar, los jardines, el sol y la cocina del lugar. Debajo, TRAVEL se espacia con calma, al ritmo de un paseo.

estepona-travel_logo.svg
Pasa por encima del mosaico · toca una tesela para repintarla

01 / 05

Letras hechas de lugar

Veintidós teselas en seis colores componen las ocho letras. Pasa por encima para aislar cada pieza, toca para cambiar su color o baraja la paleta entera: el sistema admite cualquier combinación y la palabra sigue leyéndose.

Letras
8
Teselas
22
Colores del mosaico
6
Altura del mosaico
5,3x
Proporción
4,5 : 1

Guía de color

El color funciona como código. Cada tesela del logotipo es también una categoría del producto: el mismo coral marca la agenda en el mosaico y en la web.

Verde botánico· Marca de producto y fondos

HEX

#0D291A

RGB

13 · 41 · 26

CMYK

68 · 0 · 37 · 84

Contraste

15.6 : 1 / blanco

Proporción de uso

Verde botánico30%

Pizarra sobre blanco · 11.5 : 1 · AAA

La marca en uso

Qué hacer en Estepona | Estepona Travel
Icono de app y favicon
Agenda
Comer
Playa
Ruta
Mapa por categorías
Bolsa de tela
Personaje

Del primer trazo a la mejor guía de la ciudad.

Para la app VIVE Estepona creamos una compañera de viaje: una niña vestida de aldeana, el traje típico de la tierra, con una melena de geranios, la flor que llena de color las macetas del casco antiguo. Saluda, señala, propone planes y celebra contigo cada descubrimiento.

Hoja de animaciónEsc. 01 · Pers. 01
01 · ConceptoFotograma 0001
  1. 01Concepto

    Aldeana con flores en el pelo

    Dos símbolos de la ciudad en un solo personaje: el traje de aldeana, con su delantal y su falda bordada, y los geranios de las macetas. La melena se convierte en un ramo.

Hoja de modelo

16 poses, un mismo personaje

Ilustración de la niña de VIVE Estepona: Neutral
P01Neutral
Ilustración de la niña de VIVE Estepona: Hola
P02Hola
Ilustración de la niña de VIVE Estepona: Ven conmigo
P03Ven conmigo
Ilustración de la niña de VIVE Estepona: Señalando
P04Señalando
Ilustración de la niña de VIVE Estepona: Pensando
P05Pensando
Ilustración de la niña de VIVE Estepona: Sorprendida
P06Sorprendida
Ilustración de la niña de VIVE Estepona: Celebrando
P07Celebrando
Ilustración de la niña de VIVE Estepona: Con mapa
P08Con mapa
Ilustración de la niña de VIVE Estepona: Con móvil
P09Con móvil
Ilustración de la niña de VIVE Estepona: Tengo una idea
P10Tengo una idea
Ilustración de la niña de VIVE Estepona: Gastronomía
P11Gastronomía
Ilustración de la niña de VIVE Estepona: Con niños
P12Con niños
Ilustración de la niña de VIVE Estepona: Con farol
P13Con farol
Ilustración de la niña de VIVE Estepona: Noche
P14Noche
Ilustración de la niña de VIVE Estepona: Playa
P15Playa
Ilustración de la niña de VIVE Estepona: Historia
P16Historia

Un día en VIVE Estepona, plano a plano.

Cada pose responde a un momento de la app. El fondo de cada escena toma el color de su categoría en la marca, así el personaje y el producto hablan el mismo código.

  1. Esc. 01Bienvenida
    Ilustración de la niña de VIVE Estepona: Hola

    ¡Hola! Soy tu guía en Estepona.

    Saluda a cámara al abrir la app.

  2. Esc. 02Rutas
    Ilustración de la niña de VIVE Estepona: Con mapa

    Mira todo lo que tienes cerca.

    Despliega el mapa y señala lo cercano.

  3. Esc. 03Experiencias
    Ilustración de la niña de VIVE Estepona: Tengo una idea

    ¡Tengo un plan para hoy!

    Se le enciende la idea.

  4. Esc. 04Gastronomía
    Ilustración de la niña de VIVE Estepona: Gastronomía

    ¿Probamos la cocina de aquí?

    Presenta la cocina local.

  5. Esc. 05Playas
    Ilustración de la niña de VIVE Estepona: Playa

    Hoy toca playa.

    Sale lista con toalla y cesta.

  6. Esc. 06Historia
    Ilustración de la niña de VIVE Estepona: Historia

    Cada calle cuenta algo.

    Abre el libro de la ciudad.

  7. Esc. 07Agenda
    Ilustración de la niña de VIVE Estepona: Noche

    Y de noche, más planes.

    Enciende la agenda nocturna.

  8. Esc. 08Final
    Ilustración de la niña de VIVE Estepona: Celebrando

    ¡Plan cumplido!

    Celebra cada descubrimiento contigo.

Ilustración

Estepona, ilustrada pieza a pieza.

Cada pieza de la identidad de Estepona Travel está dibujada a medida: sus monumentos, su mar, su sol y las flores de sus calles. Un kit pensado para combinarse y crear escenas nuevas con el mismo trazo, para que cada pantalla se sienta Estepona al primer vistazo.

Estepona · Costa del Sol28 piezas

Monumentos

03
  • Torre del Reloj

    ET-01Torre del Reloj

  • Campanario

    ET-02Campanario

  • Orquidario

    ET-03Orquidario

Paisaje

07
  • Sol

    ET-04Sol

  • Nube I

    ET-05Nube I

  • Nube II

    ET-06Nube II

  • Mar

    ET-07Mar

  • Pájaro I

    ET-08Pájaro I

  • Pájaro II

    ET-09Pájaro II

  • Pájaro III

    ET-10Pájaro III

Flora

18
  • Flor 01

    ET-11Flor 01

  • Flor 02

    ET-12Flor 02

  • Flor 03

    ET-13Flor 03 ↻

  • Flor 04

    ET-14Flor 04 ↻

  • Flor 05

    ET-15Flor 05 ↻

  • Flor 06

    ET-16Flor 06 ↻

  • Flor 07

    ET-17Flor 07

  • Flor 08

    ET-18Flor 08 ↻

  • Flor 09

    ET-19Flor 09

  • Flor 10

    ET-20Flor 10

  • Flor 11

    ET-21Flor 11 ↻

  • Flor 12

    ET-22Flor 12

  • Flor 13

    ET-23Flor 13

  • Flor 14

    ET-24Flor 14

  • Flor 15

    ET-25Flor 15 ↻

  • Flor 16

    ET-26Flor 16 ↻

  • Hoja

    ET-27Hoja

  • Hojas

    ET-28Hojas

Estepona Travel — imagen 3 del proyecto
04Alcance

Qué hicimos.

01

Producto y estrategia

  • concepto y dirección de producto
  • definición del modelo de contenido y de las intenciones de uso
  • priorización funcional y hoja de ruta de evolución
  • criterios editoriales y de calidad del contenido

02

Marca y dirección de arte

  • identidad visual del producto y sistema gráfico
  • paleta cromática funcional aplicada a categorías y contenidos
  • dirección de arte fotográfica y criterio de selección de imagen
  • tono editorial y voz del producto

03

Arquitectura de información y UX

  • estructura de secciones por intención de uso
  • navegación, taxonomías y sistema de filtrado
  • diseño del planificador por tiempo disponible
  • mapa interactivo por capas como acceso alternativo al contenido

04

Interfaz y diseño responsive

  • sistema de interfaz, componentes y jerarquías de contenido
  • composiciones editoriales asimétricas con imagen protagonista
  • diseño móvil como escenario principal de uso
  • estados, listados, fichas y páginas de detalle

05

Contenido y agenda

  • redacción y edición del contenido del destino en tres idiomas
  • sistema de agenda con eventos, sesiones y fechas
  • normalización, deduplicación y control de publicación
  • criterio de imágenes aprobadas para cada evento

06

Desarrollo y crecimiento

  • desarrollo e implementación completa del producto
  • automatización de procesos de ingesta y mantenimiento
  • SEO técnico, datos estructurados e internacionalización
  • evolución continua a partir del uso real
Estepona Travel — imagen 4 del proyecto
05Capítulo

Desarrollo visual del proyecto

La dirección visual se inspira en las revistas de viaje. Estepona Travel se construyó como una pieza editorial contemporánea: imágenes generosas, jerarquía clara y la mirada de quien cuenta un lugar e invita a recorrerlo.

La fotografía es la identidad. Manda sobre todo lo demás y ocupa el espacio que necesita: aperturas a pantalla completa, imágenes grandes con aire alrededor y composiciones asimétricas que rompen la retícula previsible. El texto acompaña a la imagen y la ordena.

El color es funcional. El verde botánico sostiene la marca y conecta con el carácter del lugar —Estepona se reconoce por sus jardines y sus calles con flores— y el resto de la paleta trabaja como código: azul y aguamarina para el mar y las playas, verde para naturaleza y rutas, ocre y coral para agenda, gastronomía y contenidos con temperatura. El contraste entre fondos claros y masas de verde profundo marca el ritmo de lectura y separa el descubrimiento pausado de la información útil e inmediata.

06Capítulo

La agenda como sistema vivo

La agenda es la parte del producto que late cada día, y por eso se diseñó como un sistema completo.

Cada evento tiene entidad propia: fechas, sesiones, ubicación, categoría, imagen aprobada y página de detalle con datos estructurados. Sobre esa base funcionan los filtros que de verdad usa la gente —hoy, mañana, este fin de semana— y la navegación por meses para quien planifica con antelación.

Detrás hay un trabajo silencioso que sostiene la promesa: ingesta y normalización de la información, deduplicación de eventos que llegan repetidos desde distintas fuentes, control de qué se publica y cuándo, y una revisión editorial que decide qué merece estar. Cada fecha exacta y cada evento único suman confianza, y esa confianza es la que invita a volver.

07Capítulo

Arquitectura técnica

El producto se construyó desde la base, con la misma lógica con la que se diseñó: estructura primero, superficie después.

Estepona Travel funciona sobre una arquitectura pensada para contenido vivo, tres idiomas y crecimiento continuo. Cada decisión técnica responde a una necesidad del producto y de su experiencia de usuario: rendimiento en móvil, contenido bien modelado, rutas limpias por idioma y una capa de datos estructurados que permite que la información del destino se entienda también fuera de la web.

a.Base tecnológica

  • 01Next.js — arquitectura del producto, rutas por idioma y renderizado orientado a rendimiento y visibilidad en un sitio con mucho contenido y actualización constante
  • 02TypeScript — modelo de contenido tipado para eventos, sesiones, lugares y categorías; solidez y fiabilidad en un sistema que crece
  • 03Base de datos relacional — MySQL/MariaDB como base del contenido del destino y de la agenda: eventos, fechas, ubicaciones, categorías y relaciones entre piezas
  • 04Sistema de agenda — ingesta, normalización, deduplicación y publicación controlada para mantener la información fiable día a día
  • 05Internacionalización — español, inglés y alemán integrados en la estructura del contenido, las rutas y los metadatos
  • 06SEO técnico y datos estructurados — marcado de eventos, lugares y contenidos para que el destino sea legible por personas, buscadores y asistentes
  • 07Panel de gestión a medida — tráfico, negocios, agenda, solicitudes y archivo audiovisual en un mismo lugar, con búsqueda rápida para moverse por todo el producto
  • 08Guía con inteligencia artificial — un agente que atiende a los visitantes por WhatsApp con la agenda, los lugares y los negocios del destino en tiempo real
Por dentro

Un panel a la medida del negocio.

La guía turística de Estepona se ve en la web, pero se gestiona aquí: un panel hecho a medida con agenda automática, directorio comercial, archivo audiovisual y una guía con inteligencia artificial que atiende por WhatsApp.

estepona.travel/admin
Panel de control de Estepona Travel con tráfico de la web, negocios y eventos publicados y tareas pendientes

01 / 06

Todo el negocio, de un vistazo

Tráfico de la web, negocios y eventos publicados y lo que pide atención hoy, reunidos en una sola pantalla para que el equipo decida rápido.

  • Next.js
  • Node.js
  • Base de datos propia
08Capítulo

Sistema, replicabilidad y profundidad

Estepona Travel es un modelo de producto para entender un destino.

La estructura —intenciones de uso, agenda viva, mapa por capas, planificador por tiempo disponible, contenido multiidioma y datos estructurados— es replicable. El contenido cambia; la lógica permanece. Eso convierte el proyecto en algo más que un caso concreto: es un sistema que puede sostener otros lugares con la misma profundidad.

La coherencia se mantiene porque todas las capas se diseñaron juntas. La misma decisión editorial que ordena una ficha de restaurante ordena la agenda, el mapa y el planificador. La marca vive más allá del logotipo: en la manera de nombrar las cosas, en qué se muestra primero y en qué se elige contar.

09Capítulo

Visibilidad y crecimiento

El crecimiento se trabajó desde el diseño, desde el primer boceto. La estructura de contenidos, la arquitectura de URLs, el marcado de eventos y lugares, el rendimiento en móvil y la coherencia entre los tres idiomas son decisiones de producto que también son decisiones de visibilidad.

El recorrido ha sido progresivo y sigue abierto: de las primeras visitas orgánicas a cientos de clics diarios en sus mejores jornadas, con un comportamiento muy ligado a la estacionalidad del destino y a lo que ocurre cada semana en la ciudad. Es una trayectoria en curso, con mucho camino por delante.

10Resultado

Resultado y transformación conseguida

El resultado es un producto digital que responde preguntas concretas y ayuda a decidir.

  1. 01una entrada visual y editorial que muestra el destino tal como se vive
  2. 02una agenda viva con filtros por hoy, mañana y fin de semana, y página propia para cada evento
  3. 03un mapa por capas que permite descubrir por proximidad además de por categoría
  4. 04contenido de gastronomía, playas, rutas, murales, historia y experiencias con criterio editorial
  5. 05un planificador que ordena la visita según el tiempo real disponible
  6. 06una estructura multiidioma en español, inglés y alemán
  7. 07una base técnica con contenido modelado, datos estructurados y automatización de mantenimiento
  8. 08un sistema preparado para seguir creciendo temporada tras temporada
11Capítulo

La web

Estepona.travel es el producto entero en una sola superficie. La portada abre con lo que está pasando hoy y desciende por el destino como quien lo recorre: qué comer, qué rutas hay, dónde está cada cosa, qué ocurre este mes y cuánto tiempo tienes para vivirlo.

Cada bloque responde a una intención distinta y todos comparten el mismo lenguaje: fotografía grande, jerarquía clara, color con función y textos que dicen lo justo. La lectura fluye con naturalidad entre el descubrimiento pausado y la información inmediata.

Es un producto pensado para el móvil y para el momento real de uso: alguien de pie, en la calle, con poco tiempo y una pregunta sencilla que merece una respuesta buena.

  • 01Inicio

  • 02Agenda

  • 03Mapa

Paleta

Toca un color para copiar su código

Aprendimos que…

Un destino se comunica mejor cuando ayuda a decidir mejor.

Estepona Travel demuestra que un producto digital puede nacer de una idea propia y sostenerse con criterio: concebido, diseñado, construido y mantenido desde el mismo sitio. La parte visible —la fotografía, la tipografía, el ritmo editorial— brilla porque debajo hay una estructura que la sostiene: contenido modelado, agenda que se mantiene viva y decisiones técnicas tomadas al servicio de la experiencia. Aquí hay mucho más que una web.

Siguiente caso2026

Diseño web UX/UI · Branding · Visualización 3D

Grupo La Palma