Utopia 513

Utopia 513 — це нове покоління творців, які дійсно розуміються на 3D-графіці.

Нашим завданням було розробити крутий сайт, який би показував всю магію 3D і те, як хлопці з Utopia вирішують бізнес-завдання клієнтів за допомогою 3D-інструментів.

Ми розуміли, що основними моментами являються демонстрація всієї інформації про компанію, для якого типу клієнтів взаємодія з Utopia513 буде безпрограшною ситуацією, а також демонстрація кейсів та ключових послуг. Ми поєднали все це з нашим брендингом, анімованими елементами, а також магічним вайбом, і отримали потужний анімований сайт. Користувач який зайде на сайт, розуміє, що ці хлопці дійсно створюють неймовірні речі в 3D і можуть вирішити будь-яку бізнес-проблему за допомогою творчого підходу.
"We create 3D magic" - це слоган компанії, який користувач одразу бачить на головному екрані. Справа ми маємо один з головних елементі нашої айдентики, а саме зірку, вона також зображена на лого і в цілому являється брендинговим елементом який ви будете бачити частенько. Знизу користувач бачить шоуріл який автоматично розгортається на весь екран при скролі, щоб подивитись збірку кращих робіт в відео форматі, а також кнопки, одна з яких зразу веде на кейси.
Тут ми бачимо сам шоуріл, а також блок "Про нас" з перевагами, на якій міститься 3D куля з текстурою яку ми використовуємо на зірці та інших елементах.
Користувач бачить блок послуг та кейсів на головній сторінці з можливістю перейти на внутрішні сторінки. При чому, при наведенні мишки на будь-яку з послуг зразу видно один з фрагментів роботи.

Погнали до внутрішніх сторінок сайту

Одним з прикольних, інтерактивних елементів являється демонстрація команди. Всі члени команди виконані в 3D стилі + при наведенні курсора вони анімуються, маленька деталь, але такі деталі додають позитиву при взаємодії користувача з ресурсом.

Тепер до більш детального огляду двох головних внутрішніх сторінок, таких як Сервіс

Користувач бачить заголовок до кожної послуги + короткий опис, а також нотатки, які надають відповіді на часті питання, або пояснюють, що саме отримує користувач. Кожна послуга має прикріплені кейси з текстовими помітками того, які саме послуги тут були надані. Це зручно і ти зразу можеш побачити результат роботи, щоб оцінити наскільки це відповідає твоєму запиту. Звісно знизу сторінки є CTA.

Кейси

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

Ну і деталі які роблять цей сайт саме таким.

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