Агентство DesignDepot разработало официальный сайт военно-исторического проекта "Кронштадт"

Предварительный этап — фирменный стиль

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

Логотип

Мы перерисовали рисунок основного варианта знака, а также создали версию, оптимизированную для digital-среды. Чтобы подчеркнуть связь проекта с историей, мы переработали шрифт логотипа и выполнили его в стилистике русского алфавита петровских времён, а также с учётом графических решений, найденных в начале 20 века русским художником-шрифтовиком Баженовым Д.А., что нашло отражение в волнообразном штрихе буквы «Д».

3a2c80c737a983f2e32d067924a24fe9.jpg

Паттерн

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

13e8851b27fe5b557678b0eb8dddfb07.jpg

Цвет

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

3a639a10baaff8052cd214fb889a3efd.jpg

944755747789934e73b3904418c94d60.jpg

3600ab3884be6a0b8aec35ad2b5b55a6.jpg

Основной этап — разработка сайта

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

  • три исторических форта: Кроншлот, Император Пётр I и Император Александр I;
  • два музея: «Лента времени» и Музей блокады Ленинграда
  • океанариум;
  • дайвинг-центр;
  • дирижабледром;
  • VR-аттракцион «Морской бой»;
  • канатная дорога на форт Император Александр I;
  • подводная лодка-музей «Ленинский Комсомол»;
  • боевые корабли;
  • терминал паромов;
  • марина для яхт;
  • паркинг для автомобилей;
  • кафе и рестораны;
  • отели, гостиницы и хаус-боты;
  • маяк.

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

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

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

e1c78ecadf6cd03d115949691ceeafe2.png

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

Исторический облик Кронштадта 18 века иллюстрирован цветной гравюрой, которую мы создали на основе старинных рисунков и чертежей. Для иллюстрации современного облика была разработана специальная полноцветная 3D-модель будущего парка и окрестностей. Эта же модель используется в интерактивной карте, на которую можно перейти прямо здесь же. 

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

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

В самом низу идёт блок с контактной информацией и формой обратной связи.

4217507c246244452dd4c36ea3f61416.jpg

«О проекте»

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

«Объекты» 

Раздел «Объекты» мы решили представить в виде каталога. Карточки объектов с изображениями дают наглядное представление и содержат краткое описание.При этом фортам как ключевым историческим объектам проекта уделяется особое внимание. На карточках фортов представлены 3D-изображения в реконструированном виде, и каждая карточка служит входом в раздел с подробной информация об истории форта.

5d53d20982cc5039178e8e19a902ac45.jpg

«История»

Чтобы рассказать об истории города Кронштадт, мы создали тайм-лайн с фотографиями и иллюстрациями, повествующими о ключевых событиях — с момента основания и до наших дней. Каждую фотографию или рисунок можно кликнуть, чтобы увидеть полноразмерное изображение. Тайм-лайн размещён в разделе «История» в виде анимированной страницы с вертикальным скроллингом.

«Пресс-центр»

Все актуальные новости, а также фото- и видеоматериалы о ходе строительства и освещении проекта в СМИ мы поместили в раздел «Пресс-центр».

50554afb6836571ca279f9956ec17072.jpg

«Карта»

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

4ced852ec2c70faecdcf2dfc49cd3176.jpg

«Выставки»

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

ea2bd4cb8bcb1ad98f009f5f1c37adb7.jpg

Сайт полностью адаптирован для использования на мобильных устройствах.

232848a0aa3271059e2c06e7f0d33d5d.jpg

 e7e7bd5297089b2d5bbd327beb7ecd8e.jpg

Следующий этап — дополнение и модернизация сайта

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

  • онлайн-покупка билетов 
  • возможность покупать билеты в онлайне как на отдельные шоу или в музеи, так и на транспортные средства, включая паром в Хельсинки
  • интернет-магазин 
  • интернет-магазин тематических товаров и фирменных сувениров парка «Кронштадт».
  • онлайн-игра 
  • лёгкая и интересная познавательная интерактивная игра на тему русских морских открытий и путешествий (уже в разработке!);  
  • видеографика подводных объектов 
  • интерактивные 3D-изображения подводных объектов. Вокруг объекта можно будет перемещаться, кликать на метки и смотреть видео. 
  • языковые версии 
  • помимо русской и английской языковых версий у сайта появятся также французская, испанская, немецкая и китайская.

Достигнутые цели и KPI по итогам запуска

На данный момент поставленные перед нами задачи выполнены в полном объёме:

  • Разработанный нами подробный визуальный и текстовый контент позволяет посетителям сайта получить наиболее полную и широкую информацию о проекте.
  • Созданные нами иллюстрации, фотоколлажи, 3D-модели и карта дают зрелищное представление о содержании проекта и его возможностях.
  • Реализованные нами на сайте технологические и интерактивные решения вовлекают посетителей, заставляют их активно взаимодействовать с сайтом и самим проектом.
  • Ясная и выразительная визуальная айдентика, нашедшая чёткое воплощение в дизайне сайта, богатый и стилистически разнообразный контент, а также необычные и интересные технологические решения формируют образ парка «Кронштадт» как уникального современного российского проекта глобального масштаба.

Работа над сайтом продолжается, он модернизируется и дополняется.

  • С момента запуска сайта его посетили около 13 тысяч человек.
  • Пиковые значения посещений достигают 800 человек в сутки.

Перейти на сайт

Полный текст статьи читайте на CMS Magazine