Дизайн-система: що це, для чого і як створити

Я радий повернутися до вас, дорогі читачі спільноти, і поділитися досвідом та знаннями.

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

• Що таке дизайн-система?
• Навіщо вона потрібна?
• Як її створити?

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

Давайте розбиратися по порядку. Дизайн-система є сукупністю трьох сутностей:

1. Візуальна мова – Те, що ми бачимо.
2. Framework – бібліотека візуальної мови, її код.
3. Guidelines – Правила, як має все виглядати і яким чином застосовуватися.

Можна вважати, що дизайн-система є окремим продуктом усередині будь-якого ІТ-продукту.

Візуальна мова

Візуальна складова дизайн-системи включає безліч елементів, основні з яких:

• Кольори
• Шрифти
• Простір
• Форми об'єктів
• Іконки
• Зображення
• Взаємодія
• Анімації
• UI-компоненти
• Звуки

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

Який образ спадає вам на думку, коли чуєте чи бачите назви таких банків, як Альфа-Банк, ВТБ, Ощадбанк, Тінькофф та інших? Які емоції ви відчуваєте? Візуальна мова є одним із факторів того, яким ми запам'ятаємо той чи інший продукт.

Framework

Фреймворк – це по суті код візуальної мови. Завдяки ньому всі візуальні елементи можна взяти з бібліотеки та легко застосувати у всіх своїх продуктах.

Давайте уявимо просту ситуацію. Отже, ми маємо одну кнопку «Сплатити рахунок». І тут нам потрібно поставити таку саму кнопку для іншої сторінки, тільки називатиметься вона «Перевести гроші».

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

Тому потрібна централізована бібліотека елементів візуальної мови, яка дозволить створювати та перевикористовувати кожну деталь продукту.

Guidelines

Щоб усі, хто взаємодіють із дизайн-системою, «розмовляли однією мовою», необхідно виробити правила.

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

Здавалося б, умовностей багато. Як описати все так, щоб не заплутатися у правилах? Опишіть лише те, що потрібно для конкретного елемента:

• Що за елемент?
• Де використовується?
• Які завдання вирішує?

Також для UI-компонентів можна описувати анатомію: позначте структуру та всі параметри, з яких вони будуються.

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

Навіщо потрібна дизайн-система?

Як і для будь-якого IT-продукту, важливо відповісти на запитання: навіщо потрібна дизайн-система? Або, як кажуть деякі колеги з цеху – «щоб що»?

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

Автоматизація

Автоматизація – це очевидна цінність. Дизайн-система дозволить автоматизувати процеси та виграти час на інші завдання.

Наприклад, дизайнери зможуть сформувати бібліотеку компонентів у графічному редакторі Figma та застосовувати їх у всіх необхідних макетах. Розробники, своєю чергою, просто використовують раніше реалізовані компоненти з фреймворку.

Ітеративність

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

Однак будь-яке внесення змін – це велика відповідальність. Тому будь-яка корекція має бути свідомою та аргументованою.

Консистентність

Консистентність говорить про те, що об'єкти і сутності, які ми використовуємо в продукті і які виконують ту саму роботу, повинні прагнути уніфікації, прагнути бути схожими.

Коли ми користуємося продуктом схожими функціями, він стає звичним і зручним: ми знаємо інтуїтивно, як працює і виглядає кнопка, де вона розташована.

Синхронізація

Всі елементи в IT-продукті повинні мати єдину мову спілкування на основі чітких правил.

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

Більше часу на UX

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

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

Швидкість прототипування

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

Недоліки дизайн-системи

Все вищеописане можна віднести до плюсів дизайн-систем, але вони, звичайно, мають мінуси.

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

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

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

Як створити дизайн-систему?

Існує безліч підходів для створення дизайн-системи. Я рекомендую розглянути атомарну систему, головною перевагою якої є спадковість. Мабуть, тема атомарної системи може потягнути на окрему статтю. Про це можна почитати в перекладі статті Бреда Фроста (Brad Frost) «Atomic Web Design».

Приклади того, як зроблено дизайн системи:

Після створення дизайн-системи важливо розібратися в тому, як її впровадити у практику компанії. У другій статті я розповім про те, як крок за кроком вибудувати процес впровадження дизайн-системи в будь-якій компанії.

Я сподіваюся, що кожен почерпнув собі цінне зі статті. А я ще раз переконався, що робота над статтею структурує знання і мотивує на додаткове вивчення.

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

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

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

Ключові компоненти дизайн-системи

• Компоненти інтерфейсу – це повторно використовувані елементи інтерфейсу, такі як кнопки, поля введення, меню, картки тощо. буд. Вони розроблені відповідно до встановлених стандартів і використовуються на всіх сторінках та в різних продуктах компанії.

• Бібліотека стилів — включає колірні палітри, шрифти, іконки, відступи та інші стилістичні елементи, які використовуються для створення єдиної візуальної мови.

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

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

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

Навіщо потрібна дизайн-система?

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

• Швидкість розробки – використання готових компонентів та посібників дозволяє прискорити процес розробки, знизити витрати на дизайн та скоротити кількість помилок.

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

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

Як створити дизайн-систему

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

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

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

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

• Впровадження та підтримка – впровадьте дизайн-систему в робочий процес та забезпечте її підтримку. Навчіть команду роботі з системою та стежте за її застосуванням у нових проектах.

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

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

Що таке дизайн-система та навіщо її використовувати

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

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

Елементи дизайн-системи

Дизайн-система складається з кількох ключових компонентів:

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

