Angela Ulanova

Контекст

Представить онлайн-занятия пилатесом и растяжкой как понятную личную практику. Посетитель должен увидеть тренера в движении, разобраться в форматах занятий и стоимости, затем выбрать удобный способ связи.

Задача

Удержать баланс между атмосферой и содержанием. Большой видеокадр задаёт настроение, но не должен скрывать информацию о занятиях. Пять языковых версий сохраняют один характер при разной длине заголовков и интерфейсных подписей.

Решения

1. Сначала практика, затем подробности

   Первый экран знакомит с движением и основными действиями. Дальше сайт раскрывает занятия, цены, информацию об Анжеле и контакты: пять разделов на русском, английском, немецком, французском и испанском языках.

2. Типографика с двумя языковыми системами

   Для русского текста соединены выразительный Cormorant и нейтральный Inter. В английской версии Newsreader отвечает за редакционный тон, DM Sans — за интерфейс. Cinzel используется в написании имени.

3. Фото и видео как содержание

   Использованы присланные материалы: фотографии кадрируются средствами вёрстки; видео подготовлены для сайта с постерами. Снимки сохраняют исходное изображение, без заявлений о ретуши.

4. Движение без потери управления

   Мягкое появление блоков поддерживает ритм страницы. Эффекты наведения применяются на устройствах с точным указателем; reduced motion убирает необязательное движение.

Что сделали

1. Предложение и структура

   Разделили содержание на главную, занятия, цены, информацию об Анжеле и контакты. Продумали последовательность знакомства с тренером, выбора формата и следующего обращения.

2. Визуальная система и материалы

   Настроили палитру, типографику, размеры, сетку и отступы. Реальные фото клиента включили в композицию с кадрированием средствами вёрстки; видео подготовили с постерами для загрузки и просмотра.

3. Многоязычная разработка

   Реализовали 25 страниц на пяти языках, адаптивное меню и переключатель языка. Подготовили разделы занятий и тарифов, выбор направления и формата. Контактный сценарий собирает готовый текст для Telegram, WhatsApp или почты; время занятия согласуется с тренером в переписке.

4. Движение и размещение

   Добавили мягкие появления блоков, поддержку reduced motion и поведение для точного указателя. Собрали сайт с локальными материалами и шрифтами, разместили его на ulanova.fit с доступом по HTTPS.

Визуальная система

Тёплый песочный фон и светлые поверхности оставляют место фотографиям. Шалфейный выделяет действия, тёмный текст держит иерархию. Размеры ниже относятся к реализованному сайту, а не к размерам этого кейса.

Измерение

Английская версия · viewport 1180 × 757 CSS px

Первый экран

Newsreader 300 · 96 px / 96 px

Вводный текст

DM Sans · 18 px / 29.25 px

Основной текст

DM Sans · 16 px / 27.2 px

Заголовки разделов

Newsreader 300 · 40 px / 46 px

Заголовки преимуществ

Newsreader 300 · 28 px / 36.4 px

Внутренний H1

Newsreader · 72 px / 76.32 px

Название в шапке

Cinzel · 20 px / 22 px

Шкала отступов

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

Размеры сверены с английской версией действующего сайта при указанном viewport. Цвета проверены по CSS; адаптивные размеры меняются в зависимости от ширины экрана.

Сценарии и материалы

Главная знакомит с подходом → раздел занятий помогает выбрать формат → цены раскрывают предложение → контакты дают следующий шаг. Переключение RU / EN / DE / FR / ES сохраняет структуру, а на узком экране материалы выстраиваются в одну колонку.

Продвижение

Провели SEO-оптимизацию, настроили личные кабинеты Яндекс Директ и Google Ads, запустили рекламу и продвижение сайта в поиске.

Что реализовано

Запущен ulanova.fit: 25 страниц на русском, английском, немецком, французском и испанском языках. Общая визуальная система объединяет информацию о занятиях, цены, фото и видео практики. Посетитель выбирает направление и формат, затем переходит к личному согласованию занятия. Выполнены структура, дизайн, контентная сборка, разработка и подготовка материалов для веба.

Инструменты и реализация

HTML · CSS · JavaScript без фреймворков · сборка Vite · анимации на IntersectionObserver и requestAnimationFrame · локальные шрифты · SVG · MP4-видео · языковые версии · Telegram и WhatsApp