Кейсы

Разработка сайта государственной организации Дирекция КЗС

Разработали оригинальный корпоративный сайт, посвященный Комплексу защитных сооружений г. Санкт-Петербурга — с интерактивными схемами и промостраницами с индивидуальным дизайном.
Золото в номинации «Органы власти»
Комплекс защитных сооружений

О клиенте

Комплекс защитных сооружений Санкт-Петербурга от наводнений жители города традиционно называют дамбой, хотя на самом деле в систему комплекса входит:

  • 11 защитных дамб, 
  • 6 водопропускных сооружений, 
  • 2 судопропускных сооружения,
  • автомагистраль с 3 развязками и 7 мостами,
  • автомобильный тоннель.

За функционирование этого комплекса отвечает ФКП «Дирекция КЗС г. Санкт-Петербурга Минстроя России», для которой мы и разработали данный сайт.

Задачи проекта

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

Внимание к дизайну

Меню

Чёткая проработка меню и продуманная анимация исключают случайное нажатие и демонстрируют прекрасную реакцию при наведении на пункты меню.

disign-menu

Иконки

Разработан набор индивидуальных иконок для быстрой навигации по сайту.

kzs-icons

Цвета

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

цвета

Отрисованные страницы

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

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

Промостраницы

История наводнений
История строительства
Экология

Это могли бы быть несколько абзацев скупого текста, но вместо них вы видите атмосферную страницу с эффектами параллакса и анимации.

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

наводнения

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

строительство

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

экология

Адаптивная вёрстка

Проект корректно отображается на различных устройствах.

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

Инга Таирова, менеджер проекта

Результат