Разработка госсайта по дизайн-системе России

Опыт агентства «Мэйк».

Минкомсвязи, AIC, «Лаборатория Артёма Геллера» и компания СТМ разрабатывают дизайн-систему для всех госсайтов России. Работать с ней смогут все, но хорошие сайты получатся не у каждого. Объясняем на примере, почему.

Мы разбили материал на две части:

  1. Работа над государственным сайтом. Как это бывает, к чему готовиться. Ленивые чинуши со стороны заказчика — правда или нет.
  2. Создание госсайта по дизайн-системе России. Что это и для чего. Какие ваши проблемы решит дизайн-система, и каков порог входа для работы с ней. Спойлер: эта штука может упростить жизнь только опытным и слаженным командам. Объясняем, почему.

Заказчик и его задача

В январе 2018 года состоялся релиз нового сайта администрации Кемеровской области ako.ru. На сайте власти публикуют пресс-релизы для СМИ, законы и официальные документы, а обычные граждане могут подать обращение, задать вопрос и получить консультацию.

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

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

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

Что мы с этим сделали

Мы решили не переделывать старый сайт, а начать с истоков.

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

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

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

Теперь можно добавлять новые блоки и менять старые. Например, уже сейчас обсуждается возможность добавления блока популярных услуг с сайта «Госуслуги». Архитектура сайта позволяет сделать это легко и быстро.

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

Каково это — работать с госсзаказчиком

Есть мнение, что в госструктурах работают ленивые чиновники, которые стремятся только усидеть на своих местах. В реальности всё оказалось иначе. Мы работали с компетентными и квалифицированными специалистами, которые были на 100% заинтересованы в результате.

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

Этапов согласования было много. К примеру, дизайн-концепцию сайта принимали в три этапа. Последний из них проходил при комиссии из 20 человек.

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

Какие трудности могут ждать при работе над госсайтом

  • На госсайтах используются громоздкие бюрократические формулировки. Они малопонятны людям и плохо влияют на дизайн. В некоторых разделах нам удалось переписать их. Но часть пришлось оставить как есть, и на сайте красуются пункты меню с названием в четыре строки.
  • Любое обновление — это долго и мучительно, ведь всякое изменение на сайте тянет за собой изменение в работе людей. С коммерческими заказчиками в этом случае легко. Вы показываете само изменение, затем профит от него, и заказчик говорит: «Окей». В администрации же главное — процессы. Поэтому даже такое пустяковое изменение, как автоматических ответ на электронное письмо, может согласовываться три недели, а потом решение и вовсе отменят — «как бы чего не вышло».
  • Есть некоторые разделы, которые не вписываются в информационную архитектуру. Но их «нужно поставить обязательно». И неважно, куда.
  • «Это нельзя трогать». Законодательство и локальные акты часто в императивной форме предписывают определённые решения. В законах написано, что должно быть на сайте и какие именно формулировки следует использовать. Но нигде не написано, что это должно быть доступно для понимания и удобно.
  • Поскольку долгое время сайт не модернизировали, а функции к нему добавлялись, администрации пришлось создать дюжину сторонних сайтов, которые эти функции выполняли. В итоге нам пришлось объединить их все на одной площадке, логично встроив в новую архитектуру.

Дизайн-система России: к чему быть готовым

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

Уже после того, как была создана новая архитектура сайта и согласован прототип, мы узнали о дизайн-системе России. Работу над ней сейчас ведёт команда из Минкомсвязи, AIC, «Лаборатории Артёма Геллера» и компании СТМ.

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

Что такое визуальный язык? Это комбинации цветов, шрифта, расположения и вида элементов, по которым мы сразу можем узнать государственный сайт. Это как зайти на португальскую стартовую страницу «Яндекс» — благодаря визуальному языку вы поймёте, что это именно «Яндекс».

Мы написали разработчикам дизайн-системы Артёму Геллеру и Сергею Попкову (это арт-директор AIC) в Facebook. Попросили рассказать, насколько готова дизайн-система России, и можно ли её использовать. В ответ мы получили гайдлайн, который можно было применять для разработки сайта.

Особенности работы с дизайн-системой России

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

