WORLD 1-2 · ВЕБ-ДИЗАЙН · 2026
АВИАВОЯЖ
VOYAGE BAIKAL
Редизайн сайта туроператора: новая визуальная система, каталог с фильтрами и подача, которая продаёт Байкал раньше, чем прайс.
01О ПРОЕКТЕ
Иркутский туроператор, который больше десяти лет возит людей на Байкал, в Сибирь и на Дальний Восток.
«АВИАВОЯЖ» работает под брендом Voyage Baikal: групповые и индивидуальные туры, однодневные экскурсии, зимние программы по льду, поездки для школьников. Среди клиентов есть туристы из России, Китая и Европы. Сильная сторона компании видна в отзывах: маршрут собирают под человека, менеджер на связи всю поездку, гиды знают регион.
Задача проекта — обновить сайт так, чтобы он передавал это ощущение, и выстроить путь от «хочу на Байкал» до заявки без лишних шагов.
02ПРОБЛЕМА
Сайт продавал туры как прайс-лист и не передавал главного — зачем ехать и почему с этой компанией.
Я начал с разбора текущего сайта на всех ключевых страницах, на десктопе и на телефоне. Вот что мешало больше всего:
- 01Шесть акцентов и ни одного главного.Синие плашки заголовков, бирюзовая цена, жёлтый бейдж «Идёт набор», оранжевая бронь, голубые ссылки, зелёная цена в таблице. Выделено всё, поэтому не выделено ничего.
- 02Шаблон вместо бренда.Сайт собран на стандартной теме CSS-фреймворка Bulma с цветами по умолчанию. Один шрифт Ubuntu на всё и восемь случайных кеглей на главной.
- 03Мобильный первый экран без предложения.Логотип, пять кнопок меню и контакты занимают около 457 px из 812. Фото Байкала появляется только во второй половине экрана, кнопки действия нет.
- 04Туры сложно сравнивать.Длинные названия обрезаются, цена лежит поверх фото, маршрут набран 12 px. На главной 16 карточек подряд без фильтров, одна экскурсия повторяется в двух блоках. В каталоге сетку закрывает большой SEO-текст.
- 05Хорошая структура тура, слабая подача.Даты, стоимость, программа по дням, питание, места маршрута — всё есть, но подано таблицами, цветными полосами и текстом с выключкой по ширине.
- 06Доказательства спрятаны.Отзывы обрезаны и не связаны с турами. Номер в реестре туроператоров, награды и опыт компании лежат в футере и на странице контактов.
03ЗАДАЧА
Превратить каталог в витрину: сначала впечатление, потом удобный выбор, в конце — заявка.
Нужно было уйти от шаблонного образа, дать бренду собственный визуальный язык и навести порядок в каталоге, чтобы тур можно было найти по сезону, региону и длительности.
ОГРАНИЧЕНИЕ
Сохранить контентную модель, которую команда уже ведёт в CMS: карточки туров, программы по дням, питание, локации, отзывы. Меняется подача, данные остаются прежними, поэтому внедрение не требует переписывать контент.
04ПРОЦЕСС
Больше двух месяцев работы в одиночку — от брифа до системы, готовой к вёрстке.
- Бриф с клиентом.
Разобрали с заказчиком цели сайта, аудитории и направления: Байкал, Сибирь, Дальний Восток, туры для школьников. Зафиксировал, какой контент уже есть и что должно остаться.
- Разбор текущего сайта.
Прошёл по главной, каталогу, странице тура, локациям и контактам на десктопе и телефоне. Собрал список проблем и то, что работает и должно сохраниться.
- Конкуренты и референсы.
Посмотрел сайты других туроператоров и тревел-медиа. Искал подачу, в которой место продаёт себя само, а цена и условия не спорят с фотографией.
- Концепция на главной.
Нашёл визуальный язык на главной: тёплый «бумажный» фон, антиква в заголовках, оранжевый из логотипа как единственный акцент.
- Шаблоны и UI-kit.
Разложил концепцию на девять шаблонов: главная, туры, тур, локации, локация, блог, пост, о нас, контакты. Повторяющиеся блоки вынес в компоненты.
- Адаптив.
Для каждого шаблона сделал отдельные макеты на 1024, 768 и 375 px, всего 36 экранов.
- Согласования и итерации.
Показывал решения клиенту по этапам, вносил правки и доводил макеты до согласованной версии. Сейчас сайт в разработке.
05РЕШЕНИЕ
Сначала место, потом прайс — и один акцент, который ведёт к действию.
На первом экране — фото льда во весь экран, заголовок «Туры на Байкал, которые хочется вспоминать» и две кнопки для двух сценариев: «Смотреть туры» и «Подобрать индивидуально». Оранжевый из знака логотипа оставил только для действий и ключевого слова в заголовках, синий — в логотипе. Заголовки набраны антиквой Cormorant Garamond, текст — Manrope, служебные подписи вроде длительности и региона — моноширинным JetBrains Mono. Получилась интонация тревел-журнала вместо прайс-листа.
5.1
Главная: из каталога в воронку
Старая главная повторяла каталог. Новую выстроил по пути покупателя: захотеть, выбрать, поверить, написать.
- Карточка тура: фото с подписью места, бейдж «Хит сезона», строка «2 дня / 1 ночь · Байкал», название, одна строка описания, цена и кнопка «Подробнее».
- Туры и экскурсии объединены в одну подборку с чипами: Все, Байкал, Дальний Восток, Сибирь, Для школьников.
- Отзыв показывает оценку, имя, город, месяц поездки и название тура — отзыв связан с продуктом.
- Форма заявки стоит в конце каждой ключевой страницы, рядом телефон, почта, адрес и часы работы.
ГЛАВНАЯ ЦЕЛИКОМ
5.2
Каталог: фильтры вместо простыни текста
Убрал SEO-текст с первого экрана и дал три фильтра — сезон, регион, длительность. Туры свёл в список строками с одинаковыми колонками: фото, название и маршрут, теги, длительность, цена. Так их удобно сравнивать сверху вниз. Туры без фиксированной цены получили явный статус «Расчёт по запросу».
5.3
Страница тура: главное до первого скролла
Здесь принимается решение о покупке, поэтому я сохранил всю информацию и перестроил порядок её чтения. Рядом с фото — четыре факта: длительность, сезон, сложность, размер группы. Под ними якорное меню: даты, стоимость, программа, бронирование, что включено. В программе у каждого дня крупный номер, маршрут дня, питание чипами, галерея и карточки мест «Вы сможете увидеть».
5.4
Локации: место продаёт туры в себя
Страницу локации сделал мини-путеводителем: лид, мозаичная галерея, «Несколько причин задержаться подольше» и разделы «Что посмотреть?», «Туры в Листвянку», «Карта». Интерес к месту сразу переходит в выбор тура.
06МОБИЛЬНАЯ ВЕРСИЯ
Оффер и кнопка — в первом экране, а не под меню.
- Меню убрал в бургер, шапку сжал до логотипа и кнопки.
- Кнопки растянул на всю ширину — по ним удобно попадать пальцем.
- Туры на главной листаются горизонтальной лентой с чипами-фильтрами, следующая карточка выглядывает справа.
ДЛИНА МОБИЛЬНОЙ ГЛАВНОЙ
Короче на 29%, хотя разделов в ней больше.
07ДИЗАЙН-СИСТЕМА
Своя айдентика и переиспользуемые компоненты вместо стандартной темы.
В основе тёплая «бумажная» палитра, в которой главным цветом становятся фотографии Байкала, и оранжевый из логотипа как единственный акцент. Все цвета и стили текста сохранены в Figma как стили. Собрал библиотеку компонентов: шапка в четырёх вариантах (прозрачная поверх фото и светлая, десктоп и мобильная), подвал, карточки туров, локаций, отзывов и статей, кнопки с состояниями, теги, соцсети, форма заявки.
ПАЛИТРА
- Orange#EE5A2B
- Orange Deep#C84518
- Blue#1F8FE8
- Gold#B89150
- Paper#FBF8F3
- Paper 2#EADFC7
- Primary Text#1A1814
- Tertiary#7A7163
ШРИФТЫ
- Cormorant GaramondЗАГОЛОВКИ
- ManropeТЕКСТ И ИНТЕРФЕЙС
- JetBrains MonoСЛУЖЕБНЫЕ ПОДПИСИ
СТАТИСТИКА
- 36макетов: 9 шаблонов × 1440 / 1024 / 768 / 375 px
- 78компонентов и вариантов в 20 наборах
- 12состояний у кнопки
- 13 + 12стилей текста и стилей цвета
08РЕЗУЛЬТАТ
Цельный сайт со своим характером и система, готовая к вёрстке.
Контент выстроен по понятной иерархии, тур находится в пару кликов, а доказательства доверия стоят рядом с решением о покупке.
