Демо-проект

Лендинг онлайн-тренера по похудению

Калькулятор калорий и ИМТ, продажа через результат клиента.

дизайн и вёрстка · HTML · CSS · JS

Открыть демо

2 в 1калькулятор калорий и ИМТ на лету
6показателей: от нормы ккал до БЖУ
3варианта ответа по диапазону ИМТ
10секций от первого экрана до заявки
4страницы, включая политику и дисклеймер
Первый экран демо: Лендинг онлайн-тренера по похудению

Задача

Анна Морозова ведёт онлайн-программу похудения «Минус лишнее»: тренировки дома от 30 минут, питание из обычных продуктов, еженедельная корректировка плана. Ниша выжжена обещаниями «минус 10 кг за неделю», поэтому главный дефицит здесь - доверие, а продаётся не программа с витрины, а бесплатный 30-минутный разбор. Страница должна снять скепсис человека, который уже обжигался на диетах, и довести его до заявки на этот разбор. Демо-проект: тренер вымышленный, задача типовая и настоящая.

Решение

Формат - спортивное приложение, а не глянец: белый фон с тёмными секциями-вставками, коралловый акцент, лайм только для результатов, крупные цифры, диагональные разделители секций. Без фото «до и после» и стыдящих формулировок: в этой нише они юридический риск и отпугивают тех, кому уже обещали чудо.

  • Калькулятор калорий и ИМТ по формуле Миффлина-Сан Жеора пересчитывает при каждом вводе: норма ккал, ИМТ на шкале, калории поддержания, комфортный темп снижения в кг в неделю и здоровый коридор веса под рост.
  • Текст результата зависит от диапазона ИМТ: три варианта, и каждый ведёт на бесплатный разбор, а не пугает цифрой.
  • Кейсы свёрстаны как экраны трекера: точка А, срок, точка Б. Темпы всех историй лежат в одном диапазоне 2,0-2,7 кг в месяц - цифры сходятся между собой.
  • Тарифы на 1, 3 и 6 месяцев с одинаковым наполнением, разница только в сроке; на мобильном популярная карточка сама центрируется в ленте.
  • Одна точка конверсии: форма заявки на разбор - имя, контакт и цель в двух словах. Поле контакта принимает и телефон, и ник в Telegram.

Детали, которые легко не заметить

  • Калькулятор не даст себе навредить: диапазоны 16-90 лет, 140-220 см, 40-250 кг, а норма не опускается ниже порога 1200 ккал для женщин и 1500 для мужчин, каким бы ни вышел расчётный дефицит.
  • Результат калькулятора объявляется скринридеру через aria-live; при prefers-reduced-motion отключаются reveal-анимации и плавная прокрутка.
  • Валидация формы: ошибки текстом под полем, aria-invalid, фокус переезжает на первое невалидное поле. Согласие на обработку персональных данных - обязательный чекбокс со ссылкой на страницу политики.
  • Подсказка формата телефона смотрит на язык браузера: русскоязычным +7, остальным +1.
  • Юридическая гигиена демо: дисклеймер «не является медицинской рекомендацией» в футере, «результаты индивидуальны» под кейсами, отдельная страница-дисклеймер и noindex в мете и HTTP-заголовках - страница не конкурирует в поиске с реальными тренерами.
  • Ни сборки, ни зависимостей: страница открывается с диска двойным кликом.

Цифры

Все цифры на этой странице проверяются по исходникам демо: секции и страницы - по разметке, показатели калькулятора и варианты ответов - по коду. Графика - WebP с JPG-фолбэком, до трёх разрешений, с ленивой загрузкой.