Главная
/
Кейсы фирменных стилей сайтов
/
Аренда бани на дровах в Люберцах

Фирменный стиль для сайта «Богатырские бани» — айдентика, которая продаёт атмосферу

Разработан полноценный фирменный стиль для сайта банного комплекса «Богатырские бани» (bogbani.ru). Проект включает визуальную айдентику, типографическую систему, UI Kit, адаптивную вёрстку и SEO-структуру. Ключевая задача — через дизайн передать надёжность, тепло русской бани на дровах и удержать внимание посетителя до бронирования.

Клиент

«Богатырские бани» (bogbani.ru)

Ниша

Аренда бани на дровах, отдых в Подмосковье

География

Люберцы, Московская область (д. Мотяково)

Задача

Создание визуальной айдентики, усиливающей доверие и конверсию

Разработчик

Роман Межевов

Сайт разработчика

direct-result.ru

Почта разработчика

romserg2012@gmail.com

Год разработки

2026

Исходные данные и задача

Бизнес-контекст

Загородный банный комплекс в д. Мотяково (Люберцы). Услуга — аренда домика с баней на дровах, бассейном, купелью, мангальной зоной. ЦА — жители Москвы и Подмосковья (30–55 лет), семьи, компании друзей, корпоративные клиенты.

Задача

Передавать аутентичность и тепло русской бани на дровах
Выглядеть современно и вызывать доверие
Усиливать конверсию через чёткую иерархию и акценты
Учитывать требования SEO и поведенческих факторов

Концепция и цветовая философия

Ключевой визуальный приём

Сочетание «натурального ремесла» и «цифровой чистоты».

Цветовая палитра

Основной брендовый#8B4513Кнопки CTA, заголовки H1/H2, логотип, активные ссылки

Вторичный акцентный#C45632Ховеры, кнопки внутри форм, второстепенные акценты

Фоновый#F5F1EBФон сайта, футер, карточки

Основной текст#2F2F2FПараграфы, основной контент

Второстепенный текст#5F5F5FПодсказки, подписи, триггеры

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

Типографическая система

Акцентный шрифт (заголовки H1, логотип)

Playfair Display
Вес: 700 для H1, 600 для логотипа.
Цель: Классика, традиция, надёжность.

Основной шрифт (всё остальное)

Manrope
Весовая шкала: 300 (мелкие подписи) → 400 (текст) → 500 (меню, H3) → 600 (H2, кнопки).
Цель: читаемость, современность, техничность.

Иерархия размеров (десктоп / мобильный)

ЭлементДесктопМобильный

H148px36px

H236px28px

H324px20px

Основной текст16px14px

Мелкий текст14px12px

Компонентный дизайн (UI Kit)

4.1. Кнопки

Основная CTA

Обычное: #8B4513, текст #FFF. Hover: #A0522D. Active: #5D2906.

Вторичная

Прозрачный фон, обводка #8B4513. Hover: фон #8B4513, текст #FFF.

Кнопка внутри формы

Обычное: #C45632, текст #FFF. Hover: #D8734F. Active: #9B3A1E.

Скругления: кнопки меню — 8px, кнопки форм — 10px, карточки — 12px, форма — 16px.

4.2. Навигация (Header)

Фон: #FFFFFF с opacity: 0.85 → при скролле 0.98
Тень: 0 2px 12px rgba(43, 22, 2, 0.08)
Цвет пунктов меню: обычный #2F2F2F → hover #8B4513 → активный #C45632
Логотип: Playfair Display 700, #8B4513
Дескриптор: Manrope 500, #5F5F5F, размер 14px

4.3. Формы и попапы

Фон формы: #FFFFFF с opacity: 0.92
Оверлей попапа: #000000, opacity: 0.65
Поля ввода: граница #CCCCCC, фокус #8B4513, скругление 6px
Плейсхолдер: #888888, текст в поле #2F2F2F

Структура главной страницы (визуальный порядок)

Hero-блок — Фон: изображение бани с градиентным оверлеем. Надзаголовок, H1, список ценностей, форма бронирования с триггерами.

H2: «Уютный банный комплекс с бассейном в Подмосковье» — Характеристики (вместимость, площадь, комнаты, парная, бассейн, купель).

Галерея — После первого H2.

H2: «Тарифы и стоимость аренды бани» — Почасовой / Полдня / Сутки. Что входит в стоимость и дополнительные услуги.

H2: «Баня для компании: от 6 до 15 человек и более» — Организация праздников и корпоративов, отзывы гостей.

H2: «Как забронировать баню в Люберцах» — Процесс бронирования, контакты, график работы, карта.

FAQ — Вопросы и ответы.

Футер — Навигация, контакты, соцсети.

Адаптивность и взаимодействие

Мобильная версия: гамбургер-меню, шрифты уменьшены на ~20%, таблицы тарифов — вертикальные карточки.
Анимации: плавный скролл по якорям, fade-in при скролле, ховеры с изменением фона/цвета.
Микро-взаимодействия: кнопки меняют цвет при наведении, поля формы подсвечиваются при фокусе.

Семантическая и SEO-связка с визуалом

Hero и H1

Аренда бани в Подмосковье, русская баня на дровах, баня люберцы

Блок тарифов

Почасовая аренда, стоимость аренды на сутки, сколько стоит снять баню

Блок «Для компании»

Баня для компании 6–15 человек, организация корпоративов

Форма и кнопки

Забронировать баню, узнать стоимость, бесплатная консультация

Футер

Адрес в д. Мотяково, телефон, контакты

Результат визуальной системы

Единая идентичность — Цвета, шрифты, компоненты унифицированы на всех страницах.

Конверсионный дизайн — Акцентные кнопки CTA, форма в Hero-блоке, триггеры доверия.

SEO-дружественность — Правильная иерархия заголовков, ключевые слова в видимых текстах.

Читаемость и контраст — Все тексты соответствуют WCAG.

Адаптивность — Плавное сжатие до мобильных размеров без потери смысла.

Краткое резюме

Разработанная айдентика решает ключевую задачу: через визуал и структуру передать надёжность и атмосферность услуги. Цветовая гамма работает на ассоциацию с деревом, огнём и чистотой. Типографика создаёт контраст между традицией (Playfair Display) и современностью (Manrope). Компоненты кнопок и форм подчинены единой цели — конверсии. Структура страницы следует логике пользовательского пути от первого касания до бронирования.

Контакты разработчика

Роман Межевов

direct-result.ru | romserg2012@gmail.com | SEO, веб-разработка, контекстная реклама, разработка фирменного стиля