Necesidad
Fisioterapia, vuelta al deporte y entrenamiento personal forman un recorrido relacionado, pero podían percibirse como servicios aislados. El espacio y las tarifas también necesitaban presencia comercial.
Madrid SportClinic
Una interfaz deportiva de alto impacto que conecta fisioterapia, readaptación, entrenamiento, instalaciones y reserva en una progresión continua.
portfolio.local/demos/madrid-sport-clinic
- Hero inmersivo
- Tres líneas de servicio
- Galería de instalaciones
- Progresión deportiva
- Sector
- Fisioterapia deportiva
- Contribución
- Estrategia · UX/UI · Motion front-end
01
El reto comercial
Tratamiento y vuelta a la actividad forman una sola historia.
Objetivo
Convertir tratamiento y vuelta a la actividad en una progresión visible, con instalaciones, método, precios mostrados y contacto cerca de cada decisión.
Respuesta diseñada
Diseñé la estrategia de contenido, el hero, el sistema de tarjetas, la galería, la jerarquía de precios, el responsive y el movimiento vinculado al scroll.
Construido con
HTML5CSS3JavaScriptIntersectionObserverrequestAnimationFrameResponsive UI
Validado con
Playwright QA1440 / 390 px
02
Evidencia de interfaz
La solución en pantalla
01
La vuelta al movimiento define el hero
Imagen, mensaje y acciones construyen una primera pantalla inmediata que comunica actividad y acceso a reserva.
- Propuesta comprensible
- Dos rutas de acción
- Datos clave visibles
02
El centro forma parte de la decisión
La galería rompe la secuencia de tarjetas y sitúa las instalaciones antes del método y las tarifas.
- Cambio de ritmo editorial
- Composición adaptada a móvil
- Contexto visual antes del precio
03
Recorrido comercial
De recuperar capacidad a volver al deporte.
- 01
Activar
El hero conecta problema, movimiento y reserva.
- 02
Elegir
Tres servicios ordenan el recorrido deportivo.
- 03
Conocer
Instalaciones y método aportan contexto.
- 04
Reservar
Tarifas y contacto cierran la decisión.
Capacidades demostradas
Impacto visual con una ruta comercial inmediata.
El proyecto combina composición, fotografía, jerarquía de servicios y movimiento para demostrar una experiencia deportiva memorable y comprensible.
Comentar un proyecto04
Construcción verificable
La ingeniería queda disponible, sin frenar el relato.
Solución
La narrativa los presenta como fases de una misma vuelta a la actividad.
Solución
Cada bloque cambia de escala y aparece en el orden de decisión.
Solución
El scroll personalizado se limita a puntero fino y móvil conserva desplazamiento nativo.
Funciones construidas
Interacciones con una función concreta.
- Cabecera fija
- Progreso de scroll
- Tres tarjetas de servicio
- Galería de instalaciones
- Método en tres pasos
- Dos tarjetas de precio
- CTA telefónica y email
05
Calidad de implementación
Una interfaz rápida de leer y difícil de confundir.
Responsive
Hero, galería, precios y CTAs cambian de composición para conservar impacto y lectura a 390 px.
Interacción
Reveals, progreso y parallax ligero acompañan la lectura sin sustituir la navegación.
Rendimiento
La implementación limita el JavaScript a scroll, observación y navegación; no incorpora una aplicación pesada.
Entregado
- Hero y navegación responsive
- Sistema de tres servicios
- Galería y método de trabajo
- Presentación de tarifas y contacto
¿Tu oferta también necesita claridad?
Diseñemos una web que ayude a entender, confiar y actuar.
Cuéntame qué vende el negocio, qué contenido existe y dónde se atasca hoy la decisión. Definiremos el alcance antes de presupuestar.
Solicitar presupuesto