7 липня на просторах інтернету поширилася новина про те, що з фонду боротьби з COVID-19 планують виділити 3,5 мільйона гривень на створення сайту для Уповноваженого Верховної Ради України. Ця новина стала предметом активних обговорень.
На противагу цій історії хочемо нагадати про кейс, який стався наприкінці січня 2020 року в Чехії. Група програмістів-ентузіастів безкоштовно розробила сайт для держадміністрації, заощадивши державі 16 мільйонів євро.
У 2020 тренд "віддавати" стає все більш актуальним. Ми не залишилися осторонь, і вирішили подарувати українським користувачам позитивний досвід роботи з сайтами міських та обласних адміністрацій, розробивши та виклавши у відкритий доступ UI kit.
UI kit - це комплект веб-інтерфейсу. У ньому зібрані компоненти інтерфейсу: іконки, віджети, прапорці, індикатори прогресу і кнопки навігації. Це готовий набір макетів і компонентів, яким може скористатися дизайнер або верстальник для переробки і перевикористання готового матеріалу під свої запити і завдання.
Віднедавна у нас у державі є універсальний стиль, який рекомендований Міністерством Цифрової Трансформації. Це означає, що є можливість створити універсальні шаблони, які підійдуть практично будь-якій державній установі. Ба більше, загальний курс країни на діджиталізацію передбачає також розумне використання ресурсів. Нам на думку спала ідея створити універсальні шаблони, які могла б використовувати будь-яка державна структура.
Керувалися підходом Mobile First - усі сторінки створювалися спочатку під відображення на мобільному гаджеті.
(Mobile First і набір дизайн-шаблонів для відображення на мобільних)
Ми пропрацювали такі сторінки (для мобайл і веб відображення):
- Головна сторінка
- Стрічка статей (новин)
- Сторінка однієї статті (новини)
- Розділ із працівниками адміністрації
- Сторінка з інформацією про одного працівника
- Сторінка з контактами адміністрації
- Опрацьовано GUI - тобто активні стани елементів
(Набір готових дизайн-шаблонів для веб-версії сайтів)
Крім того, ми опрацювали близько 50 іконок, якими можна скористатися, а також зафіксували посібник зі стилю (шрифтів, кольорів, кнопок, полів) і основні компоненти (цитати, акордеон і хлібні крихти).
(Набір готових іконок)
У чому цінність відкритого UI kit?
- Готовий шаблон. Міській раді або обласній адміністрації не потрібно буде витрачати час і ресурси фахівців на те, щоб продумати структуру і логіку майбутнього сайту. Вона вже розроблена досвідченою командою з інтерфейсів, і її можна просто брати і впроваджувати
- Рішення в UI kit опрацьовані згідно з вимогами міністерства цифрової трансформації. Це означає, що єдиного стилю цифрової держави дотримано.
- У розробці UI kit брали участь фахівці з 14-річним досвідом розробки сайтів. Крім того, при створенні спиралися на поточні тренди у веб-дизайні.
- Готовий UI-kit - швидкий старт за проєктом. Грамотний UX/UI закриває найперший етап розробки проєкту, і дає змогу швидко перейти до розробки. Ми зібрали воєдино все, що може знадобитися веб-майстру: компоненти, макети, віджети, ховерні стани, а також мобільну версію.
- Рішення можна отримати абсолютно безкоштовно. Отже, не потрібно витрачати бюджетні гроші на розробку дорогого сайту. Тим паче що зараз не найкращий час, щоб вкладати сотні тисяч бюджетних гривень на розробку державних порталів.
Хто зможе використовувати UI kit?
З точки зору держави, ключові користувачі UI kit - служби, які використовують сайти для інформування громадян, а також збору зворотного зв'язку. Серед них: прес-служби, CTO державних служб, а також профільні департаменти.
Останнім часом вони націлилися на оновлення парку своїх ресурсів. Ми впевнені, що це чудова можливість оновлювати сайти державних адміністрацій безкоштовно, або ж скоротити бюджет у десятки разів. З точки зору жителів країни користувачі UI kit - це кожен з нас, хто отримує інформацію з державних органів, використовує сервіси, а також дає зворотний зв'язок, скарги або пропозиції.
Ключове завдання - підвищити швидкість модернізації інформаційних державних ресурсів. Зробити це швидким, ефективним і безкоштовним процесом.
Чому було обрано таке дизайнерське рішення?
Ми понад 8 років працюємо з державними установами різного профілю, тому в нас сформувалася доволі сильна експертиза в рамках розуміння того, що має бути на таких сайтах. Ми знаємо, що на 90% ці ресурси вирішують одне й те саме завдання - інформування користувачів про новини, а також збір зворотного зв'язку від жителів. Деякі ресурси, створені нашою командою для міських адміністрацій, були розроблені 5 років тому, але не втрачають актуальності і сьогодні.
Порадившись із міськрадою Харкова, ми ухвалили рішення викласти у відкритий доступ UI kit, зібраний на підставі сайту Харківської Міської Адміністрації.
Говорячи про стилістику сайту, ми виходили з логотипу та фірмового стилю Харківської міськради, а також брали за основу гайдлайни для держструктур від Дія.
Основними завданнями, якими ми керувалися під час розроблення дизайну для UI kit стали:
- спростити структуру сайту і зробити зручне меню;
- забезпечити доступність блоку новин, оскільки це найпопулярніший розділ сайту;
- зробити швидкий доступ до контактів і форм зворотного зв'язку;
- простежити за збереженням чистоти і впорядкованістю інформації;
- забезпечити гнучкість структури для оновлення та масштабування;
- відповідність дизайн системі державних сайтів України.
UI-kit - помічник для старту розробки сайту держструктурам. Наша ідея - поділитися своїми напрацюваннями. Ми будемо раді, якщо наша робота буде використана. Сподіваємося, що сайти держструктур стануть упорядкованішими і зручнішими для пошуку інформації та зв'язку.
UI Kit та інструкцію до нього можна знайти за посиланням.
