Лендинг для банного комплекса «Крылья»: дизайн и анимация «из пара»

«Крылья»: банный комплекс с русской баней, баней по-чёрному, программами парения и гостевым домом. Для него мы нарисовали дизайн лендинга в Figma: тёмная страница с живыми фото бань, жёлтыми кнопками и паром, из которого проявляются слова. Потом собрали мобильную версию, сверстали страницу с мягкой анимацией и добавили окна программ с бронью. На дизайн ушло 12 часов, вёрстка с правками заказчика заняла 55 дней (с 10 апреля по 4 июня 2024 года).

Что хотел клиент

Банному комплексу нужна была одна страница, где гость видит, какие здесь бани, сравнивает программы парения и бронирует. Заказчик прислал структуру страницы в таблице, а фото и тексты на диске. Тексты у клиента тёплые и без спешки: «Мир релаксации и восполнения жизненной энергии». Под такие слова нужен был и вид страницы. Отдельно просили плавную, расслабляющую анимацию по всей странице.

Дизайн делали не с белого листа. Дизайнер взял наши прежние наработки как основу и переделал их под баню. 4 апреля 2024 года макет главной был готов, 10 апреля к нему добавилась мобильная версия. Всё лежит в Figma: отдельные листы для компьютера, телефона и лендинга. Ниже макет, как он нарисован, блок за блоком.

Первый экран

Страницу открывает не картинка из каталога, а фото самой бани с раскалёнными камнями. Тёплое дерево и огонь сразу говорят, о чём сайт. Надпись «добро пожаловать» нарисована размытой: это та самая минута, когда слова ещё в паре и вот-вот проявятся. Ниже значок пара подсказывает, что страницу можно листать, а кнопка «Смотреть бани» ведёт к главному. Вверху логотип по центру, меню слева, значки мессенджеров и телефона справа.

Макет страницы блок за блоком

О нас

Четыре плитки с фото разной высоты создают ощущение движения, а у каждой свой жёлтый значок. Текст короткий: две строки о том, зачем гости сюда приходят. Слова «релакс» и «оздоровление» проступают из тумана внизу: это пар, в котором теряются буквы, как просили в задаче.

Наши бани

Две бани показаны как две разные истории: светлая, с деревом, и тёмная, с кирпичной печью. Каждая в своей карточке с коротким описанием и кнопкой «Подробнее». Ниже лента с большим фото, которая листается вбок. Гость сначала смотрит, потом читает.

Почему выбирают нас

Шесть причин в три колонки. У каждой жёлтый значок, короткий заголовок и два-три предложения. Значки нарисованы в одном стиле, поэтому блок читается сразу, без чтения всего текста.

Баня по-белому

Каждая баня открывается большим фото на весь экран и кнопкой «Записаться». Под фото карточка: площадь, вместимость, длительность, цена и список того, что входит. Ниже четыре программы парения в маленьких карточках: ароматерапия, основное парение, отдых и догрев. Всё, что нужно для решения, собрано в одном месте.

Баня по-чёрному

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

Аренда дома

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

Подарите сертификат

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

Расписание клубных дней

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

Мобильная версия

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

Детали интерфейса

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

Меню

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

Карточки бань раскрываются

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

Окно программы с бронью

Это доработка, которую заказчик попросил 6 мая 2024 года: чтобы программы открывались во всплывающем окне. В окне есть фото, цена, параметры, описание того, что входит, и форма из двух полей. Кнопка называется «Забронировать баню», а не «Отправить»: гость сразу понимает, что произойдёт дальше. Дизайнер нарисовал карточку с кнопкой и рядом окно. Программ в документе оказалось много, поэтому он предложил слайдер под блоком «Аренда дома».

Формы

Форма записи короткая: заголовок «Запишитесь на посещение бани», пояснение, что менеджер свяжется и поможет выбрать тариф, два поля и жёлтая кнопка. Два поля вместо длинной анкеты: имя и телефон.

Анимация из пара

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

Первую версию страницы показали 23 апреля. На проверке заметили, что надписи с эффектом и крупные фоновые фото грузятся долго: каждое фото весило больше мегабайта. Фото сжали специальным сервисом и вставили заново, чтобы страница открывалась быстрее. Дальше шли правки заказчика: 6 мая он прислал список изменений, и их внесли. 8 мая у каждого из десяти блоков появился свой якорь.

Как шла работа

Что получилось

Лендинг принят заказчиком 4 июня 2024 года. Банный комплекс получил страницу, которая выглядит как сама баня: тёмная, тёплая, с паром, который проявляет слова. Гость видит бани, читает про программы в окне и бронирует там же.

Нужен такой лендинг?

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