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

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

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

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

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

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

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

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

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

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

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

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

Що саме описують дизайн-системи

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

  • керівництва з візуального стилю,
  • UI-кіти та шаблони,
  • набори UX-підходів,
  • бібліотеки готових компонентів,
  • документи, правила, рекомендації,
  • навчальні матеріали.

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

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

6 дизайн-систем, які варті вашої уваги

Material Design

https://material.io/

Вперше цю дизайн-систему Google представила в 2014 році.

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

Ключові принципи

Основу Material Design складає ідея про те, що цифрові об'єкти — це метафора об'єктів реальних. Здебільшого, цифрові об’єкти, з якими ви маєте справу в мобільних та вебзастосунках — це картки. В реальному житті такі картки були б об’єктами з паперу, відповідно, і ключовим образом, своєрідною основою Material Design є метафора аркушу паперу.

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

Елементи системи

  • Опис компонентів і принципи їх використання
  • Кольори
  • Шрифти
  • Набори іконок
  • Теми оформлення
  • Звуки
  • Анімації та принципи їх використання
  • Шаблони для Figma, Sketch, Adobe XD, After Effects та інших додатків
  • Керівництва для мобільних пристроїв

Для чого можна використовувати

Для створення інтерфейсів сайтів і додатків.

Apple Human Interface Guidelines

https://developer.apple.com/design/

Ми вже писали, що чимало сучасних компанії, що створюють цифрові продукти, з часом впроваджують власні дизайн-системи. Але Apple була першою, хто систематизував свої знання в цій галузі. Перша версія Apple Human Interface Guidelines була написана ще в 1978 році (понад 40 років тому!), і чимало описаних в системі принципів зберігають актуальність.

Ключові принципи

Філософія дизайну Apple заснована на 5 принципах:

  1. Увага до деталей: другорядних деталей немає, ідеальними повинні бути навіть ті речі, які приховані від очей.
  2. Емпатія: користувач повинен відчувати, що вам важливі його потреби та емоції.
  3. Фокус на головному: все погане та вторинне можна прибрати.
  4. Перше враження є важливим: люди оцінюють компанію або продукт за тим, як ті себе подають.
  5. Доступність: будь-який пристрій або інтерфейс має бути дружнім до всіх користувачів, незалежно від їх досвіду взаємодії з сучасними технологіями, освіти або фізичних можливостей.

Елементи системи

  • Теми
  • Візуальний каталог
  • Архітектура програми
  • Взаємодія з користувачем
  • Можливості системи
  • Візуальний дизайн
  • Іконки і зображення
  • Вікно і уявлення
  • Меню
  • Кнопки
  • Поля і мітки
  • Селектори
  • Індикатори
  • Сенсорна панель
  • Розширення

Для чого можна використовувати

Для створення інтерфейсів сайтів і застосунків.

Microsoft Fluent Design System

https://www.microsoft.com/design/fluent/

Fluent Design System — дизайн-система компанії Microsoft, що розробила такі відомі всім продукти як операційна система Windows, пакет програм Microsoft Office та браузер Edge. Вперше Fluent Design System була представлена в 2017 році.

Ключові принципи

Microsoft Fluent Design System заснована на 5 принципах:

  1. Світло — привертає увагу до об'єкта, з яким взаємодіє користувач, і підсвічує важливу інформацію.
  2. Глибина — представлена у вигляді тіней і шарів, дозволяє диференціювати контент.
  3. Рух — пов'язує всі елементи інтерфейсу і створює відчуття безперервної взаємодії.
  4. Матеріал — визначає зовнішній вигляд елементів, імітує фізичні властивості об'єкта.
  5. Масштаб — елементи та інтерфейси в цілому адаптуються до різних формфакторів пристроїв і розмірів екранів.

Елементи системи

  • Кольори
  • Шрифти
  • Набори іконок
  • Елементи управління
  • Макети
  • Анімації
  • Набори інструментів для дизайнерів
  • Теми
  • Локалізації

Для чого можна використовувати

Для створення єдиного стилю для вебплатформ, а також платформ Windows, iOS і Android.

Atlassian Design System

https://atlassian.design/

Atlassian — компанія, що створює програмне забезпечення для командної роботи розробників. Найбільш відомі її продукти — система для створення баз знань Confluence і система стеження за вадами Jira. Також їм належить сервіс управління проєктами Trello. Свою дизайн систему Atlassian вперше представила в 2012 році.

Ключові принципи

Місія Atlassian полягає в тому, щоб надихати на творчість і допомагати людям і командам бути ефективнішими. Їх філософія будується на таких принципах:

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

Елементи системи

  • Дизайн-принципи
  • Колірні палітри
  • Шрифти
  • Ілюстрації
  • Логотипи
  • Бібліотека для Figma
  • Бібліотека для Sketch
  • Комплекти матеріалів для презентацій
  • Шаблони графічних матеріалів
  • Цінності та принципи бренду

Для чого можна використовувати

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

IBM Carbon Design System

https://www.carbondesignsystem.com/

Колись IBM змагалася з Microsoft і Apple на ринку персональних комп'ютерів, але потім сфокусувалась на корпоративному секторі. Зараз вони займаються бізнес-консалтингом, пропонують хостинг, розробляють програмне забезпечення та обладнання. Свою дизайн-систему IBM представила в 2015 році.

Ключові принципи

IBM Carbon Design System будується на наступних принципах:

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

Елементи системи

  • Навчальні матеріали
  • Керівництва
  • Компоненти
  • Шаблони
  • Ресурси для розробників
  • Дизайн-інструменти та ресурси для Sketch, Axure та Adobe XD

Для чого можна використовувати

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

Інші дизайн-системи

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

·
8685
·
7
·
sosogoodsuper 133
Головна