Портфолио MST Digital

  • Портфолио / АФИМОЛЛ карта проезда

    Задача: сделать наглядную интерактивную карту проезда для ТРЦ АФИМОЛЛ Сити
    Общий срок проектирования: 2 месяца

    Стадия 1

    Выбор оптимального ракурса и источников графики, эскиз

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

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

    Стадия 2

    Более детальная и качественная прорисовка статичной карты

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

    Стадия 3

    Расчет путей следования машин

    АФИМОЛЛ имеет 3 доступа к парковкам. Синий цвет путей следования (см. иллюстрацию выше) оказался малозаметным, к тому же въезды на парковки осуществляются с трех разных направлений, поэтому было решено обозначить пути тремя разными цветами: желтым, красным и зелёным. Ниже приводятся рабочие эскизы.

    Стадия 4

    Начало flash-анимации

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

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

    Стадия 5

    Корректировка flash-анимации и знаков

    После просмотра заказчиком демо-версии карты поступило предложение разделить траектории для каждого направления на те, которые идут к ТРЦ АФИМОЛЛ с запада, и те, которые идут к нему с востока, так как одновременное движение трех автомобилей вызывало у людей некоторое раздражение и дискомфорт. Как выглядит финальная версия меню — показано ниже.

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

    В заключение был нарисован новый знак метро и добавлены всплывающие фотографии въездов.

    Стадия 6

    Публикация на сайте

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

    Результат разработки можно посмотреть на сайте АФИМОЛЛ Сити.