Как мы сделали лендинг для спектакля, который заметила Tilda

Darvin Digital — digital-агентство, 17 лет работаем с сайтами: создаём, выводим в топ, приводим лиды. Опираемся на собственную инфраструктуру, чтобы продвижение не зависело от внешних обстоятельств. В этом тексте рассказываем про театральный лендинг: чем он отличается от обычного, зачем понадобился код для сайта на конструкторе и как получился проект, который заметила редакция Tilda.

О клиенте

«Арт-Партнёр XXI» — независимое театральное агентство под руководством продюсера Леонида Робермана. На их площадках выступают Мария Аронова, Кристина Асмус, Игорь Верник.

Работаем с агентством больше семи лет: начинали с продвижения основного сайта, последние пять лет делаем лендинги под отдельные спектакли. Их уже шесть.

«Каренина» — это постановка Данила Чащина по Толстому. Нестандартная: действие разворачивается в движущемся вагоне. Задача — официальный сайт на Tilda, который с первого экрана погружает в спектакль и продаёт билеты.

Прежде чем открыть Figma, арт-директор Darvin Digital Наталья Головченко изучила краткий пересказ романа, а финальную часть прочла целиком. Помимо этого, пересмотрела сцены из фильма Джо Райта и прошлась по отзывам зрителей именно этого спектакля. Без такой предварительной работы, говорит, сложно попасть в атмосферу.

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

Три концепта

Клиент пришёл с наброском структуры и попросил ориентироваться на лендинг постановки «Это всё она». Мы делали его раньше для того же агентства, есть отдельный кейс. Но «Каренина» — другой спектакль. Поэтому предложили три новых направления.

Концепт 1 — классика в цифре

Шрифт Oranienbaum с засечками, крупный, почти постерный. Лёгкие текстуры, потёртости, едва заметные угловые виньетки. Атмосфера XIX века, но не музейная, а живая.

Сайт должен был ощущаться театральным и при этом не перегруженным.

Концепт 2 — digital performance

Сайт как продолжение сцены. Видео на первом экране при скролле разворачивается до полного экрана, где фоновое размытие повторяет то же видео, усиливая глубину. Боковая навигация по расположению напоминает рельсы — это метафора ненавязчивая, но точная.

Геометричная типографика, холодная синяя палитра, асимметричная сетка. Хотели вызвать ощущения, схожие с теми, когда в зале гаснет свет.

Концепт 3 — трагедия через свет и контраст

Резкий визуальный язык: тёмные сцены, красные акценты, активное свечение. Типографика вытянутая, плотная, с эффектом подсветки. Красный — страсть, опасность, надлом.

Светящиеся элементы отсылают к поезду и финалу не прямо, а на уровне ощущений.

Клиент взял лучшее из каждого концепта. Структуру и навигацию из второго, видео в полный экран из первого, размытие и асимметрию тоже из второго. Свечение с отсылкой к фонарю поезда — из третьего, как дополнительный приём.

Шрифты подобрали из Google Fonts: они корректно отображаются в Tilda. Палитра — три цвета: тёмно-синий, красный, белый. Синий здесь и цвет ночи, и общее ощущение спектакля — холодное, напряжённое.

Клиент настоял: только фото из медиаархива спектакля, никаких сторонних иллюстраций. Но «Арт-Партнёра» всегда сильный фотопакет, поэтому такое пожелание заказчика не стало ограничением в реализации задуманного.

Дизайнерские решения, которые стоит выделить

1. Блок актёров: когда Tilda не справляется

В спектакле несколько составов. Клиент хотел, чтобы при переключении актёра сразу менялись фото, роль и биография, а по клику открывалась карточка. Tilda так не умеет. Встроенный слайдер меняет что-то одно, а нам нужна была смена трёх переменных одновременно.

2. Адаптивы: шесть версий вместо пяти

Стандартно в Tilda пять адаптивов. Добавили ещё один — под широкие мониторы, чтобы контент не сжимался в узкую колонку. На ноутбуке включается автоскейл: всё масштабируется пропорционально. Аудитория спектакля — 25–65 лет, они чаще используют ноутбуки, чем смотрят с телефона.

Хотите понять, удобен ли ваш сайт для пользователей? Запрашивайте наш чек-лист для самостоятельного аудита юзабилити сайта. Проверяйте ключевые элементы юзабилити и узнавайте, что мешает конверсии.

3. Переставленные блоки

В исходной структуре блок с датами шёл после галереи, почти в конце страницы. Подняли выше, сразу после состава. Галерея осталась, просто теперь не надо пролистывать большую часть сайта, чтобы добраться до кнопки «Купить билет».

4. Блок создателей

В него вошли режиссёр Данил Чащин, художник-постановщик Максим Обрезков, художник по костюмам Виктория Сердюкова, продюсер Леонид Роберман.

Цветные портреты, имена крупно — в стилистике остального сайта.

5. Даты

Карточки в форме билетов: фото состава, дата, время, площадка, кнопка покупки.

Неожиданно: cайт открыли, а билетка не работает

После переноса на Tilda и привязки домена выяснилось: кнопка «Купить билет» не работает. Сайт сняли с публикации.

Код билетного модуля копировали по аналогии с предыдущими лендингами — это схема, которая работала раньше. Но Tilda убрала поддержку jQuery, и скрипт перестал работать на новых проектах.

Разработчики переписали инициализацию на чистый JS за одну итерацию. Теперь этот скрипт — стандарт для всех новых проектов с билетными модулями.

Результат

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

Стоимость разработки — 135 000 рублей. «Арт-Партнёр» работает с нами больше семи лет и перешёл на уровень VIP в программе лояльности, поэтому по факту заплатил меньше.

Лендинг karenina-teatr.ru — современная посадочная страница, которая с первого кадра погружает посетителя в атмосферу спектакля.

После публикации сайт попал в Made on Tilda — редакционную галерею лучших проектов на платформе. Туда не попасть просто так: команда Tilda отбирает вручную, смотрит на нестандартные решения и сложную анимацию.

До этого в подборку попал один наш проект — лендинг барбершопа Вожак. «Каренина» стала второй.

Нужен сайт для спектакля или мероприятия? Приходите на бесплатную консультацию. Покажем примеры и обсудим задачу.