Round 31 — Virtus.pro × SK Gaming
Frontend разработчик
О проекте
В мае 2017 года со мной связались, чтобы в сжатые сроки реализовать промо-лендинг Round 31 — первого футбольного матча между представителями Virtus.pro и SK Gaming. Страница анонсировала встречу PashaBiceps и FalleN после ESL One в Кёльне, знакомила аудиторию с событием и командами, а интеграция с Twitter автоматически выводила последние публикации по хэштегу. Я собрал проект на Webpack и Pug, реализовал интерактивность на нативном JavaScript и быстро передал заказчику готовый лендинг.
Запустить промо события в сжатый срок
Задача пришла как срочный проект: требовалось быстро превратить готовую концепцию события в работающий промо-лендинг и передать его заказчику. Страница должна была сразу объяснять необычный формат матча и создавать ожидание прямого эфира.
В центре анонса — противостояние двух известных киберспортивных организаций: Virtus.pro против SK Gaming, PashaBiceps против FalleN, Европа против Бразилии. Матч был назначен на 10 июля 2017 года, сразу после ESL One в Кёльне.
- Срочная реализация промо-лендинга
- Анонс матча Virtus.pro × SK Gaming
- Подготовка страницы к передаче заказчику
- Фокус на ясном первом экране
Вся история матча — с первого экрана
Главный экран объединял место и дату, символику команд, название Round 71, краткий анонс и основной призыв к просмотру. Визуальная сцена с выходом на стадион связывала атмосферу футбола с айдентикой киберспортивных команд.
Навигация вела к разделам о событии, его истории и составах, а переключение языка и социальные ссылки поддерживали международную аудиторию матча.
- Полноэкранная промо-композиция
- Дата, место и команды в первом экране
- Разделы события, истории и составов
- Русская и английская версии
Живая лента публикаций по хэштегу
Лендинг был интегрирован с Twitter и получал последние публикации по хэштегу события. Динамическая лента связывала официальный анонс с обсуждением матча и свежими обновлениями в социальной сети.
Контент блока обновлялся без ручного редактирования страницы: новые посты появлялись через интеграцию, а сам лендинг оставался актуальной точкой входа в коммуникацию вокруг события.
- Получение последних публикаций
- Фильтрация контента по хэштегу
- Автоматическое обновление ленты
- Связь лендинга с обсуждением события
Webpack, Pug и нативный JavaScript
Для сборки проекта я использовал Webpack, разметку организовал через шаблонизатор Pug, а интерактивность и работу с данными реализовал на нативном JavaScript. Такой стек позволил собрать самостоятельный промо-сайт без тяжёлого frontend-фреймворка.
Техническое решение соответствовало главному ограничению проекта — скорости. Я сосредоточился на необходимых сценариях, динамическом Twitter-блоке и надёжной сборке, чтобы как можно быстрее передать заказчику готовый результат.
- Webpack для сборки проекта
- Pug для шаблонов страниц
- Нативный JavaScript для интерактивности
- Компактный стек для быстрого запуска
Готовый лендинг в короткий срок
Проект был реализован и передан заказчику в сжатые сроки. Несмотря на быстрый темп, лендинг включал не только статичный анонс, но и навигацию по материалам события, языковые версии, социальные ссылки и динамическую ленту Twitter.
Результатом стала готовая промо-площадка, которая заранее знакомила аудиторию с необычным матчем и объединяла ключевую информацию в одном месте.
Матч, за которым следили сотни тысяч зрителей
Матч состоялся 10 июля 2017 года на домашнем стадионе ФК «Кёльн». Для игры организовали мини-футбольное поле, команды провели два тайма по 20 минут, а общий призовой фонд составил 100 тысяч долларов.
Пиковая аудитория русской и английской трансляций достигла 200 тысяч уникальных зрителей. SK Gaming победила Virtus.pro со счётом 5:4, а само событие получило заметный отклик киберспортивного сообщества.