История о том, как мы захотели сходить культурно просветиться, а в итоге разработали дизайн-концепцию для сайта одного из ведущих музыкальных театров России.
Всем привет! На связи веб-студия Пластилин-Арт.
Наша команда состоит из очень активных и дружных ребят. Мы часто всем коллективом посещаем музеи и выставки, ходим на концерты и экскурсии. Не тимбилдинга ради, а чтобы просто провести время вместе, набраться новых впечатлений и зарядиться вдохновением.
И вот, в очередной раз планируя культурно-развлекательную программу, мы решили посетить Мариинский театр. Но зайдя на сайт в поисках билетов, мы были удивлены, как же сильно сайт не соответствует масштабу театра.
Сайт выглядит откровенно устаревшим и малопривлекательным, словно вместе с театром отметил уже 240 сезонов и ни разу не модернизировался с момента своего создания. Как говорится, ожидание — реальность.
Возможно, это уже является профдеформацией, но наши дизайнеры не смогли пройти мимо и немного пофантазировали на тему: каким бы они хотели видеть сайт Мариинки. Так и появился этот концепт.
От as-is к as-to-be
Мариинский театр является визитной карточкой Санкт-Петербурга, его заслуженно причисляют к старейшим и лучшим мировым театрам оперы и балета. Он красивый, помпезный и изящный, чего, к сожалению, не скажешь о сайте Мариинки.
Что не так?
• Сайт, в целом, выглядит устаревшим и перегруженным. Навигация запутана, чтобы что-то найти на сайте нужно посидеть и разобраться. Он слабо связан с привычным образом Мариинки;
• Слайдер на главном экране выглядит непривлекательным. В нем смешались в кучу кони, люди анонсы спектаклей, новости театра и объявления. К тому же, на десктопной версии не сразу получается разобраться как переключать слайды между собой;
• На некоторых страницах очень много текста, который идет “сплошняком”, что затрудняет восприятия информации. Хотелось бы разделить его на блоки с подзаголовками и добавить соответствующие изображения.
Цель:
• Разработать новую дизайн-концепцию, которая будет интересна и приятна пользователям;
• Сделать сайт «легче» и понятнее, при этом не уйти в излишнее упрощение и отразить масштаб и дух Мариинского театра.
Что мы сделали и почему так лучше
Начиная работу над проектом, мы приняли решение не вмешиваться в архитектуру сайта, сосредоточившись на дизайне.
Чтобы найти интересные решения и тренды в театральной среде, исследовали несколько десятков сайтов театров со всего мира. Мы решили начать с анализа самого известного театра в мире ― Миланского оперного театра Ла Скала.
И мы решили искать дальше.
Одним из референсов взяли сайт музея МХАТ.
Но для Мариинки было важно не уйти в минимализм и совсем все не упростить, поэтому отказались от этой идеи. А вот художественный шрифт взяли на заметку.
Итак, вёрстка
Просмотрев десятки театральных сайтов, сконцентрировались на удобстве отображения информации.
Для этого использовали спокойную вёрстку, лаконичную цветовую палитру с преобладанием монохромной гаммы, но с использованием аккуратных акцентов. Свою изюминку добавил художественный шрифт.
Основное пространство страниц стало светлее, появилось больше «воздуха» между блоками. Это позволило уйти от перегруженности и эффекта нечитаемого полотна на некоторых страницах. Нам кажется, что дизайн получился элегантным, отражающим престиж и культурное значение театра.
Главная страница
Для улучшения навигации мы немного расширили хедер, сделали поисковую строку более заметной, что упростило поиск конкретных представлений и событий. Также увеличили кнопку “вход/регистрация”, т. к. без авторизации на сайте купить билеты нельзя.
На главной странице заменили слайдер на анимированный баннер, демонстрирующий репертуар театра на ближайшие недели. При наведении курсора на название спектакля, оно подсвечивается, а фоновая картинка меняется.
В первую очередь, сайт ― инструмент продаж. Поэтому мы решили убрать ленту с новостями, занимающую всю правую часть главной страницы, под афишу. Теперь этот раздел не перетягивает на себя взгляд пользователей, тем самым позволяя сконцентрировать внимание на выборе спектакля и покупке билетов.
Саму афишу увеличили, добавили ненавязчивую анимацию и ярких акцентов на некоторые элементы дизайна. События можно отсортировать по дате и месту проведения.
Страница спектакля
Постановки Мариинского театра ― одни из лучших в мире, но их трудно оценить на нынешнем сайте. Мы провели редизайн страницы спектакля, чтобы сделать ее более удобной и информативной для пользователей. Мы выделили всю необходимую информацию о спектакле: название, дата и время проведения, место, стоимость билетов, актерский состав, длительность и т. д.
Выбор мест
На странице выбора мест пользователи могут увидеть основную информацию о представлении и план зала с отображением доступных мест и расположением. Жёлтый цвет указывает на свободные места, серый ― на занятые и красный ― на забронированные.
Теперь пользователи могут получить дополнительную информацию о месте при наведении на него. Они также могут выбрать несколько мест одновременно и узнать общую стоимость.
Завершение
Итак, время итогов. Мы сделали редизайн сайта Мариинского театра.
Сайт стал удобнее и понятнее. Элегантный и лаконичный дизайн сочетается с театральным репертуаром и подчеркивает культурное значение Мариинки. Текстовые полотна сменились на аккуратные абзацы, а баннеры привлекают внимание пользователя. Навигация стала интуитивно понятной, как и окно выбора мест и покупки билета.
Теперь сайт не выбивается из эстетики театра, а дополняет её.
Воспользуются ли этим концептом? Надеемся, но это решать не нам.
Наша студия очень хотела бы, чтобы сайт Мариинки обновили, ведь мы так и не сходили в театр: (
А если вы задумали обновить свой сайт, но не хотите бесконечно искать референсы, заходите на наш сайт и оставляйте заявку. Наши дизайнеры помогут вам справиться с любыми сложностями:)
