Angela Ulanova

Contexte

Présenter des cours en ligne de Pilates et de stretching comme une pratique claire et personnelle. Le visiteur doit voir la coach en mouvement, comprendre les formats et les tarifs, puis choisir le moyen de contact qui lui convient.

L’enjeu

Tenir l’équilibre entre ambiance et information. Une grande image vidéo installe l’atmosphère sans jamais masquer les détails des cours. Les cinq versions linguistiques gardent le même caractère, malgré des titres et des libellés de longueurs différentes.

Nos choix

1. La pratique d’abord, les détails ensuite

   Le premier écran montre le mouvement et les actions principales. Plus bas viennent les cours, les tarifs, le parcours d’Angela et le contact - cinq rubriques en russe, anglais, allemand, français et espagnol.

2. Une typographie pour deux alphabets

   En russe, l’expressive Cormorant s’associe à la neutre Inter. En anglais, Newsreader porte le ton éditorial et DM Sans l’interface. Cinzel est réservée au nom.

3. La photo et la vidéo comme contenu

   Nous avons travaillé avec les visuels fournis par la cliente : les photos sont recadrées dans la mise en page, les vidéos préparées pour le web avec des images d’affiche. Les images restent telles qu’elles ont été prises, sans promesse de retouche.

4. Du mouvement sans perte de contrôle

   Des apparitions douces donnent son rythme à la page. Les effets au survol ne s’activent qu’avec un pointeur précis, et le réglage « réduire les animations » coupe tout ce qui n’est pas essentiel.

Notre réalisation

1. Offre et structure

   Nous avons organisé les contenus en accueil, cours, tarifs, à propos d’Angela et contact, et pensé le parcours qui va de la découverte de la coach au choix du format puis à la prise de contact.

2. Système visuel et contenus

   Nous avons défini la palette, la typographie, les tailles, la grille et les espacements. Les vraies photos de la cliente s’intègrent à la composition grâce au recadrage en mise en page ; les vidéos ont des images d’affiche pour un chargement et une lecture rapides.

3. Un développement multilingue

   Nous avons réalisé 25 pages en cinq langues, avec menu responsive et sélecteur de langue, des rubriques cours et tarifs, et le choix de la discipline et du format. Le parcours de contact rédige un message prêt à envoyer par Telegram, WhatsApp ou e-mail ; l’horaire se fixe ensuite directement avec la coach.

4. Animations et hébergement

   Nous avons ajouté des apparitions douces, la prise en charge des animations réduites et des effets de survol adaptés au pointeur. Le site embarque ses propres fichiers et polices et tourne sur ulanova.fit en HTTPS.

Système visuel

Un fond sable chaud et des surfaces claires laissent toute leur place aux photos. Le vert sauge signale les actions, le texte foncé tient la hiérarchie. Les tailles ci-dessous concernent le site en ligne, pas cette étude de cas.

Mesuré à

Version anglaise · viewport 1180 × 757 px CSS

Premier écran

Newsreader 300 · 96 px / 96 px

Texte d’introduction

DM Sans · 18 px / 29.25 px

Texte courant

DM Sans · 16 px / 27.2 px

Titres de section

Newsreader 300 · 40 px / 46 px

Titres des points forts

Newsreader 300 · 28 px / 36.4 px

H1 des pages intérieures

Newsreader · 72 px / 76.32 px

Nom dans l’en-tête

Cinzel · 20 px / 22 px

Échelle d’espacement

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

Les tailles ont été vérifiées sur la version anglaise du site en ligne au viewport indiqué. Les couleurs sont contrôlées dans le CSS ; les tailles responsives varient avec la largeur d’écran.

Parcours et contenus

L’accueil présente l’approche → la rubrique cours aide à choisir un format → les tarifs détaillent l’offre → le contact donne la suite. Le passage entre RU / EN / DE / FR / ES conserve la structure, et sur petit écran tout s’aligne sur une seule colonne.

Promotion

Nous avons optimisé le site pour le référencement, configuré les comptes Yandex Direct et Google Ads, puis lancé la publicité et la promotion dans les moteurs de recherche.

Le résultat

ulanova.fit est en ligne : 25 pages en russe, anglais, allemand, français et espagnol. Un même système visuel relie les informations sur les cours, les tarifs, les photos et les vidéos. Le visiteur choisit une discipline et un format, puis convient de sa séance directement. Structure, design, mise en forme des contenus, développement et préparation des médias : tout a été réalisé par nos soins.

Outils et réalisation

HTML · CSS · JavaScript sans framework · build Vite · animations avec IntersectionObserver et requestAnimationFrame · polices hébergées localement · SVG · vidéo MP4 · versions linguistiques · Telegram et WhatsApp