Дизайн-система даёт набор элементов, а скомбинировать их в работоспособный интерфейс предстоит разработчикам.

Вот 11 выводов, которые мы сделали, работая по дизайн-системе России:

  • Не получится просто собрать сайт из блоков, как конструктор, придётся включить голову и хорошо поработать. Чтобы работать с ней, придётся разобраться во всех нюансах и понять, как их применять.
  • В дизайн-системе заложены все базовые компоненты интерфейса. Их хватает для решения 90% задач. Но возникают случаи, когда приходится разрабатывать новые компоненты. Вот пара примеров. Первый: в нашем проекте было много табличного контента, но их трудно показывать в мобильной версии сайта. Поэтому нам пришлось изобрести новый компонент «Таблица» с горизонтальными скроллом. Второй: навигация по внутренним страницам. Некоторые разделы получились сложными — для них мы сделали боковое меню в помощь. И чтобы человек понимал, где он находится, добавили «хлебные крошки».
  • Соблюдение принципов дизайн-системы требует тщательного проектирования структуры сайта и проработки контента. Каждый раздел должен быть доступен и понятен. Так что работать с дизайн-системой в её нынешнем виде под силу только опытной команде.
  • Использование дизайн-системы исключает субъективный фактор «нравится-не нравится», а вау-эффекты отводит на второй план. Главное — принципы простоты, отзывчивости и доступности. Не все заказчики и разработчики к этому готовы.
  • Типографика в дизаин-системе продумана отлично, заданы стили для десктопов и планшетов. Но возникали и проблемы. Если на внутренних страницах заголовок H1 был длинным, он получался слишком массивным. Сделать все заголовки краткими и емкими не получилось. Проблему решили заменои стиля заголовков Н1 на Н2 и нажили кучу проблем с иерархией, а страдали верстальщики.
  • Ограничения дизайн-системы полезны при обслуживании и наполнении сайта. Они помогают сохранить его визуальный стиль. Как бывает в жизни: заказчик просил разместить бегущую строку со штормовым предупреждением. Но ограничения дизайн-системы дали нам право отказаться портить главную. И всё же наш арт-директор нашёл элегантное решение: предупреждение о шторме мы разместили под значком уведомлений на госбаре, избавившись от бегущей строки. И волки, и овцы.
  • При работе с дизайн-системой сначала проектируем структуру вёрстки и верстаем все элементы. Затем страницы собираются из готовых блоков. С одной стороны, это проще, ведь не нужно каждый раз заново верстать страницу. С другой — эту работу можно давать только опытному фронтенд-разработчику. Нужно, чтобы он понимал принципы построения сайта и визуального взаимодействия элементов. Иначе велик риск сделать вёрстку, с которой будет невозможно работать. Есть и другая проблема: неопытный фронтендер не сможет использовать свои решения повторно, а значит, потратит кучу времени и сил, решая аналогичную задачу с листа.
  • С помощью дизайн-системы легче строить надёжный фундамент «визуал, фронтенд и бэкенд». Если не строить проект на надёжной основе, рано или поздно он попадёт в спираль смерти, когда возникает множество ошибок при попытке внесения изменений и сайт «рассыпается».
  • Правильное использование дизайн-системы позволяет сфокусироваться на развитии. С ней легко вносить малозаметные, но важные улучшения и при этом не изобретать велосипед каждый раз.
  • В дизайн-системе описана только визуальная часть, нет рекомендации по структуре и информационному наполнению саитов. Пользуясь гаидлаином, можно создать визуально прекрасныи продукт, но без проработаннои структуры, контента и навигации вся работа теряет смысл.
  • К сожалению, сообщество по разработке дизайн-системы только формируется. Нет описаний опыта её внедрения, подробных рекомендаций разработчиков. Приходилось работать в вакууме. Поэтому мы решили написать о своём опыте внедрения, нам бы такая статья на старте проекта была очень полезна.
Навигация

Результат, перспективы и применение дизайн-системы России

Использование дизайн-системы позволило сократить срок разработки саита на 30%. Сразу после запуска ako.ru мы сделали редизайн инвестиционного сайта области на дизайн-системе. Срок работы над ним занял уже в три раза меньше времени.

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

