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

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

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

Приклад жетона одного кольору:

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

Отже, замість того, щоб мати:

Ми мали б:

Дизайн маркера дозволяє нам це зробити змінити значення на льоту з «{primary}», якщо необхідно, без необхідності повертатися до інших рядків.
Крім того, у разі Мультибрендова система дизайну, це також дає можливість мати лише один одна і єдина сторінка для редагування змінити стиль.
В ідеалі мати однакові назви в стилях нашого програмного забезпечення для проектування для більшої послідовності та простоти руки геть між дизайнерами та розробниками.
Однак використання маркерів дизайну як невід’ємної частини системи дизайну — це набагато більше. Вони також дозволяють a підвищена масштабованість, краще спілкування між командами і, отже, краще прийняття рішень.

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

• Примітиви маркерів
  Примітиви маркерів є основні цінності система проектування. Вони включають кольори, шрифти, розміри шрифтів, поля, пробіли та інші елементи дизайну. Примітиви маркерів зазвичай зберігаються в стандартизованому форматі даних, наприклад JSON, CSS ou ЯМЛ. Завдяки цьому дизайнерам і розробникам легко ділитися ними та використовувати їх.
• Семантика лексем
  Семантичні лексеми — це комбінації примітивних лексем, які мають певне значення в системі проектування. Наприклад, семантичний маркер може бути певним кольором, який використовується для командної кнопки, або певним шрифтом, який використовується для заголовка сторінки. Семантичні лексеми дозволяють створювати а цілісне і однорідне оформлення, а також спростити співпрацю між дизайнерами та розробниками.

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

Переваги Design Tokens

• консистенція
  Токени дизайну відповідають, серед іншого, на a бізнес-проблема : як гарантувати графічну ідентичність бренду з мінімумом тертя?
  У разі зміни основ (наприклад, ребрендингу) токени дизайну дозволяють швидко розгортати ці зміни.
  Стилі єдині для всіх продуктів і платформ.
• Багаторазове використання
  Маркери дизайну можна повторно використовувати в одному або кількох продуктах, що дозволяєекономити час і ресурси в розвитку. Розробники отримують маркери безпосередньо, замість того, щоб щоразу створювати нові стилі.
  Дизайн токенів уникає жорсткого запису значень у коді.
• Ремонтопридатність
  Маркери дизайну полегшують підтримку проекту, оскільки вони дозволяють швидке оновлення стилю. як? Токени — це централізовані дані, які містять назву та значення.
  Якщо просто змінити значення маркера, наприклад колір головної кнопки, це вплине на всі кнопки програми/сайту за одне втручання! Таким чином, розробники можуть легше підтримувати стилі проекту, навіть коли вибір дизайну змінюється.

Обмеження маркерів дизайну

• Інструменти не готові
  Оскільки формат жетонів дизайну не встановлений у камені, ніхто ще не дійшов згоди щодо того, як їх використовувати. У кожної команди та компанії є власне функціонування та власна мова. В даний час W3C зараз працює над форматом, який би вирішив цю проблему. Але на даний момент доречно обійтися наявними інструментами та їх обмеженнями. Figma зазначила, що працює над цією темою, але ця функція, ймовірно, не буде випущена раніше кінця року.
• Уповільнення робочого процесу
  Знайдіть а номенклатура зрозумілий кожному - це справжній пошук Святого Грааля. Крім того, як і будь-яка система, вона повинна буде розвиватися відповідно до великої кількості параметрів. До цього додається складність документації ін ле час, необхідний для його написання. Команди, що спеціалізуються на системі проектування, досі не є широко поширеними, і це ще більше стосується людей, які займаються написанням документації.
  Найменша модифікація одного з цих примітивів може спричинити численні оновлення, які необхідно враховувати.
  Мати загальне уявлення про систему є важливим під час впровадження маркерів дизайну.
  L 'реалізація складна і потребує значних зусиль з низового рівня, але я впевнений, що експоненціальні переваги, які він може принести, значно переважують такий підхід.

Висновок

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

Візьміть

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

Ресурси для подальшого розвитку

• Токени в системах проектування: 10 порад щодо розробки та впровадження дизайнерських рішень для всіх: Читайте тут 
• Токени дизайну, крім кольорів, типографіки та інтервалів: Читайте тут

 

 

 

Александр Кайє, керівник відділу інтерфейсу користувача та дизайну UX-Republic