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

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

Ані Казарян проводить інтенсив «Менеджмент дизайну цифрових продуктів» в Projector.

Ані Казарян, All-in-one Manager у Spiilka, кураторка в Projector. Фото: Наталія Азаркіна

В ідеальному світі хотілося б так:

Крок 1. Проаналізуйте найкращі практики дизайн-систем.

Крок 2. Розберіть свої цифрові інструменти та поточний флоу роботи дизайнерів-розробників.

Крок 3. На основі попередніх пунктів зберіть свою дизайн-систему.

У реальному світі стається ось так:

Крок 1. Визначте «шобшо» вам дизайн-система

Перед розробкою інструменту рекомендую поставити собі кілька запитань, котрі допоможуть визначити потреби в щось «намацальне» та відсіяти зайве:

1. Яку проблему ми хочемо розв’язати?
2. Яку ціль ми ставимо перед собою?
3. Які ресурси (команда-софт-гроші-час) у нас є?
4. Які ресурси нам потрібні?

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

Чи завжди потрібна дизайн-система? Чесно, ні.

Якщо ви — невеликий стартап, а ваш продукт на стадії відточування та прокачки, дизайн-система буде «не на часі». Якщо ви створюєте корпоративний сайт, наприклад, для юридичної компанії, у якої немає дизайн-команди, розробники на аутсорсі, і контент на сайті оновлюють раз на кілька місяців, достатньо підготувати дизайн-макети для всіх форматів та детальний UI kit у Figma і клікабельний прототип.

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

Але дизайн-система не працює окремо як самоціль. Не можна просто сформувати її одного разу й «поставити в рамочку». Це довгий непростий шлях самурая створення-підтримки-систематизації.

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

Крок 2. Оцініть стартові позиції та починайте

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

Дизайн-систему варто робити, коли є розроблена айдентика і логобук для діджиталу

«Робочі» бренд і айдентика багато в чому визначають форму і вміст нашого цифрового продукту (сайту чи мобільного додатку). А діджитальна айдентика створює необхідну візуальну базу — масштабований логотип, UI кольори, візуальні прийоми, фірмову композицію і сітку — котра дозволить створювати цілісний цифровий інструмент.

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

Дизайн-систему варто робити, коли є розроблений цифровий інструмент (сайт або мобільний застосунок).

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

Для створення діджитальних дизайн-систем Дії в Figma (для вебу і мобільних додатків), ми пройшли кілька стадій:

1. спроєктували інтерфейс і зробили дизайн основної платформи та послуг;
2. розробили концепцію і дизайн мобільного додатку Дія;
3. були на всіх стадіях тестування і запуску інструментів;
4. раз на кілька місяців допомагаємо з дизайн-сапортом.

Читайте також: Всередині Дії: як працює дизайн-команда Мінцифри

Придумати й узгодити правила роботи з дизайн-системою.

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

Як писав Пол Ренд, до дизайну, як до оливок, потрібно звикнути. Так от, до дизайн-системи також потрібно звикнути, прийняти та зробити її своєю.

Крок 3. Перевірте на міцність

Для цього дизайн-систему потрібно прогнати за кількома головними критеріями:

1. Зв’язок бренду з цифровим продуктом — наскільки у нас пропрацьована айдентика для діджиталу та наскільки глибоко ми її застосовуємо?
2. Команда — чи сформований дизайн-юніт, котрий створює і підтримує систему, та лід, котрий оунить увесь процес і проміжний результат?
3. Принципи — чи є погоджений та зрозумілий процес роботи з дизайн-системою? Чи є дизайн-система в пріоритеті? (особливо, коли продукт розростається?
4. Користувачі — як ми працюємо зі зворотним зв’язком і як спрощуємо життя користувача через уніфікацію компонентів? Які елементи інструменту використовують частіше, а які не працюють?

Якщо 2 із 4 критеріїв не сформовані чи слабко працюють, система починає потроху розповзатися. І робота дизайнерів-розробників нагадує діалог Джої та Фібі з «Друзів».