Porsche презентували нову модель електрокару Taycan. Це потужний спортивний автомобіль, здатний розігнатися до 100 км/годину всього за 3 секунди. Щоб презентувати нову модель, в студії Create (production studio of CNN International Commercial) звернулися до української креативної агенції Obys з пропозицією створити сайт для нового електромобіля. За місяць команда Obys розробила сайт-презентацію: від інтерфейсу до 3D відео, яке допоможе користувачам відчути себе за кермом авто у Сінгапурі.

Завдання

Причина створення цього сайту – випуск нового електричного авто від Porsche. Він став частиною промоушену та рекламної кампанії бренду на території азійських країн.

Завдання сайту – дати можливість користувачам взаємодіяти з палітрою екстер’єра автомобіля на сайті й відчути, як їздити на новому Porsche Taycan дорогами Сінгапура з відео 360 градусів, а в результаті замовити тест-драйв.

Дослідження

Команда Obys agency була відповідальною за створення дизайну та front-end розробку. Тому підхід до створення сайту був звичним: ознайомилися з брифом, створили дизайн на основі фото- та відеоконтенту, а паралельно з дизайном вже почали розробку, тому що терміни на виконання проєкту були обмеженими.

Концепція

Відвідувачам сайту надають інформацію поступово, щоб «підігрівати» інтерес. Спочатку це – силует машини, потім запрошення сісти всередину авто, а далі – знайомство з інтер’єром.

«Ми показуємо чим цей Porsche крутий, що в ньому інноваційного, розповідаємо про фішки й особливості та вже потім показуємо, як завести машину, послухати її звук, тощо», – пояснює артдиректор Obys В’ячеслав Олянішин.

Потім користувач уже знайомиться з екстер’єром – тобто виглядом автомобіля ззовні.

Структура сайту 

Це одна довга сторінка, розбита на блоки та секції, які знайомлять відвідувача з новим авто.

Аби у користувача виникло почуття реального контакту з машиною, дизайнери використовували звукові ефекти та анімації.

А також дали можливість «посидіти» всередині салону й проїхатися за кермом Porshe дорогами Сінгапуру: почути, як заводиться двигун, як працює машина зсередини і які фішки та особливості в новому Taycan.

«Кожну нову главу сайту ми намагалися розбавити цікавими ефектами, переходами, тощо. Щоб користувачеві було цікаво зупинитися і взаємодіяти із сайтом: відкрити двері, завести двигун, подивитися на поїздку 360 за кермом, подивитися які колірні комплектації машини можна замовити, тощо. Показати як спалахує приладова панель або продемонструвати гайд про зарядку електромобіля. Всю стандартну інформацію ми постаралися подати так, щоб увагу користувача привертала кожна дрібниця», – розповідає В’ячеслав.

Виклики 

Компанія Porsche надала дизайнерам доступ до всіх візуальних матеріалів. Необхідно було придумати сценарій, змонтувати та обрізати деякі ролики, при цьому, залишивши тільки головні елементи. Необхідно було зробити так, щоб користувач відчував повну взаємодію з сайтом, коли прокручує (скролить) сторінку вгору чи донизу. Довелося приділити багато часу оптимізації картинок і налаштувань оптимальної кількості кадрів, щоб під час скролу кадри відео змінювалися плавно та вмикалися у потрібний момент.

Кольори

На сайті використовували фірмові кольори Porsche Taycan. Акцентний – блакитний.  Саме цей колір використовується на сенсорних панелях, спідометрі, тощо.

Одразу вирішили, що сайт має бути темним – так відео та фото авто мають ефектніший вигляд.

Шрифт

Потрібно було виділити, що це новий автомобіль зі своїм характером і стилем. Фірмовий шрифт Porsche не підходив. Спочатку обрали 8 шрифтів для заголовків, довго радилися, дивилися який вигляд матиме дизайн з кожним шрифтом і врешті зупинилися на Classico.

Одночасно, Neue Haas Grotesk відмінно підходить як для дрібних текстових блоків, де важлива читаність, так і для великих й акцентних заголовків.

Таким чином, щоб підкреслити «люксовість», використовували не фірмові шрифти бренду, а Classico – для заголовків і Neue Haas Grotesk – для текстових блоків.

Telegraf.Design живе за підтримки спільноти. Підтримуйте Telegraf.Design на Patreon.