Перейти до основного вмісту

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

Навичка «Естетика дизайн-системи» — це структурований підхід до вдосконалення візуальної ідентичності вашого сайту. Вона допомагає вам приймати узгоджені рішення щодо типографіки, кольорів, відступів та «токенів» руху (motion tokens), які визначають вашу дизайн-систему.

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

Естетика дизайн-системи — це структурована навичка, яка охоплює:

  • Типографіка: Сімейства шрифтів, розміри, накреслення та міжрядковий інтервал
  • Колір: Основні, вторинні, акцентні та нейтральні палітри
  • Відступи (Spacing): Масштаби внутрішніх відступів (padding), зовнішніх відступів (margin) та проміжків (gap)
  • Рамки (Borders): Токени радіуса та ширини
  • Тіні (Shadows): Токени підвищення та глибини
  • Рух (Motion): Анімації та переходи

Ці рішення фіксуються у файлі theme.json вашої теми, створюючи цілісну візуальну систему.

Навіщо використовувати естетику дизайн-системи?​

Узгодженість (Consistency)​

Дизайн-система гарантує:

  • Що весь текст використовує одну таку саму типографічну шкалу
  • Що кольори використовуються послідовно на всьому сайті
  • Що відступи дотримуються передбачувалого шаблону
  • Що анімації виглядають єдиними

Ефективність (Efficiency)​

Замість того, щоб приймати дизайнерські рішення сторінка за сторінкою, ви:

  • Визначаєте токени один раз
  • Застосовуєте їх скрізь
  • Оновлюєте глобально, змінивши лише одне значення

Гнучкість (Flexibility)​

Ви можете:

  • Швидко відкоригувати всю свою дизайн-систему
  • Експериментувати з різними естетичними стилями
  • Підтримувати узгодженість бренду, одночасно розвиваючись

Запуск навички «Естетика дизайн-системи»​

Руктивне активацію​

Ви можете запустити цю навичку в будь-який час:

"Help me refine my design system"

або

"Let's improve my site's aesthetics"

або

"Guide me through design system decisions"

Автоматичні пропозиції​

Агенти можуть запропонувати використати цю навичку, коли ви:

  • Запитуєте про зміни дизайну
  • Просите «сучасний» або «професійний» редизайн
  • Хочете покращити візуальну узгодженість
  • Готуєтеся до запуску сайту

Процес естетики дизайн-системи​

Крок 1: Типографіка​

Агент запитує про ваші вибір шрифтів:

Який ваш бажаний типографічний стиль?
- Serif (традиційний, елегантний)
- Sans-serif (сучасний, чистий)
- Monospace (технічний, орієнтований на код)

Для шрифту заголовків:
- Чи хочете ви окремий шрифт для заголовків, чи використовувати той самий, що й для основного тексту?
- Бажання: жирний, елегантний, грайливий, мінімалістичний?

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

Потім агент визначає:

  • Heading font: Основний шрифт для заголовків та титулів
  • Body font: Шрифт для абзаців та основного тексту
  • Monospace font: Шрифт для коду та технічного контенту
  • Size scale: Заздалегідь визначені розміри (small, base, large, XL тощо.)
  • Weight scale: Накреслення шрифтів (regular, medium, bold тощо.)
  • Line height: Відстань між рядками для кращої читабельності

Крок 2: Кольорова палітра​

Визначимо вашу колірну палітру.

Основний колір (колір вашого бренду):
- Поточний: [показує існуючий колір]
- Змінити на: [вибір кольору або HEX-код]

Вторинний колір (підтримуючий колір):
- Поточний: [показує існуючий колір]
- Змінити на: [вибір кольору або HEX-код]

Акцентний колір (виділення та CTA):
- Поточний: [показує існуючий колір]
- Змінити на: [вибір кольору або HEX-код]

Нейтральна палітра (сірі тони для тексту, рамок, фонів):
- Світлий: [колір]
- Середній: [колір]
- Темний: [колір]

Агент створює повну палітру, включаючи:

  • Основні, вторинні та акцентні кольори
  • Нейтральні сірі тони (світлий, середній, темний)
  • Семантичні кольори (успіх, попередження, помилка)
  • Стани наведення (hover) та активності (active)

Крок 3: Відступи (Spacing)​

Скільки «дихального простору» ви хочете?

Бажаний масштаб відступів:
- Компактний (щільні, ефективні макети)
- Нормальний (збалансовані відступи)
- Просторий (щедрий білий простір)

Це впливає на:
- Внутрішні відступи (padding) кнопок та карток
- Зовнішні відступи (margins) між секціями
- Проміжок (gap) між елементами сітки

Агент визначає токени відступів:

  • Базова одиниця (зазвичай 4px або 8px)
  • Масштаб: xs, sm, md, lg, xl, 2xl
  • Конкретні значення для padding, margin, gap

Крок 4: Рамки та тіні​

Візуальна глибина та визначення:

Бажаний радіус заокруглення рамок (Border radius):
- Гострий (без заокруглення)
- Тонкий (малий радіус)
- Заокруглений (середній радіус)
- Дуже заокруглений (великий радіус)

Глибина тіні:
- Плоский (без тіней)
- Тонкий (легкі тіні)
- Виражений (сильні тіні)

Агент створює:

  • Токени радіуса рамок (для кнопок, карток, полів введення)
  • Токени тіней для рівнів підвищення
  • Токени ширини рамок

