Іміджевий сайт GameDev команди

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

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

Розробка односторінкового іміджевого вебсайту, який стане візитівкою GameDev студії та відображатиме її креативність і професіоналізм. Основні вимоги до проєкту:

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

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

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

Цей прототип став одним із найпростіших у досвіді нашої студії через мінімальну кількість тексту. Але ми обожнюємо складні виклики — і вже на наступних етапах роботи проєкт сповна виправдав наші очікування. 😊

Клієнт відповідально підійшов до обговорення дизайну і підготував 10 сайтів, які в якості референсів, які подобались їх команді.

На базі варфрейму та референсів ми розробили дві дизайн-концепції і презентували клієнту. Швидко отримали фідбек і створили третю концепцію, яка була міксом з двох попередніх

Перед початком роботи над версткою ми приділили особливу увагу підготовчому етапу, щоб забезпечити зручність і структурованість усього процесу. Було створено style guide, який містив усі службові класи для заголовків, текстових блоків, кнопок, зображень та інших елементів. Це дозволило стандартизувати підхід до розробки та забезпечити монументальність проєкту.

Окремо ми визначили тип верстки та поведінку сайту на різних роздільних здатностях екранів (1440, 1920, 2560 тощо). Для цього проєкту було обрано гумову верстку з адаптивами на ключових брейкпоінтах, без фіксації контейнера. Такий підхід забезпечив максимальну гнучкість і комфорт для користувачів на різних пристроях.

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

• Вплив на продуктивність сайту: 3D-елементи значно знижують швидкість завантаження.
• Концептуальна відповідність: компанія спеціалізується на 2D-іграх, тому створення унікального 2D-сценарію з відсилками до їхньої гри виглядало більш органічно.

У результаті було вирішено реалізувати анімацію херо-секції у форматі Lottie з управлінням сценарієм за допомогою JavaScript. Це дозволило досягти високої якості анімації без шкоди для продуктивності.

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

Ховери на кнопках App Store та Play Market + на лінках в футері стали окремими родзинками, які підкреслювали увагу до деталей.

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

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

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

Клієнт залишився надзвичайно задоволеним результатом, а ми — задоволені задоволеним клієнтом. Після завершення роботи ми отримали схвальний відгук від CTO команди на платформі Clutch. Такі креативні проєкти надихають нас на нові звершення!

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