Демо-сайт авторских экспедиций «Заброска»

Описание

Собственный проект, не клиентский заказ: концепция сайта для вымышленного бренда авторских экспедиций.

Задача, которую я себе поставила: сделать сайт для тура, который продаёт не картинку, а понимание того, куда человек едет. Обычный лендинг про поход — это набор красивых кадров, три абзаца про «незабываемые впечатления» и кнопка. Человек нажимает её, не зная почти ничего: какой километраж в каждый день, где он будет спать, что будет тяжело и в какой момент нельзя будет развернуться.

Маршрут для демо взяла настоящий по географии: верховья реки Собь, перевал Заячий, сплав до Лабытнанги. Два дня пешком, три дня на воде, 205 километров за пять дней, группа восемь человек, два гида. Заброска вертолётом из Салехарда, до ближайшей дороги 90 километров.

Отсюда и главное решение: если человек не может отступить с середины маршрута, сайт обязан рассказать всё до оплаты. Не «незабываемые впечатления», а курумник на четыре километра, вес рюкзака 16–18 кг и честное «развернуться не получится».

Решение

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

Каждый день расписан не рекламно, а как маршрутный лист: километраж, набор и сброс высоты, тип ночёвки, питание, что успеете. День второй — 24 километра, набор 780 метров, седловина 1128, четыре километра курумника с прямой пометкой «единственный технически неприятный участок». День четвёртый — 74 километра сплава, три шиверы и два порога второй категории.

Второй смысловой блок — деньги. Калькулятор считает не «от», а точную сумму: три даты заезда со своей ценой и остатком мест, число участников со скидкой 5% от двух человек, три доплаты (отдельная палатка, страховка с вертолётной эвакуацией, прокат снаряжения). На выходе — итог, депозит 30% и дата, до которой нужно внести остаток, посчитанная от даты старта. Рядом четыре карточки условий, включая честное «если группа не набралась — возвращаем всё до копейки, такое было дважды за одиннадцать лет».

Раздел «Что входит и чего нет» намеренно двухколоночный и симметричный: десять пунктов включено, шесть оплачивается отдельно, с цифрами. Плюс список личного снаряжения из восьми позиций и оговорка, что полный список на 34 пункта приходит после брони.

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

Технически это один HTML-файл: восемь секций, клиентский роутер не нужен — страница одностраничная, весь интерактив написан руками, около девяноста строк чистого JS без библиотек. Карта, схема маршрута и вся графика — SVG в разметке. Шрифты Oswald, Inter и JetBrains Mono; в автономной версии файла они вшиты, так что макет открывается двойным кликом и работает офлайн. Палитра снята с тайги: туман
#F1F4EC, хвоя
#274634, чернила
#162C21, латунь
#B4762A акцентом.

Результат

Получился работающий прототип: карта кликается, дни переключаются, калькулятор считает.

Кейс показывает три вещи. Первое — умение вытащить из бизнеса его настоящую механику: у похода главная ось не «направление», а день. Второе — дизайн и фронтенд в одних руках, включая рисованную вручную SVG-карту, а не подложенный скриншот из картографического сервиса. Третье — способность писать продающий текст, который продаёт честностью: перечисление трудностей здесь работает лучше, чем прилагательные.

Подход переносится на всё, что продаётся программой, а не товаром: экспедиции, обучающие интенсивы, лечебные курсы, реставрационные работы — везде, где клиенту важно понимать последовательность и точку невозврата.