Проект сдан, но работа продолжается. Со стороны администрации есть предложение развернуть одно коробочное решение, которое будут использовать все муниципальные органы власти. Этот проект сократит расходы на сайты и скорость сдачи проектов. Для этого и нужна дизайн-система.

Для дальнейшего развития проекта мы разрабатываем единую библиотеку интерфейсных компонентов. Она позволяет хранить все актуальные версии элементов в одном месте и использовать их повторно.

0
45 комментариев
Написать комментарий...
Антон Жиянов

Очень круто, что есть дизайн-система. Очень не круто, что на gov.design до сих пор только общие слова, а собственно гайдлайн выложен в виде какого-то мутного архива в гуглодоке.

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

в каком то мутном архиве в гугл доке есть sketch файл, где все подробненько изложено в гайдлайнах, символах и паттернах

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

Сейчас в гугл доке есть только презентация, к сожалению

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

Круто, гордость за Кемерово. Теперь нормальный сайт :)

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

ну да))!

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

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

Развернуть ветку
Александр Поляшов

Отличная работа ребят, спасибо за подготовленный материал, очень интересно

Ответить
Развернуть ветку
Агентство МЭЙК
Автор

если материал оказался полезен вам, то наша команда немедля раскупорит бутылку рома!

а вообще да, мы очень надеемся, что наш опыт и ошибки помогут другим поработать с дизайн-системой России или составить мнение о ней

Ответить
Развернуть ветку
Саша Кудрявцев

Так-так-так, раскупориватели! Рабочий день ещё не закончился)

Ответить
Развернуть ветку
Сергей Бобков

Была идея типовых сайтов для госструктур в 2010 году. Общение с представителями этих структур - на любителя, конечно.

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

Да, явный плюс дизайн системы — избавляет от вкусовщины заказчика и "сделайте покрасивше золотым, как у меня в прихожей".

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

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

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

Развернуть ветку
walkpryce

Где можно достать? А то не нажимается

Ответить
Развернуть ветку
Агентство МЭЙК
Автор

Мы написали разработчикам. В ответ получили файл в .sketch + описание принципов. Сама система ещё в разработке и поэтому ее нет в открытом доступе. Вы можете поступить как мы.

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

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

Развернуть ветку
Иван Тельтевский

сделал скрин этого коммента.
пойду с ним в тату-салон

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

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

Развернуть ветку
Агентство МЭЙК
Автор

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

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

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

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

Развернуть ветку
Иван Тельтевский

так дизайн-система ни разу не про средство от безликости.
Вау-эффект - это на промо-сайты.
здесь про единообразие, понятность и простоту.

чтоб и бабуля, и мы с вами с этими госсайтами могли справиться

Ответить
Развернуть ветку
Саша Кудрявцев

В «бутстрап-дизайне» нет ничего нового. И этим он хорош. Проблема госсайтов сейчас именно в том, что все они разные. Вы сами сказали, что новый сайт привычен и ничего вас в нём не пугает — классно, мы не зря старались.

По поводу стерильности и безликости. У таких сайтов нет цели произвести впечатление, доставить эстетический оргазм. Всем нравятся суперкары, они вызывают эмоции. Но рассаду на дачу я бы не в Феррари повёз, а на Ниве.

Ответить
Развернуть ветку
Евгений Караваев

Почему было принято решение не заниматься проработкой доступности основной версии сайта, а создать отдельную версию для людей с ограниченными возможностями?

Ответить
Развернуть ветку
Агентство МЭЙК
Автор

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

2. Нельзя сделать сайт одинаково удобным для слабовидящего и человека с хорошим зрением

3. Было готовое решение. Оно неплохо работает и позволило нам соблюсти все формальности в условиях ограниченного бюджета.

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

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

Ответить
Развернуть ветку
Евгений Караваев

Отдельная версия сайта урезана по содержимому или полностью соответствует основной?

Ответить
Развернуть ветку
Агентство МЭЙК
Автор

Полностью соответствует.

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

Молодцы! Осталось назвать эту блеклую тему как-нибудь поэтично, например "Бледная трепонема" и можно в бой!

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

Оффтоп ребята. Есть знатоки конструктора WIX??

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