Крок 5: Рух та анімація​

Яким має здаватися ваш сайт під час взаємодії?

Бажаний стиль анімації:
- Мінімалістичний (без анімацій)
- Тонкий (м'які переходи)
- Грайливий (помітні анімації)

Конкретні анімації:
- Переходи між сторінками: fade, slide чи відсутні?
- Наведення на кнопку (Button hover): scale, зміна кольору чи обидва?
- Стани завантаження: spinner, skeleton чи progress bar?

Агент визначає:

  • Тривалість переходів (швидкий, нормальний, повільний)
  • Функції згладжування (ease-in, ease-out, ease-in-out)
  • Ключові кадри анімації для типових взаємодій

Застосування естетики дизайн-системи​

Автоматичне застосування​

Після завершення навички агент:

  1. Оновлює theme.json вашої теми всіма токенами
  2. Застосовує дизайн-систему до активної теми
  3. Перегенерує стилі блоків, щоб вони відповідали новій системі
  4. Активує оновлену тему

Ручне застосування​

Ви також можете редагувати theme.json напряму:

{
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        {
          "color": "#0066CC",
          "name": "Primary",
          "slug": "primary"
        }
      ]
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "Inter, sans-serif",
          "name": "Body",
          "slug": "body"
        }
      ]
    },
    "spacing": {
      "spacingSizes": [
        {
          "size": "0.5rem",
          "name": "Small",
          "slug": "sm"
        }
      ]
    }
  }
}

Перегляд дизайн-системи​

Запитайте агента​

"Show me my design system"

або

"What are my current design tokens?"

Агент відобразить вашу типографіку, кольори, відступи та інші токени.

Перегляд theme.json​

Відкрийте /wp-content/themes/[theme-name]/theme.json у текстовому редакторі, щоб побачити сирі визначення токенів.

Оновлення дизайн-системи​

Швидкі оновлення​

Попросіть агента про конкретні зміни:

"Make the primary color darker"

або

"Increase the spacing scale by 20%"

або

"Change the heading font to a serif"

Повний редизайн​

Повторно запустіть навичку «Естетика дизайн-системи»:

"Let's redesign my entire design system"

Це знову проведе вас через усі рішення, починаючи з ваших поточних значень.

Часткові оновлення​

Оновіть лише певні аспекти:

"Just update the color palette, keep everything else"

Найкращі практики дизайн-системи​

Узгодженість​

  • Використовуйте ті самі токени скрізь
  • Не створюйте одноразові кольори чи розміри
  • Посилайтеся на токени, а не жорстко кодуйте значення

Іменування​

Використовуйте чіткі, семантичні імена:

  • ✓ primary, secondary, accent

  • ✗ blue, color-1, main

  • ✓ heading-lg, body-sm

  • ✗ font-size-24, text-large

Масштабованість​

Проектуйте свою систему так, щоб вона масштабувалася:

  • Використовуйте відносні одиниці (rem, em) замість пікселів
  • Створюйте шкали (xs, sm, md, lg, xl) замість довільних значень
  • Плануйте майбутні додавання

Документація​

Документуйте свою дизайн-систему:

  • Чому ви обрали певні кольори
  • Коли використовувати кожен токен
  • Винятки та крайні випадки

Поширені патерни дизайн-систем​

Сучасний мінімалізм​

  • Типографіка Sans-serif (Inter, Helvetica)
  • Обмежена палітра кольорів (2-3 кольори)
  • Просторий відступ
  • Тонкі тіні
  • Плавні, швидкі анімації

Теплий та дружній​

  • Суміш serif та sans-serif
  • Тепла палітра кольорів (помаранчеві, теплі сірі)
  • Заокруглені кути
  • М'які тіні
  • Грайливі анімації

Професійний корпоративний​

  • Чистий sans-serif (Roboto, Open Sans)
  • Нейтральна палітра з акцентним кольором
  • Структуровані відступи
  • Мінімальні тіні
  • Тонкі переходи

Креативний та сміливий​

  • Виразний шрифт
  • Смілива палітра кольорів
  • Змінні відступи
  • Сильні тіні
  • Помітні анімації

Вирішення проблем​

Зміни в дизайн-системі не відображаються

  • Очистіть кеш браузера
  • Перезберіть сайт, якщо ви використовуєте статичний генератор
  • Перевірте, чи є theme.json валідним JSON
  • Переконайтеся, що тема активна

Кольори виглядають по-різному на різних сторінках

  • Перевірте наявність конфліктуючого CSS у плагінах
  • Переконайтеся, що всі сторінки використовують одну й ту саму тему
  • Очистіть будь-які кешувальні плагіни

Я хочу повернутися до попередньої дизайн-системи

  • Запитайте агента: "Show me my design system history"
  • Вручну відредагуйте theme.json до попередніх значень
  • Повторно запустіть навичку з іншим вибором

Наступні кроки​

Після визначення дизайн-системи:

  1. Перегляньте свій сайт: Відвідайте свій сайт, щоб побачити новий дизайн
  2. Покращте далі: Внесіть корективи, знову використовуючи навичку
  3. Створіть шаблони: Створіть кастомні шаблони блоків, використовуючи ваші дизайн-токени
  4. Документуйте: Поділіться своєю дизайн-системою з членами команди