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

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

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

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

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

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

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

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

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

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

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

• «Покадровая анимация» — это последовательный показ слайдов на скролле, где каждый следующий слайд немного изменяется, создавая иллюзию анимации. Что-то вроде блокнота с рисунками, где быстро пролистывая страницы, вы можете видеть, как они «оживают». Выглядит это часто интересно, но дешево и непрофессионально — не наш вариант.
• Видео- и фотрендеры — это обычные мультимедиа. У них есть тоже есть ряд существенных недостатков, из-за которых мы не решились их использовать: нулевая интерактивность, возможность проигрывать их только вперед и большие размеры файлов.
  
• WebGL & three.js — это технологии, которые дают возможность использовать реальные 3D модели на сайте. У этого решения нет недостатков первых двух вариантов, но разработка сравнительно долгая и дорогая.

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

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

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

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

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

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

• Устанавливаем на наш сайт библиотеку three.js;
• Создаем канвас для отображения 3D модели;
• Используя методы библиотеки three.js, загружаем нашу модель и отображаем ее на канвасе;
• Обновляем экран в зависимости от того, как пользователь взаимодействует с моделью.
  

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

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

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

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

• На сайте есть смена темы. Их две и выглядят они следующим образом:

• У сайт есть backend на Python. Он используется для сбора контактов из разных форм в отдельные таблицы для последующего экспорта.
• На сайте есть музыка — вы можете включить ее в верхнем правом углу. Это 15-секундный зацикленный трек, который мы написали сами.
  
• Сайт мультиязычный — он доступен на английском и финском языках.
  

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