«Европа» — это ТРЦ в Липецке, в котором есть два атриума, оформленных под разные европейские города: Париж и Лондон. Занимает 60 000 квадратных метров. К пятилетию компания запускает новый сайт.
Результат Процесс
Сайт для торгово-развлекательного центра «Европа»
Сибирикс

свежий кейс

Сайт для торгово-развлекательного центра «Европа»

«Европа» — это ТРЦ в Липецке, в котором есть два атриума, оформленных под разные европейские города: Париж и Лондон. Занимает 60 000 квадратных метров. Ежедневная посещаемость — 982 000 человек. В настоящий момент строится вторая очередь ТРЦ, с вдвое большей площадью. К пятилетию компания запускает новый сайт.

Задачи

Разработать сайт ТРЦ, который будет служить одновременно инструментом привлечения арендаторов и платформой с полезной для покупателей информацией.
В дизайне сайта нужно было предусмотреть преемственность мотивов самой «Европы» — там очень оригинальное тематическое оформление интерьера. Да-да, это тот самый случай, когда ковер задает стиль всему помещению. Я сделал дизайн главной и потом только следил за преемственностью -)

Евгений
Арт-директор
Факт о «ЕВРОПЕ»
Факт: в ТРЦ «Европа» проходили съемки модного телешоу СТС «Успеть за 24 часа»

Анализ и идеи

Начинаем работу с уточнения потребностей проекта. Чтобы дизайн был успешно принят, нужно выполнить минимум два условия: сделать структуру, которая удовлетворяет задачам сайта, и попасть в ожидания заказчика от визуальной части.
Для первого есть скетчи — быстрые карандашные (или цифровые) наброски:
Для второго мы обычно используем мудборды.

ЧТО ТАКОЕ МУДБОРД

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

Дизайн

Создаем традиционные для презентационного сайта разделы: фотогалереи, новости, история ТРЦ.
Мы поместили контурные иллюстрации с европейскими городами на задний план страниц. Так решилась задача с преемственностью в дизайне — плюс к этому, картинки не статичные, они реагируют на положение курсора.

Екатерина
Руководитель проекта

На входе в «лондонский» атриум вас встречает почти настоящие королевские гвардейцы в медвежьих шапках и фирменных красных мундирах.

Наиболее интересная часть — карта.
Мы получили исходный план ТРЦ и полностью отрисовали эту схему для сайта. Это не статичная картинка, а интерактивный план, на котором можно узнать, где какой отдел находится.

Андрей
Дизайнер
Для карты нами были нарисованы все элементы будущей интерактивной карты павильонов, иконки, подготовлены к верстке логотипы арендаторов, паттерны и много чего еще. Было много итераций согласований и дополнений, но в результате добро победило и карта ушла программистам.

Тамара
Дизайнер

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

Верстка и код

Для каждого арендатора павильона загружается его логотип, заполняется описание, номер павильона, сайт компании, рабочие часы и контакты. Также добавляется фотогалерея.
Так что на сайте каждый отдел представлен более, чем хорошо. Кроме этого, все отделы есть на карте.
У «Европы» есть классная страница со списком арендаторов, с бесконечным скроллом и фильтром. И лоадер там красивый! Еще есть страница новостей, ради которой пришлось залезть в коды Битрикса и сделать так, чтобы была хитрая пагинация с разным количеством элементов на странице.

Денис
Разработчик
Карта сделана с помощью canvas. Кроме того, что она реагирует на клики по отделам, у карты есть еще любопытная особенность — в админке можно обозначать место входа в павильон с помощью координат. На карте оно обозначится стрелкой. Удобно для посетителей.

Андрей
Разработчик
В настоящий момент заказчик полностью взял на себя работу с контентом — сайт живет своей самостоятельной жизнью.

Готовый проект

Сайт торгового центра «Европа»: europatrc.ru