Задача
Центр FreeFly занимается роупджампингом, обучением промышленному альпинизму, предоставляет специалистов для высотных работ, а также организует тимбилдинг.
Компания обратилась с запросом на редизайн сайта: существующий ресурс имел запутанную структуру, в которой было сложно ориентироваться, и устаревший визуальный вид, не соответствующий уровню услуг. При этом сайт содержал информацию только о роупджампинге — остальные направления деятельности компании на нём отсутствовали, что не отражало полный спектр услуг.
Необходимо было полностью переработать сайт — упростить навигацию, обновить дизайн и сделать подачу услуг более понятной для пользователей. Отдельной задачей стало создание не просто страниц с описанием, а полноценных лендингов под каждое направление, так как услуги различаются по сути и требуют детального объяснения и проработки.
В результате нужно было создать современный, понятный и структурированный сайт, готовый к дальнейшему продвижению и привлечению клиентов
Компания обратилась с запросом на редизайн сайта: существующий ресурс имел запутанную структуру, в которой было сложно ориентироваться, и устаревший визуальный вид, не соответствующий уровню услуг. При этом сайт содержал информацию только о роупджампинге — остальные направления деятельности компании на нём отсутствовали, что не отражало полный спектр услуг.
Необходимо было полностью переработать сайт — упростить навигацию, обновить дизайн и сделать подачу услуг более понятной для пользователей. Отдельной задачей стало создание не просто страниц с описанием, а полноценных лендингов под каждое направление, так как услуги различаются по сути и требуют детального объяснения и проработки.
В результате нужно было создать современный, понятный и структурированный сайт, готовый к дальнейшему продвижению и привлечению клиентов
Результат
- проведено два глубинных интервью с заказчиком общей продолжительностью 6 часов для детального понимания бизнеса, услуг и целей сайта;
- выполнен анализ ниши, конкурентов и целевой аудитории. Отдельное внимание уделено болям, сомнениям и барьерам доверия, так как услуги связаны с экстремальными видами деятельности и требуют сильной доказательной базы;
- для более глубокого понимания услуги был протестирован роупджампинг с фиксацией процесса (видео будет представлено ниже). Это позволило глубже прочувствовать эмоции и особенности аудитории;
- проработана структура сайта, состоящая из главной страницы, 4 посадочных страниц (лендингов) с услугами, юридических и служебных страниц;
- подготовлены тексты, написанные живым, понятным языком без перегруженной терминологии, с акцентом на вовлечение и доверие;
- для главной страницы подготовлены визуальные материалы с использованием нейросети Midjourney для создания яркого и запоминающегося образа проекта;
- выполнена верстка на стандартных блоках с минимальным использованием Z-блоков, что позволило сохранить скорость загрузки и удобство управления сайтом;
- настроена базовая SEO-оптимизация;
- запущена рекламная кампания в Яндекс Директ для привлечения целевого трафика.
Запуск сайта: 01.10.2025 г.
Шрифт и цвета
В заголовках использован шрифт Bebas Neue — выразительный, строгий и хорошо передающий динамику и характер проекта. Он помогает акцентировать внимание и добавляет визуальной энергии страницам.
Для основного текста выбран Inter Display — современный, читаемый и нейтральный шрифт, который обеспечивает комфортное восприятие информации и хорошо поддерживает общий стиль сайта.
В основе визуального стиля использованы фирменные цвета логотипа — оранжевый и голубой. Оранжевый отвечает за энергию, динамику и ощущение активности, а голубой добавляет баланс, доверие и спокойствие. Вместе они формируют узнаваемый и контрастный визуальный стиль, который хорошо передаёт характер проекта и его направление
Для основного текста выбран Inter Display — современный, читаемый и нейтральный шрифт, который обеспечивает комфортное восприятие информации и хорошо поддерживает общий стиль сайта.
В основе визуального стиля использованы фирменные цвета логотипа — оранжевый и голубой. Оранжевый отвечает за энергию, динамику и ощущение активности, а голубой добавляет баланс, доверие и спокойствие. Вместе они формируют узнаваемый и контрастный визуальный стиль, который хорошо передаёт характер проекта и его направление
#F97127
#31B3DE
#EBF8FC
#333D4B
Погружение в продукт на полную (личный опыт)
Одним из ключевых моментов работы над сайтом стало личное знакомство с услугой роупджампинга. По словам заказчика, сложно создать качественный проект, не понимая продукт изнутри, поэтому было принято решение на личном опыте прочувствовать услугу.
Прыжок состоялся в летний солнечный день с вышки высотой 51 метр (примерно 17 этажей). Перед стартом было естественное волнение, особенно из-за ожидания резкого рывка, однако на практике система работает по принципу маятника: движение происходит плавно, без жёсткого вертикального толчка, с постепенным переходом в раскачивание.
Прыжок состоялся в летний солнечный день с вышки высотой 51 метр (примерно 17 этажей). Перед стартом было естественное волнение, особенно из-за ожидания резкого рывка, однако на практике система работает по принципу маятника: движение происходит плавно, без жёсткого вертикального толчка, с постепенным переходом в раскачивание.
В результате ощущения оказались значительно мягче, чем ожидалось — прыжок получился контролируемым и комфортным, при этом эмоционально очень сильным.
Дополнительно удалось увидеть организацию процесса изнутри: работу команды инструкторов (8 человек на площадке), их слаженность, внимание к безопасности и чёткую координацию каждого этапа. Это дало более глубокое понимание услуги и помогло точнее выстроить дальнейшую подачу сайта и услуги роупджампинга
Дополнительно удалось увидеть организацию процесса изнутри: работу команды инструкторов (8 человек на площадке), их слаженность, внимание к безопасности и чёткую координацию каждого этапа. Это дало более глубокое понимание услуги и помогло точнее выстроить дальнейшую подачу сайта и услуги роупджампинга
Безопасность и доверие
В проекте особое внимание уделялось анализу целевой аудитории и специфики ниши — экстремальные виды активности требуют высокого доверия. Главный акцент сайта сделан на квалификации: представлены сертификаты и опыт инструкторов, официальные допуски и разрешения.
Для каждого направления подробно показаны меры безопасности: для роупджампинга — проверка и обновление оборудования, прочные системы, согласование с администрацией, присутствие психолога; для промышленного альпинизма — обучение через аккредитованный центр, государственные документы и многолетний опыт преподавателей.
Для каждого направления подробно показаны меры безопасности: для роупджампинга — проверка и обновление оборудования, прочные системы, согласование с администрацией, присутствие психолога; для промышленного альпинизма — обучение через аккредитованный центр, государственные документы и многолетний опыт преподавателей.
Сайт объясняет, зачем эти меры нужны и как работают системы безопасности, позволяя аудитории доверять компании ещё до первого контакта.
Дополнительно на сайте представлена наглядная демонстрация процесса и этапов подготовки — от инструктажа до выполнения активности. Это помогает посетителям лучше представить опыт, оценить профессионализм команды и почувствовать себя увереннее перед началом мероприятия
Дополнительно на сайте представлена наглядная демонстрация процесса и этапов подготовки — от инструктажа до выполнения активности. Это помогает посетителям лучше представить опыт, оценить профессионализм команды и почувствовать себя увереннее перед началом мероприятия
Когда детали делают дизайн: шрифт, шум и подчеркивания
Текстовые вставки оформлены с использованием шрифта Pershotravneva55 — творение моего преподавателя Макса Ширко. Давно мечтала применить его в проекте, и здесь он вписался в дизайн естественно и гармонично, придавая сайту индивидуальность и характер.
Для выделения ключевой информации к заголовкам программным кодом добавлены небрежные подчеркивания, словно выполненные от руки. Они гармонично дополняют шрифт Pershotravneva55, создавая вместе ощущение живости и динамики текста.
Для выделения ключевой информации к заголовкам программным кодом добавлены небрежные подчеркивания, словно выполненные от руки. Они гармонично дополняют шрифт Pershotravneva55, создавая вместе ощущение живости и динамики текста.
В дизайне карточек я решила уйти от привычной «однотонной серости» и добавить живые, почти осязаемые текстуры. Для этого использовала новый на тот момент инструмент Фигмы — шум мульти, который придал карточкам лёгкий голографический эффект, будто свет играет на поверхности
Интерактив и динамика: фишки сайта
Я добавила модификацию курсор «Капля». Все направления компании связаны с верёвками, поэтому такой курсор отлично вписался в общую стилистику сайта, добавляя элемент игры и интерактивности.
Блок с услугами на главной странице состоит из интерактивных карточек: одна открыта с текстом, остальные закрыты. При наведении открывается новая карточка, а предыдущая плавно закрывается, создавая эффект живого взаимодействия. При этом блок реализован с помощью кода, а не Z-блока, что уменьшает нагрузку на сайт и обеспечивает быструю работу.
Блок с услугами на главной странице состоит из интерактивных карточек: одна открыта с текстом, остальные закрыты. При наведении открывается новая карточка, а предыдущая плавно закрывается, создавая эффект живого взаимодействия. При этом блок реализован с помощью кода, а не Z-блока, что уменьшает нагрузку на сайт и обеспечивает быструю работу.
Для подарочных сертификатов я придумала особый приём: логотип словно «следит» за курсором, создавая эффект 3D. Такой элемент привлекает внимание, подчёркивает ценность сертификатов и добавляет интерактивный шарм, делая взаимодействие с сайтом более живым и запоминающимся.
Лендинг «Роупджампинг» — достаточно длинная страница, поэтому для добавления динамики некоторые блоки при скролле плавно меняли фон — со светлого на тёмный. Это мягкое движение фона помогает выделять важные элементы и делает прокрутку более вовлекающей, словно сайт «дышит» вместе с пользователем
Лендинг «Роупджампинг» — достаточно длинная страница, поэтому для добавления динамики некоторые блоки при скролле плавно меняли фон — со светлого на тёмный. Это мягкое движение фона помогает выделять важные элементы и делает прокрутку более вовлекающей, словно сайт «дышит» вместе с пользователем
Скорость, стабильность и простота управления
Этот проект стал первым сайтом с упором на стандартные блоки — около 80% структуры построено на них, кроме обложек, виджетов и интерактивных элементов. Каждый стандартный блок был доработан кодом, чтобы придать проекту индивидуальность и современный стиль, а сайт при этом загружается быстро.
Заказчик хотел, чтобы сайт было легко сопровождать и развивать: менять информацию, добавлять новые элементы. Использование стандартных блоков сделало это возможным и удобным.
На изображениях ниже можно увидеть стандартный блок FR308 в исходном виде и после доработки кодом
Заказчик хотел, чтобы сайт было легко сопровождать и развивать: менять информацию, добавлять новые элементы. Использование стандартных блоков сделало это возможным и удобным.
На изображениях ниже можно увидеть стандартный блок FR308 в исходном виде и после доработки кодом
Кампания на поиске в Яндекс Директ
Для проекта была подготовлена контекстная реклама в Яндекс. Директ: я собрала 220 ключевых фраз и 765 минус-слов, настроила кампанию и запустила её в тестовом режиме. Даже на этом этапе сайт принес 5 заявок, при этом, по словам заказчика, около 90% лидов превращаются в продажи.
Сегодня заказчик продолжает активно использовать Яндекс для продвижения, чередуя рекламу в Яндекс Директ и в Яндекс Подписке, что позволяет гибко управлять потоками заявок и оптимизировать рекламный бюджет
Сегодня заказчик продолжает активно использовать Яндекс для продвижения, чередуя рекламу в Яндекс Директ и в Яндекс Подписке, что позволяет гибко управлять потоками заявок и оптимизировать рекламный бюджет
Весёлая страница с ошибкой 404
Страница ошибки 404 оформлена с юмором: лис — талисман команды — «завис» в космосе, привязанный страховкой. Такой визуальный приём поддерживает тематику проекта и отсылает к ощущению свободного полёта, но в лёгкой и ироничной форме. Вместо раздражения от ошибки пользователь получает улыбку, и его можно спокойно вернуть к просмотру сайта
Развитие проекта продолжается
Хотя сайт уже запущен и рекламируется, на нём пока отсутствует страница «Тимбилдинг». Заказчик решил подойти к её созданию максимально качественно: необходимо подготовить профессиональные фотоматериалы и предоставить подробную информацию о том, как проходят тимбилдинги, какие испытания и активности включены. Это позволит странице полностью раскрывать опыт и возможности программы, когда она будет добавлена на сайт
