Государство для людей: зачем нужна единая дизайн-система для российских государственных сайтов и кто её придумал

Уже около трёх лет над официальной дизайн-системой для всех сайтов российских госорганов работает дизайн-компания «Смена» (AIC и «Лаборатория Артема Геллера») вместе с партнёрами из Минкомсвязи. Цель проекта — унификация и объединение социально важных сайтов для оказания услуг гражданам и их информирования.

В закладки

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

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

С чего всё началось

Идея о том, что государственные сайты нуждаются в единой дизайн-системе, возникла ещё в 2009 году. В это время был создан сайт Президента РФ — kremlin.ru. Над ним работала команда Артёма Геллера. Новый сайт доброжелательно встретило профессиональное сообщество. Результатом были довольны и заказчики.

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

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

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

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

Решили базировать будущую дизайн-систему на домене gov.design, который в то время принадлежал ФСО. Домен передали в Минкомсвязи, с командой был заключён государственный контракт и началась работа по созданию первой версии дизайн-системы для государства.

Версионность и путь к совершенству

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

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

Из первой версии во вторую перекочевали лейаут и система отступов, но сама система стала проще и для пользователей, и для дизайнеров. Вторая версия позволяет сфокусироваться не на визуальной составляющей, а на качестве сервисов и понятности контента.

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

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

«Смена» заказала разработку официального шрифта Российской Федерации одному из лучших специалистов в этой сфере — Александре Корольковой из «Паратайп». Так появился шрифт «Голос RF», который будут использовать на всех официальных сайтах.

Одно решение для общих проблем

По похожему пути шли многие государства, где есть разветвлённая система правительственных сайтов и сервисов. Так, совсем недавно объявили о запуске второй версии унифицированной дизайн-системы в США. Похожие сайты с подробными руководствами для разработчиков действуют в Великобритании, Австралии, некоторых странах Евросоюза.

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

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

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

Артем Геллер
сооснователь «Смены»

Стоит знать, что минимум 8,2% россиян живут с инвалидностью, 14% — имеют проблемы со зрением, а 40% вообще не пользуются онлайн-сервисами. Многие испытывают беспокойство в случаях, когда приходится оставлять свои личные данные при получении услуг в форме на сайте.

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

Кроме того, в возрасте от 25 до 60 лет способность людей пользоваться сайтами снижается на 0,8% в год. Это происходит в основном потому, что они тратят больше времени на страницу из-за трудностей с навигацией. Другими словами, 40-летний пользователь проведёт на сайте на 8% больше времени, чем 30-летний для выполнения одной и той же задачи.

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

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

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

Установлено, что создание государственного сайта будет занимать на 30% меньше времени, если оно будет происходить с использованием утверждённого стандарта. С учётом того, что время — это деньги, подобная экономия благотворно отразится на госбюджете.

Как это работает

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

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

И самые новые скрины разработки второй версии дизайн-системы — лента новостей с частотой одной–пяти новостей в день (всего три ленты), концепт страницы ведомства и концепт навигации по структуре правительства.

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

Написать
{ "author_name": "Артём Геллер", "author_type": "self", "tags": [], "comments": 51, "likes": 58, "favorites": 68, "is_advertisement": false, "subsite_label": "design", "id": 66527, "is_wide": false, "is_ugc": true, "date": "Mon, 06 May 2019 14:10:38 +0300", "is_special": false }
0
{ "id": 66527, "author_id": 2222, "diff_limit": 1000, "urls": {"diff":"\/comments\/66527\/get","add":"\/comments\/66527\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/66527"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
51 комментарий
Популярные
По порядку
Написать комментарий...
39

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

Ответить
8

«Государство для людей»  
АХАХАХАХАХАХАХАХАХАХАХАХА

Ответить
5

Артём, спасибо за отличную работу и материал! Скажите пожалуйста, по какой лицензии будет распространяться шрифт «Голос RF»?

Ответить
6

На данный момент мы распространяем шрифт по открытой лицензии, бесплатно и без ограничений.

Ответить
1

Где можно взять? Не нашел.

Ответить
1

Напишите мне в телеграмм @ekaterinofka, я пришлю вам архив

Ответить
5

Интересная статья. После прочтения возникло несколько вопросов:

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

— Есть какие-то метрики, по которым вы определяете эффективность внедрения дизайн-системы? Вообще на что вы опираетесь при принятии решений и исходя из чего делаете вывод что работа движется в верном направлении и пользователям действительно становится лучше?
Или это чисто имиджевый (для государства) проект без показателей эффективности?

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

— Переделка сайтов под дизайн-систему будет носить рекомендательный, или принудительный характер?

Ответить
6

- Мы хотим создать единый центр компетенции. О формате сейчас думаем.
- Это пример Data driven design. Как только у нас появится возможность мы тут же публично опубликуем всю ту массу исследований, которую провели. Про имидж мы вообще не говорим и задачу улучшения имиджа не решаем.
- Сначала - рекомендательный

Ответить
0

единый центр компетенции

Артём, привет! 👋

Напишите, пожалуйста, в каком значении Вы юзаете слово «компетенция». Не соображу. 🤔

Ответить
0

В контексте профессиональных знаний в этой области или вы о чем?

Ответить
–2

Артём, спрашиваю только о том, что именно Вы называете «компетенцией». Ибо из контекста мне увиделось, что Ваше понимание не соответствует словарному. Я совсем не против «живого языка», новояза. Только прошу рассказать, что называете «компетенцией» **именно Вы**. (Не для спора.)

Ответить
0

я вроде ответил

Ответить
3

Дизайн на офигенном уровне !!! Молодцы ребята ! Не смотря на то что это гос сайты - очень достойно.

Ответить
3

Спасибо за труд. Но пока на сайте с дизайн-системой 503 ошибка, хочется уточнить: какой способ применения ее. Нужно ли что-то делать дополнительное (писать заявления) или можно сразу брать и использовать на гос. сайтах?

Ответить
0

Вторая версия дизайн-стандарта лежит тут - http://standart.gov.design/
Тут базовые принципы, сетка, компоненты и руководства для команд разработки продукта.

Ответить
3

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

Ответить
2

А самый главный будете дизайнить?

Ответить
3

да, это часть стратегии

Ответить

Комментарий удален

4

Иконки шрифтом делают только лентяи или не компетентные фронтендеры

Ответить
1

Фреймворк ГостСтрап 1.0
Сразу бы уже пилили движок РосГостСайтДвигМаш, да чтобы привязывать его к ЛПТ порту и парочке железок с фискальными накопителями.
Обязать всех использовать этот двиг, а еще придумать несколько процедур особенно геморных и изменяемых, чтобы можно было целый ИТ отдел содержать и вкачивать туда бюджеты на законных основаниях.
Когда к быстро развивающимся технологиям и при этом быстро устаревающим технологиям подключается бюрократическая машина, ничего хорошего не будет.
Ок, пару лет вы сделаете хорошо всем и каждому, кто привык к госуслугам-порталу.
А что делать, когда появятся новые устройства с новыми требованиями.
Ведь вся эта куча сайтов по стадартам потом пукнуть не сможет без пары десятков бумажек сверху, чтобы сделать какое-нибудь элементарное улучшение.
Стандарты хороши для консервативных областей, в случае ИТ - сам продукт устаревает быстрее, чем чиновник успеет написать стандарт на него и согласовать.

Ответить
1

Немного разовью тему - с точки зрения архитектора ПО.
Если у сайтов должен быть похожий интерфейс и похожие функции - то из принципа DRY – Don't repeat yourself (не повторяй себя) следует задать вопрос - а нужны ли им самостоятельные сайты?
Не следует ли выделить эти часто используемые функции в единый портал и каждой районой администрации выделять простой личный кабинет, где они будут постить новости про удои коровников и выборы председателя.

Ответить
1

класс! добавьте тогда в статью, что ли)))

