Новый сайт театра «Современник». Как перенести айдентику в веб

В 2021 году театр «Современник» праздновал свое 65-летие. Новую эпоху он начал с обновления команды, новой айдентики и нового сайта. Дизайн-студия ESH Gruppa рассказывает, как разработанный ими визуальный язык позволил выстроить бережный диалог со зрителем и создать сайт, побуждающий прийти в театр.

Основа айдентики — спокойная типографика и использование знака. Новый стиль театра концептуально опирается на оформление театра в 60–70-х годах. Тогда афиши были исключительно типографическими, без картинок. Мы сохранили этот принцип: «логотип» театра набирается тем же шрифтом, что и остальная информация. Частью коммуникации и нового бренда также стали слова на «CO», которые созвучны ценностям новой команды: сохранение, соавторство, соединение, сотворчество. На основе этой идеи появился знак «СО» — полумесяц и луна.

За время проектирования сайта айдентика завоевала несколько фестивальных наград, нам часто пишут о том, как приятно встречать плакаты «Современника» в городе. Это признание значит, что мы попали в актуальные смыслы, в то, по чему люди визуально соскучились. Мы хотели сохранить этот хрупкий эффект радости встречи с чем-то внятным и современным, помня о самой важной цели сайта — привести зрителя на спектакль.

Если айдентика — это портрет личности, то сайт даёт возможность вступить с личностью в диалог. На основе этой идеи мы определили главную задачу сайта: сохранить ясную, тактичную и ностальгическую коммуникацию, которую выстраивает айдентика. У театра есть свой преданный зритель, и нам важно было не потерять связь с этой аудиторией.

Новые спектакли, публичные события, смена составов и расстановки мест: сайт постоянно обновляется командой театра. Чтобы сотрудники могли вносить изменения без привлечения разработчика, нужно было тщательно продумать работу административной панели. Самое сложное здесь — спроектировать модули рассадки и покупки билетов, которые работают с внешними ресурсами.

Основные цели сайта — познакомить зрителя с репертуаром и продать билет. Чтобы заинтересовать не только лояльную аудиторию театралов, нам необходимо было сделать привлекательными страницы спектаклей, дать пользователям несколько способов спланировать посещение и подробно проработать сценарии покупки билета.

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

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

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

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

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

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

Экономичные решения из айдентики мы учли в работе с деталями: для репертуара «другой сцены» использовали инверсию цветов, упростили подтверждение сбора данных, сохранив отсылку к элементу «СО» — «Мы собираем куки — СОБИРАЙТЕ».

При работе с разделами мы старались подчеркнуть связь прошлого с будущим. В разделе «О театре» историю и упоминания современников прошлого мы разместили вместе с текстом о планах и актуальных ценностях. В «Репертуаре» намеренно не стали разделять вид страницы для спектаклей, которые вышли из репертуара и идут сейчас. Мы обновили информацию и сделали контент доступнее — теперь даже привычные спектакли выглядят по-новому привлекательно.

После утверждения дизайна всех страниц в десктопной версии, мы проработали дизайн экранов в четырёх адаптивных состояниях, согласовали анимацию, упорядочили дизайн-систему и настроили компоненты. С дизайном помогали Алёна Мельникова и Соня Ступенькова, особенно в те нелегкие времена, когда поджимали сроки сдачи макетов в разработку.

За разработку взялись Алексей Мысков и Максим Бурнин — команда, с которой мы работаем не первый год, мастера своего дела, способные спроектировать абсолютно любое безумие.

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

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

Налаживая работу сайта с внешними ресурсами, мы много экспериментировали. Здесь нужно отдельно отметить главного героя — Ивана Мацкевича. Он вёл проект, отвечал на самые сложные вопросы, управлял пространством и временем. Совершать подвиги коммуникации помогал Валерий Кожанов, генеральный директор нашей студии.

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

Арт-директор: Виолетта Постнова
Дизайн: Антон Бодряшкин, Алёна Мельникова, Соня Ступенькова
Менеджмент: Иван Мацкевич
Разработка: Алексей Мысков, Максим Бурнин
Айдентика: Стефан Лашко, Надя Косенкова

Редактор статьи: Екатерина Рудая