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

Рассказываем, как мы делали новый сайт Нижегородского государственного академического театра оперы и балета имени А. С. Пушкина. И как заодно выучили разницу между партией и ролью.

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

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

У старой версии сайта было несколько системных проблем: 

• афиша и репертуар существовали в одной логике;
• разовые мероприятия приходилось добавлять в репертуар;
• у событий афиши не было отдельных страниц;
• длинный путь к покупке билета. 

Дизайн тоже устарел и уже не выдерживал объём информации, с которым работает театр. Но начинать с дизайна было рано. Сначала предстояло разобраться, как вообще устроен театр.

С чего начинается новый сайт

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

Вот, например, мини-словарь, который пришлось выучить:

• Партия — не роль. Роль играют в драме, партию поют в опере. Написать в карточке «роль» — примерно как назвать разработчика эникейщиком.
• У постановки есть либретто, у концерта — программа. Разные вещи, разные поля, разные страницы.
• Репертуар — не афиша. Об этом дальше будет целый раздел, потому что именно на этом ломался старый сайт.
• Артист бывает штатный и приглашённый. И на сайте это две разные жизни.

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

Здесь очень помогла команда театра. Люди, которые знают своё дело изнутри, разбирали с нами детали, не очевидные человеку со стороны.

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

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

• что произойдёт с мероприятием, которое уже прошло;
• с постановкой, снятой с репертуара;
• со страницей артиста, который ушёл из театра.

Все решения и требования собирали в едином документе — техническом задании.

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

Стоп, репертуар — это не афиша

Понятия репертуара и афишы часто путают: они близки, но выполняют совершенно разные задачи.

Репертуар — это постановки, которые театр представляет зрителю: опера, балет, оперетта, концертные программы и другие проекты. 

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

Мы разделили эти два понятия на уровне архитектуры. Постановка существует в репертуаре самостоятельно, а конкретный показ становится событием афиши. Например, «Мадам Баттерфляй» существует как одна постановка в репертуаре, а её показы 15, 16 и 17 сентября — как отдельные события афиши со своей датой, временем и составом исполнителей.

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

Так одна постановка может иметь множество показов. Для театра это удобная система управления, а для зрителя — понятная структура сайта.

Афиша — главный путь зрителя

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

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

Нужны подробности — открывается карточка события. Купить билет одинаково удобно и из превью, и из карточки: возвращаться назад и искать кнопку не придётся. 

Знакомая история: доскроллил до ноября, увидел что-то интересное, а потом решил посмотреть только балет — и надо крутить обратно наверх, к фильтрам. Мы это убрали: поиск и фильтры закреплены, а рекламные блоки нативно встроены между событиями и становятся частью общего потока афиши.

Мы хотели, чтобы путь был максимально прямым: увидел → заинтересовался → выбрал дату → купил билет.

За каждой постановкой стоят люди

После хорошего спектакля почти всегда идешь гуглить: а кто это пел? А это тот самый дирижёр или другой? 

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

Отдельно выделили категорию «Галерею памяти» — пространство, посвященное выдающимся артистам, которых уже нет с нами, но которые оставили значимый след в истории театра.

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

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

Сайт, который хранит историю

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

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

Так же работает раздел «Люди театра». Если артист больше не состоит в труппе, его страница не удаляется. Она сохраняется с соответствующей пометкой и продолжает жить как часть истории театра.

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

Театральность без бархата и позолоты

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

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

В основу легла монохромная палитра с золотым акцентом из фирменного стиля театра и бордовым оттенком, который отсылает к классическому театральному занавесу. В типографике соединили выразительный Igra Sans для заголовков и нейтральный Manrope для основного текста.

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

Так театральность появилась не за счёт количества декоративных элементов, а за счёт образа, встроенного в сам интерфейс.

Театр должен быть открыт каждому

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

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

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

Что за кулисами сайта

За простым интерфейсом сайта стоит сложная система. Frontend разработали на Nuxt.js, backend — на Symfony, а управление контентом построили на Drupal 11.

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

Мы создаем цифровые продукты для сложных предметных областей — и умеем превращать их внутреннюю логику в понятный пользовательский опыт. Если вы представляете театр и ищете команду для нового сайта или хотите переосмыслить существующий, будем рады обсудить ваш проект.