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

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

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

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

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

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

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

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

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

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

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

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