Дизайн-системи та UI-Kit: основні відмінності

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

• Гайдлайни і керівництва по стилю
• Документацію, правила щодо використання елементів
• Візуальний UI-kit (набір графічних елементів інтерфейсу)
• UI-kit виконаний у коді - js / html / css компоненти інтерфейсу або тема для UI фреймворка
• Набори UX-патернів

При створенні великого проекту, дизайн-система з докладною документацією допоможе скоротити кількість часу, витрачений на створення нового інтерфейсу, його дизайн і верстку. Головними завданнями дизайн-системи є систематизація дизайну, зниження витрат на створення, запуск і підтримку продуктів, можливість змінювати склад команди проекту без втрати швидкості та якості. 

Критично важливо, щоб існував (і підтримувався в актуальному стані) ресурс, де буде повністю відображена дизайн-система з усіма її складовими. Цей ресурс буде вашим єдиним джерелом правди про систему - місцем, з яким можна буде регулярно звірятися в процесі роботи.

UI Kit - це складова частина дизайн-системи, набір всіх графічних елементів дизайну (UI elements) з візуалізацією всіх варіантів їх зовнішнього вигляду в залежності від стану (заблокований, у фокусі, і т.п.) і введених даних (порожній, заповнений, заповнений із помилкою).

Компоненти UI Kit допомагають створювати великі проекти швидко, якісно, використовувати одні компоненти за зразком попередніх. До того ж саме UI Kit — головний дизайнерський документ проекту, який повинні наслідувати не тільки дизайнери, але і розробники.

Дизайн-система включає в себе всі існуючі в дизайні UI елементи. Для більш зручної роботи з кодами при створенні елементів інтерфейсу ми розбиваємо їх на фундаментальні блоки, з поступовим нарощуванням складності, що відповідає підходу компонентного дизайну (Атомарного Дизайну, Atomic Design).

Нижче ми докладно опишемо що таке і навіщо потрібна дизайн-система і що таке і навіщо потрібен UI kit.