Дизайн государственных сайтов

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

Проблема дизайна государственных сайтов

Созданный в 2009 году сайт президента kremlin.ru заказчики тепло встретили, а опытные веб-разработчики дали хвалебные отзывы о нем. Успех пытались повторить и другие государственные структуры, но из-за разного уровня финансирования и подходов, его копии в основном получались менее удачными.

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

За разработкой, доработкой или обслуживанием сайта государственного учреждения обращайтесь к нашему агентству. Бесплатно проконсультируем и подготовим коммерческое предложение в течение 1 дня.

Каким должен быть качественный государственный сайт

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

Основы дизайна муниципальных сайтов

Веб-дизайнеры из ИРИ и диджитал-агентств разработали несколько шаблонов для государственных сайтов. Каждый из них подходит для реализации на любой CMS. По работе с этими шаблонами создана инструкция.

Герб. Специально для них разработали официальный цифровой герб. Решение отказаться от классического герба приняли по трём причинам:

1. У цифрового варианта меньше деталей. Благодаря этому он прекрасно виден даже на экранах с низким разрешением.
2. Новая версия выполнена в однотонных тонах. За счёт такого решения герб отлично смотрится на любой цветовой схеме. Для примера можно посмотреть его на сайте президента РФ.

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

Шрифты Golos RF. Использовать ли герб в дизайне сайта администрации – остаётся на усмотрение разработчика. Но шрифт разрешён только один. Цели нового шрифта:

1) Узнаваемость. Посетитель портала сразу понимает, что находится на государственном  сайте.

2) Удобство. Шрифт адаптируется к низкоформатным экранами и легко читается.

Создатель шрифта рассказывает, что в нем сейчас используются 2 главные линейки – интерфейсная и текстовая. Не исключено, что со временем он выйдет в открытый доступ и станет доступным для использования в оффлайне.

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

Многим пользователям было непонятно, зачем заниматься созданием нового шрифта, когда уже существуют удобные варианты. Помимо решения повысить узнаваемость, государственные разработчики столкнулись с проблемой, когда получили запрет на использование иностранных шрифтов. Среди них популярные Arial, Times New Roman, Tahoma и другие.

Первыми нововведения приняли сайты:

• Правительства Российской Федерации;
• Минздрава, Минфина, Минобрнауки, Минэнерго, Минтруда;
• Государственных услуг;
• Голосований;
• Открытых данных

Можете зайти на них и увидеть схожую структуру.

Основные требования ФЗ к дизайну административных сайтов

Государственные сайты разрабатываются в едином стиле и узнаются за счет единой:

• Типографики;
• Цветовой гаммы;
• Символики Российской Федерации;
• Структуры;
• Интерфейса.

Актуальные стандарты дизайна государственных сайтов

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

Конструкция макета

Дизайн страницы создаётся при помощи сетки и системы отступов. Она помогает дизайнеру, программисту и посетителю сайта.

Дизайнер с её помощью распределяет все элементы. Промежутки между элементами выстраивает система отступов. Похожие способы применяются в сходных ситуациях, что экономит время разработчика.

С технической точки зрения сетка помогает сделать сайт адаптивным под все устройства и экраны.

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

Посетителю становится проще ориентироваться на сайте. Для него повышается удобство пользования.

Колоночная система

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

Стационарный компьютер

Планшет

Мобильный телефон

Телефон с маленьким разрешением экрана

Схема создания сетки представлена в таблице. Параметр, изменяемый с шириной дисплея, обозначен стрелками.

Цвета

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

Примеры использования цветов:

Интерактивные элементы на сайте правительства РФ:

Ошибка на сайте госуслуг:

Чтобы пользователи с плохим зрением без труда считывали информацию на сайте,, коэффициент контрастности текстов ставят не меньше 4,5 по wcag.

1. Читабельный текст.

2. Плохо читаемый текст:

Цвета ссылок

Типографика

Для текста применимы правила:

Размер шрифта основного текста

• Для стационарных компьютеров 18-й размер.
• Для мобильных устройств – 16-й.
• Не имеющие высокой важности тексты – 14-й.

Отступ между блоками в 20 пикселей.

Информационный текст на сайте президента. 14-й шрифт.

Длина строки

Учитывая пробелы, оптимальный диапазон 40-80 знаков.

Высота строки

Оптимальное расстояние на примере сайта Минэнерго:

9 правил при разработке дизайна сайта государственных структур

1. Отзывчивость интерфейса. На сайте пользователь получает полезную информацию, которая помогает решить проблемы гражданина. На главном экране стоит указать услуги, которыми он сможет воспользоваться.
2. Понимание потребностей граждан. Недостаточно просто предоставить посетителю информацию об услуге. Сервис платформы даёт возможность воспользоваться ею. Решая вопросы через интернет, люди экономят своё время. Намного удобнее взять талон к врачу через интернет, чем выстаивать очередь с утра в поликлинике.
3. Доступность. Дизайн муниципальных сайтов подразумевает заботу о людях с ограниченными возможностями. Проводите эксперименты по удобству пользования сайтом для людей, у которых есть проблемы со здоровьем.
4. Анализ данных. Обращайте внимание на обратную связь посетителей сайта. Учитывайте их пожелания и замечания. Тестируя новые идеи на сайте, проверяйте, насколько они удобны пользователям.
5. Понятность. Не перегружайте интерфейс сайта. Чем он проще и интуитивно понятнее, тем лучше. Любые действия посетители сайта совершают в несколько кликов.
6. Дружелюбность всех платформ. Необходима адаптивная верстка сайта, которая сделает работу ресурса корректной и удобной в любом браузере, на любом разрешении экрана и любом мобильном устройстве.
7. Локализация. При разработке дизайна государственного сайта используйте разрешённые для них шрифты и шаблоны поведения пользователей.
8. Не перегружайте страницы излишним текстом. Информация должны быть лаконична и понятна людям, впервые желающим воспользоваться услугой. При необходимости добавляйте поясняющие картинки для лучшего восприятия.
9. Развивайте портал. Со временем сайт будет нуждаться в обновлениях. Используйте накопленный опыт для постоянного совершенствования площадки.

Почему единый дизайн необходим сайтам государственных структур

У 7 000+ госпорталов нет никакой общей связи. У них разная структура, навигация, дизайн. У некоторых из них встречается одинаковый функционал.

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

Задача госресурсов – упростить задачи пользователей, чтобы они без сложностей и потери личного времени находили нужный портал.

Цель единого дизайна государственных сайтов – максимальная забота о гражданах.

Единство государственных порталов и переход к структуре «одного окна» сократит затраты на разработку технических и дизайнерских идей.

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

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

Нововведения сделают из государства настоящего помощника для граждан, помогающим сохранять время, оперативно решать задачи и оказывать им помощь.

Рекомендации заказчикам государственных сайтов

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

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

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

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