Че вы мне дизы ставите ироды? Не шарите идите дальше.

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

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

Развернуть ветку
Саша Кудрявцев

:D

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

Прикольно. Для нижнего новгорода сделайте, а то там даже https нет

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

Опыт это классно, плюс к карме. Щепетильный вопрос - повлияло ли использование дизайн-системы на итоговый бюджет проекта? Если да, то в какую сторону?

Ответить
Развернуть ветку
Агентство МЭЙК
Автор

Конкретно на этом проекте не повлияло никак. Экономия начинается со второго-третьего сайта.

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

Экономия в смысле для заказчика?

Ответить
Развернуть ветку
Агентство МЭЙК
Автор

Да, конечно. Для других проектов (не государства) система использоваться не будет. У самого заказчика сайтов много, а развивать новый сайт с дизайн-системой будет дешевле и быстрее.

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

А где сам дизайн система? На сайте ничего нет, а в гугле там презик который тянет только на дизайн гайд

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

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

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

Как описанное в статье согласуется с контрактной системой работы?

Ответить
Развернуть ветку
Люда Иванова

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

Ответить
Развернуть ветку
Люда Иванова

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

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

хАроший подход к критике )
плюсовать всех кто положительно высказывается за это УГ и дизлайки всем кому не нравиться
зачем тогда выставлять на всеобщее обозрение
сидели бы у себя тихонько в студии и восхищались бы все коллективом )

Ответить
Развернуть ветку
Агентство МЭЙК
Автор

1. Если у вас есть конструктивная критика по проекту, с радостью ее выслушаем и ответим. Кейс разместили в том числе и ради оценки работы сообществом. Отвечаем всем, кто комментирует по делу (читай: по проекту). В этом легко убедиться, если глянете комменты.

Итак, какой у вас вопрос или замечание по проекту?

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

Написал же в первом коменте что нет смысла перечислять то что уже до меня писали.
Со всей выше описанной критикой я согласен с авторами:
Слон Петрович
Filipp Lyakh
Василий Пупкин
Бочковой Диоген
PS. когда директор агенства заходит и ставить всем дизлайки это очень конструктивно и по взрослому )
https://makeagency.ru/worker/andrey-titaev

Ответить
Развернуть ветку
Агентство МЭЙК
Автор

Ок, надеемся, ответы на эти вопросы вас устроили. Если потребуется дополнить, дайте знать.

Что до наших сотрудников, то всякий из них (как и все люди вообще) имеет право на свое мнение и его выражение. Это не про конструктивно и т.п., это про частное мнение.

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

а где я задавал вопросы на которые вы мне успешно ответил?

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

Слон Петрович. Ок учли. Эффекты действительно нужно улучшить. Дизлайки ему никто не ставил.

Filipp Lyakh, высказался рационально. Дизлайки никто не ставил, напротив. Да и отзыв скорее положительный.

Василий Пупкин. Аналогично про эффект затемнения. Наставили лайков. Как и со Слоном согласен. Обсуждать тут нечего. Тестируем, наберем достаточно данных что решение плохое — уберем. Пока думаем как улучшить.

Бочковой Диоген. Отвечали ему.

По поводу моих дизлайков. Я отреагировал на ваш комментарий. Причем открыто в отличии от вас. Комментарий у вас только к нашей статье, и они совсем не конструктивные. То есть сказать нечего, но бомбит. Странно)

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

открыто отреагировали!
а я свой коммент на стене в туалете разместил в тихаря от вас?

Ответить
Развернуть ветку
Саша Кудрявцев

Зато ваш подход к критике вызывает восторг. Очень конструктивно подмазываться к чужим мнениям, ага. Лично вы высказываетесь лишь на уровне «ужос» и «уг». Если считаете, что это критика, то ок. Спасибо вам за ценнейшие комментарии:)

Эх, сейчас бы на плюсики/минусики в комментариях внимание обращать. Это же так по-взрослому

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

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

Развернуть ветку
nordman

Сайт - эталон среди региональный сайтов госорганов!!!!

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

ужос просто
нет смысла опять перечислять сказанное выше

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

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

Развернуть ветку
42 комментария
Раскрывать всегда