Промо-сайт нашего стартапа на Vue.js и WebGL — как он создавался и зачем нужен

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

Герой обзора: https://getsport.io

Проект называется «GetSport» — это веб- и мобильное приложение для спортсменов, владельцев спортивных площадок и тренеров, которое поможет решить следующие задачи:

Мы готовы к бета-запуску ± на 95%. Пока тестировщики и программисты заканчивают, пришла пора запускать «прогрев аудитории», частью которого и является наш промо-сайт.

Его главная задача — познакомить потенциальных пользователей с преимуществами сервиса, добиться узнаваемости фирменного стиля перед продакшн-запуском и обзавестись контактами будущих клиентов.

Чтобы решить поставленную задачу, мы запланировали сделать следующее: описать преимущества сервиса в емких заголовках, захватить внимание с помощью «спецэффектов» и провести розыгрыш подарков, подготовив почву под призыв пользователей вернуться к нам, когда мы запустим приложение.

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

Готовый макет предполагал использование 3D графики и моделей, а концепция получилась следующая: попадая на сайт, пользователь путешествует по 3D логотипу сервиса, изучает его преимущества и переходит к CTA блоку (он же одновременно и блок с подарками).

Фронт мы пишем на Vue.js, поэтому для реализации 3D на сайте у нас три очевидных варианта:

Качество продукта и результат продвижения в приоритете, поэтому смело выбираем последний вариант и переходим к созданию модели, попутно ознакамливаясь с технической документацией по three.js.

Как я уже упомянул, главная модель на сайте — это большой логотип нашего сервиса. Ее мы изначально решили делать в онлайн 3D-редакторе Spline — в нем удобно обсуждать правки, наблюдая за работой дизайнера в режиме реального времени.

К сожалению, экспортируемые из Spline файлы на сайте постоянно имели дефекты. Поэтому, когда мы пришли к более-менее законченной версии первой модели, дизайнер реализовал ее в Blender.

С одной стороны мы потратили время в Spline, но с другой — сделали вывод: если нам еще раз будет нужно реализовать подобную 3D модель, мы используем тот же формат работы — Spline > Blender, чтобы удобно обсуждать и на лету вносить правки.

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

Основа для фронта, 3D модель и теоретические основы по ее интеграции на сайт есть. Теперь осталось только применить все это на практике. Если коротко, то в нашем случае это выглядит следующим образом:

Более подробно эти процессы описаны здесь — threejs.org. Если у вас есть хороший опыт работы с фронтом на Vue.js или React.js, то с изучением WebGL и three.js особых сложностей не возникнет.

Getsport.io — это не первый сайт на Vue.js + GSAP. Но он первый, куда мы добавили ScrollSmoother и некоторые другие платные плагины из GSAP.

Следует отметить, что разработка прошла не так гладко, как обычно. Виной всему особенности iOS (телефоны и планшеты), где некоторые платные плагины GSAP работают некорректно.

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

#startup #webdesign #webgl #threejs #getsport #promo