Практика / разработка сайта / 2026
Yurevich FitКак собирался сайт тренера
Личное сопровождение требовалось объяснить через структуру, образ и действие. Разбираю разработку сайта Дмитрия Юревича: от первых концепций до анимации, мобильной версии и переноса на его хостинг.
Здесь можно попробовать механики проекта: от прокрутки кадров до колоды карточек, объёмных папок и видеоотзывов. Рядом — решения, ошибки и способ их проверки.
Перейти к живым примерам- Задача
- Личное сопровождение → понятный сайт
- Работа
- Структура / образ / движение / код
- Основа
- Реальные материалы + генеративные сцены
- Статус проекта
- Сайт опубликован; приёмка продолжается
01 / CONCEPT
От содержания к характеру
У сайта уже была история. Новая версия должна была сохранить её и яснее показать человека, подход и форматы работы.
Сначала разобраться в том, что уже есть
У Дмитрия был работающий сайт с биографией, программами, историями клиентов и видеоотзывами. Я начал с просмотра этих материалов и пути посетителя. Нужно было понять, что человек узнаёт о тренере, как сравнивает форматы и куда попадает после решения обратиться.
Содержание уже давало основу для новой версии. При этом длинные описания затрудняли сравнение услуг, а первая консультация вела во внешнюю анкету. В одном из начальных просмотров не отобразилась фотография первого экрана. Я зафиксировал это как наблюдение конкретной проверки; причины и частоту такого поведения тогда не устанавливал.
Исходная задача постепенно получила простую последовательность: узнать свою ситуацию, понять подход Дмитрия, увидеть подтверждения его опыта, выбрать формат и начать разговор. Эта последовательность определила, какие страницы и действия нужны первому выпуску. Магазин курсов, личный кабинет и CRM в него не входили.
Три концепции задали диапазон поиска
Для начала подготовил три визуальных направления. «Сила и система» строилась на графите, белой крупной типографике и зелёном акценте. «Личная практика» предлагала светлое редакционное поле и более спокойный характер. «Персональная стратегия» использовала глубокий зелёный и развёрнутую композицию вокруг фотографии.
Мы выбрали первый вариант. Он стал основой начального прототипа; затем появилась следующая рабочая версия с уточнённым заданием и более подробной структурой. Предыдущую реализацию я сохранил отдельно, чтобы изменения можно было сравнить и вернуть нужное решение.
Растровые концепции помогали обсуждать иерархию и настроение. При переносе в код я заново собирал тексты, действия и адаптацию. Декоративные надписи, добавленные генерацией, не становились утверждёнными фактами, а случайные детали изображения не задавали поведение интерфейса.
STUDY 01 / CONCEPTS
Три направления в одной галерее
Три направления для сравнения композиции, характера и акцентов.
Ранние генеративные концепции помогли выбрать направление. Финальный сайт собирался отдельно.
У предложения появился центр
В новой структуре основным продуктом стала FORM 12: двенадцать недель персонального сопровождения. Главная должна была объяснить её смысл и помочь человеку соотнести программу со своей жизнью. Состав работы, этапы и подробные ответы получили отдельную страницу.
Другие направления также разнесли по собственным страницам. На главной они остались вариантами под конкретную ситуацию. Отдельно объяснили связь FORM 12 и CONTROL, чтобы продолжение работы не выглядело ещё одним несвязанным предложением.
Основное действие ведёт прямо в Telegram Дмитрия. Подробная анкета может появиться после знакомства, когда человеку уже понятно, с кем и о чём он разговаривает. Для начала общения сайт не требует заполнить обязательную форму.
02 / MOTION
Движение получает смысл
Один жест знакомит с тренером. Другая сцена собирает знак программы. У каждой анимации — собственный сценарий и способ управления.
Первый экран стал жестом знакомства
Я хотел передать личное приглашение к работе. Для первого экрана появилась сцена, в которой Дмитрий поворачивается к посетителю и протягивает руку. На компьютере движение связано с прокруткой: человек сам проходит короткую последовательность и приходит к финальной композиции с предложением и кнопками.
Имя, описание и действия остались настоящими HTML-элементами поверх сцены. Их можно читать, выделять и использовать независимо от изображения. На телефоне работает отдельная статичная композиция: она рассчитана на узкий экран и не загружает настольную последовательность кадров.
Для людей с включённым уменьшением движения предусмотрен статичный вариант. При ошибке подготовки сцены остаётся резервное изображение. Эти состояния стали частью первого экрана вместе с основным анимированным сценарием.
Движение пришлось отбирать отдельно от картинки
Для сцены сравнивали несколько видеогенераций, в том числе Kling и Seedance. Хороший первый кадр ещё не позволял судить о повороте, взгляде и протянутой руке. В одном отклонённом варианте была неверная анатомия кисти; в другом Дмитрий поворачивался словно на платформе, а глаза требовали внимания.
В итоге выбрали второй вариант Seedance. Затем фон выровняли локальной обработкой, отделив человека от окружения, и немного усилили контраст. Исходный ролик и предыдущие попытки сохранили. Эта обработка меняла подачу выбранного источника; она не была новой генерацией лица или движения.
У анимационной сцены и документальных материалов разные роли. Поворот тренера — созданная для сайта визуальная сцена. Клиентские результаты, фотографии соревнований и видеоотзывы используются как реальные материалы; правдоподобие генерации не заменяет их происхождение.
STUDY 02 / FRAME SCROLL
Прокрутка управляет кадром
Попробуйте ползунок и режим прокрутки. Движение можно пройти вперёд и назад; подписи появляются поверх изображения отдельными HTML-слоями.
Готов вернуть
свою форму?
свою форму.Я Дмитрий Юревич. Твой тренер.
Используются исходные 193 кадра и упаковка в 13 файлов. Пример изолирован внутри статьи: он не блокирует прокрутку всего сайта и не требует загрузки до чтения текста.
FORM 12 получила механику сборки
Для FORM 12 искал собственный образ системы и последовательности. Первые варианты показывали скульптурный знак и движение камеры вокруг него. Отдельные близкие проходы обрезали эмблему; другие фильмы меняли элементы и добавляли лишние надписи. Такой результат требовал пересмотра сценария.
Мы вернулись к раскадровке. Вместо продолжения перебора роликов разложили действие на состояния: закрытый модуль, раскрывающиеся панели, рама, элементы F и 1/2, фиксаторы, готовый знак. Позже отдельно уточнили финал: фронтальная центральная композиция вместо смещённого объекта.
Выбранный ролик стал вступлением страницы программы. Он раскрывается один раз и удерживает финальное состояние. Есть пауза и повтор; вне видимой области и в скрытой вкладке воспроизведение приостанавливается. При ошибке или уменьшенном движении показывается статичный финал. Заголовок и предложение стоят ниже фильма, сохраняя собственную читаемую композицию.
Визуальный язык перешёл из сцены в интерфейс
Механическая тема продолжилась в рамках блоков FORM 12. Сначала проверили несколько направлений карточек, затем выбрали металлическую рамку со срезанными углами. Внутри неё сохранили обычный HTML-текст, реальные фотографии и понятную иерархию.
Здесь быстро проявились практические ограничения. Рамка должна была вмещать разный объём текста, фотографии — сохранять лица в кадре, а номер недели — оставаться за пределами изображения человека. Пришлось разделить зоны изображения и пояснения, уточнить отступы и вернуть естественные пропорции снимкам.
Отдельная ошибка обнаружилась в Safari: металлические грани не отображались, хотя ресурс загружался. Убрали принудительное преобразование слоя и развернули свойства рамки в явные CSS-параметры. После этого проверили её в самом Safari. Наличие правильного файла в сборке оказалось только одним из условий результата.
STUDY 03 / PLAY ONCE
Сборка, пауза, готовый знак
Ролик раскрывается один раз. Финал остаётся на экране; повтор — отдельное осознанное действие.
Это установленный на сайте фильм FORM 12. Пример сохраняет его пропорции и управление; воспроизведение приостанавливается вне видимой области.
Общий фон потребовал общей конструкции
Графит, зелёное освещение и точечное поле должны были связывать длинную страницу. Когда каждый раздел рисовал собственный фон, появлялись заметные стыки: градиент обрывался, точки упирались в край контейнера, изображение выглядело отдельной прямоугольной вставкой.
Я перенёс атмосферные слои в общую полноширинную оболочку. Локальные непрозрачные заливки убрали там, где они мешали непрерывности; края изображений и видео согласовали с фоном. От зернистого шума отказались в пользу упорядоченных точек и более спокойного освещения.
Полупрозрачные поверхности сохранились у самих карточек. Фон страницы, поверхность карточки и изображение стали отдельными слоями с разными задачами. Так удалось править переходы, не меняя каждый раздел независимо от соседних.
03 / INTERACTION
Интерфейс можно попробовать
Колода, горизонтальная лента, папки и видеокружки решают разные задачи. Ниже — работающие локальные примеры по механикам исходного проекта.
STUDY 04 / DECK + FLIP
Выбор ситуации и обратная сторона
Карточки меняются местами в глубине. У выбранной есть оборот: переход к подробностям сохраняет связь с тем, что человек уже выбрал.
Хочу вернуться в форму
«Раньше тренировки были частью моей жизни. Хочу снова чувствовать себя в форме.»
Выберите ситуацию. Переверните карточку или листайте вбок.
Переключение, переворот и перетаскивание разделены. После свайпа случайное нажатие не открывает оборот. Кнопки и клавиатура дают альтернативный путь.
STUDY 05 / NATIVE SCROLL + DEPTH
Этапы в горизонтальной ленте
Пять этапов можно пройти перетаскиванием, горизонтальным жестом или клавишами. Положение карточки определяет её поворот, масштаб и прозрачность.
Диагностика
Исходная точка, ограничения и цель.
Настройка
Находим рабочий ритм тренировок и питания.
Основная работа
Выполняем, отслеживаем динамику, корректируем.
Доработка
Уделяем внимание тому, что тормозит прогресс.
Закрепление
Готовим режим, который можно продолжать.
Потяните ряд. Ближняя карточка выходит вперёд, соседние уходят в глубину.
Движение опирается на нативный scroll-snap. Вертикальный жест остаётся прокруткой страницы; глубина добавлена поверх обычной навигации.
Папки материалов стали небольшим предметным интерфейсом
Раздел материалов получил объёмные папки со слоями бумаги. У них появилась перспектива, выделенное центральное положение и управление мышью, перетаскиванием и клавиатурой. Эта механика позволяла обсуждать библиотеку как отдельную часть сайта, а не как случайный список ссылок.
По ходу работы структура выросла до четырёх папок: «Тренировки», «Питание», «Статьи» и «Знания». Нажатие на центральную папку открывает соответствующую страницу. Возврат сохраняет выбор, поэтому человек продолжает с того места, где остановился.
Готовых материалов для публикации на этом этапе нет. Внутри оставили «Скоро». Проектирование библиотеки и наличие содержимого — разные состояния, и интерфейс должен показывать их честно.
STUDY 06 / CSS OBJECTS
Папка собрана из слоёв
Обложка, задняя стенка и листы двигаются отдельно. Сначала выберите папку, затем нажмите её в центре.
Боковая папка выходит в центр. Нажмите центральную, чтобы заглянуть внутрь.
Объём создают HTML и CSS: перспектива, прозрачность, трансформации и порядок слоёв. Внутри — честное состояние «Скоро»; возврат сохраняет выбранную папку.
Реальным историям понадобилась бережная подача
Со старого сайта перенесли видео и исходные материалы. Получить часть файлов обычной загрузкой мешала проверка хостинга; после появления доступа к серверу удалось собрать материалы и полный архив. Дополнительно использовали предоставленные спортивные фотографии и кадры из телестудии.
В разделе ATHLETE появились исторические спортивные истории с реальными категориями, сроками и результатами. Их не объявляли результатом новой FORM 12. На странице Дмитрия фотографии дополняли рассказ о его практике; по одним кадрам из студии не придумывали название передачи, дату или новый экспертный статус.
Особое внимание уделили кадрированию. Для исходных фотографий сохранили возможность просмотра целиком. Видеоисториям вернули естественные пропорции: размер окна подстраивается под материал, чтобы человек не терял часть изображения ради одинаковой формы карточек.
Полный рассказ пришлось сокращать
По мере добавления материала главная стала повторять собственные аргументы. Метод, адаптация, контроль и ответственность объяснялись в нескольких местах. После обратной связи шесть карточек метода объединили в три, пять фаз работы собрали компактнее, близкие разделы свели вместе.
Знакомство с Дмитрием и ранний пример из его практики подняли перед предложением программы. Подробный рассказ оставили на странице FORM 12. При одном проверенном настольном размере высота главной сократилась с 21 740 до 17 446 пикселей, примерно на 20%. Это измерение длины страницы в конкретной конфигурации; роста конверсии оно не доказывает.
Я также уточнял подписи действий. «Обсудить мою ситуацию» ведёт к разговору, «Подробнее о FORM 12» — к изучению программы. Так у разных решений посетителя появились разные, предсказуемые продолжения.
Мобильная версия потребовала своих решений
Некоторые композиции на телефоне пришлось пересобрать. Высокие карточки ATHLETE разрывали рассказ на слишком длинные фрагменты, а вложенная фотография оставляла лишние поля. Фото расширили до краёв, имя и дисциплину разместили поверх затемнения, результаты собрали в компактные строки. Высоту стала определять сама история.
Круглые превью видеоотзывов сохранили характер раздела, но при воспроизведении раскрываются в окно с пропорциями оригинала. Для кейсов с вертикальным видео использовали соответствующие вертикальные окна. Это позволило показать исходный кадр без сильного обрезания по бокам. В интерактивном примере этой статьи я сохранил круглую форму и увеличиваю только диаметр.
Отдельно дорабатывались нижнее меню, фон под ним, безопасные отступы и белая кнопка программы. Проверки в Safari на узких размерах помогали увидеть конкретные ошибки. Они не заменяют проверку каждого физического телефона с его панелями браузера и качеством соединения.
STUDY 07 / RESPONSIVE CARD
Фотография и текст в одной композиции
Узкий экран меняет расположение содержания. Попробуйте переключить ширину карточки: изображение, имя и результаты остаются связанными.
Фитнес-бикини · мастера 40+
Виктория 43 года
- 1-е место
- Рязань · мастера 40+ · 2025
- 1-е место
- WABBA · мастера 40+ · 2025
- 4-е место
- WFF Russia · мастера 40+ · 2026
История из прежней практики Дмитрия. Не результат новой программы.
Фото и имя образуют один блок. Снимок можно открыть целиком.
Пример использует реальный материал спортивной истории. Это демонстрация композиции и адаптации; исторический результат не относится к новой программе FORM 12.
STUDY 08 / CIRCULAR VIDEO
Круг увеличивается при воспроизведении
Нажмите на круг: он увеличится и начнёт воспроизведение. Повторное нажатие ставит видео на паузу и возвращает прежний размер.
Видеоотзыв 01
Видеоотзыв 03
Видеоотзыв 04
Здесь реальные локальные видеоотзывы. Включается только выбранное видео; новое останавливает предыдущее. Кольцо показывает реальный прогресс, пауза возвращает компактное состояние.
STUDY 09 / SCROLL REVEAL
Появления задают последовательность
Небольшое смещение и задержка помогают прочитать группу по порядку. Анимация запускается при появлении блока, её можно повторить.
Ситуация посетителя
Метод работы
Реальные истории
Следующее действие
Появление запускается при входе в область просмотра. При уменьшенном движении содержание видно сразу.
Пример показывает принцип IntersectionObserver и последовательных задержек с сайта. Анимация не несёт обязательную информацию: при уменьшенном движении всё доступно сразу.
04 / REFINEMENT
За движением стоят состояния
Подготовка, загрузка, готовность, отмена и ошибка влияют на впечатление так же, как сама анимация.
Подготовка
Логотип и реальный прогресс
Готовность
Сцена получает управление
Пропуск
Финальный кадр без ожидания
Без движения
Статичный доступный первый экран
Анимацию оптимизировали через доставку и память
Настольная сцена состоит из 193 кадров. Сначала отдельные запросы и подготовка изображений конкурировали с остальной загрузкой. Кадры упаковали в 13 файлов без дополнительного сжатия самих изображений, сохранив исходные байты каждого кадра.
Дополнительно ограничили параллельную загрузку, декодирование и число готовых кадров в памяти. Последовательность готовит нужные соседние изображения, освобождает ресурсы при отмене и учитывает скрытую вкладку. Шрифты тоже проверяли отдельно; преобразование рукописного Caveat в WOFF2 сократило размер файла при сохранении проверенных контуров и метрик.
Такая работа даёт конкретный, проверяемый результат: меньше запросов, ограниченный объём декодированных изображений, сохранённые кадры. Я не приписываю ей измеренный рост FPS или показатели реальных пользователей: таких полевых измерений в материалах проекта нет.
Загрузка стала самостоятельным сценарием
Для подготовки сцены сделали экран с логотипом, реальным прогрессом и кнопкой «Пропустить загрузку». Пока сцена готовится, прокрутка закрыта. После завершения она открывается автоматически; пропуск сразу переводит к финальной композиции и освобождает страницу.
После публикации обнаружилось короткое мигание: сначала браузер показывал серверный статичный первый экран, затем основной скрипт заменял его анимационной версией и открывал загрузчик. Причина находилась между первой отрисовкой HTML и запуском приложения.
Исправление перенесли в раннюю загрузку страницы. Небольшой слой с логотипом появляется до основного приложения, а его кнопка работает ещё до получения большого скрипта. Если человек уже нажал пропуск, поздний запуск приложения не возвращает загрузку. Без JavaScript остаётся доступен серверный текст. Этот переход проверили в WebKit с намеренной задержкой скрипта и отдельными сценариями отмены.
Настольный экран имеет ещё и высоту
На другом ноутбуке нижняя часть первого экрана не помещалась: под именем Дмитрия пропадали пояснение и ссылка знакомства. Одной проверки ширины оказалось недостаточно. Крупная типографика занимала слишком много места по вертикали.
После воспроизведения ошибки размер текста и интервалы ограничили одновременно по ширине и высоте окна. Сохранили весь состав первого экрана: имя, роль, предложение и действия. Проверили несколько широких и низких конфигураций, включая обычные размеры ноутбуков.
Этот эпизод изменил сам порядок проверки. Для композиции с закреплённой сценой я смотрю не только на ширину макета, но и на доступную высоту: помещается ли завершающая строка, остаются ли доступны кнопки, не скрывается ли смысловой конец блока.
05 / RELEASE
Публикация продолжает проект
Новая версия переехала на хостинг Дмитрия. Предыдущие материалы, ссылки и аналитика требовали собственного плана сохранения.
Переезд потребовал сохранить предыдущую работу
Для обсуждения сначала использовали отдельную версию на Cloudflare. Основной сайт затем разместили на существующем хостинге Дмитрия с прежним доменом. Перед переключением сохранили полный архив WordPress и базу данных; старую установку убрали из публичного каталога и оставили для возврата и доступа к историческим ресурсам.
Прежние счётчики аналитики и подтверждения владения сохранили. Отдельно проверяли приём просмотров, старые ссылки, рекламные параметры и редиректы. Для новых страниц подготовили серверный HTML, canonical, карту готовых маршрутов и страницу с настоящим статусом 404. Файлы выпуска сверяли по хешам; служебные отчёты и резервные копии в публикацию не включали.
В разговоре со специалистом по рекламе уточнили границы ответственности. Его предыдущая работа относилась прежде всего к контекстной рекламе. Наличие старого счётчика не означает, что новые действия сайта уже стали корректными рекламными конверсиями. Цели под обновлённый сценарий требуют самостоятельной настройки и проверки.
Успешный ответ сервера ещё нужно прочитать
После переноса внешние проверки иногда получали Browser verification и ответы 429. В отдельных случаях сервер отвечал 200, но внутри находилась страница проверки браузера. Если смотреть только на статус, такой запрос можно ошибочно посчитать успешным просмотром сайта.
Проверку разделили на несколько вопросов: что получает обычный браузер, что получает внешний инструмент и может ли настоящий поисковый робот прочитать содержимое. В поддержку хостинга отправили запрос о ложных срабатываниях и ограниченном доступе для аудита. Полностью отключать защиту ради красивого отчёта не требовалось.
По состоянию собранных материалов сайт опубликован, маршруты и медиаматериалы проверялись, но чтение карты обоими поисковыми кабинетами и новые рекламные цели не закрыты окончательно. Я сохраняю эту границу в описании результата. У проекта пока нет подтверждённых показателей роста заявок, поискового трафика или продаж.
Что я вынес из этой работы
В этом проекте мой замысел уточнялся через последовательные проверки: от композиции и текста к движению, от движения к загрузке, от локального просмотра к действующему домену. ИИ помогал писать код, искать изображения, разбирать ошибки и выполнять повторяемые операции. Мне оставались постановка задачи, отбор и решение о том, что действительно соответствует проекту.
Особенно полезной оказалась работа с отдельными версиями и исходниками. Можно вернуться к концепции, сравнить отклонённый фильм с выбранным, проследить изменение карточки и понять, каким исправлением устранена конкретная ошибка. Такая история сохраняет основания для дальнейших решений.
Для следующего проекта я снова начну с содержания, главного действия и подтверждённых материалов. Затем буду связывать визуальную форму с её реальной работой: как сцена загружается, что происходит при отмене, что видно на узком экране и как сохраняется предыдущая версия. На сайте Дмитрия можно увидеть опубликованную версию; этот разбор фиксирует путь, которым она собиралась.
Своя задача
Начать с того, что должен понять человек
Структура, выразительная механика и проверка её работы складываются в один проект. Если вам нужен сайт или интерактивная подача собственной практики, начнём с содержания, материалов и главного действия посетителя.