Darvin Digital – digital-агентство с собственными IT-инструментами для российского рынка. Опираемся на свою инфраструктуру и сервисы, чтобы продвижение не зависело от внешних обстоятельств. 17 лет создаём и выводим в топ сайты клиентов в поисковых системах, приводим лиды из всех подходящих заказчику каналов трафика. В этом тексте рассказываем, чем театральный лендинг отличается от обычного, зачем писать код для сайта на Tilda, как работали с командой клиента, у которой был свой дизайнер и своё видение, и как в итоге появился лендинг, который редакция Tilda отобрала в подборку лучших.
О клиенте
«Арт-Партнёр XXI» – независимое театральное агентство под руководством продюсера Леонида Робермана. На их площадках выступают Мария Аронова, Кристина Асмус, Игорь Верник.
С агентством работаем больше семи лет. Начинали с продвижения основного сайта. Примерно последние пять лет делаем лендинги под отдельные спектакли: за это время их набралось шесть, каждый с нуля.
«Каренина» – постановка режиссёра Данила Чащина по Толстому. Нестандартная: действие разворачивается в движущемся вагоне поезда. Нужен был официальный сайт спектакля, который с первого экрана погружает в атмосферу и продаёт билеты. Площадка – Tilda.
Прежде чем думать про дизайн, арт-директор Darvin Digital Наталья Головченко перечитала краткий пересказ «Анны Карениной»: «В начале был прочитан краткий пересказ, потом отдельно финальная часть романа целиком, пересмотрела ключевые сцены из фильма Джо Райта 2012 года и прошлась по рецензиям и зрительским отзывам на этот конкретный спектакль. Без этого сложно было бы попасть в атмосферу».
Атмосфера в проекте была особенно важна, потому что сама постановка нелинейная: поезд здесь не транспорт, а выбор. Не важно куда, важно откуда. От несложившейся жизни туда, где лучше сгореть, чем тлеть. Именно вокруг этого строились все три концепта, которые были предложены клиенту.
Три концепта
Клиент пришёл с наброском структуры и попросил ориентироваться на лендинг спектакля «Это всё она», который мы делали раньше. О создании этого сайты уже рассказывали в отдельном кейсе.
Для сайта по «Карениной» мы предложили три совершенно разных направления.
Концепт 1 – классика в цифре
Крупная типографика на шрифте Oranienbaum с засечками – отсылка к эпохе, но в постерном, увеличенном формате. Лёгкие текстуры и потёртости, едва заметные угловые виньетки создают историческую атмосферу, не перегружая интерфейс.
Сайт должен был ощущаться театральным и глубоким и при этом чистым. Основная идея: интеграция классического наследия XIX века в структуру современного цифрового продукта.
Концепт 2 – digital performance
Сайт как продолжение театральной сцены. Видео на первом экране постепенно увеличивается при скролле до полного экрана – фоновое размытие повторяет то же видео, усиливая глубину и ощущение движения. Боковая навигация по расположению в композиции визуально напоминает рельсы – тонкая метафора, связанная с историей в романе.
Геометричная современная типографика, холодная синяя палитра. Основная идея: живой сайт, который реагирует на действия пользователя и раскрывает спектакль через движение и интерактив. Эффект постепенного погружения, как когда в зале гаснет свет. Современные шрифты, холодная синяя палитра и асимметричная сетка.
Концепт 3 – трагедия через свет и контраст
Визуальный язык резкий: тёмные сцены, яркие красные акценты, активное свечение. Типографика вытянутая и плотная, с эффектом подсветки – усиливает давление и внутреннее напряжение.
Красный – эмоциональный ориентир: страсть, опасность, надлом. Светящиеся элементы отсылают к мотиву поезда и рокового финала на уровне ощущений, не прямых образов. Свободное пространство в композиции даёт почти кинематографичное восприятие. Основная идея: визуальное воплощение трагедии через свет, цвет, контраст.
Клиент не выбрал один концепт, взял лучшее из нескольких. Структуру и навигацию из второго, видео в полный экран из первого, эффект размытия в движении и асимметрию тоже из второго. Свечение с отсылкой к фонарю оставили из третьего как дополнительный приём.
Шрифты подобрали из Google Fonts – те, что корректно отображаются в интерфейсах Tilda. Палитру сократили до трёх цветов: тёмно-синий (#030913), красный (#E73446), белый. Синий выбран не случайно: это и цвет ночи, и общее ощущение спектакля – холодное, напряжённое.
Клиент настоял, чтобы все визуальные материалы были только из медиаархива спектакля без сторонних иллюстраций и нейросетевых изображений. Заказчик может себе это позволить: у «Арт-Партнёра» всегда сильная визуальная часть – актуальные и качественные снимки.
Дизайнерские решения, которые стоит выделить
Блок актёров: когда возможностей Tilda недостаточно
В спектакле несколько составов и Анну Каренину в разные вечера играют разные актрисы. Клиент хотел блок, где при переключении одновременно меняются фото, название роли и биографический текст, а по клику открывается подробная карточка.
Стандартный слайдер Tilda умеет смещать контент, но это одна переменная. Здесь их три, и они должны меняться синхронно по одному триггеру. Встроенные анимации платформы к одному элементу привязывают один тип анимации, не больше. Готовых модификаций не нашли.
Дизайнер написала кастомный JavaScript через Cursor: описала логику карусели на человеческом языке и итерационно доводила код до рабочего состояния. С третьей итерации всё заработало стабильно на всех устройствах. По той же схеме сделали карусель в блоке отзывов.
Адаптивы: три версии вместо двух
Обычно под Tilda делают мобильную версию, планшетную и десктопную. Мы добавили третью версию: отдельно под ноутбуки. На широком мониторе контент занимает всю доступную ширину, не висит узкой полоской по центру. На ноутбуке включается автоскейл – всё масштабируется пропорционально, ничего не съезжает. Для театральной аудитории это важно: наша ЦА – люди 25-65 лет чаще открывают театральные сайты с ноутбука, не с телефона.
Хотите понять, насколько удобен сайт для пользователей? Забирайте наш чек-лист для самостоятельного аудита юзабилити сайта. Проверяйте ключевые элементы юзабилити и узнавайте, что мешает конверсии.
Переставленные блоки
В исходной структуре блок с датами шёл после галереи, то есть почти в самом конце страницы.
Мы подняли его выше: сначала информация о спектакле и составе, сразу после – даты и «Купить билет». Галерея осталась, но теперь, чтобы добраться до кнопки «Купить билет», пользователю не надо пролистывать половину сайта.
Блок создателей
В нём представлены режиссёр Данил Чащин, художник-постановщик Максим Обрезков, художник по костюмам Виктория Сердюкова, продюсер Леонид Роберман. Цветные портреты на тёмном фоне, имена крупно – лаконично и в стилистике остального сайта.
Даты
Карточки дат сделали в форме билетов: фото актёрского состава, дата, время, площадка и кнопка «Купить билет». Лаконично, считывается сразу. Клиент согласовал без единой правки.
Когда у клиента есть свой дизайнер
У агентства есть свой дизайнер – специалист по графике и афишному дизайну. Он прислал набросок структуры и первичный концепт. Это полезно: клиент уже приходит с чётким видением, не надо тратить время на базовые вопросы.
Вместе с тем афишный дизайн и веб-дизайн работают по разным правилам. Выравнивание текста по ширине, несколько шрифтовых семейств, насыщенный фон на каждом блоке – всё это хорошо выглядит на печатном носителе и некорректно отображается в интерфейсе. Поэтому у такого формата сотрудничества (с дизайнером на в команде клиента) есть свои плюсы и минусы. Да, клиент приходит с чётким видением и референсами, это сокращает время на формулировку задачи, но когда сталкиваются два профессиональных взгляда на дизайн, согласование занимает больше времени и требует аргументов с обеих сторон, а не просто ссылок на ощущения.
Хотите узнать, насколько легко посетителю найти товар, услугу, оформить заказ или связаться с вами? Приходите на юзабилити-аудит. Поможем улучшить пользовательский опыт, дадим рекомендации по оптимизации и расскажем, как улучшить эффективность рекламных кампаний, чтобы создать цельную стратегию развития.
Наша совместная работа с «Арт-Партнёр XXI» прошла спокойно. Команда была открыта к диалогу, часть решений обсуждали в несколько раундов, но в итоге приходили к вариантам, которые устраивали всех.
Технический кризис: cайт открыли, но, оказалось, что билетка не работает
Уже после переноса сайта на Tilda и привязки домена обнаружилась серьёзная проблема: билетный модуль не работал. Кнопка «Купить билет» – центральный элемент всего лендинга – не работала. Сайт сняли с публикации.
Диагностика показала: код билетного модуля скопирован по аналогии с предыдущими лендингами. Но Tilda тихо убрала поддержку jQuery и скрипт, который работал на старых проектах, перестал работать на новых.
Разработчики Darvin DIgital переписали инициализацию на чистый JS за одну итерацию. Сайт вернули в публикацию. А этот скрипт теперь используется на всех новых проектах с билетными модулями, чтобы не наступать на те же грабли.
Результат
Лендинг karenina-teatr.ru – современная посадочная страница, которая с первого кадра погружает посетителя в атмосферу спектакля. Видео в полный экран, холодная синяя палитра, острые формы, плавная анимация, крупная типографика – всё работает на одну задачу: передать настроение и довести до покупки билета.
Работа шла 2 месяца. В процессе клиент брал паузу: шла премьера, руководству было не до сайта. Если бы не это, лендинг был бы готов ещё быстрее.
Стоимость разработки – 135 000 рублей. Но Арт-Партнёр работает с нами около пяти лет и за это время перешёл на уровень VIP в нашей программе лояльности. Поэтому по факту клиент заплатил меньше.
После публикации сайт попал в Made on Tilda – редакционную галерею лучших проектов на платформе. Для команды конструктора ценны нестандартные технические решения и сложная анимация, все проекты отбирают вручную.
До этого в подборку лучших попал ещё один сайт Darvin Digtal – лендинг барбершопа Вожак. «Каренина» стала второй.
0 комментариев