Придумать концепцию сайта-музея и воплотить ее в жизнь с учетом всех требований заказчика. Для этого разработать фирменный стиль и элементы, чтобы воплотить их на сайте
Задача
Создать ресурс, который в полной мере отобразит историю спорта и организации, а также заинтересует им новых участников и в интерактивном формате расскажет о направлениях спорта
Цель
Все данные для подготовки кейса были взяты из открытых источников и все представленные в нем дизайн-концепции никак не использовались в коммерческих целях.
Проект находится под НДА, и мы хотим показать общую концепцию и задумку, поэтому решили использовать абсолютно не связанную с клиентом тематику — балет.
В честь годовщины учреждения организации решили сделать спецпроект, который будет аккумулировать в себе историю организации и самого спорта. У клиента была идея и желание видеть определенные разделы на сайте. К нам они обратились за разработкой полноценной структуры сайта-музея, его визуала и возможного наполнения. Задача усложнялась тем, что физически такого музея не существует. То есть нам нужно было разработать сайт-музей для данного спорта, как явления.
Вводные
Тестирование и презентация клиенту
Наполнение сайта контентом
Верстка
Дизайн
Разработка прототипов страниц и продумывание интерактивных механик
Подбор референсов и их анализ
Разработка структуры сайта
Сайт
Создание фирменных элементов
Разработка полноценного брендбука и презентационных материалов
Поиск смыслов и разработка логотипа
Фирменный стиль
Этапы проекта
Обыватели, которые впервые знакомится с тематикой организации
Профессиональные участники
Участники-любители
Целевая аудитория проекта
Погрузились в «музейную» тему. Изучили сайты других музеев и поняли, что хотим видеть на нашем сайте, как можно интересно обыграть спортивную тематику и добавить интерактива.
Отразили историческую ценность спорта. Подсветили его многолетнюю историю и актуальность среди молодежи в наше время.
Аналитика
Вы как будто приходите в настоящий музей, где экскурсовод раскрывает вам секреты спорта, показывает разные коллекционные экспонаты и рассказывает увлекательные истории, связанные с каждым из них. А еще проводит в конце квиз! И все это мы воплотили в нашем сайте-музее ;)
При создании прототипов сайта мы хотели, чтобы читатель постоянно взаимодействовал с контентом, поэтому с каждой страницы можно перейти на следующую и так по цепочке. В нашем случае не нужна была четкая последовательная структура, а наоборот, мы всеми путями увеличиваем время пользователя на сайте. Главная страница представляет собой витрину сайта с разными разделами, каждый блок в которой — интерактивный, что позволяет каждому посетителю выстроить свой путь и найти для себя что-то интересное.
Проектирование
Так как проект под НДА, шрифты и палитру изменили для большего соответствия балетной тематике. Выбрали розово-серую пудровую гамму с бордовыми акцентами и шрифт с засечками для заголовков.
Дизайн-концепция сайта-музея «Русские сезоны» знакомит читателей с серией европейских гастролей русского балета, которые организовал выдающийся импресарио Сергей Дягилев.
Дизайн
Так как проект международный, контент на сайте на английском языке.
С самых первых строк мы стремимся подтолкнуть читателя погрузиться в мир балета с помощью ссылок на разные разделы сайта прямо в приветственном тексте.
В слайдере представлены самые редкие экспонаты из каждой категории с небольшим описанием, призывающим углубиться в изучение истории экспоната.
В слайдере на главной странице сделали разбивку на мужчин и женщин. Этот же фильтр наследуется на странице всей команды. Так как в разное время состав менялся, добавили инфографику: кто входил в основной состав труппы в разные годы.
Фотографию дополнили подсказками. При наведении на одну из кнопок появится текст, где будет расписано, зачем использовалась данная деталь костюма или интересный факт о предмете.
Одна из главных особенностей сайта-музея — коллекция предметов искусства, которые использовали во время выступлений.
На главной странице подсветили дату первого сезона и кнопку с переходом на карту со всеми датами. Переключение между датами происходит как выбором даты внизу страницы, так и перелистыванием карточек с описанием. В эти же карточки мы поместили экспонаты, относящиеся к данному периоду.
Еще одна особенность проекта — интерактивная карта. С её помощью можно отследить путь туров балета Дягилева. Краткие заметки пояснят, какие события произошли в этой точке путешествия.
Через такой игровой формат читатель узнает еще больше о теме сайта и погружается в музейную тематику.
Больше интерактива добавляет квиз. При каждом посещении главной страницы пользователю предлагается случайный вопрос из всех квизов на сайте.
Три блока: статьи об истории и жизни балета, подборки экспонатов, новости. В блоке экспонатов рассказываем о самой объемной категории — набросках костюмов и декораций.
Ниже идут блоки для постоянных посетителей сайта и настоящих ценителей балета, которым нужно больше информации.
Сайт-музей возвращает читателя на сто лет назад и рассказывает о событиях того времени и великих людях, которые за ними стояли
Так как музей цифровой, экспонаты в нем представлены в виде мультимедиа материалов, что позволило заказчику собрать уникальную коллекцию экспонатов. Каталог состоит из личных предметов актеров балета и самого Дягилева, небольших частных коллекций и коллекций музеев искусства со всего мира.
Каталог экспонатов
Уделили внимание и пагинации. Можно перелистывать страницы по стрелке, а для просмотра более старых материалов указать номер страницы в поле ввода.
Что бы поиск по каталогу был более комфортным и не утомлял глаза, сделали нестандартную сетку — каждый пятый экспонат занимает два слота карточек.
Попасть на страницу автографов можно с помощью переключателя, нажав на вкладку «Автографы».
В механику просмотра автографов внесли элементы геймификации. При наведении курсора на автограф появляется примечание, кому он принадлежал.
Продумали удобный фильтр в мобильной версии: при выборе нескольких чекбоксов иконка подскажет, сколько было выбрано фильтров, поиск развернется на всю строку, а иконки плиточного и строчного вида по клику меняют подачу контента.
Разбавили экспонаты блоками со ссылками на статьи. Они выводятся произвольно через каждые десять экспонатов, поэтому при каждом посещении каталога пользователя будет ждать новый интересный сюжет.
Всю коллекцию экспонатов мы разбили на две части: экспонаты и автографы. В каталоге экспонатов предусмотрены фильтры по периоду и категориям. Так же каталог имеет плиточный и строчный вид и сортировку по дате добавления и алфавиту. А для более точной выдачи можно воспользоваться поиском.
На первом экране расположили галерею, так как фотографий в экспонатах разное количество. Там где экспонатом является видео — встраиваем его в галерею.
Блоки аудио и видео не всегда содержат оригинальные произведения, поэтому дополняем их современными каверами и краткими биографиями о художниках и композиторах.
Этот же шаблон переиспользовали для страниц новостей и статей.
Для костюмов сделали галерею с подсказками. На карточке выводим текст о самих костюмах, а при наведении на плюсик выводим краткий текст о конкретном элементе одежды.
Интересного факта может не быть, в таком случае текстовый блок занимает всю ширину страницы.
Для детальных страниц разработали единый шаблон, который позволяет безболезненно убирать и добавлять блоки с содержимым:
Экспонатами являются отдельные составляющие костюмов, эскизы и декорации. У каждого экспоната есть свое небольшое описание и интересный факт связанный именно с этим экспонатом. Но так как они связаны единой темой, то у каждого экспоната на детальной странице есть кнопка, которая ведет на страницу с полным описанием всего балета и всех экспонатов. Так же все экспонаты, которые относятся к определенной постановке, имеют в заголовке его название, что бы точно попадать в поисковую выдачу. Полные страницы с описанием постановок представлены в статьях и выводятся в поиске по ключевым словам.
В обеих карточках мы вынесли иконки с контентным содержимым, что бы пользователь сразу видел, что внутри содержится несколько изображений, а также аудио и видео контент.
В каталоге есть два вида карточек — плиточный, с большой картинкой и заголовком. И строчный — с кратким описанием и тегами.
Проект оказался увлекательным, как для команды разработки, так и для пользователей. Тесное сотрудничество с заказчиком позволило быстрее погрузится в тему спорта и сгенерировать большое количество гипотез, многие из которых воплотили в механиках сайта. Проект сразу делали «на вырост», что дает нам возможность дополнить сайт новыми интерактивами и интересными разделами. Мы гордимся проведенной работой, а главное, заказчик реализовал все свои задумки и остался доволен результатом!
