• Корпоративный сайт
  • UX/UI-дизайн
  • Разработка

Сарыарка.
Планы на сегодня

Сайт торгового центра: магазины, киноафиша и информация для арендаторов в одной структуре.

Обсудить проект
Мобильная версия Сарыарка
Клиент
ТРЦ Сарыарка
Сфера
Торгово-развлекательный центр
Работа ABC
Разработка под ключ
Формат
Корпоративный сайт

Задача проекта

Спланировать визит ещё до поездки

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

Мы связали знакомство с брендом с конкретными действиями посетителя. У информационных разделов и пользовательских сервисов — свои места в общей структуре.

ABC Design выполнила дизайн и разработку. В кейсе показываем визуальную систему и ключевые сценарии проекта.

Три задачи — три понятных маршрута

Начать со своей цели и перейти к нужному разделу.

За покупками

За покупками

Каталог помогает познакомиться с магазинами торгового центра.

Магазины · Бренды
За впечатлениями

За впечатлениями

Кино и развлечения дополняют обычный маршрут покупателя.

Кино · Развлечения
Для бизнеса

Для бизнеса

Информация для арендаторов вынесена в отдельный раздел.

Аренда · Сотрудничество

Концепция и визуальный язык

Много событий. Одна понятная структура

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

Визуальный язык Сарыарка
Визуальный язык Сарыарка
Один визуальный язык

От знакомства
к следующему действию

Детали визуальной системы

Впечатление складывается из деталей

Для каждого приёма — своя роль в общей истории.

Визуальный язык СарыаркаЦвет · Образ · Композиция

Первое впечатление

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

Визуальный язык СарыаркаСтруктура · Акценты · Иерархия

Последовательный ритм

Информационные и эмоциональные блоки чередуются. Посетитель постепенно переходит от знакомства к нужной ему теме.

Визуальный язык СарыаркаИзображения · Типографика · Цвет

Общий характер материалов

Фотографии, предметная графика и интерфейс собраны в согласованную систему. Детали поддерживают общую подачу сайта.

Структура и подача

От впечатления —
к содержанию

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

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

Фрагмент сайта Сарыарка
Визуальная система продолжается на внутренних страницах.
Фрагмент сайта Сарыарка
Промоматериалы и сервисы собраны в общую композицию.
Фрагмент сайта Сарыарка
Выбранный фрагмент визуальной подачи сайта.

Мобильная версия

Тот же характер.
Другой масштаб

Визуальная система продолжается на небольшом экране.

Контент выстраивается под вертикальную прокрутку. Изображения сохраняют пропорции, а заголовки и действия — своё место в иерархии.

Каждый экран продолжает общий визуальный язык проекта.

Мобильный экран Сарыарка
Самостоятельный сценарий
Мобильный экран Сарыарка
Согласованная иерархия

Сценарии сайта

Магазины — в самостоятельном каталоге

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

Информация о сотрудничестве адресована другой аудитории. Отдельная страница позволяет не смешивать деловую коммуникацию с контентом для гостей.

Интерфейс поддерживает конкретную задачу посетителя и сохраняет связь с общей структурой сайта.

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

Найти нужное.
Изучить детали.
Продолжить действие.

От общего представления — к деталям

У каждого раздела — собственная роль в маршруте посетителя.

Рабочий сценарий Сарыарка
Знакомство

Магазины — в самостоятельном каталоге

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

Рабочий сценарий Сарыарка
Подробности

Аренда — по делу и в своём разделе

Информация о сотрудничестве адресована другой аудитории. Отдельная страница позволяет не смешивать деловую коммуникацию с контентом для гостей.

Навигация и контакты на сайте
Продолжение маршрута

Понятный следующий шаг

Информация и навигация помогают продолжить знакомство с проектом без поиска среди несвязанных страниц.

Рассмотреть экраны подробнее
Рабочий сценарий Сарыарка
Экран Сарыарка. Длинное изображение можно прокрутить или открыть отдельно.
Рабочий сценарий Сарыарка
Экран Сарыарка. Длинное изображение можно прокрутить или открыть отдельно.

Дизайн в работе

Самостоятельные разделы.
Общий язык интерфейса

Разные задачи раскрыты на отдельных страницах. Общая навигация и согласованная подача связывают их в один сайт.

Магазины — в самостоятельном каталоге — Сарыарка
Магазины — в самостоятельном каталоге. Экран можно прокрутить внутри ноутбука.

Связь между сценариями

Одна структура.
Разные точки входа

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

Экран Сарыарка. Длинное изображение можно прокрутить или открыть отдельно.Структура сайта Сарыарка
Знакомство с брендомОбраз и ключевая информацияКонкретная задачаПодробности и следующий шаг

Итог работы

Цифровой маршрут по торговому центру

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

Результат работы над Сарыарка
Визуальная система

Много событий. Одна понятная структура

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

Результат работы над Сарыарка
Рабочие сценарии

Магазины — в самостоятельном каталоге

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

Обсудим вашу задачу

Ваш следующий проект

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

Обсудить проект в WhatsApp
↑