Ответить
1

Расскажем в следующей :)

Ответить
1

Залетай к ноунейму на стрим, ждём

Ответить
1

Еще вопрос по поводу текущего сайта госуслуг, будет ли как-то взаимосвязана новая система с сайтом госуслуг? будет ли редизайн сайта госуслуг?

Ответить
0

Привет :) Предполагается, что сайт госуслуг сменит фронт на дизайн-стандарт, а потом станет частью единого gov.ru

Ответить
1

Артём, можно ли ознакомиться с контрактами на площадке http://zakupki.gov.ru?

Ответить
1

И есть ли какая-либо связь между получением контракта и вашими деловыми отношениями с Калугиным Денисом Юрьевичем, Членом Президиума Центрального координационного совета сторонников Партии "Единая Россия"?
https://storonniki.er.ru/person/Kalugin
https://zachestnyibiznes.ru/company/ul/5087746381751_7727667618_OOO-OKB

Ответить
3

Добрый день! Дениса Калугин я не видел лет 7. Он не имеет отношения к этому проекту как и ко всем проектам в которых я участвовал за последние лет 7-9

Ответить
1

Понял, спасибо!

Ответить
1

Артем, есть парочка вопросов.

1. Будите ли все же подключать людей из вне для участия в проекте, как и анонсировали изначально. Или решили что это будет делать только внутри вашей компании?
2. В доке на версию 2 , компоненты в виде изображений - это временные заглушки или так и задумывалось?

P.S. http://design.gov.ru/ 503 ошибка

Ответить
0

Привет!
1. Привет! Безусловно будем. Мы и сейчас постоянно консультируемся с ребятами и мероприятия проводим. Совсем скоро опубликуем на dropbox paper вторую версию дизайн-системы, чтобы ее можно было всем комментировать. Если есть желание подключиться к команде то мы всех ждем ag@lab.ag
2. http://standart.gov.design/?fbclid=IwAR2aqHvr7QtxEKfLU4km6HI0v05Uk57GFhjw0QLR70Vkx_8trrQiB0krx4M
Это временный заглушки сверстанных компонентов.

Ответить
1

Я весь декабрь и январь звонил и писал тебе что бы подключиться к команде. Я обязательно напишу. По компонентам супер.

Ответить

Комментарий удален

1

В итоге мы говорим о симбиозе двух подходов:
Компонентах в облаке + одна платформа

Ответить
0

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

Ответить
1

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

Ответить
0

думаю, что редко - разработчикам надо деньги платить, а чиновники далеко не самые продвинутые в этом деле, чтоб понять необходимость перемен и трат

Ответить
0

Это брат Росса Геллера?

Ответить
0

Какова сумма государственного тендера?

Ответить
0

Все контракты можно увидеть на госзакупках.

Ответить
0

ссылку можно на сам конкурс или конкурсную документацию?

Ответить
0

Минималистично...

Ответить
0

У Лебедева с Газпромом что-то похожее было

https://www.artlebedev.ru/gazprom/constructor2/

Ответить
0

а есть версия 2.0 в sketch? как это было с первой

Ответить
0

теперь есть версия в Figma и мы поделимся в самое ближайшее время

Ответить
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": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "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, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }