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

Уже около трёх лет над официальной дизайн-системой для всех сайтов российских госорганов работает дизайн-компания «Смена» (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% меньше времени, если оно будет происходить с использованием утверждённого стандарта. С учётом того, что время — это деньги, подобная экономия благотворно отразится на госбюджете.

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

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

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

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

0
51 комментарий
Написать комментарий...
Товарищ Кот

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

Ответить
Развернуть ветку
Kira Ngoma

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

Ответить
Развернуть ветку
Alexey Razuvaev

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

Ответить
Развернуть ветку
Ekaterina Lobanova

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

Ответить
Развернуть ветку
2 комментария
Filipp Lyakh

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

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

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

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

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

Ответить
Развернуть ветку
Артём Геллер
Автор

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

Ответить
Развернуть ветку
4 комментария
Vovan Avach

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

Ответить
Развернуть ветку
Raz Dva

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

Ответить
Развернуть ветку
Ekaterina Lobanova

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

Ответить
Развернуть ветку
Vasek Romanov

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

Ответить
Развернуть ветку
Аккаунт удален

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

Ответить
Развернуть ветку
Артём Геллер
Автор

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

Ответить
Развернуть ветку

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

Развернуть ветку
Артём Геллер
Автор

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

Ответить
Развернуть ветку
Kondin Dmitriy

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

Ответить
Развернуть ветку
Kondin Dmitriy

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

Ответить
Развернуть ветку
6 комментариев
Алексис Второй

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

Ответить
Развернуть ветку
Алексис Второй

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

Ответить
Развернуть ветку
2 комментария
Лев Немировский

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

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

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

Ответить
Развернуть ветку
Артём Геллер
Автор

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

Ответить
Развернуть ветку
1 комментарий

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

Развернуть ветку
Артём Геллер
Автор

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

Ответить
Развернуть ветку
Коля Павельев

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

Ответить
Развернуть ветку
1 комментарий
Вадим Клюев

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

Ответить
Развернуть ветку
Sandrino Komaroff

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

Ответить
Развернуть ветку
Кирилл Сиренко

А где можно ознакомится с материалами, гайдлайнами и тд.? Сайт из статьи лежит с 503 ошибкой.

Ответить
Развернуть ветку
Артём Геллер
Автор
Ответить
Развернуть ветку
Артём Геллер
Автор
Ответить
Развернуть ветку
John Lee Miller

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

Ответить
Развернуть ветку
Ekaterina Lobanova

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

Ответить
Развернуть ветку
1 комментарий
Андрей Жиганов

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

Ответить
Развернуть ветку
Сергей Воробьёв
Ответить
Развернуть ветку
S.Z

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

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

Ответить
Развернуть ветку
Алексей Сель

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

Ответить
Развернуть ветку
Артём Геллер
Автор

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

Ответить
Развернуть ветку
1 комментарий
48 комментариев
Раскрывать всегда