Разработка сайта школы туризма «Пешеходник» на Tilda

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

Иногда интересные проекты появляются благодаря личному знакомству с бизнесом. Именно так произошло со школой пешеходного туризма «Пешеходник».

Карина Григорьева, наш SEO-эксперт, сама учится в этой школе, ходит в походы и хорошо знает ее изнутри. Однажды она предложила руководителю школы Юлии Бычковой помочь с продвижением.

У «Пешеходника» уже был сайт — peshehodnik.ru, созданный много лет назад. Он продолжал работать, но для будущей рекламной кампании нам хотелось получить современную площадку: с удобной навигацией, понятной программой обучения, живыми фотографиями и возможностью записаться на курс.

Так появилась идея разработать второй сайт школы. Старый решили сохранить, а новый — сделать на Tilda.

Когда делаешь сайт для школы туризма, долго искать вдохновение не приходится. Горы, леса, небо, палатки, маршруты — сама тема подсказывает цвета и настроение.

Мы выбрали сине-зеленую природную палитру и простой, выразительный плакатный стиль. Крупные заголовки, фотографии настоящих походов, четкие блоки — хотелось, чтобы сайт передавал атмосферу путешествий и при этом оставался удобным.

Первые макеты подготовили в Claude Design. Там же проработали адаптивные версии и основные элементы будущей дизайн-системы: типографику, кнопки, карточки, отступы и цветовые сочетания.

И неожиданно быстро попали в точку. Уже первые варианты выглядели так, как мы представляли будущий сайт. Вместо бесконечных переделок можно было сосредоточиться на деталях и переходить к реализации.

После утверждения дизайна мы сверстали и собрали сайт на Tilda.

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

Здесь нужно было рассказать о программе, показать инструкторов, объяснить стоимость, представить дипломы и награды, разместить отзывы и ответить на вопросы будущих слушателей.

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

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

А для тех, кто уже готов присоединиться, предусмотрели запись на курс.

В туристической школе все интереснее, чем может показаться по слову «лекции». Здесь изучают теорию, тренируются на местности, осваивают первую помощь и отправляются в настоящие учебные походы.

За один курс школа проводит 25 лекций и семинаров, 12 тренировок, занятия по первой помощи и два учебных похода. После обучения предусмотрены экзамен и получение диплома по форме Федерации спортивного туризма Москвы.

Наша задача заключалась в том, чтобы рассказать об этой программе понятно, не превращая страницу в громоздкое учебное расписание.

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

В результате посетитель видит содержание обучения и может оценить, сколько практики его ожидает.

У «Пешеходника» богатая история, и рассказывать о ней только текстом было бы жалко.

Школа дважды получала звание лучшей школы туристской подготовки Москвы — в 2019 и 2021 годах. За годы работы накопились дипломы, награды и другие свидетельства достижений.

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

Дополнительно разместили раздел с инструкторами. Здесь можно познакомиться с людьми, которые проводят занятия и руководят походами, узнать об их опыте и квалификации.

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

Когда будущий слушатель изучил программу и решил записаться, ему нужен понятный следующий шаг.

Для этого мы добавили на сайт многошаговую форму в модальном окне. Она позволяет оставить контакты и ответить на вопросы, в том числе о предыдущем туристическом опыте.

Форму оформили в стилистике сайта. Предусмотрели возможность вводить собственные ответы и добавили согласие на обработку персональных данных.

В процессе проверки обнаружился небольшой, но важный нюанс: автоматический переход к следующему вопросу мешал заполнить поле «Другое». Мы отключили автопереключение, чтобы посетитель самостоятельно решал, когда переходить дальше.

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

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

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

Юлия Бычкова активно участвовала в этом процессе. Она присылала замечания, уточняла сведения и предлагала новые материалы. Некоторые комментарии поступали в виде видеозаписей экрана, которые мы разбирали и превращали в конкретные задачи.

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

Сейчас у школы «Пешеходник» два сайта: прежний peshehodnik.ru и новый shkola-peshehodnik.ru.

Новая версия получилась современной, насыщенной по содержанию и удобной для знакомства с программой обучения. На одной странице собраны практически все основные сведения о школе, от стоимости и расписания занятий до достижений и отзывов.

Сайт понравился руководителю школы. Юлия продолжает участвовать в его наполнении, а мы постепенно доводим до конца оставшиеся настройки.

На момент подготовки кейса завершается настройка обратной связи и подготовка к запуску контекстной рекламы. Результатов рекламной кампании пока нет, поэтому оценивать количество заявок или эффективность продвижения преждевременно.

Когда появятся первые подтвержденные показатели, мы расскажем о них в отдельном кейсе, посвященном рекламе и SEO.

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

Поэтому в будущем большой лендинг, скорее всего, превратится в многостраничный сайт с отдельными информационными разделами и собственной энциклопедией туриста.

Есть и другая идея — создать для школы Telegram Mini App. Пока мы продумываем, какие задачи оно сможет решать для учеников, выпускников и будущих участников походов.

Проект продолжает развиваться, и его нынешняя версия — хорошая основа для следующих этапов.

Планируете обновить сайт или создать новый на Tilda? В «Горячем Ветре» мы можем разработать дизайн, собрать сайт, настроить необходимые функции и сопровождать его по мере развития вашего бизнеса.