Іміджевий сайт для міжнародної event-агенції

Meet Future — інноваційна компанія, що надає сервісні послуги у багатьох країнах Європи та Азії. Завдяки представництвам у Великій Британії та ОАЕ, компанія впевнено закріплює свій статус лідера у сфері технологічних івентів.

Раніше компанія мала іншу назву та менші масштаби діяльності. Сьогодні Meet Future — це поєднання творчості та передових технологій, що дозволяє реалізовувати проєкти будь-якої складності. Масштабуючи діяльність на всю Європу і за її межі, компанія стала символом інноваційності та професіоналізму.

Чому Meet Future?

• Сучасні технології для унікальних івентів.
• Креативний підхід і сміливі ідеї.
• Глобальне охоплення та адаптація до потреб клієнтів.

Зі зростанням впливу та амбіцій виникла необхідність представити бренд у мережі, щоб закріпити його лідерські позиції та підкреслити інноваційний підхід Meet Future.

Клієнт поставив перед нами амбітні вимоги, які потребували комплексного підходу до реалізації проєкту. Основні завдання включали:

• Адаптація під усі типи гаджетів. Сайт мав бути повністю адаптивним, з урахуванням чотирьох ключових брейкпоінтів, щоб забезпечити комфортне користування на будь-якому пристрої
• Імплементація 3D-сцен. Керівництво компанії наполягало на використанні 3D-технологій для підкреслення інноваційності бренду та створення ефекту занурення для користувачів
• Сучасні анімаційні сценарії. Динамічність і рухливість стали ключовими елементами дизайну, щоб зробити сайт живим і привабливим для аудиторії
• Редагування контенту. Важливо було забезпечити можливість легкого оновлення інформації без залучення розробників, що дозволило б команді клієнта самостійно керувати контентом
• Масштабованість. Проєкт мав бути готовим до розширення спектру послуг у майбутньому, з урахуванням зростання компанії та її амбіцій
• Розгалужена архітектура CMS. Для реалізації послуг чотирьох типів, кейсів та блогу зі статтями була потрібна складна, але водночас зручна архітектура CMS, яка б відповідала потребам компанії
• Інтерактивне представлення медіа-матеріалів. Велика кількість демонстраційних матеріалів вимагала неординарного підходу до їх презентації. Для цього були розроблені різноманітні інтерактивні слайдери, які дозволили ефектно показати медіа-контент

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

Для зручності та системності ми створили style guide — документ, у якому були прописані всі службові класи для заголовків, текстових блоків, кнопок, зображень тощо. Це дозволило мінімізувати ризики помилок під час верстки та забезпечити єдність стилю на всіх етапах розробки. Усі базові та вторинні кольори були додані через змінні CSS, що значно спростило їх використання та подальше редагування.

Тип верстки було визначено як гумовий із адаптивами на чотирьох основних брейкпоінтах. Максимальна ширина контейнера становила 1290 пікселів. Окремо була передбачена адаптація для планшетів, мобільних пристроїв у горизонтальній (landscape) та вертикальній (portrait) орієнтаціях.

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

Їх використання передбачалося в кількох ключових елементах:

• Хіро-секція головної сторінки: логотип компанії збирався після завершення прелоадеру, створюючи ефектний вступ.
• Акценти в заголовках: 3D-елементи додавали динаміки та інноваційності.
• Декоративні елементи: плавно рухалися вздовж сторінки під час скролу та реагували на рухи курсора.
• Планета в розділі "Контакти" оберталася залежно від обраної філії агенції, показуючи точку розташування офісу в обраній країні

Прості анімації, такі як зміна станів елементів, були реалізовані за допомогою нативного функціоналу Webflow. Однак більшість складних анімацій, які вимагали високої точності та плавності, були створені за допомогою бібліотеки GSAP (GreenSock Animation Platform).

Цей інструмент дозволив нам досягти вражаючих візуальних ефектів, які підкреслили інноваційність і динамічність сайту.

Робота над проєктом тривала з березня по серпень 2024 року, тобто близько п’яти місяців. Це середньозважений термін для проєкту такого рівня складності

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

Таким чином, близько 20% часу було витрачено на забезпечення бездоганної роботи проєкту.

На початку вересня 2024 року ми успішно завершили проєкт і передали його клієнту, який залишився повністю задоволеним результатом

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