Корпоративный сайтWe Make · 2024UI‑китАдаптив

Bai Group
сайт туроператора по новому брендбуку

Крупный туроператор прошёл ребрендинг и получил от агентства новый фирменный стиль. Задача студии — собрать на его основе сайт: туры, визы, авиабилеты, страхование и всё, что нужно клиенту перед поездкой.

СрокОколо месяца
РольДизайн всех страниц, UI‑кит, адаптив
Объём19 десктопных + 19 мобильных страниц
КомандаСтудия We Make: PM, разработчики
Главная страница
Мобильная версия
01 — Брендбук → сайт

Как фирменный стиль стал интерфейсом

В брендбуке были логотип, паттерн-орнамент, четыре градиента и шрифт Geologica. Ни один из этих элементов не придуман для экрана — нужно было решить, где они работают, а где мешают.

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

Паттерн — только в шапках разделов и промо-блоках, с низкой плотностью. В каталоге туров его нет: там и так много фотографий.

Geologica — для заголовков в плотной начертании, для текста — обычное. Синий из брендбука стал ведущим цветом кнопок и ссылок, светлая основа — чтобы фотографии направлений были главными.

  • Турыоранжевый градиент
  • Визыфиолетовый градиент
  • Авиабилетысиний градиент
  • Страхованиезелёный градиент
02 — Страницы

Главная, туры, направления, авиабилеты, о компании

На главной — поиск тура, направления по категориям и быстрые входы в визы и билеты. Страница направления собирает всё о стране: отели, сезон, визовые требования, туры в рассрочку.

Главная
Главная — нажмите, чтобы открыть целиком
Туры за рубеж
Туры за рубеж — фильтры и карточки
Таиланд
Направление — Таиланд
Авиабилеты
Авиабилеты — поиск и рассрочка
О компании
О компании
UI-кит
Фрагмент UI‑кита: кнопки, поля, карточки, состояния
03 — Мобильная версия

19 страниц для телефона

Формы поиска тура и билетов собраны заново под один столбец: шаги вместо строки полей, крупные кнопки, липкая кнопка «Подобрать тур».

Главная — мобильная
Авиабилеты — мобильная
Страхование — мобильная
04 — Как работали

В команде студии

Проект вёл менеджер студии, тексты и структуру согласовывали с клиентом, разработчики получали макеты по мере готовности разделов. Моя зона — весь дизайн: от UI‑кита до последней мобильной страницы и состояний форм.

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

Обсудим ваш проект?

Начните со структуры и аудита — это бесплатно
и ни к чему не обязывает