Дизайн Anastasia Dubrovina
2231

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

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

В закладки
Аудио

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

  • огромное количество самых разнообразных активностей (образовательных, развлекательных, рекреационных, спортивных, гастрономических и так далее);
  • компактное расположение всех активностей в одном месте;
  • обособленное расположение самого проекта (на острове!);
  • сочетание исторических памятников и современных технологий;
  • транспортная доступность (регулярное сообщение по земле и воде);
  • наличие собственного гостиничного сервиса и многое другое.

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

Именно эта многоуровневость, многослойность и уникальность проекта находит отражение в оформлении визуальной айдентики и официального сайта, архитектуру и дизайн которого разработали в DesignDepot.

Поставленная задача и её решение

Задачи

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

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

Решение

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

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

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

Логотип

Мы перерисовали рисунок основного варианта знака, а также создали версию, оптимизированную для digital-среды.

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

Паттерн

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

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

Цвет

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

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

Архитектура сайта

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

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

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

  • терминал паромов;

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

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

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

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

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

В итоге выработали тот контент, который дал нам ясное понимание, как будет выглядеть сайт, о чём он будет рассказывать и какие ощущения передавать.

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

Входная страница

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

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

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

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

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

«О проекте»

Раздел «О проекте» мы реализовали в виде анимированной скроллинг-страницы, просмотр которой создаёт ощущение полёта или наоборот погружения.

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

«Объекты»

Раздел «Объекты» мы решили представить в виде каталога. Карточки объектов с изображениями дают наглядное представление и содержат краткое описание.

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

«История»

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

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

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

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

«Карта»

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

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

«Выставки»

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

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

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

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

Онлайн-покупка билетов

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

Интернет-магазин

Интернет-магазин тематических товаров и фирменных сувениров парка «Кронштадт».

Онлайн-игра

Лёгкая и интересная познавательная интерактивная игра на тему русских морских открытий и путешествий (уже в разработке!);

Видеографика подводных объектов

Интерактивные 3D-изображения подводных объектов. Вокруг объекта можно будет перемещаться, кликать на метки и смотреть видео.

Языковые версии

Помимо русской и английской языковых версий у сайта появятся также французская, испанская, немецкая и китайская.

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

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

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

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

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

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Anastasia Dubrovina", "author_type": "self", "tags": [], "comments": 11, "likes": 31, "favorites": 37, "is_advertisement": false, "subsite_label": "design", "id": 76581, "is_wide": true, "is_ugc": true, "date": "Thu, 25 Jul 2019 16:11:55 +0300" }
{"average":28551,"one":95,"ten":76}
Сколько денег вы откладываете в месяц?
Ответьте и узнаете, сколько копят другие.
0 ₽
70 000+ ₽
0 ₽
{ "id": 76581, "author_id": 260615, "diff_limit": 1000, "urls": {"diff":"\/comments\/76581\/get","add":"\/comments\/76581\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/76581"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
11 комментариев

Популярные

По порядку

Написать комментарий...
7

Хорошая работа.

Ответить
–1

Я родилась в Кронштадте, прожила в нем почти 30 лет. Когда увидела шрифт для сайта, у меня прям флэшбэк случился. В школе у меня было три книжки про Кронштадт, по которым я готовила рефераты. На всех трех на обложках название города было написано именно таким шрифтом. Да и общая стилистика тоже напоминает те советские книжки. Надеюсь, хотя бы тексты не с них списаны. Скучно и избито. Уж прастити.

Ответить
4

Разве это плохо, что у вас флешбэк случился?

Ответить
1

Отблески легендарной истории и военной славы, солёный запах морских волн и бесконечные возможности для отдыха — всё это смело и органично сочетается в парке «Кронштадт».

Никакого запаха морских волн вы не почувствуете, Финский залив – пресный, точнее солоноватоводный. Его солёность составляет всего 2%. Лучше заменить шумом волн.

Ответить
1

Это сайт из будущего, в Кронштадте ничего подобного нет, а обещаниям в СПБ верить не стоит, это не Москва. Тут 2 станции метро за 5 лет это достижение.

Ответить
0

Анастасия, а можете рассказать, как вы визуал делали? Графика и изображения? Как их делали?

Ответить
0

Егор, не поняла вопрос? Вас интересуют программы и инструменты, с помощью которых мы делали графику или что-то другое?

Ответить
0

И где хоть одна ссылка на сайт

Ответить
0

Виктор, вот ссылка на сайт https://кронштадт.рф и в тексте поправим)

Ответить
0

В чем делали карту сайта?

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Нейронная сеть научилась читать стихи
голосом Пастернака и смотреть в окно на осень
Подписаться на push-уведомления
{ "page_type": "default" }