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

Darina -

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

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

Головне завдання – пояснити іншій людині: як користуватися готовою системою, зберегти однаковість продукту.

Як це працює?

Дизайн-система ґрунтується на принципі атомарного дизайну, назва походить від слова «атоми»

атом - молекула - блок - сторінка

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

Що входить у систему?

  • Атоми: сітка, типографіка, кольори, іконки
  • Молекули: кнопки, інпути, дропдауни і т.д.
  • Організми: навбар/футер, картки товару тощо.
  • Шаблони: вайрфрейм цілої сторінки з «рибним контентом»
  • Сторінки: повністю готовий дизайн сторінки (наприклад, поточна версія головної сторінки вашого сайту з реальним контентом

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

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

Дизайн-системи є у Apple, IBM, Airbnb, Microsoft, Trello, BuzzFeed та багато інших великих зарубіжних гравців.

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

"З чого ж почати?" Щоб відповісти на це питання, ми підготували покроковий інструктаж розробки дизайн-системи, що включає 3 основні етапи.

КРОК 1 - аудит існуючого дизайну

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

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

КРОК 2 - Створіть стилі дизайн-системи

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

  • Колір

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

  • Типографіка

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

  • Інтервали

Багато хто забуває про цей параметр і використовують скрізь різні. Задавши інтервали для відступів між блоками, ви спростите розробку продуктів. Найчастіше вибирається кратна система відступів. Звичайно, інтервали можуть періодично відрізнятись від заданих параметрів. Все залежатиме від того, навіщо цей проект: web, ios чи android.

  • Іконки

Перед створенням іконок обов'язково потрібно закласти стилі, наприклад: товщина ліній, кількість кольорів, розмір, форми. Так, ви витратите на це додатковий час, натомість надалі робота над створенням візуалів значно спроститься.

  • Форми

Це насамперед кути та межі форм, стиль роздільників, тіней тих чи інших блоків. Їх радимо також поставити вже під час розробки.

КРОК 3- Організуйте бібліотеки компонентів

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

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

⚡ Якщо тобі сподобався цей матеріал, підпишись на наші соціальні мережі Instagram / Facebook / Linkedin / Signal. Там ти знайдеш більше цікавих матеріалів про дизайн.