Angela Ulanova

Context

Present online Pilates and stretching classes as a clear, personal practice. Visitors should see the coach in motion, understand the class formats and prices, then pick the way they prefer to get in touch.

The challenge

Balance atmosphere with information. A large video still sets the mood but must never hide the class details. Five language versions keep one character even though headings and interface labels differ in length.

What we did

1. Practice first, details second

   The first screen introduces the movement and the main actions. Further down, the site covers classes, prices, Angela’s story and contacts - five sections in Russian, English, German, French and Spanish.

2. Typography for two writing systems

   The Russian text pairs an expressive Cormorant with a neutral Inter. In English, Newsreader carries the editorial voice and DM Sans the interface. Cinzel is reserved for the name.

3. Photo and video as content

   We worked with the client’s own material: photos are cropped in the layout, and videos were prepared for the web with poster frames. The images are shown as shot - no retouching claims.

4. Motion without losing control

   Gentle reveals give the page its rhythm. Hover effects only apply on devices with a precise pointer, and reduced-motion settings switch off anything non-essential.

What we built

1. Offer and structure

   We split the content into home, classes, prices, about Angela and contacts, and mapped the path from meeting the coach to choosing a format and getting in touch.

2. Visual system and material

   We set the palette, typography, sizes, grid and spacing. The client’s real photos sit in the composition with layout-based cropping; videos come with poster frames for fast loading and playback.

3. Multilingual build

   We built 25 pages in five languages with a responsive menu and a language switcher, plus class and pricing sections and a choice of style and format. The contact flow writes a ready-made message for Telegram, WhatsApp or email; the class time is then agreed with the coach directly.

4. Motion and hosting

   We added gentle reveals, reduced-motion support and pointer-aware hover behaviour. The site ships with local assets and fonts and runs on ulanova.fit over HTTPS.

Visual system

A warm sand background and light surfaces leave room for the photography. Sage marks the actions, dark text holds the hierarchy. The sizes below refer to the live site, not to this case study.

Measured at

English version · viewport 1180 × 757 CSS px

First screen

Newsreader 300 · 96 px / 96 px

Intro text

DM Sans · 18 px / 29.25 px

Body text

DM Sans · 16 px / 27.2 px

Section headings

Newsreader 300 · 40 px / 46 px

Feature headings

Newsreader 300 · 28 px / 36.4 px

Inner page H1

Newsreader · 72 px / 76.32 px

Name in the header

Cinzel · 20 px / 22 px

Spacing scale

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

Sizes were checked against the English version of the live site at the viewport above. Colours were verified in the CSS; responsive sizes change with screen width.

Journeys and material

Home introduces the approach → classes help choose a format → prices lay out the offer → contacts give the next step. Switching between RU / EN / DE / FR / ES keeps the structure, and on narrow screens everything stacks into a single column.

Promotion

We optimised the site for search, set up Yandex Direct and Google Ads accounts, and launched advertising and search promotion.

The result

ulanova.fit is live: 25 pages in Russian, English, German, French and Spanish. One visual system ties together class information, prices, photos and practice videos. Visitors choose a style and format, then arrange their session personally. We handled structure, design, content assembly, development and web-ready media.

Tools and build

HTML · CSS · framework-free JavaScript · Vite build · animations with IntersectionObserver and requestAnimationFrame · self-hosted fonts · SVG · MP4 video · language versions · Telegram and WhatsApp