Создание сайта компании «Авангард директ». Часть вторая

На проекте меняется дизайнер.

Упрощаем меню, оставляя только ссылки на главные услуги.

Арт-директор (дизайнеру): Не думай, что с концепцией все хорошо. Нужен интересный сценарий, что-то неожиданное, интрига.

Дизайнер: Приезжает корабль (в Питере), на него поднимается груз, и он уплывает. Приплывает уже ночью в другой город, в Москву например. А?

Арт-директор: Ночью — хорошо. Не уверен, что это должна быть именно Москва, мелковат масштабчик. Лучше возить в Японию, Бразилию, еще куда-нибудь. А какая у них самая длинная перевозка?

Узнаем, что очень часто клиент доставляет груз в Китай. Подходит.

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

Было бы круто перевозить тигра.

Арт-директор: Только корабль должен приплывать ночью справа.

Решаем, что про все услуги будем рассказывать на одной длинной странице. Эркен советует сменить синий на черный, которые ближе к фирменному стилю. Накидываем внутреннюю. На каждом экране будет своя анимация про услугу.

Делаем анимацию скролла и показываем клиенту.

Клиенту в целом нравится направление, но по-прежнему не нравится графика на главной.

Кран не похож на портовый кран, и тигр вызывает плохие ассоциации.

Дорабатываем графику, рисуем другой кран, и перевозить он теперь будет не тигра, а катер.

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

Чего уж мелочиться, «Авангард директ» настолько крут, что легко способен доставить статую Свободы.

Пока верстают главную, дорабатываем внутреннюю.

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

Арт-директор: Нет. А то как будто бы груз путешествует сам по себе.

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

Начинаем прорабатывать графику для всех экранов.

К «Логистике под ключ» придумываем метафору настольной игры.

Было:

Стало:

Клиенту кажется, что дорога напоминает сантехническую трубу. Распрямляем.

Вспоминаем эволюцию «Морских перевозок».

Упрощаем.

Приступаем к «Автомобильным перевозкам».

Нет, лучше одна фура, увозящая число.

А поезд с грузом пусть из тоннеля выезжает.

И шлагбаум мигает.

Теперь «Авиаперевозки». Пробуем сделать вид изнутри самолета, а ползунком регулировать освещенность неба: день или ночь — зритель решает сам. На этапе разработки забываем про эту идею из-за технологических нюансов.

Клиент говорит, что иллюминатор — это про пассажирские перевозки.

Останавливаемся на взлетающем самолете. Изучаем грузовые воздушные суда — многие из них выглядят как военные.

Выбираем нейтральный вариант.

Иллюстрируем сборные грузы — любые грузы массой до 10 кг.

Беремся за «Мультимодальные перевозки» — это когда груз перевозят несколькими видами транспорта.

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

Делаем раздел «Таможенные услуги».

Рисуем картинку для «Склада и хранения».

Клиент говорит, что склад с крышей «несовременный», и просит нарисовать другой.

Старший дизайнер: Слишком прямой, согни его.

Идут только ноги, не хватает динамики.

Теперь голова дергается вверх.

Делаем остальные мелочи.

Верстаем, по ходу добавляем мелкую анимацию и правим баги.

Доделываем страницы ошибок.

Открываем сайт и идем есть икру, которую уже давно растаможили.