Редизайн сайта Комитета по развитию информационных технологий и связи Мурманской области
Заказчик
Комитет по развитию информационных технологий и связи Мурманской области (КРИТС). В ведении КРИТС находится система официальных интернет-ресурсов исполнительных органов государственной власти и органов местного самоуправления Мурманской области (далее - СОИР), насчитывающей 44 сайта.
ЗАДАЧА
Необходимо разработать новый шаблон сайта Комитета в соответствии с дизайном государственных систем России, описание которого расположено по адресу https://design.gov.ru При разработке и внедрении нового шаблона должен быть сохранен весь существующий контент и функционал.
ДИЗАЙН
Дизайн государственных систем России
Design.gov.ru - важная часть проекта Минкомсвязи по развитию государственной web-экосистемы, целью которой является создание единой дизайн-системы для электронных ресурсов страны.
Задача дизайн-системы — реструктурировать контент и структуру сайтов таким образом, чтобы на первом плане была полезная для людей информация, получение услуг, участие в жизнедеятельности государства.
Этот проект дал нам возможность быть одними из первых, кто воплотил эту идею в жизнь.
Разработка GUI
Вдохновившись презентацией дизайн-системы и приступив к работе оказалось, что имеющихся гайдлайнов и рекомендаций по их использованию совсем недостаточно для проработки всех элементов дизайна, поэтому мы создали свой собственный графический интерфейс пользователя (GUI).
Отличительной особенностью новой дизайн-системы является обязательное наличие в шапке сайта виджета Госбара, однако, нигде не было информации, что цветовых вариантов полоски Госбара всего лишь 3, поэтому при выборе цветовой гаммы пришлось отталкиваться от выбранного одного из трех цветов Госбара.
ЦВЕТОВАЯ ПАЛИТРА
На ресурсах КРИТС расположено более 40 сайтов комитетов/министерств Мурманской области, а также различные тематические сайты. В планах КРИТС также стоит задача в дальнейшем перевести сайты комитетов/министерств на новый разработанный дизайн. Мы понимали, что нужна гибкость в настройке цветовой гаммы для различных сайтов. Поэтому мы создали цветовую палитру, основанную на 4 цветах.
Для каждой тематики сайта эту палитру можно будет скорректировать. Например, для сайта Министерства здравоохранения Мурманской области можно использовать зеленые цвета.
Работает цветовая палитра с помощью технологии LESS. Подобранные дизайнером основные цвета компилируются «на лету», создавая раскладку светлых и темных полутонов, а также монохромный ряд. Такая технология даёт возможность разработчикам настроить цветовую схему без дальнейшего привлечения дизайнера.
СКОРОСТЬ ЗАГРУЗКИ САЙТА
В современном интернете скорость загрузки страниц сайта является критическим показателем.
Мы использовали следующие технологии для ускорения скорости загрузки:
• Минимизация JS/CSS (PHP Minify)
• Отложенная загрузка картинок (lazyload)
• Отложенная загрузка JS (requireJS)
Все эти инструменты дали значительный прирост скорости.
ВЕРСИЯ ДЛЯ СЛАБОВИДЯЩИХ
Согласно требованиям к государственным сайтам для лиц с ограниченными возможностями по зрению на сайте должна быть версия для слабовидящих.
Мы реализовали следующие возможности:
• Изменение размера шрифта
• Изменение типа шрифта - с засечками / без засечек
• Включить/отключить изображения
• Изменение межбуквенного интервала
• Изменение цветовой темы
Для переключения цветовой темы используется изменение цветовой палитры, т.е. цветовая тема версии для слабовидящих представляет собой просто изменённую цветовую палитру. А так как цветовая палитра работает с помощью LESS, то для создания цветовых тем не пришлось дополнительно программировать/перевёрстывать страницы – достаточно задать новую цветовую палитру и она тут же будет работать на сайте.
.png)
Интеграция с Госбар
Одно из требований Заказчика было интегрировать новый дизайн с поисково-навигационной системой «Госбар». В процессе интеграции был ряд сложностей с виджетом, так как он практически не поддаётся кастомизации и стилизации, но все проблемы были решены и «Госбар» успешно вошёл в интерфейс нового дизайна.
Интеграция с ЕСИА
Новый дизайн поддерживает вход на сайт с помощью «Единой системы идентификации и аутентификации» портала государственных услуг.
Этапы разработки
анализ требований, техническая спецификация, методика испытаний и другая рабочая документация
1 месяц
оживляли существующие страницы UI/UX дизайном
2 месяца
вёрстка / программирование / внедрение
2,5 месяца
Результат
Сайт Комитета стал одним из первых в стране, на котором используется концепция «Дизайна государственных систем России». Сайт соответствует всем требованиям законодательства, стал визуально понятнее, лаконичнее и удобнее. Скорость загрузки страниц сайта возросла, при том, что весь функционал сайта был сохранён, плюс был добавлен ряд новых возможностей.
Перейти на сайт https://it.gov-murman.ru
