Огляд дизайн-систем

Якщо один дизайнер створює простий дизайн-проєкт, — скажімо посадкову сторінку або буклет, — то йому нескладно тримати під контролем візуальні рішення. Весь дизайн-проєкт існує в межах одного макету. Але часто дизайнерам доводиться мати справу з дещо більш складними завданнями. Наприклад, замовник хоче створити не один макет дизайну, а цілу сукупність макетів для його компанії. Візитівки, фірмові бланки, конверти та ще й уніформу. Щоб забезпечити візуальну цілісність всіх цих продуктів, в них мають з’явитись спільні принципи. Наприклад, колірна палітра, шрифти чи візерунки. І для того, щоб їх описати, дизайнери створюють спеціальний документ — керівництво з фірмового стилю. Це — дещо примітивний, але поширений приклад простої дизайн-системи.

Проблема візуальної цілісності складного продукту виникає і в багатьох інших контекстах: в дизайні міського простору, в візуальних комунікаціях бренду, в вебсайтах та, звісно, інтерфейсах.

Особливо гостро проблема проявляється тоді, коли над проєктом працює не один фахівець, а група. Щоб два різних фрагменти продукту дійсно виглядали гармонічно в його межах, важливо, щоб при їх проєктуванні були дотримані спільні принципи.

Власне, для цього і використовуються дизайн-системи.

Що таке дизайн-система

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

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

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

Такий підхід не лише дозволяє досягти візуальної цілісності, але й на додачу до цього значно пришвидшує роботу команди.

Для користувачів це добре, тому що вони відразу потрапляють в звичне середовище і розуміють, як взаємодіяти з інтерфейсом.

Тепер давайте докладніше поговоримо про те, що включає в себе дизайн-система.

Що саме описують дизайн-системи

Зазвичай дизайн-система являє собою сайт з каталогом усіх матеріалів, які можуть знадобитися розробникам. Серед цих матеріалів можуть бути:

  • керівництва по візуальному стилю,
  • UI-кіти та шаблони,
  • набори UX-підходів,
  • бібліотеки готових компонентів,
  • документи, правила, рекомендації,
  • навчальні матеріали.
·
13834
·
13
·
sosogoodsuper 186

Ця стаття недоступна в безкоштовній версії

Щоб отримати до неї доступ, оберіть комфортну опцію:
7 днів, щоб спробувати
БЕЗКОШТОВНО
Спробуйте всі можливості платформи і підберіть для себе цікаві курси.
Щомісячна передплата
550 250 грн
щомісяця
Знижка спливає через: 03:22:01:05
Головна