Аренда видовых резиденций

О клиенте

«Резиденции Москва» — сервис аренды панорамных апартаментов премиум-класса, расположенных в легендарном здании гостиницы «Москва» на Охотном Ряду, в двух минутах от Красной площади. Номерной фонд включает резиденции площадью от 65 до 240 м² с панорамными видами на Кремль, Манежную площадь и Театральную площадь.

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

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

С чем пришли: 5 задач

Перед стартом проекта заказчик сформулировал пять требований к новому сайту:

1. Премиальный визуальный язык. Дизайн должен соответствовать уровню объекта: сдержанная роскошь, никакой крикливости, акцент на атмосферу и пространство.

2. Каталог резиденций с фильтрацией. Гостю нужно быстро найти подходящий вариант по площади, этажу, виду из окна и стоимости. Без фильтрации перебор 40+ вариантов вручную — потеря конверсии.

3. Мобильная версия всех страниц. Аудитория бронирует с телефона. Десктопная вёрстка, адаптированная медиазапросами — не вариант: требовалась полноценная проработка мобильного интерфейса для каждой страницы.

4. Интеграция с Instagram. Шесть актуальных постов из официального аккаунта должны выводиться на сайте и обновляться автоматически — никакого ручного дублирования контента.

5. Формы с генерацией PDF. Заявки «Перезвоните мне» и «Забронировать на длительный срок» должны формировать PDF-документ для внутреннего документооборота — не просто письмо на почту, а структурированный файл с данными гостя.

Решение 1. Дизайн: премиальный минимализм с акцентной типографикой

Дизайн-макеты разработаны в Pixso и переданы на вёрстку. Визуальная система построена на контрасте монументальной акцидентной гарнитуры и нейтрального текстового шрифта:

• PF Monumenta Pro — заголовки от 96 до 24 px. Крупное начертание на всю ширину экрана задаёт тон: статус, уверенность, дорогая простота.
• Roboto — наборный текст от 36 до 14 px. Нейтральная геометричная гарнитура, которая не спорит с Monumenta, а уводит внимание на фотографии интерьеров.

Цветовая палитра из четырёх оттенков: taupe #4F4551, dark #151515, gold #C57729, copper #AE826E. Пара «тёмный фон + золотой акцент» использована на главной странице и в шапках внутренних разделов — приём, характерный для люксовых гостиничных брендов. Никаких градиентов, теней и декоративных элементов: пространство держится на ритме крупных фотографий и разреженной вёрстке.

Типографическая система последовательно проведена через все 12 страниц.

На странице 404 — кастомный дизайн с крупным заголовком Monumenta Pro и навигационной подсказкой, стилистически неотличимый от остального сайта.

Решение 2. Структура: 12 страниц с логикой гостиничного сайта

Сайт построен на 1С-Битрикс (редакция «Управление сайтом») с кастомным шаблоном. Вёрстка всех страниц — с нуля, без использования стандартных компонентов.

Навигация отражает путь гостя от первого знакомства до бронирования:

• Главная — полноэкранный блок с панорамой Кремля, блок «Преимущества» с иконками сервисов, превью каталога резиденций и форма быстрой связи.
• Варианты размещения — карточки резиденций с фотографией, метражом, этажом и ценой.

Слева — панель фильтрации по площади, этажу, виду из окна и стоимости. Фильтрация работает без перезагрузки страницы, через AJAX-запросы к инфоблокам Битрикса.

• Детальная страница резиденции — фотогалерея интерьера, планировка, перечень оснащения, форма запроса цены.

• Галерея — полноэкранная фотогалерея интерьеров и видов с grouped-навигацией по категориям.

• О Резиденциях Москва — история здания, концепция сервиса, команда.

• Услуги и комплектация — таблица оснащения резиденций с разбивкой по категориям: техника, текстиль, уборка, консьерж.

• Расположение — интерактивная карта с отметкой здания и пешеходными маршрутами до ключевых точек центра Москвы.
• Предложение — спецпредложения и сезонные акции.
• Забронировать — форма бронирования с календарём заезда/выезда, выбором резиденции и расчётом стоимости.

• Контакты — адрес, телефон, схема проезда, форма обратной связи.
• Новости и акции — лента публикаций с пагинацией и детальная страница новости.
• 404 — кастомная страница с навигацией и формой связи.

Каждая страница имеет мобильную версию: не адаптацию десктопа медиазапросами, а отдельно проработанный макет в Pixso. Меню на мобильных устройствах трансформируется в «гамбургер» с выпадающим списком разделов, галерея переходит в вертикальный скролл, формы сокращают количество полей до минимума.

Решение 3. Интеграция Instagram: живые посты без плагинов

Шесть последних постов из официального аккаунта Instagram выводятся в подвале главной страницы и на внутренних страницах. Интеграция реализована через API Instagram Basic Display: серверная часть периодически запрашивает медиафайлы и сохраняет их кеш в инфоблоках Битрикса. Такой подход исключает зависимость от сторонних плагинов, которые ломаются при каждом обновлении политики Meta.

