Покроковий посібник зі створення системи дизайну

Вступ

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

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

"Design System" тут для того, щоб полегшити вам життя.

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

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

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

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

Які переваги має система проектування?

Деякі з переваг впровадження системного дизайну полягають у наступному

1. Підвищує ефективність та скорочує час - Основною перевагою будь-якої системи проектування є можливість швидко створювати та відтворювати проектні та конструкторські роботи. Команди можуть використовувати готові елементи, щоб зменшити необхідність постійно винаходити велосипед і знизити ризик неузгодженості.
2. Покращує візуальну узгодженість на всіх сторінках і каналах - Відсутність системи дизайну в масштабах всієї організації може призвести до непослідовності візуального ряду, фрагментарного користувацького досвіду або ізоляції від брендингу. Єдиний набір стандартів також допомагає керувати масштабними редизайнами або візуальними ребрендингами.
3. Сприяє використанню єдиної мови - спільна мова проектування зменшує ймовірність втрат часу на проектування або розробку через непорозуміння всередині та між міжфункціональними командами.
4. Дозволяє краще зосередитися на більш складних проблемах - Команди можуть краще вирішувати складні проблеми, такі як визначення пріоритетів інформації, управління поїздками тощо, коли створені прості та однозначні компоненти інтерфейсу.
5. Слугує довідковим та навчальним інструментом для авторів - система дизайну згладжує процес адаптації у разі кадрових змін. Вона також допомагає полегшити новим індивідуальним учасникам процес створення дизайну інтерфейсу користувача або контенту.
6. Сприяє створеннюсильного та вічного бренду - Мета системи дизайну полягає в тому, щоб передати певну ідентичність та дизайн, що стоять за продуктами, які вона просуває. Це допомагає створювати впливові бренди та допомагає людям запам'ятати досвід роботи з брендом. Це змушує людей відчувати себе більш пов'язаними з брендом і більше довіряти йому.

Десятикроковий посібник з побудови системи дизайну

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

1. Ретельно проаналізуйте ваш існуючий дизайн-процес.

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

• Який підхід до дизайну зараз застосовує ваша організація?
• Які інструменти використовує ваша організація?

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

2. Визначте алфавіт вашого бренду

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

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

3. Провести аудит для поточного продукту ШІ

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

• Звертайте увагу на ті частини продукту, де є значні невідповідності.
• Виділіть найбільш використовувані та важливі елементи продукту.

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

4. Визначте принципи побудови вашої системи

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

Хочете мати системний дизайн-процес? Почніть з цих питань:

• Що ви створюєте
• Чому ви це робите
• Як ви будете його будувати

Принципи дизайну повинні відображати цінності та бачення вашого бренду.

5. Створення бібліотеки компонентів

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

6. Встановіть правила

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

Це два підходи до правил Системи Дизайну, про які йдеться в книзі Алли Холматової:

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

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

7. Оберіть свою модель управління

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

• Одноосібна модель - окрема особа або група осіб безпосередньо "керують" процесом проектування системи.
• Централізована модель - одна команда відповідає і спрямовує розвиток системи.
• Федеративна модель - кілька людей з кількох груп керують процесом розробки системи.

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

8. Визначте структуру компонентів

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

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

Критерії для багаторазових та масштабованих компонентів:

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

9. Переконайтеся, що всі команди використовують єдину мову

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

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

10. Регулярно повідомляйте про зміни

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

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

Три показові приклади для початку

Система проектування Atlassian

(https://atlassian.design/)

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

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

При цьому Atlassian Design System пропонує гнучкі методи та ефективне відстеження кожного окремого етапу проекту, від планування продукту до його доставки. Це в кінцевому підсумку дає корисні результати створення та доставки продуктів. Їх система дизайну в основному включає:

1. Керівництво з проектування
2. Стандарти бренду
3. Продукт
4. Ілюстрація
5. Створення прототипів
6. Маркетинг
7. Особистість

IBM Design System

(https://carbondesignsystem.com/migrating/guide/design)

IBM є яскравим прикладом великого ІТ-підприємства, яке працює на глобальному рівні та дотримується власної системи проектування.

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

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

На думку IBM, гарний дизайн - це не лише необхідність, а й зобов'язання перед користувачами. Ось деякі з особливостей їхньої системи Carbon Design System, яка надає розробникам і дизайнерам, що працюють з Adobe, Axure та Sketch, безліч інструментів і ресурсів:

1. Візуалізація даних
2. Візерунки
3. Компоненти
4. Вказівки
5. Навчальні посібники

Система дизайну Uber

(https://baseweb.design/)

Ми всі хоча б раз користувалися послугами Uber. Американська технологічна компанія робить ставку на рух, включаючи доставку їжі, виклик авто, пірингові поїздки та мікромобільність за допомогою самокатів та електровелосипедів.

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

Основними атрибутами Uber Design System є

1. Архітектура бренду
2. Склад
3. Тон голосу
4. Рух
5. Ілюстрація
6. Фотографія
7. Іконографія
8. Колір
9. Логотип
10. Типографіка

Що потрібно знати, перш ніж створювати свою першу систему дизайну

1. Завчасна та чітка комунікація - ваш новий найкращий друг

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

Скажіть своїм клієнтам, користувачам системи дизайну, що вам потрібно, щоб отримати конструктивний зворотній зв'язок. Якщо ви перебуваєте на ранній стадії підготовки до релізу, будьте чесними і чітко скажіть, який саме відгук вам потрібен. Це вказує на те, що ви шукаєте найбільш суттєві недоліки продукту, а не критику з високим ступенем достовірності.

Пам'ятайте про те, що надмірні роздуми виснажують ваш розум, але не соромтеся надмірно спілкуватися.

2. Ваші кроки - не єдине, що вам потрібно відстежувати

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

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

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

3. Механізми зворотного зв'язку так само недооцінені, як Rhaeghal з GOT

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

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

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

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

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

Посилання

https://ionic.io/resources/articles/why-every-company-needs-a-design-system

https://www.baianat.com/books/merits-of-design-systems/design-systems-and-their-benefits

https://www.uxpin.com/create-design-system-guide/

https://builtin.com/design-ux/11-benefits-design-systems

https://elementor.com/blog/design-system/

https://www.nngroup.com/articles/design-systems-101/

https://www.uxpin.com/studio/blog/best-design-system-examples/#h-4-uber-design-system

https://www.eleken.co/blog-posts/7-design-systems-examples-for-your-inspiration

https://aufaitux.com/blog/best-design-systems/

https://www.copycat.dev/blog/design-system-examples/

https://builtin.com/design-ux/design-system

https://www.editorx.com/shaping-design/article/design-system-examples

https://medium.com/spotify-design/5-things-i-wish-id-known-before-starting-a-design-system-at-spotify-f8624abf1081