С чего все началось
Школа туризма «Пешеходник» — один из тех проектов, где сама тематика сразу подсказывает, каким должен быть сайт.
Горы, лесные тропы, палатки, рюкзаки, походные фотографии. Хотелось передать это настроение и одновременно сделать удобную страницу, на которой будущий слушатель сможет разобраться в программе обучения.
Идея нового сайта появилась после того, как Карина Григорьева, моя коллега и слушательница «Пешеходника», предложила руководителю школы Юлии Бычковой помочь с продвижением.
У школы уже был сайт peshehodnik.ru. Он был создан много лет назад, поэтому я решила разработать вторую версию — современную, с новой структурой и дизайном.
Платформу выбрала сразу: Tilda. На ней предстояло собрать сайт, а затем продолжать его наполнение и доработку.
Первые макеты — и почти сразу удачная концепция
Мне нравится, когда визуальное решение рождается из самой темы проекта. Для туристической школы природные цвета напрашивались сами собой.
Основными стали синий и зеленый — оттенки неба, леса и горных пейзажей. Для композиции выбрала простой плакатный стиль: крупные заголовки, выразительные фотографии, четкие формы и минимум лишних украшений.
Первые макеты сделала в Claude Design. Там же начала формировать дизайн-систему, чтобы заранее определить оформление типовых элементов и поведение страницы на разных экранах.
И тут произошло приятное: с первых же итераций концепция получилась именно такой, какой я ее представляла.
Обычно на этапе дизайна бывает несколько серьезных пересмотров. Здесь же почти сразу удалось перейти к деталям. Я уточняла отступы, размеры элементов, композиции отдельных экранов, но общее направление сохранила.
Это оказалось особенно полезным впоследствии, когда сайт начал быстро обрастать новыми блоками.
Собираю на Tilda. И лендинг начинает расти
После утверждения концепции я переверстала макеты и собрала сайт на Tilda.
На старте планировала обычный лендинг. Но чем глубже погружалась в материалы школы, тем очевиднее становилось: рассказать обо всем на нескольких экранах не получится.
У «Пешеходника» есть большая программа обучения, интересная история, квалифицированные инструкторы, дипломы и награды, отзывы выпускников, фотографии походов и множество вопросов, которые возникают у новичков.
Каждому из этих материалов хотелось найти подходящее место.
Так лендинг постепенно превратился в большую одностраничную страницу с десятками смысловых и визуальных элементов.
Особенно важно было сохранить ритм: чередовать текстовые блоки с фотографиями, карточками и галереями, не перегружая посетителя информацией.
Дизайн-система здесь очень пригодилась. Вместо того чтобы каждый раз придумывать оформление заново, я могла использовать уже выбранные приемы и адаптировать их к новым задачам.
Как устроила программу обучения
Один из главных разделов посвящен самому обучению.
Школа проводит онлайн-занятия, тренировки на местности и учебные походы. Есть курс первой помощи и итоговая аттестация.
Мне хотелось, чтобы программа читалась легко. Человек, впервые задумавшийся о туристической подготовке, должен видеть, чему его научат и какие занятия его ожидают.
Поэтому информацию разделила на понятные блоки и сделала акцент на содержании каждого направления.
Уже в ходе доработок выяснился интересный нюанс. Нумерация частей программы создавала впечатление, что сначала нужно полностью пройти один этап, затем второй и так далее. На практике некоторые занятия идут параллельно.
Я убрала номера и уточнила формулировки. Небольшое изменение, но теперь страница точнее рассказывает о реальном учебном процессе.
Карусель с шестнадцатью наградами
У школы накопилось немало дипломов и призов. Для них отвела раздел «Наши достижения».
Сначала в блоке была одна фотография, а затем я расширила его до карусели из 16 изображений с подписями.
Здесь хотелось сохранить баланс: дипломы должны быть достаточно крупными, чтобы их можно было рассмотреть, но при этом галерея не должна занимать слишком много места.
Подобрала размеры карточек и оформление, согласовала подписи, встроила карусель в существующий дизайн.
Получился отдельный визуальный блок, который показывает достижения школы и делает страницу разнообразнее.
Форма записи: важны даже мелочи
Для записи на курс разработала многошаговый квиз, который открывается поверх страницы в модальном окне.
В нем будущий слушатель может указать контактные данные и рассказать о своем опыте походов.
Дизайн формы сделала в общей стилистике сайта: те же цвета, шрифты и принципы оформления.
Но самое интересное, как часто бывает, обнаружилось при проверке.
В одном из вопросов был вариант «Другое», который предполагал ввод собственного ответа. Однако форма автоматически переключалась на следующий шаг сразу после выбора варианта. Написать что-либо посетитель просто не успевал.
Автопереход отключила. Теперь человек сам решает, когда продолжить заполнение.
Также предусмотрела обязательное согласие на обработку персональных данных со ссылкой на соответствующий документ.
Такие детали редко заметны на скриншотах. Зато именно они определяют, насколько удобно пользоваться готовым сайтом.
Карточки, кнопки и мобильная версия
Когда основные разделы были готовы, началась работа над деталями.
Например, карточки стоимости выглядели аккуратно на первый взгляд, но из-за разного объема текста кнопки располагались на разной высоте. Пришлось изменить компоновку: расположить основные сведения сверху, а кнопки выровнять по нижнему краю.
После этого проверила блок на пяти размерах экрана: 1440, 1100, 800, 560 и 375 пикселей.
Отдельно занялась кнопками по всему сайту. Часть переходов оказалась некорректной, а оформление отдельных элементов отличалось по размеру и начертанию шрифта.
За образец взяла кнопку в шапке и привела остальные к единому стилю.
Проверила ссылки, отступы, расположение элементов и поведение страницы на мобильных устройствах.
У большого лендинга такая работа занимает немало внимания. Когда на одной странице много разных блоков, важно, чтобы все они выглядели согласованно.
А потом начались правки. Много правок
После сборки сайта работа продолжилась вместе с руководителем школы Юлией Бычковой.
Юлия внимательно изучала страницу, уточняла содержание, предлагала изменения и новые материалы. Иногда замечания касались текста, иногда — оформления, кнопок, структуры или отдельных деталей программы.
Однажды она прислала видеозапись экрана продолжительностью почти 23 минуты с голосовыми комментариями.
В таких записях человек обычно рассуждает по ходу просмотра: что-то предлагает, затем уточняет, меняет мнение, вспоминает еще одну деталь. Разобрать все это вручную и ничего не пропустить бывает непросто.
Я использовала автоматическую расшифровку и инструменты анализа видео. Получился список из 21 пункта с временными отметками. Спорные моменты вынесла отдельно для уточнения.
После согласования изменения вносила непосредственно в Tilda. Для части задач использовала Claude Code и Codex с подключением к проекту через MCP.
В этом процессе особенно удобна скорость: можно передать большой список правок и последовательно проработать его. Если заказчик позже изменит решение, корректировка становится обычным этапом работы.
Конечно, после автоматических изменений я все проверяю. Иногда нужно поправить отступ, оформление или поведение элемента. Но сама работа с большим количеством уточнений стала значительно спокойнее и быстрее.
Что остается делать вручную
В работе над «Пешеходником», как и над другими проектами, значительное время по-прежнему занимает графика.
Подготовить изображение, добиться нужной композиции, подобрать цвет, исправить детали и оптимизировать файл зачастую проще с помощью привычных графических инструментов.
Поэтому я использую Figma, ChatGPT и Photoshop в зависимости от задачи. Часть концепций создается с помощью ИИ, часть дорабатывается вручную, а готовые изображения оптимизируются и размещаются на сайте.
Зато работа с текстами, форматированием, адаптивностью и многочисленными мелкими доработками заметно ускорилась.
Для меня важен именно итог: чтобы сайт выглядел аккуратно, правильно работал и соответствовал выбранной концепции.
Что получилось
Сейчас новый сайт «Пешеходника» работает по адресу shkola-peshehodnik.ru.
Получился большой лендинг с природной палитрой, выразительными фотографиями, подробной программой, информацией об инструкторах, галереей наград, отзывами и формой записи.
Особенно приятно, что дизайн практически не пришлось менять с первых макетов. Я последовательно развивала утвержденную концепцию, и даже новые блоки естественно вписывались в страницу.
Юлии Бычковой сайт понравился. Она продолжает участвовать в его наполнении, а я дорабатываю оставшиеся детали.
У проекта большое продолжение
Сейчас завершаются последние настройки перед началом рекламной кампании. Результаты контекстной рекламы и SEO-продвижения я смогу оценить позднее и планирую рассказать о них в отдельном кейсе.
Сам сайт тоже продолжит расти.
У школы много фотографий, видео и историй из походов. В планах — статьи, отчеты, инструкции, полезные материалы для начинающих туристов и собственная энциклопедия.
Возможно, со временем большой лендинг превратится в полноценный многостраничный сайт.
Есть и еще одна идея — Telegram Mini App для школы. Пока предстоит придумать, какие функции будут действительно полезны ученикам, выпускникам и участникам походов.
А пока «Пешеходник» — хороший пример того, как из удачной визуальной концепции можно вырастить большой, живой сайт на Tilda, который удобно развивать вместе с заказчиком.
Сайт на Tilda под задачи вашего проекта
Если вам нужен сайт с продуманным дизайном, нестандартными блоками и возможностью регулярных доработок, я могу разработать его на Tilda и сопровождать по мере развития проекта.