При недоступности API (блокировка, смена токена) сетка постов не исчезает — вместо неё показывается статический блок с приглашением подписаться.

Решение 4. Формы с генерацией PDF

Две ключевые формы — «Перезвоните мне» и «Забронировать на длительный срок» — интегрированы с библиотекой генерации PDF на стороне сервера. После отправки заявки формируется PDF-файл, содержащий:

• Дату и время обращения;
• Имя, телефон и email гостя;
• Выбранную резиденцию и даты заезда/выезда (для формы бронирования);
• Комментарий гостя.

PDF сохраняется в файловой системе сайта, дублируется в почтовом уведомлении менеджеру и доступен для скачивания из административной панели. Решение исключает ситуацию «письмо потерялось в спаме», типичную для проектов, где заявки отправляются только на email.

Решение 5. Мобильная версия: 12 отдельных макетов

Мобильная адаптация затронула каждую страницу сайта. Для Pixso подготовлены отдельные макеты под ширину 375 px, а не просто «резиновая» вёрстка с медиазапросами поверх десктопа.

Ключевые отличия мобильной версии:

• Навигация трансформируется в боковое меню с плавной анимацией выезда;
• Карточки каталога перестраиваются в вертикальную ленту — по одной карточке на экран;
• Галерея переходит в swipe-режим с точками-индикаторами;
• Формы сокращены до 3–4 полей: имя, телефон, email — и кнопки отправки во всю ширину экрана (удобно для нажатия большим пальцем);
• Фильтрация каталога вынесена в отдельный полноэкранный слой — гостю не нужно скроллить длинную страницу с результатами и фильтрами одновременно.

Шрифтовая система на мобильных устройствах скорректирована: Monumenta Pro в заголовках уменьшена до 36–18 px без потери визуального веса, Roboto сохраняет читаемость от 16 px.

Итоги проекта

Параметр	Реализация
Количество страниц	12 уникальных макетов (десктоп + мобильная версия каждой)
Дизайн	Индивидуальные макеты в Pixso, премиальный минимализм, 4 цвета, 2 гарнитуры
Каталог	40+ резиденций с фильтрацией по 4 параметрам без перезагрузки страницы
Платформа	1С-Битрикс (Управление сайтом), кастомный шаблон
Интеграция Instagram	Автоматическая подгрузка 6 постов через API Basic Display
Формы	2 формы с генерацией PDF и дублированием в почту
Мобильная версия	12 отдельных мобильных макетов, touch-оптимизация интерфейса
Страница 404	Кастомный дизайн в стилистике сайта
Контент	Все тексты написаны под визуальную концепцию, без шаблонных SEO-полотен

Типичные ошибки в похожих проектах

1. Адаптивный дизайн вместо мобильной версии. Медиазапросы растягивают и сжимают десктопный макет, но не меняют логику взаимодействия. В премиум-сегменте мобильный интерфейс должен быть спроектирован отдельно: крупные touch-цели, скрытые фильтры, swipe-галереи. Десктоп, сжатый до 375 px, — это не мобильная версия, а компромисс, который виден сразу.

2. Шаблонные SEO-тексты на страницах резиденций. Тексты вроде «Аренда apartments в Москве недорого» разрушают ощущение премиальности. Описания резиденций должны быть написаны в тональности гостиничного контента: сухо, фактурно, с деталями интерьера и оснащения.

3. Галерея без grouped-навигации. Фотографии вперемешку — интерьеры, виды, детали — дезориентируют гостя. Галерея должна группировать изображения по категориям: интерьеры резиденций, виды из окон, общественные зоны — и давать быстрый переход между группами.

4. Формы только на email. В высоком ценовом сегменте потеря заявки из-за спам-фильтра стоит десятки тысяч рублей. Дублирование в PDF на сервере и хранение в админпанели — страховка, которая окупается на первой же подтверждённой брони.

5. Instagram через iframe или плагин. Сторонние плагины ломаются при каждом обновлении API Meta. Кеширование постов на своей стороне через серверные запросы к Instagram API — надёжнее и не зависит от версии плагина.

Заключение

Проект «Резиденции Москва» — пример того, как веб-разработка в премиум-сегменте отличается от типового корпоративного сайта. Здесь нет права на компромиссную вёрстку: мобильная версия требует отдельного проектирования, типографика работает на восприятие статуса, а технические решения (PDF-формы, серверный кеш Instagram) страхуют бизнес от потери заявок.

Решающим обстоятельством стало проектирование всех 12 страниц и их мобильных версий до начала вёрстки. Когда дизайн-макеты для десктопа и мобильных устройств готовы одновременно, разработчик не принимает компоновочных решений на ходу — результат на выходе соответствует макету пиксель-в-пиксель.