«Зимний промо-лендинг с мини-игрой: анимация саней по городам, отдельные версии под десктоп и мобайл, стабильная работа во всех браузерах.»
Т-Банк заказал праздничный промо-лендинг с мини-игрой внутри. Вместе с агентством From Scratch собрали интерактивную карту зимних и горнолыжных направлений: 11 городов — Москва, Санкт-Петербург, Казань, Екатеринбург, Роза Хутор, Шерегеш и другие, — у каждого своя страница с кешбэком, видео и оформлением, плюс главная с картой и игрой. From Scratch отрисовали дизайн в Figma, мы приняли макеты, подготовили к разработке и собрали фронтенд. На прод вышли примерно за две с половиной недели от старта, к праздникам; детали дошлифовывали уже после запуска.
Спецпроект делали вместе с агентством From Scratch: дизайн и макеты в Figma — на них; приёмка макетов, подготовка к разработке и вёрстка — на нас. Аккуратная передача в работу убрала переспросы «что имелось в виду», поэтому фронтенд собрали быстро: от старта до выхода на прод прошло около двух с половиной недель. Архитектуру заложили так, чтобы у каждого города была отдельная быстрая страница — всего 12: главная с интерактивной картой и 11 городов.
Финальный полноразмерный лендинг Т-Банка для Санкт-Петербурга: зимние катки (Новая Голландия и Флагшток), расписание, кэшбэк, категории событий.
Мобильная промо-страница Т-Банка для горнолыжного курорта Шерегеш (зима): кешбэк, акция Т-Банк Квест, плитки категорий.
Сердце лендинга — игра: сани едут по маршрутам между городами. Под десктоп и под телефон собрали отдельные версии игрового поля и анимации, поэтому управлять удобно и мышкой, и пальцем. На телефоне всё срабатывает с первого касания: наведение и нажатия настроены отдельно под сенсорный экран.
Стартовый экран мини-игры на десктопе: зимний каток с овальной дорожкой, таймер 10:00, кролик-маскот Кэшик в оранжевой шапке с картой и коньками, окно «Помогите Кэшику подготовить каток к открытию» с кнопкой «Начать».
Расскажите о задаче — предложим архитектуру решения. Без шаблонных КП и абстрактных смет: конкретика на старте.
Лендинг с анимацией и видео тяжёлый, поэтому за скорость взялись отдельно. Картинки отдаём в современных лёгких форматах — страница грузится быстрее при том же качестве. Следующую городскую страницу подгружаем заранее, ещё до клика, поэтому переходы между городами мгновенные. Размер кода держали под контролем, чтобы первый экран открывался сразу.
Подключили сквозную аналитику — T-Bank Tag Manager и Яндекс.Метрику: видно, по каким городам кликают и как люди ведут себя на странице, и у клиента есть цифры для решений. Добавили разметку для поисковиков и соцсетей — при репосте ссылка на город разворачивается аккуратным превью с заголовком и описанием.
Перед запуском прогнали тяжёлую анимацию по всем популярным браузерам и довели до ровной работы везде: убрали визуальные артефакты и сбои загрузки, которые всплывали в отдельных браузерах. Финальные правки вносили по созвонам с клиентом, пока лендинг не стал открываться чисто у любого пользователя.
Игра должна была одинаково хорошо работать и на компьютере, и на телефоне. Под каждую платформу собирали свою версию игрового поля и анимации, чтобы управление на телефоне оставалось полноценным.
Анимация и видео по-разному вели себя в разных браузерах: где-то ломалась загрузка, где-то появлялись артефакты. Доводили до ровной работы итеративно, по созвонам с клиентом, пока лендинг не стал открываться одинаково чисто везде.
Праздничный проект нельзя сдать «потом»: к Новому году всё должно быть на проде. Анимацию, игру, 12 страниц и отдельный мобайл уместили в несколько недель, поэтому правки шли параллельно с разработкой. На прод вышли примерно за две с половиной недели от старта; остальное дошлифовывали уже на работающем сайте.