PROGRAMAS INTERACTIVOS
Cuatro pestañas actualizan imagen, objetivos, duración y nivel sin abandonar el contexto.
← VOLVER AL PORTFOLIO05 / 05 / 2026
DIRECCIÓN VISUAL / INTERACCIÓN / FRONT-END
URBANGYM PRO
UNA EXPERIENCIA FITNESS CON MÁS CARÁCTER, CONTEXTO Y CONTROL PARA EL USUARIO.
Rediseñé la web completa de UrbanGym para convertir una landing básica en una experiencia editorial, bilingüe e interactiva que comunica método, comunidad y rendimiento.
- ROL
- UX/UI DESIGN & FRONT-END
- ENFOQUE
- MARCA / INTERACCIÓN / CONVERSIÓN
- STACK
- HTML / CSS / JAVASCRIPT
- AÑO
- 2026
DIAGNÓSTICO
EL PRODUCTO NECESITABA DEJAR DE PARECER UNA PLANTILLA FITNESS.
La versión anterior agrupaba información correcta, pero la presentaba mediante bloques y tarjetas muy previsibles. Faltaban una narrativa de marca, contraste entre secciones y motivos para explorar.
El rediseño parte de una promesa más concreta: entrenamiento con intención, seguimiento y progresión medible.
- Jerarquía editorial más reconocible.
- Fotografía con una dirección consistente.
- Menos tarjetas y más composición.
- Acciones claras sin repetir el mismo patrón.
DIRECCIÓN VISUAL
FUERZA VISUAL SIN CONVERTIR LA EXPERIENCIA EN UN CLICHÉ.
La identidad combina negro, blanco cálido y un verde ácido muy contenido. La tipografía condensada aporta energía, mientras la retícula y las líneas técnicas ordenan la información.
La fotografía se usa como contexto y atmósfera. Evité brillos, fondos futuristas y recursos que hicieran parecer la web un concepto generado sin criterio.
ARQUITECTURA
UNA PÁGINA QUE SE PUEDE EXPLORAR, NO SOLO RECORRER.
AGENDA POR DÍAS
El usuario consulta horarios, plazas y coach desde una navegación compacta y accesible.
MEMBRESÍAS COMPARABLES
El selector mensual o anual actualiza precios y mantiene visibles las diferencias clave.
RESERVA CONTEXTUAL
Las acciones abren un diálogo de primera sesión desde los momentos de mayor intención.
EXPERIENCIA
EL RITMO VISUAL ACOMPAÑA EL RITMO DEL ENTRENAMIENTO.
Los reveals, cambios de pestaña, microinteracciones y el ligero movimiento del hero añaden respuesta sin ralentizar la navegación.
El movimiento se reduce automáticamente cuando el sistema lo solicita y desaparece donde podría perjudicar la estabilidad en móvil.
RESULTADO
UNA MARCA MÁS CREÍBLE Y UNA WEB CON MÁS RAZONES PARA INTERACTUAR.
La nueva experiencia equilibra impacto, información y utilidad: presenta el método, permite explorar programas y horarios, muestra al equipo y conduce hacia una sesión de prueba.
La implementación mantiene dos idiomas, navegación por teclado, estados accesibles, responsive completo y un enlace claro de regreso al portfolio.
- ES / EN en tiempo real.
- Menú y layout responsive.
- Pestañas accesibles y agenda dinámica.
- Preferencias de movimiento respetadas.
- Assets optimizados para web.