Angela Ulanova

Contexto

Presentar las clases online de pilates y estiramientos como una práctica clara y cercana. Quien visita la web debe ver a la entrenadora en movimiento, entender los formatos y los precios, y elegir cómo prefiere contactar.

El reto

Equilibrar ambiente e información. Un gran fotograma de vídeo marca el tono, pero nunca puede tapar los detalles de las clases. Las cinco versiones de idioma mantienen el mismo carácter aunque los títulos y los textos de la interfaz cambien de longitud.

Qué hicimos

1. Primero la práctica, después los detalles

   La primera pantalla presenta el movimiento y las acciones principales. Más abajo vienen las clases, los precios, la historia de Angela y el contacto: cinco secciones en ruso, inglés, alemán, francés y español.

2. Tipografía para dos alfabetos

   En ruso se combinan la expresiva Cormorant y la neutra Inter. En inglés, Newsreader aporta el tono editorial y DM Sans la interfaz. Cinzel se reserva para el nombre.

3. Foto y vídeo como contenido

   Trabajamos con el material de la clienta: las fotos se recortan en la maquetación y los vídeos se prepararon para la web con imágenes de portada. Las imágenes se muestran tal como se tomaron, sin promesas de retoque.

4. Movimiento sin perder el control

   Apariciones suaves dan ritmo a la página. Los efectos al pasar el cursor solo se activan con un puntero preciso, y la opción de reducir el movimiento desactiva todo lo que no es esencial.

Qué desarrollamos

1. Oferta y estructura

   Organizamos el contenido en inicio, clases, precios, sobre Angela y contacto, y trazamos el recorrido desde conocer a la entrenadora hasta elegir formato y escribirle.

2. Sistema visual y material

   Definimos la paleta, la tipografía, los tamaños, la retícula y los espacios. Las fotos reales de la clienta se integran en la composición con recortes de maquetación; los vídeos llevan imagen de portada para cargar y reproducirse rápido.

3. Desarrollo multilingüe

   Hicimos 25 páginas en cinco idiomas, con menú responsive y selector de idioma, secciones de clases y tarifas, y la elección de disciplina y formato. La vía de contacto redacta un mensaje listo para Telegram, WhatsApp o correo; el horario se acuerda luego directamente con la entrenadora.

4. Movimiento y alojamiento

   Añadimos apariciones suaves, compatibilidad con el modo de movimiento reducido y efectos según el tipo de puntero. La web lleva sus propios archivos y fuentes y funciona en ulanova.fit con HTTPS.

Sistema visual

Un fondo arena cálido y superficies claras dejan protagonismo a las fotos. El verde salvia marca las acciones y el texto oscuro sostiene la jerarquía. Los tamaños de abajo corresponden a la web publicada, no a este caso.

Medido a

Versión en inglés · viewport 1180 × 757 px CSS

Primera pantalla

Newsreader 300 · 96 px / 96 px

Texto de entrada

DM Sans · 18 px / 29.25 px

Texto principal

DM Sans · 16 px / 27.2 px

Títulos de sección

Newsreader 300 · 40 px / 46 px

Títulos de ventajas

Newsreader 300 · 28 px / 36.4 px

H1 de páginas interiores

Newsreader · 72 px / 76.32 px

Nombre en la cabecera

Cinzel · 20 px / 22 px

Escala de espaciado

8 · 16 · 24 · 40 · 64 · 96 · 128 · 192 px

Los tamaños se comprobaron en la versión inglesa de la web publicada con el viewport indicado. Los colores están verificados en el CSS; los tamaños responsive cambian según el ancho de pantalla.

Recorridos y material

El inicio presenta el enfoque → las clases ayudan a elegir formato → los precios muestran la oferta → el contacto da el siguiente paso. Cambiar entre RU / EN / DE / FR / ES mantiene la estructura, y en pantallas estrechas todo se ordena en una sola columna.

Promoción

Optimizamos la web para buscadores, configuramos las cuentas de Yandex Direct y Google Ads y pusimos en marcha la publicidad y la promoción en buscadores.

El resultado

ulanova.fit ya está online: 25 páginas en ruso, inglés, alemán, francés y español. Un mismo sistema visual reúne la información de las clases, los precios, las fotos y los vídeos de la práctica. Quien visita la web elige disciplina y formato y después acuerda su sesión en persona. Nos encargamos de la estructura, el diseño, el montaje de contenidos, el desarrollo y la preparación de los medios.

Herramientas y desarrollo

HTML · CSS · JavaScript sin frameworks · build con Vite · animaciones con IntersectionObserver y requestAnimationFrame · fuentes alojadas localmente · SVG · vídeo MP4 · versiones por idioma · Telegram y WhatsApp