UI-Kit для районних адміністрацій
Цей UI-Kit (шаблон для сайтів) було створено для швидкого проектування дизайну для офіційних сайтів міських адміністрацій України та сайтів новин.
Відкрити
Переваги використання UI-Kit
Швидке проектування сайтів
Цілісний дизайн
Ретельно підібрані стилі тексту та кольору, які можна швидко адаптувати під вашу стилістику
Адаптивна версія
Набір готових до використання іконок
Опис UI kit
UI Kit було створено для швидкого проектування дизайну для офіційних сайтів міських адміністрацій України та сайтів новин.

За основу було використано офіційний сайт Харківської міської ради, сайти міського голови та виконавчого комітету.

Були використані матеріали дизайн-системи державних сайтів України.

Для створення стилів типографіки ми надихалися Google Material Design.
Специфікація
Всі макети десктопа мають ширину 1264 px. Сайт буде добре виглядати на більшості популярних моделей стаціонарних компьютерів та ноутбуків.

Всі елементи кратні 8 пікселям (іноді 4)
Всі макети для смартфонів мають ширину 320px. Сайт буде добре виглядати на більшості популярних моделей смартфонів

Всі елементи кратні 8 пікселям (іноді 4)
Сітка і ширина екрану
Десктоп
Десктоп
Шрифт
Source® Sans Pro
Як використовувати Autolayout
Багато компонентів зібрано за допомогою функції Autolayout (стек). Це потрібно для того , щоб елементи могли зберігати відстані при зміні контенту.

Треба виділити інпут та тиснути CTRL (CMD) + D, якщо потрібно додати якийсь об’єкт в группу з автолейаутом. Наприклад, збільшити кількість інпутів у формі реєстрації.
Робота зі стилями тексту
Ми створили різні стилі тексту для десктопів і мобільних пристроїв. Деякі стилі спільні для всіх девайсів.

Всі текстові блоки зв’язані стилями. Всі стилі зібрані на сторінці «Налаштування стилю». Не потрібно створювати нові — можна використовувати готові.

Якщо потрібно змінити шрифт, це треба зробити в кожному стилі в правій панелі програми.
H1

Subtitle

Body

Quote

Button

Caption

Overline

Big

Найбільший заголовок на сторінці

Підзаголовок

Великий обсяг тексту

Цитата

Текст в кнопці (всі девайси)

Дрібний текст (всі девайси)

Надзаголовок (всі девайси)

Стиль для заголовків у файлі


Робота зі стилями кольору
Всі елементи дизайну мають стилі кольору

Не потрібно фарбувати елементи піпеткою, використовуйте стилі. Вони налаштовуються у правій панелі.

Ми використали тетрадну палітру

Всі стилі поділяються на групи. В кожній групі по 4 відтінки основного кольору: нормальний, темний, світлий, дуже світлий
Нейтральні

1

2

3

А

B

Оверлеї

Бейджі

Кольори для текстів, фонів

Головний колір. Задає стилістику сайту

Колір номер 2 (його може не бути)

Колір номер 3 (його може не бути)

Допоміжний колір (для помилок, успіхів ітд)

Допоміжний колір (для помилок, успіхів ітд)

Стилі затемнення з прозорістю

Кольори для бейджів та ярликів


Робота зі стилями ефектів
Робота зі стилями така сама, як із типографікою та кольорами.

В макеті використовується 4 типа ефектів. Є тільки тіні
Buttons

Drop menu

Modals

Header shadow

Тіні кнопок

Тінь випадаючого списка

Тінь модальних вікон

Тінь хедера

Робота з компонентами
Якщо елемент використовується більше 1 разу, ми робимо його компонентом

Усі типові компоненти зібрані на сторінці «Налаштування стилю»
Зміна головного компонента змінює всі його копії. В копіях можна міняти тільки контент

На початку роботи треба налаштувати всі готові компоненти на сторінці Налаштування стилю

Кнопки, Поля вводу, Селекти та інші

Якщо потрібна кнопка, можна взяти готову за змінити її дизайн.

Для зміни стилю полів вводу треба почати налаштування з Майстер - інпута. Він задає форму іншим.

Щоб перейти від копії до головного треба натиснути тут
Робота з полями для вводу
Ми створили компоненти найбільш поширених типів інпутів.

Майстер інпут задає форму іншим. Кожному інпуту можна змінювати ширину

Можна перемикати тип інпута через панель Instance
Картки та ховери
Ми створили два типи карток новин: десктоп та адаптив.

Зліва показуємо звичайний стан, а справа — ховер. На скріншоті зображено, як буде поводити себе картка, коли ми наведемо курсор на неї
Модальні вікна
Ми створили декілька типових модальних вікон.В них використано автолейаут.

Можна змінювати ширину

Якщо потрібно змінити тип інпутів або збільшити їх кількість — поверніться до автолейауту та роботи з компонентами
Дякуємо за увагу!
Ми за красивий, простий та доступний кожному користувачу дизайн.
Наша ціль — зробити користування державними сайтами простим та приємним.
Ми розробили Ui Kit для всіх та безкоштовно поширюємо його.
Якщо у вас виникли питання — пишіть нам
Завітайте на наш сайт