Жемчужная плаза

Доработки дизайна сайта ТРЦ «Жемчужная Плаза» и интерактивная схема торгового центра со всеми состояниями и сценариями

Интерактивный дизайн Обновление интерфейса

Дизайн интерактивной схемы ТРЦ «Жемчужная Плаза» и доработка сайта под обновлённую стилистику

О клиент

«Жемчужная Плаза» — торгово-развлекательный центр на юго-западе Санкт-Петербурга: магазины, рестораны, фудкорт, кинотеатр и развлечения для семьи. Сайт центра нужно было привести к обновлённой стилистике, а главное, дать посетителям удобный инструмент, чтобы быстро находить нужный магазин: интерактивную схему ТРЦ. За 1 месяц в 2025 году мы доработали дизайн всех разделов сайта и спроектировали схему со всеми состояниями и сценариями.

Карточка проекта

Параметр	Значение
Клиент	ТРЦ «Жемчужная Плаза», Санкт-Петербург
Сайт	pearlplaza.ru
Ниша	Торговая недвижимость, ритейл и развлечения
Что сделали	Доработки дизайна всех разделов сайта, дизайн интерактивной схемы ТРЦ
Объём	Около 12 разделов сайта; схема ТРЦ с тремя этажами и фильтром из 20 категорий
Срок	1 месяц
Год	2025
Инструмент	Figma

Задача

Необходимо было внести доработки в дизайн для всех разделов сайта и разработать дизайн интерактивной схемы ТРЦ со всеми состояниями и сценариями.

Цель: улучшить дизайн сайта в соответствии с обновлённой стилистикой.

Что это значит на практике:

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

Решение

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

Структура сайта

Раздел	Что внутри
Главная	Видеобаннеры акций, часы работы центра и ключевых арендаторов, блоки «Акции и новости», «Магазины», «Кафе и рестораны», «Сейчас в кино», контакты
Схема ТРЦ	Интерактивный план этажей с фильтром по категориям
Магазины, Еда, Развлечения	Каталоги арендаторов с категориями и этажами
Акции и новости	События и новости центра
Кинотеатр	Афиша и ссылки на сеансы
О ТРЦ, Арендаторам	Информация о центре и для арендаторов
Подарочная карта	Описание карты
Парковка, Контакты, Документы	Справочные разделы

Ключевые решения

Схема как главная точка входа

Кнопка «Схема ТРЦ» стоит в шапке, меню и нижней мобильной навигации, поэтому посетитель попадает к ней в один шаг

Фильтр по категориям

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

Связь схемы и каталога

Магазины в каталоге ведут на схему, а на схеме открывается карточка магазина с этажом и категорией

Все состояния схемы

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

Единый стиль всех разделов

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

Видео в акциях

Крупные видеобаннеры на главной подчёркивают события и новости центра

Как мы работали

Аудит разделов

Прошли по всем разделам сайта и составили список доработок под обновлённую стилистику

Сценарии схемы

Описали, как посетитель ищет магазин: по названию, по категории, по этажу

Дизайн схемы

Нарисовали интерактивную схему и её состояния для десктопа и телефона

Доработка разделов

Привели остальные страницы к единым компонентам

Передача

Подготовили макеты и описание состояний для разработки

Сложности и как их решили

Сложность	Как решили
Доработки нужны во всех разделах за один месяц	Опирались на общие компоненты и шаблоны, а не рисовали каждую страницу с нуля
Схема должна быть понятной без инструкции	Простой набор действий: выбрать этаж, выбрать категорию, нажать на магазин
Много категорий и магазинов	Фильтры и поиск, чтобы схема не превращалась в перегруженный план
Схема нужна и на телефоне	Отдельное мобильное поведение: масштабирование, переключение этажей, карточка снизу
Все состояния должны быть описаны для разработки	Спроектировали состояния и переходы, а не только основной экран

Результаты

Что получил клиент	Итог
Обновлённый дизайн	Все разделы сайта в единой стилистике
Интерактивная схема	Макеты схемы ТРЦ со всеми состояниями и сценариями
Мобильная версия	Адаптация схемы и разделов под телефон
Основа для разработки	Макеты и описание состояний

Почему этот кейс важен для вашего проекта

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