свежий кейс
Сайт для торгово-развлекательного центра «Европа»
«Европа» — это ТРЦ в Липецке, в котором есть два атриума, оформленных под разные европейские города: Париж и Лондон. Занимает 60 000 квадратных метров. Ежедневная посещаемость — 982 000 человек. В настоящий момент строится вторая очередь ТРЦ, с вдвое большей площадью. К пятилетию компания запускает новый сайт.
Задачи
Разработать сайт ТРЦ, который будет служить одновременно инструментом привлечения арендаторов и платформой с полезной для покупателей информацией.
В дизайне сайта нужно было предусмотреть преемственность мотивов самой «Европы» — там очень оригинальное тематическое оформление интерьера. Да-да, это тот самый случай, когда ковер задает стиль всему помещению. Я сделал дизайн главной и потом только следил за преемственностью -)
![](https://s29805.cdn.ngenix.net/upload/tilda/ef6/ef677743ddd11238aca7e8a49d6b5b82.png)
Евгений
Арт-директор
Каждый атриум оформлен в тематике разных европейских городов
Анализ и идеи
Начинаем работу с уточнения потребностей проекта. Чтобы дизайн был успешно принят, нужно выполнить минимум два условия: сделать структуру, которая удовлетворяет задачам сайта, и попасть в ожидания заказчика от визуальной части.
Для первого есть скетчи — быстрые карандашные (или цифровые) наброски:
![](https://s29805.cdn.ngenix.net/upload/tilda/0d1/0d1b54bfccbba91e6ed00d89fb750e31.jpg)
Для второго мы обычно используем мудборды.
ЧТО ТАКОЕ МУДБОРД
Мудборд — «доска настроения» с референсами, которые очень удобно обсуждать с заказчиком и выбирать стиль, который нравится. Применяем в своих дизайн-процессах с 2013-го года. По одной из версий, впервые применялись в мультипликационной студии Уолта Диснея для создания нужного настроения у персонажного иллюстратора.
![](https://s29805.cdn.ngenix.net/upload/tilda/5a8/5a8f6f1fe3c3f13b38c0620f31832430.jpg)
Предлагаем следующую концепцию главной страницы:
![](https://s29805.cdn.ngenix.net/upload/tilda/d5a/d5ae92a7978aa826f1bce8944ad5e0f8.jpg)
Утверждено, время дизайна!
Дизайн
Создаем традиционные для презентационного сайта разделы: фотогалереи, новости, история ТРЦ.
Мы поместили контурные иллюстрации с европейскими городами на задний план страниц. Так решилась задача с преемственностью в дизайне — плюс к этому, картинки не статичные, они реагируют на положение курсора.
![](https://s29805.cdn.ngenix.net/upload/tilda/1e3/1e38d67f67bd20cf7b2fbf884b10e80d.png)
Екатерина
Руководитель проекта
На входе в «лондонский» атриум вас встречает почти настоящие королевские гвардейцы в медвежьих шапках и фирменных красных мундирах.
Наиболее интересная часть — карта.
Мы получили исходный план ТРЦ и полностью отрисовали эту схему для сайта. Это не статичная картинка, а интерактивный план, на котором можно узнать, где какой отдел находится.
![](https://s29805.cdn.ngenix.net/upload/tilda/002/002eca23fafd5e826d346a0f5ef6e90d.png)
Андрей
Дизайнер
![](https://s29805.cdn.ngenix.net/upload/tilda/954/954032d5f3d145326804fb048cd16ba7.jpg)
Для карты нами были нарисованы все элементы будущей интерактивной карты павильонов, иконки, подготовлены к верстке логотипы арендаторов, паттерны и много чего еще. Было много итераций согласований и дополнений, но в результате добро победило и карта ушла программистам.
![](https://s29805.cdn.ngenix.net/upload/tilda/25c/25c43d61fea7a0bb9444edc62ce59d79.png)
Тамара
Дизайнер
Рядом с картой есть фильтр: можно быстро посмотреть, где отделы для «красоты и здоровья», а где для продают ювелирку.
Верстка и код
Для каждого арендатора павильона загружается его логотип, заполняется описание, номер павильона, сайт компании, рабочие часы и контакты. Также добавляется фотогалерея.
Так что на сайте каждый отдел представлен более, чем хорошо. Кроме этого, все отделы есть на карте.
У «Европы» есть классная страница со списком арендаторов, с бесконечным скроллом и фильтром. И лоадер там красивый! Еще есть страница новостей, ради которой пришлось залезть в коды Битрикса и сделать так, чтобы была хитрая пагинация с разным количеством элементов на странице.
![](https://s29805.cdn.ngenix.net/upload/tilda/454/454177b2456e6993293d96dde9ea4843.jpg)
Денис
Разработчик
Карта сделана с помощью canvas. Кроме того, что она реагирует на клики по отделам, у карты есть еще любопытная особенность — в админке можно обозначать место входа в павильон с помощью координат. На карте оно обозначится стрелкой. Удобно для посетителей.
![](https://s29805.cdn.ngenix.net/upload/tilda/fd2/fd24d5f23f4bad11fb8cc1f54a486e23.png)
Андрей
Разработчик
В настоящий момент заказчик полностью взял на себя работу с контентом — сайт живет своей самостоятельной жизнью.