Разработка сайта для ТРЦ «Галерея»

ТРЦ «Галерея» — крупный торгово-развлекательный центр Санкт-Петербурга, расположенный в историческом здании рядом с Московским вокзалом. Когда команда «Галереи» обратилась к нам, перед нами стояла задача: редизайн сайта и перенос его с Laravel на 1С-Битрикс. Это превратилось в масштабный проект, где важно было не только реализовать технический переход, но и выстроить новую визуальную концепцию, отражающую характер самого торгового центра.

У «Галереи» уже был сайт, который визуально устарел. Контент выглядел неоднородным: формат изображений был разным, визуальные решения не поддерживали бренд. Новый сайт должен был не только привести всё в порядок, но и отразить характер самого ТРЦ.

Одним из ярких визуальных решений стал образ античных скульптур в современной городской среде — Давид Микеланджело со стаканчиком кофе, Венера Милосская с мобильным телефоном. Эти образы были сгенерированы нашим дизайнером с помощью нейросетей, но ни один из них не остался «сырым». Каждую картинку мы дорабатывали вручную, чистили детали, подгоняли под смысл и эстетику. Визуальные ассоциации с искусством не были надуманными: ТРЦ «Галерея» находится в здании с архитектурной лепниной стиля ампир и скульптурами, так что идея «галереи в галерее» сработала и с точки зрения метафоры, и как визуальный идентификатор.

Эта концепция не только понравилась клиенту, но и начала внедряться в оффлайн ещё до официального релиза сайта. Например, стойки с мороженым в самом ТРЦ уже украшали изображения Давида с мороженым. Это тот случай, когда визуальный стиль сайта проникает в городскую среду и становится частью бренда за пределами digital.

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

Особое внимание уделили мобильной версии сайта, поскольку основной трафик поступает с мобильных устройств. Мобильный интерфейс сделан удобным и понятным.

На бэкенде стояла задача сохранить логику старого сайта, но уже на 1С-Битрикс. Особенно это касалось взаимодействия с арендаторами — магазинами и ресторанами.

Основной функционал:

• Каталоги магазинов, ресторанов и сервисов с карточкой и фильтрами;

• Личный кабинет партнёра, где арендаторы сами управляют информацией, акциями и новостями;

• Система модерации контента: публикации проходят ручную проверку с уведомлениями и статусами;
• Трёхъязычная структура: весь контент ведётся сразу на русском, английском и китайском языках — важно для туристического трафика в центре Петербурга;

• Визуальный конструктор страниц на базе Сайты24, кастомизированный под стиль клиента. Теперь админка позволяет без участия разработчиков собирать лендинги или временные страницы, например, под новогодние мероприятия, из подготовленных и задизайненных нами блоков, а также из стандартных блоков от Битрикса по желанию клиента.
• Интеграция через API: данные сайта используются для навигационной панели в ТРЦ и мобильного приложения. При этом структура API была сохранена почти без изменений, чтобы не ломать работу сторонних систем. Это потребовало детального анализа и ручного проектирования интерфейсов, которые на выходе были идентичны тем, что использовались на Laravel.

Кинотеатр в ТРЦ представлен как отдельный модуль. Афиша фильмов формируется через интеграцию с Афиша.ру. Сайт получает данные через токены и API о текущих релизах, о расписании сеансов, о постерах, описаниях, актёрском составе и режиссёрах, а также о форматах 2D и 3D.

После выбора сеанса открывается виджет Афиша.ру, через который пользователь покупает билет. Внедрена функция просмотра трейлеров прямо на сайте — ранее такой возможности не было.

Афиша реализована в двух форматах отображения: списком и карточками. Также реализованы фильтры: по жанрам, по времени сеанса, по дате.

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

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

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

Теги релевантности предназначены для объединения похожих магазинов. Это даёт возможность клиенту объединять магазины не только по категориям товаров, но и по другим признакам, например, по уровню цен.

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

Подарки:

• имеют категории, например, по статусу или типу,
• сопровождаются описанием, ценой в баллах и сроками действия,
• доступны через поиск.

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

На сайте размещён виджет навигации, предоставляемый внешним подрядчиком и встроенный через iframe. Виджет позволяет найти магазин, переключаться между этажами и прокладывать маршрут внутри центра.

Сайт предлагает простую навигацию для построения маршрута до ТРЦ. При нажатии на кнопку «Построить маршрут» автоматически открывается картографическое приложение, например, Яндекс или Google Карты, с заранее заданной точкой — «Галерея».

Меню на мобильной версии:

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

Мы реализовали гибкий модуль уведомлений — маркетинговые поп-апы. Они настраиваются через админку и срабатывают по разным триггерам:

• при попытке закрыть вкладку,
• по прошествии заданного времени, например, 30 секунд,
• при посещении определённых страниц.

Каждый поп-ап может содержать заголовок, описание, изображение, кнопку, форму.

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

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

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

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

• Frontend: HTML, CSS, JavaScript 
• Backend: 1С-Битрикс

• Аккаунт-менеджер
• Проджект-менеджер
• Арт-директор
• Дизайнер
• Frontend-разработчик
• Backend-разработчики