Сайт правительства Московской области

Нашей задачей было создание сайта федерального органа государственной власти, соответствующего высоким стандартам безопасности, последним требованиям веб-разработки, законодательству и государственным стандартам. При этом сайт должен быть простым в навигации, удобным и очень, очень функциональным. Являясь одним из крупнейших агрегаторов новостей и медиа-материалов госорганов, учреждений и информагентств Московской области, mosreg.ru — важное звено единого информационного пространства региона и страны, и много времени мы посвятили интеграции со всевозможными сервисами импорта и экспорта данных. Но обо всем по порядку.

Проектирование

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

Сайт правительства
МО
О Московкой
области
  • Достижения;
  • Приоритеты развития;
  • История;
  • Официальные символы;
  • Знаменательные даты;
  • Наградная система;
  • Гражданское общество;
Губернатор
  • Администрация Губернатора;
  • Пресс-служба;
  • Контакты;
  • Пресс-релизы;
  • Обзоры СМИ;
  • Выступления и заявления;
  • Фотобанк;
Правительство
  • Структура;
  • Кадровая политика;
  • Подведомственные организации;
  • Нормативно-правовая база;
События
  • Новости;
  • Фото;
  • Видео;
  • Анонсы;
Сейчас в работе
  • Государственные программы;
  • Проекты;
  • Мероприятия;
  • Противодествие коррупции;
  • Защита населения от ЧС;
  • Государственные электоронные услуги;
  • Закупки для государственных нужд;
  • Стратегические инициативы;
Документы
Чтобы сделать интерфейс удобным и функциональным, сначала мы разработали интерактивные прототипы будущего сайта. Это 36 детально проработанных страниц, где отражены все необходимые элементы и их расположение, а также логика переходов между страницами и разделами.

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

Дизайн
Придерживаясь сдержанной, лаконичной стилистики, которая сочетала бы в себе официальность, с одной стороны, и современные тенденции веб-дизайна, с другой, мы разработали 4 дизайн-концепции.
Доработав концепцию, которая понравилась клиенту больше всего, мы разработали цветовую палитру, выбрали шрифты, утвердили сетку сайта, взяв за основу адаптивную сетку bootstrap на 12 колонок.
  • #e6e8ec
  • #b7bfcb
  • #2375d9
  • #c21721
  • #0a3d93
  • #072b5b
Roboto Medium
абвгдеёжзиклмнопрстуфхцчшщъыьэюя
абвгдеёжзиклмнопрстуфхцчшщъыьэюя
1234567890!»№;%:?*(){}<>_+
Roboto Light
абвгдеёжзиклмнопрстуфхцчшщъыьэюя
абвгдеёжзиклмнопрстуфхцчшщъыьэюя
1234567890!»№;%:?*(){}<>_+

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

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

  • 1025 - 1600 px
  • 768 - 1024 px
  • 320 - 767 px
Версия для слабовидящих пользователей
Удобство интерфейса и доступность информации для всех граждан стали особым приоритетом. Версия для слабовидящих пользователей, обладающая расширенными возможностями персональной настройки, делает сайт доступным для людей с особыми потребностями.
Интерактивная структура Правительства
Структура Правительства области сделана в виде наглядного иерархического дерева с крупными карточками персон, на каждом экране помещаются все элементы одного уровня.
На случай, если нужна не только наглядность, но и сдержанная практичность, предусмотрено выведение структуры на странице целиком — с указанием подчинений, должностей, контактных телефонов. Структура формируется автоматически на основании заполненных на сайте данных о персонах и органах власти, что сводит на нет путаницу, когда на одной странице телефонный номер или фамилию руководителя поменяли, а на другой нет: достаточно поменять данные на одной странице, и они автоматически поправятся везде на сайте.
Для каждой персоны или органа власти в структуре заведена собственная страница, на которой размещены не только биография или полномочия, но и контакты: рабочий адрес, телефон, ссылки на аккаунты в соцсетях, а также все новости, связанные с этой персоной или органом власти на сайте.
В разделе «Контакты» на сайте также используются данные из структуры по органам власти и должностным лицам: рабочий или юридический адрес, номера телефонов, адреса электронной почты и веб-ресурсов. Все данные импортируются также автоматически.
Интеграции с внешними сервисами

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

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

  • Удобство и контроль
    Интеграция сайта с системой автоматического управления контентом обеспечивает централизованное управление содержимым сайтов и дает полный контроль над потоком поступающей и публикуемой информации.
  • Безопасность
    Широкие возможности фиксирования любых изменений в системе обеспечивают дополнительный уровень безопасности.
  • Интеграции с внешними сервисами
    Высокая актуальность информации обеспечивается и интеграцией с внешними сервисами открытых данных, что позволяет обеспечить реализацию стратегии развития информационного общества.
Общение с гражданами на новом уровне
Интерактивность сайта позволяет вывести на новый уровень взаимодействие с гражданами: на сайте располагаются актуальные графики приема и работы различных государственных органов и персон, отражается, где и когда будут проходить мероприятия и встречи, и как туда попасть.
Предусмотрены формы записи на прием, отправка обращений в режиме онлайн, подписка на новостную рассылку.
Система управления контентом
Сайт Правительства Московской области выполнен на базе CMS (системы управления контентом),специально разработанной нами для проекта единого информационного пространства Московской области с целью создания максимально удобного и гибкого административного интерфейса, учитывающий все пожелания клиента.
в кейсе о конструкторе сайтов.

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

Результатом нашей работы стал современный сайт с адаптивным дизайном, отвечающий высоким требованиям безопасности, законодательства и ГОСТов.

Перейти на сайт
Награды
  • Конкурс «IT- проект года 2017»
    1 место в номинации «Лучший IT-проект для госсектора»
  • Конкурс «Золотой сайт»
    2 место в номинации «Сайт деятелей и органов власти»
Над проектом работали
  • Ксения Дедученкоменеджер проекта
  • Максим Подавалкиндизайнер
  • Наталья Куприяноваконтент-менеджер
  • Антон Филинпроектировщик
  • Александр Захаровстарший front-end разработчик
  • Андрей Свинцовтехнический директор
  • Антон Ларинарт-директор
  • Надежда Сергееваfront-end разработчик
  • Светлана Каськоваменеджер со стороны клиента