• Фреймворк — бібліотека візуальних елементів із їх кодом. Схожий на UI Kit, але на відміну від нього дозволяє одразу згорнути готовий веб-проект, оскільки має вбудовану CSS-бібліотеку та набір JavaScript-файлів для оформлення сторінок. А ось з UI kit-ом ви зможете зробити тільки макети у Figma.

• Гайдлайни – Набір правил, що визначають, як повинні виглядати і працювати компоненти, і коли їх використовувати.

• Дизайн-токени – це набори змінних, що описують параметри візуального дизайну (кольори, шрифти, розміри), які зберігаються у форматі JSON або YAML.Вони спрощують налаштування та оновлення елементів дизайну в коді та програмах для роботи з графікою.

• UX-патерни – це готові рішення для створення зручної взаємодії з інтерфейсом. Вони включають сценарії дій (клік, жести) та правила розміщення даних на екрані. З їхньою допомогою дизайнер формує покроковий план виведення інформації користувачу.

Популярна помилкова думка, що дизайн-система – це лише елементи дизайну у Figma, з яких дизайнери збирають нові сторінки. Але насправді в дизайн-систему входить ще й бібліотека коду, яку розробники використовують для створення нових сторінок сайту. Завдяки цьому, якщо компанія має гарну, структуровану дизайн-систему, розробники можуть верстати нові сторінки продукту навіть без участі дизайнерів. Але свій розвиток дизайн-система починає саме з Figma, в якій збирається UI-кіт продукту та його екрани.

Як дізнатися, чи потрібна вам дизайн-система

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

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

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

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

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

Види дизайн-систем

Умовно дизайн-системи можна розділити на два види: з відкритим та закритим кодом. Системи з відкритим кодом доступні всім і засновані на стандартах, що дозволяють дизайнерам та розробникам адаптувати їх під будь-які проекти. Наприклад, Ant Design від гіганта інтернет-торгівлі Alibaba Group.

Системи із закритим вихідним кодом створюються для конкретних компаній чи проектів. Вони розробляються з урахуванням індивідуальних завдань і недоступні стороннім користувачам. Наприклад, дизайн система Tesla.

Якими способами можна створити дизайн-систему

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

1. Скористайтеся готовою дизайн-системою. Найшвидший та бюджетний спосіб. Ви берете вже розроблену дизайн-систему, наприклад, Material Design від Google або Carbon від IBM і інтегруєте її у свої процеси. Такий підхід хороший для стартапів або невеликих проектів, де важливо заощадити час та ресурси. Однак врахуйте, що готова система може не враховувати специфіку вашого бренду і вимагатиме доробок.
2. Налаштувати дизайн-систему під певні вимоги. Якщо готове рішення частково підходить, але потребує налаштування під бренд чи функціональні особливості, варто вибрати цей шлях. Ви берете базову систему та модифікуєте її: змінюєте колірну палітру, шрифти, стилі елементів та створюєте унікальні компоненти. Цей підхід більш гнучкий, ніж використання системи «як є», але потребує більше часу та витрат.
3. Розробити індивідуальну систему дизайну. Ідеально підходить для компаній з особливими потребами чи унікальними продуктами. Це найдорожчий і трудомісткий спосіб, але він дає повну свободу у створенні рішень, які відповідають усім вашим вимогам. Кастомна дизайн-система виправдана, якщо ви плануєте довгострокову роботу з проектами, що масштабуються, де важливо підтримувати унікальний стиль і функціональність.

Приклади дизайн систем

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

Human Interface Guidelines (HIG)

HIG визначає стандарти для інтерфейсів в екосистемі Apple (iOS, macOS, watchOS, tvOS). Завдяки цій дизайн-системі розробники програм на iOS можуть зробити дизайн свого продукту більш схожим на дизайн операційної системи. За рахунок цього продукт для користувачів сприйматиметься як якісніший.

Material Design

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

Atlassian

Дизайн-система Atlassian створена для поліпшення узгодженості відомих продуктів компанії Jira, Trello і Confluence. Головна особливість у кожному розділі є приклади коду, які розробники можуть подивитися, вивчити та розібрати.

Pajamas

Pajamas – дизайн-система GitLab, створена для підтримки візуальної та функціональної єдності на всіх платформах. Інклюзивність, висока доступність і гнучкість компонентів — основа, де він будується.

Acorn

Acorn розроблений для сучасного інтерфейсу Mozilla, орієнтованого на мінімалізм та функціональність. Кольори дизайн-системи нейтральні, акцент зроблений на простоту і зручність читання, що покращує сприйняття контенту. Вона масштабується, забезпечує єдину візуальну мову та зручність роботи з інтерфейсами Mozilla.

Carbon

Carbon – відкрита екосистема для створення продуктів та інтерфейсів IBM. Вона містить робочий код, інструменти для розробки, дизайнерські ресурси, гайдлайни компанії з принципами UI та підтримується активною спільнотою, заснованою на філософії мови дизайну IBM.

Fluent

Fluent – концепція від Microsoft, яка переосмислює взаємодію користувача з інтерфейсами через світло, глибину, рух, текстуру та масштаб. Ця візуальна система, натхненна пристроєм HoloLens, поєднує фізичний та цифровий світи, створюючи ефект повного занурення.

Fluent використовує "Z-глибину" – технологію, яка додає такий обсяг елементам дизайну, що їх хочеться доторкнутися. Особливий акриловий ефект, що нагадує матове скло з легкою прозорістю, посилює відчуття текстури та багатошаровості інтерфейсу.

Polaris

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

Держпослуги

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

Ростелеком

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

Висновок

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

До речі: у телеграм-каналі Awake Journal, присвяченому маркетингу, розробці та дизайну, ви знайдете багато цікавої інформації про ІІ-інструменти і не тільки. Підпишіться, щоб знати 👐