Разработка госсайта по дизайн-системе России
Опыт агентства «Мэйк».
Минкомсвязи, AIC, «Лаборатория Артёма Геллера» и компания СТМ разрабатывают дизайн-систему для всех госсайтов России. Работать с ней смогут все, но хорошие сайты получатся не у каждого. Объясняем на примере, почему.
Мы разбили материал на две части:
- Работа над государственным сайтом. Как это бывает, к чему готовиться. Ленивые чинуши со стороны заказчика — правда или нет.
- Создание госсайта по дизайн-системе России. Что это и для чего. Какие ваши проблемы решит дизайн-система, и каков порог входа для работы с ней. Спойлер: эта штука может упростить жизнь только опытным и слаженным командам. Объясняем, почему.
Заказчик и его задача
В январе 2018 года состоялся релиз нового сайта администрации Кемеровской области ako.ru. На сайте власти публикуют пресс-релизы для СМИ, законы и официальные документы, а обычные граждане могут подать обращение, задать вопрос и получить консультацию.
Старый сайт был разработан десять лет назад, он требовал серьёзных изменений. На новом сайте нужно было сохранить функциональность и контент. Он должен стать простым и удобным, чтобы с ним могли работать все: от журналистов и студентов до пенсионеров. Помимо этого, заказчик хотел заложить основу визуальной составляющей всех сайтов области.
К сайту не были подключены сервисы статистики, поэтому при проектировании мы могли опираться только на интервью и анализ целевых аудиторий.
Структура старого сайта была сложной и запутанной. На нём было много дублирующейся информации в разных разделах и хаотично раскиданных страниц. Вкупе с неочевидной навигацией и перегруженной главной страницей это делало сайт сложным и запутанным.
Что мы с этим сделали
Мы решили не переделывать старый сайт, а начать с истоков.
Вначале выделили несколько групп целевой аудитории и разработали для них сценарии использования. За три встречи согласовали структуру нового сайта. В итоге она сократилась в три раза. Неактуальные страницы и разделы удалили, на приоритетных блоках сделали акцент.
Также пришлось основательно поработать с контентом, чтобы сайт отвечал принципам дизайн-системы: простота, ясность, главенство функциональности.
Главную страницу, на которой было 119 элементов, мы разбили на блоки, у каждого из которых свои функции: новостной раздел, сервисы для граждан, приоритетные направления деятельности областных властей. Пользователям стало проще ориентироваться на сайте, а нам — развивать ресурс.
Теперь можно добавлять новые блоки и менять старые. Например, уже сейчас обсуждается возможность добавления блока популярных услуг с сайта «Госуслуги». Архитектура сайта позволяет сделать это легко и быстро.
В согласовании участвовали разные департаменты и подразделения администрации области. У всех них разные задачи и представления о сайте. Поэтому мы предложили решение, которое упростило этот этап — динамический прототип. Заказчик смог воочию убедиться в удобстве нового сайта: покликать по пунктам меню и перейти на внутренние страницы. А мы получили быстрое и гладкое согласование.
Каково это — работать с госсзаказчиком
Есть мнение, что в госструктурах работают ленивые чиновники, которые стремятся только усидеть на своих местах. В реальности всё оказалось иначе. Мы работали с компетентными и квалифицированными специалистами, которые были на 100% заинтересованы в результате.
Они вместе с нами обсуждали все детали проекта, работали в выходные и проверяли каждую мелочь. Нам даже показалось, что это был наш первый заказчик, который прочитал до конца техническое задание.
Этапов согласования было много. К примеру, дизайн-концепцию сайта принимали в три этапа. Последний из них проходил при комиссии из 20 человек.
Чтобы ускорить процесс, для каждого этапа мы делали презентации и представляли их заказчику. Делали это лично, чтобы исключить искажения информации.
Какие трудности могут ждать при работе над госсайтом
- На госсайтах используются громоздкие бюрократические формулировки. Они малопонятны людям и плохо влияют на дизайн. В некоторых разделах нам удалось переписать их. Но часть пришлось оставить как есть, и на сайте красуются пункты меню с названием в четыре строки.
- Любое обновление — это долго и мучительно, ведь всякое изменение на сайте тянет за собой изменение в работе людей. С коммерческими заказчиками в этом случае легко. Вы показываете само изменение, затем профит от него, и заказчик говорит: «Окей». В администрации же главное — процессы. Поэтому даже такое пустяковое изменение, как автоматических ответ на электронное письмо, может согласовываться три недели, а потом решение и вовсе отменят — «как бы чего не вышло».
- Есть некоторые разделы, которые не вписываются в информационную архитектуру. Но их «нужно поставить обязательно». И неважно, куда.
- «Это нельзя трогать». Законодательство и локальные акты часто в императивной форме предписывают определённые решения. В законах написано, что должно быть на сайте и какие именно формулировки следует использовать. Но нигде не написано, что это должно быть доступно для понимания и удобно.
- Поскольку долгое время сайт не модернизировали, а функции к нему добавлялись, администрации пришлось создать дюжину сторонних сайтов, которые эти функции выполняли. В итоге нам пришлось объединить их все на одной площадке, логично встроив в новую архитектуру.
Дизайн-система России: к чему быть готовым
Почему решили использовать дизайн-систему России? Заказчик ждал от нас универсальное, простое и лаконичное решение, которое впоследствии можно будет перенести на другие областные сайты. Администрации области нужна была локальная дизайн-система для всех госучреждений области.
Уже после того, как была создана новая архитектура сайта и согласован прототип, мы узнали о дизайн-системе России. Работу над ней сейчас ведёт команда из Минкомсвязи, AIC, «Лаборатории Артёма Геллера» и компании СТМ.
Дизайн-система России — проект по унификации и объединению разрозненных электронных ресурсов страны. В ней есть правила визуального языка и стилевое решение: типографика, цвета, элементы интерфейса и построение макетов. Также она содержит правила, которые обеспечивают модульность дизайна: сетка, отступы, правила построения макетов.
Что такое визуальный язык? Это комбинации цветов, шрифта, расположения и вида элементов, по которым мы сразу можем узнать государственный сайт. Это как зайти на португальскую стартовую страницу «Яндекс» — благодаря визуальному языку вы поймёте, что это именно «Яндекс».
Мы написали разработчикам дизайн-системы Артёму Геллеру и Сергею Попкову (это арт-директор AIC) в Facebook. Попросили рассказать, насколько готова дизайн-система России, и можно ли её использовать. В ответ мы получили гайдлайн, который можно было применять для разработки сайта.
Особенности работы с дизайн-системой России
Дизайн-система предлагает элементы интерфейса и правила их использования. Это создаёт только общее направление для разработки дизайна. Нельзя просто взять прототип и применить к нему дизайн. Нужно подумать, протестировать и сделать по уму.
Дизайн-система даёт набор элементов, а скомбинировать их в работоспособный интерфейс предстоит разработчикам.
Вот 11 выводов, которые мы сделали, работая по дизайн-системе России:
- Не получится просто собрать сайт из блоков, как конструктор, придётся включить голову и хорошо поработать. Чтобы работать с ней, придётся разобраться во всех нюансах и понять, как их применять.
- В дизайн-системе заложены все базовые компоненты интерфейса. Их хватает для решения 90% задач. Но возникают случаи, когда приходится разрабатывать новые компоненты. Вот пара примеров. Первый: в нашем проекте было много табличного контента, но их трудно показывать в мобильной версии сайта. Поэтому нам пришлось изобрести новый компонент «Таблица» с горизонтальными скроллом. Второй: навигация по внутренним страницам. Некоторые разделы получились сложными — для них мы сделали боковое меню в помощь. И чтобы человек понимал, где он находится, добавили «хлебные крошки».
- Соблюдение принципов дизайн-системы требует тщательного проектирования структуры сайта и проработки контента. Каждый раздел должен быть доступен и понятен. Так что работать с дизайн-системой в её нынешнем виде под силу только опытной команде.
- Использование дизайн-системы исключает субъективный фактор «нравится-не нравится», а вау-эффекты отводит на второй план. Главное — принципы простоты, отзывчивости и доступности. Не все заказчики и разработчики к этому готовы.
- Типографика в дизаин-системе продумана отлично, заданы стили для десктопов и планшетов. Но возникали и проблемы. Если на внутренних страницах заголовок H1 был длинным, он получался слишком массивным. Сделать все заголовки краткими и емкими не получилось. Проблему решили заменои стиля заголовков Н1 на Н2 и нажили кучу проблем с иерархией, а страдали верстальщики.
- Ограничения дизайн-системы полезны при обслуживании и наполнении сайта. Они помогают сохранить его визуальный стиль. Как бывает в жизни: заказчик просил разместить бегущую строку со штормовым предупреждением. Но ограничения дизайн-системы дали нам право отказаться портить главную. И всё же наш арт-директор нашёл элегантное решение: предупреждение о шторме мы разместили под значком уведомлений на госбаре, избавившись от бегущей строки. И волки, и овцы.
- При работе с дизайн-системой сначала проектируем структуру вёрстки и верстаем все элементы. Затем страницы собираются из готовых блоков. С одной стороны, это проще, ведь не нужно каждый раз заново верстать страницу. С другой — эту работу можно давать только опытному фронтенд-разработчику. Нужно, чтобы он понимал принципы построения сайта и визуального взаимодействия элементов. Иначе велик риск сделать вёрстку, с которой будет невозможно работать. Есть и другая проблема: неопытный фронтендер не сможет использовать свои решения повторно, а значит, потратит кучу времени и сил, решая аналогичную задачу с листа.
- С помощью дизайн-системы легче строить надёжный фундамент «визуал, фронтенд и бэкенд». Если не строить проект на надёжной основе, рано или поздно он попадёт в спираль смерти, когда возникает множество ошибок при попытке внесения изменений и сайт «рассыпается».
- Правильное использование дизайн-системы позволяет сфокусироваться на развитии. С ней легко вносить малозаметные, но важные улучшения и при этом не изобретать велосипед каждый раз.
- В дизайн-системе описана только визуальная часть, нет рекомендации по структуре и информационному наполнению саитов. Пользуясь гаидлаином, можно создать визуально прекрасныи продукт, но без проработаннои структуры, контента и навигации вся работа теряет смысл.
- К сожалению, сообщество по разработке дизайн-системы только формируется. Нет описаний опыта её внедрения, подробных рекомендаций разработчиков. Приходилось работать в вакууме. Поэтому мы решили написать о своём опыте внедрения, нам бы такая статья на старте проекта была очень полезна.
Результат, перспективы и применение дизайн-системы России
Использование дизайн-системы позволило сократить срок разработки саита на 30%. Сразу после запуска ako.ru мы сделали редизайн инвестиционного сайта области на дизайн-системе. Срок работы над ним занял уже в три раза меньше времени.
Благодаря правильному применению дизайн-системы заказчик согласовал визуал без правок и остался доволен итоговым результатом. С таким инструментом уже можно строить целую региональную экосистему государственных сайтов. А затем легко интегрировать её в общую систему госсайтов.
Проект сдан, но работа продолжается. Со стороны администрации есть предложение развернуть одно коробочное решение, которое будут использовать все муниципальные органы власти. Этот проект сократит расходы на сайты и скорость сдачи проектов. Для этого и нужна дизайн-система.
Для дальнейшего развития проекта мы разрабатываем единую библиотеку интерфейсных компонентов. Она позволяет хранить все актуальные версии элементов в одном месте и использовать их повторно.
Очень круто, что есть дизайн-система. Очень не круто, что на gov.design до сих пор только общие слова, а собственно гайдлайн выложен в виде какого-то мутного архива в гуглодоке.
в каком то мутном архиве в гугл доке есть sketch файл, где все подробненько изложено в гайдлайнах, символах и паттернах
Сейчас в гугл доке есть только презентация, к сожалению
Круто, гордость за Кемерово. Теперь нормальный сайт :)
ну да))!
Комментарий удален модератором
Отличная работа ребят, спасибо за подготовленный материал, очень интересно
если материал оказался полезен вам, то наша команда немедля раскупорит бутылку рома!
а вообще да, мы очень надеемся, что наш опыт и ошибки помогут другим поработать с дизайн-системой России или составить мнение о ней
Так-так-так, раскупориватели! Рабочий день ещё не закончился)
Была идея типовых сайтов для госструктур в 2010 году. Общение с представителями этих структур - на любителя, конечно.
Да, явный плюс дизайн системы — избавляет от вкусовщины заказчика и "сделайте покрасивше золотым, как у меня в прихожей".
Сайт выглядит хорошо, но, кажется, переборщили с анимациями, особенно высветление контента при ховерах на меню и левую колонку. И линк "Областные сайты" открывается оч тяжело, с задержкой в пару секунд.
Комментарий удален модератором
Где можно достать? А то не нажимается
Мы написали разработчикам. В ответ получили файл в .sketch + описание принципов. Сама система ещё в разработке и поэтому ее нет в открытом доступе. Вы можете поступить как мы.
Комментарий удален модератором
сделал скрин этого коммента.
пойду с ним в тату-салон
Комментарий удален модератором
Всё новое пугает и кажется неудобным, это нормально. Привыкнете и будете удивляться, как можно было пользоваться старым сайтом.
Про ховеры. Была там другая задумка, но в процессе работы первый экран поменялся. Эта штука осталась, как атавизм. Уберём в ближайшем обновлении
Комментарий удален модератором
так дизайн-система ни разу не про средство от безликости.
Вау-эффект - это на промо-сайты.
здесь про единообразие, понятность и простоту.
чтоб и бабуля, и мы с вами с этими госсайтами могли справиться
В «бутстрап-дизайне» нет ничего нового. И этим он хорош. Проблема госсайтов сейчас именно в том, что все они разные. Вы сами сказали, что новый сайт привычен и ничего вас в нём не пугает — классно, мы не зря старались.
По поводу стерильности и безликости. У таких сайтов нет цели произвести впечатление, доставить эстетический оргазм. Всем нравятся суперкары, они вызывают эмоции. Но рассаду на дачу я бы не в Феррари повёз, а на Ниве.
Почему было принято решение не заниматься проработкой доступности основной версии сайта, а создать отдельную версию для людей с ограниченными возможностями?
1. Отдельная версия для людей с ограниченными возможностями нужна по закону
2. Нельзя сделать сайт одинаково удобным для слабовидящего и человека с хорошим зрением
3. Было готовое решение. Оно неплохо работает и позволило нам соблюсти все формальности в условиях ограниченного бюджета.
Не так. Сайт должен быть адаптирован для инвалидов. Это как прописать мобильную версию в законе, но это не значит что нужно городить отдельную а не адаптивную
Отдельная версия сайта урезана по содержимому или полностью соответствует основной?
Полностью соответствует.
Молодцы! Осталось назвать эту блеклую тему как-нибудь поэтично, например "Бледная трепонема" и можно в бой!
Оффтоп ребята. Есть знатоки конструктора WIX??
Че вы мне дизы ставите ироды? Не шарите идите дальше.
Комментарий удален модератором
:D
Прикольно. Для нижнего новгорода сделайте, а то там даже https нет
Опыт это классно, плюс к карме. Щепетильный вопрос - повлияло ли использование дизайн-системы на итоговый бюджет проекта? Если да, то в какую сторону?
Конкретно на этом проекте не повлияло никак. Экономия начинается со второго-третьего сайта.
Экономия в смысле для заказчика?
Да, конечно. Для других проектов (не государства) система использоваться не будет. У самого заказчика сайтов много, а развивать новый сайт с дизайн-системой будет дешевле и быстрее.
А где сам дизайн система? На сайте ничего нет, а в гугле там презик который тянет только на дизайн гайд
Сайт как сайт. Нет последовательности в поведении элементов. Сверху на блоках просто меняется цвет текста при наведении, в середине "взлетают" с тенью, снизу вообще никак. Раздражающее мерцание при снятии наведения с меню. При наведении на элемент блока новостей на главной фото засветляется, при наведении на само фото оно затемняется. Ужос. Ощущение, что лишь бы эффектов побольше накидать. Стрелочки вправо в элементах вызывают ожидание, что элементы могут быть развернуты вниз, но нет.
Как описанное в статье согласуется с контрактной системой работы?
Самое сложное - это не создать сайт и работать с представителями администраций в ходе проекта. Самое слабое звено - это когда сайт ушел в продакшн, а заполнять его посадили бабушку из организационного отдела. А курировать сайт поставили дяденьку из административного, ну и в помощь условно админ.
Дядя прибегает к бабушке и говорит - нужно, чтобы вот тут на полсайта было крупно вот это, бабушка говорит - ой, не знаю все эти ваши штуки. Дяда к админу идет - и он вкорячивает в прекрасный сайт какую-нибудь жуть, просто потому что у него есть доступ.
И тут сайт разносит) если даже не на десктопе, так на адаптиве. И хорошо, если есть кому это заметить. А если нет, то так все и остается.
Ну или просто бабушка превращает сайт в информационную помойку. И это даже с прекрасной архитектурой.
Поэтому наравне с дизайн-системой надо делать и гайды заполнения и пробивать на административном уровне ставку нормального контент-редактора, который дяде и админу может отказать и мотивировать отказ.
хАроший подход к критике )
плюсовать всех кто положительно высказывается за это УГ и дизлайки всем кому не нравиться
зачем тогда выставлять на всеобщее обозрение
сидели бы у себя тихонько в студии и восхищались бы все коллективом )
1. Если у вас есть конструктивная критика по проекту, с радостью ее выслушаем и ответим. Кейс разместили в том числе и ради оценки работы сообществом. Отвечаем всем, кто комментирует по делу (читай: по проекту). В этом легко убедиться, если глянете комменты.
Итак, какой у вас вопрос или замечание по проекту?
Написал же в первом коменте что нет смысла перечислять то что уже до меня писали.
Со всей выше описанной критикой я согласен с авторами:
Слон Петрович
Filipp Lyakh
Василий Пупкин
Бочковой Диоген
PS. когда директор агенства заходит и ставить всем дизлайки это очень конструктивно и по взрослому )
https://makeagency.ru/worker/andrey-titaev
Ок, надеемся, ответы на эти вопросы вас устроили. Если потребуется дополнить, дайте знать.
Что до наших сотрудников, то всякий из них (как и все люди вообще) имеет право на свое мнение и его выражение. Это не про конструктивно и т.п., это про частное мнение.
а где я задавал вопросы на которые вы мне успешно ответил?
Слон Петрович. Ок учли. Эффекты действительно нужно улучшить. Дизлайки ему никто не ставил.
Filipp Lyakh, высказался рационально. Дизлайки никто не ставил, напротив. Да и отзыв скорее положительный.
Василий Пупкин. Аналогично про эффект затемнения. Наставили лайков. Как и со Слоном согласен. Обсуждать тут нечего. Тестируем, наберем достаточно данных что решение плохое — уберем. Пока думаем как улучшить.
Бочковой Диоген. Отвечали ему.
По поводу моих дизлайков. Я отреагировал на ваш комментарий. Причем открыто в отличии от вас. Комментарий у вас только к нашей статье, и они совсем не конструктивные. То есть сказать нечего, но бомбит. Странно)
открыто отреагировали!
а я свой коммент на стене в туалете разместил в тихаря от вас?
Зато ваш подход к критике вызывает восторг. Очень конструктивно подмазываться к чужим мнениям, ага. Лично вы высказываетесь лишь на уровне «ужос» и «уг». Если считаете, что это критика, то ок. Спасибо вам за ценнейшие комментарии:)
Эх, сейчас бы на плюсики/минусики в комментариях внимание обращать. Это же так по-взрослому
Комментарий удален модератором
Сайт - эталон среди региональный сайтов госорганов!!!!
ужос просто
нет смысла опять перечислять сказанное выше
Комментарий удален модератором