Skip to main content

Дизайн Системные Эстетика Навык

Навык эстетики дизайн-системы — это пошаговый подход к улучшению визуальной идентичности вашего сайта. Он помогает принимать последовательные решения о типографике, цвете, интервалах и токенах движения (motion tokens), которые определяют вашу дизайн-систему.

Что такое Дизайн Системная Эстетика?​

Дизайн-системная эстетика — это структурированный навык, который охватывает следующее:

  • Типографика: Семейства шрифтов, размеры, начертания и межстрочные интервалы
  • Цвет: Основные, вторичные, акцентные и нейтральные палитры
  • Интервалы (Spacing): Отступы (padding), поля (margin) и масштабы расстояний (gap scales)
  • Рамки (Borders): Токены радиуса и ширины
  • Тени (Shadows): Токены поднятия и глубины
  • Движение (Motion): Анимации и переходы

Эти решения фиксируются в файле theme.json вашей темы, создавая единую визуальную систему.

Зачем использовать Дизайн Системную Эстетику?​

Последовательность (Consistency)​

Дизайн-система гарантирует следующее:

  • Весь текст использует одну и ту же шкалу типографики
  • Цвета используются единообразно на всем сайте
  • Интервалы следуют предсказуемому шаблону
  • Анимации выглядят унифицированными

Эффективность (Efficiency)​

Вместо того чтобы принимать дизайнерские решения по одной странице, вы:

  • Определяете токены один раз
  • Применяете их везде
  • Обновляете глобально, меняя одно значение

Гибкость (Flexibility)​

Вы можете:

  • Быстро настроить всю свою дизайн-систему
  • Экспериментировать с разными эстетиками
  • Поддерживать целостность бренда, развиваясь при этом

Активация Навыка Дизайн Системная Эстетика​

Ручная активация (Manual Activation)​

Вы можете начать этот навык в любое время:

"Помоги мне усовершенствовать мою дизайн-систему"

или

"Давай улучшим эстетику моего сайта"

или

"Проведи меня через решения по дизайну системы"

Автоматические предложения (Automatic Suggestions)​

Агенты могут предложить использовать этот навык, когда вы:

  • Запрашиваете изменения в дизайне
  • Просите "современный" или "профессиональный" редизайн
  • Хотите улучшить визуальную согласованность
  • Готовитесь запустить свой сайт

Дизайн Системы Эстетика Процесс​

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

Агент спрашивает о ваших выборе шрифтов:

Какой стиль типографики вы предпочитаете?
- Сериф (традиционный, элегантный)
- Санс-сериф (современный, чистый)
- Моноширинный (технический, сфокусированный на коде)

Для вашего шрифта заголовков:
- Вы хотите отдельный шрифт для заголовков или использовать тот же, что и основной текст?
- Предпочтение: жирный, элегантный, игривый, минималистичный?

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

Затем агент определяет следующее:

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

Шаг 2: Цветовая Палитра​

Давайте определим вашу цветовую палитру.

Основной цвет (цвет вашего бренда):
- Текущий: [показывает существующий цвет]
- Изменить на: [выбор цвета или шестнадцатеричный код]

Вторичный цвет (поддерживающий цвет):
- Текущий: [показывает существующий цвет]
- Изменить на: [выбор цвета или шестнадцатеричный код]

Акцентный цвет (для выделения и CTA-кнопок):
- Текущий: [показывает существующий цвет]
- Изменить на: [выбор цвета или шестнадцатеричный код]

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

Агент создает полную палитру, включающую:

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

Шаг 3: Отступы (Spacing)​

Сиз қанча "нафста" (хола-аваз) истегенсиз?

Масафалар масштабини танлаш:

  • Кўчирилган (сиқиндирилган, самарали лойалар)
  • Нормаль (балансланган масофалар)
  • Кенг (кўп бўш фазо)

Бу қуйидагиларга таъсир қилади:

  • Тугмалар ва карточкалар ичидаги падинг (padding)
  • Бўлимлар орасидаги маржалар (margins)
  • Грит элементлари орасидаги бўшлик (gap)

Агент масофа токенларини белгилайди:

  • Асосий юқори даража (odatда 4px ёки 8px)
  • Масштаб: xs, sm, md, lg, xl, 2xl
  • Падинг, маржа ва бўшлик учун аниқ қийматлар

Қадам 4: Бо'йсувлар ва Садолар (Borders and Shadows)​

Назарий чуқурлик ва белгилаш:

Бо'йсув радиуси танлони:
- Тез (бурувсиз)
- Субтил (кичик радиус)
- Бурувчан (ўртача радиус)
- Чуқур бурувчан (катта радиус)

Садо чуқurnya:
- Текис (садолар йўқ)
- Субтил (ёпиқ садолар)
- Кучли (кучли садолар)

Агент қуйидагиларни яратади:

  • Бо'йсув радиуси токенлари (тугмалар, карточкалар, киришлар учун)
  • Қадам даражалари учун садо токенлари
  • Бо'йсув ширини токенлари

Қадам 5: Ҳаракат ва Анимация (Motion and Animation)​

Сайт интерактив бўлганда қандай ҳис қилиши керак?

Анимация танлони:
- Минимал (анимация йўқ)
- Субтил (ёпиқ ўтишлар)
- Қизиқарли (сезиб турувчи анимациялар)

Аниқ анимациялар:
- Саҳифа ўтишлари: фойланиш, слайд ёки йўқ?
- Тугма юзасига олиш (hover): катталаш, ранг ўзгариши ёки иккаласи ҳам?
- Юкланиш ҳолатлари: спиннер, скелетон ёки прогресс панел?

Агент қуйидагиларни белгилайди:

  • Ўтиш даражалари (тез, нормаль, секин)
  • Энглаш функциялари (ease-in, ease-out, ease-in-out)
  • Одатдаги интеракциялар учун анимация калитчлари (keyframes)

Дизайн тизимини қўллаш​

Автоматик қўллаш​

Маҳоратни бажарганингда агент:

  1. Темангизнинг theme.json файлини барча токенлар билан янгилайди
  2. Дизайн тизимини фаол темангизга қўяди
  3. Янги тизимга мослашиш учун блок услубларини қайта ишлаб беради (regenerates)
  4. Янгиланган темани фаоллаштиради

Қўл билан қўллаш​

Сиз шунингдек theme.json файлини тўғридан-тўғри ўзгартирishingiz мумкин:

{
  "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"
        }
      ]
    }
  }
}

Dizayn Sisteminizi Görme​

Agent'a Sorun​

"Show me my design system"

veya

"What are my current design tokens?"

Agent size, renkler, boşluklar ve diğer tokenlarınızı gösterecektir.

theme.json'u Görüntüleme​

Ham token tanımlarını görmek için /wp-content/themes/[theme-name]/theme.json dosyasını bir metin düzenleyicide açın.

Dizayn Sisteminizi Güncelleme​

Hızlı Güncellemeler​

Agent'tan belirli değişiklikler isteyin:

"Make the primary color darker"

veya

"Increase the spacing scale by 20%"

veya

"Change the heading font to a serif"

Tam Yeniden Tasarım​

Dizayn Sistemi Estetikleri becerisini tekrar çalıştırın:

"Let's redesign my entire design system"

Bu, mevcut değerlerinizle başlayarak tüm kararlarınızda size rehberlik edecektir.

Kısmi Güncellemeler​

Belirli yönleri güncelleyin:

"Just update the color palette, keep everything else"

Dizayn Sistemi En İyi Uygulamaları​

Tutarlılık​

  • Tüm yerlerde aynı tokenları kullanın
  • Tek seferlik renkler veya boyutlar oluşturmayın
  • Değerleri doğrudan kodlamak yerine tokenlara atıf yapın

İsimlendirme​

Açık, anlamlı isimler kullanın:

  • ✓ primary, secondary, accent

  • ✗ blue, color-1, main

  • ✓ heading-lg, body-sm

  • ✗ font-size-24, text-large

Ölçeklenebilirlik​

Ваша систему масштабирования спроектируйте:

  • Пиксели вместо относительных единиц (rem, em) используйте не надо.
  • Абсолютные значения yerine ölçekler (xs, sm, md, lg, xl) oluşturun.
  • Gelecekteki eklemeleri planlayın.

Dokümantasyon​

Tasarım sisteminizi belgeleyin:

  • Neden belirli renkleri seçtiğinizi açıklayın.
  • Her bir token'ı ne zaman kullanacağınızı belirtin.
  • İstisnalar ve kenar durumları (edge cases) hakkında bilgi verin.

Yaygın Tasarım Sistemi Kalıpları​

Modern Minimalist​

  • Sans-serif tipografi (Inter, Helvetica).
  • Sınırlı renk paleti (2-3 renk).
  • Bol boşluk kullanımı.
  • Hafif gölgeler.
  • Akıcı, hızlı animasyonlar.

Sıcak ve Samimi​

  • Serif ve sans-serif karışımı.
  • Sıcak renk paleti (turuncular, sıcak griler).
  • Yuvarlak köşeler.
  • Yumuşak gölgeler.
  • Eğlenceli animasyonlar.

Profesyonel Kurumsal​

  • Temiz sans-serif (Roboto, Open Sans).
  • Vurgu rengi olan nötr palet.
  • Yapılandırılmış boşluk kullanımı.
  • Minimum gölgeler.
  • Hafif geçişler.

Yaratıcı ve Cesur​

  • Farklı tipografi.
  • Cesur renk paleti.
  • Çeşitli boşluklar.
  • Güçlü gölgeler.
  • Belirgin animasyonlar.

Sorun Giderme​

Tasarım sistemimdeki değişiklikler görünmüyor

  • Tarayıcı önbelleğini temizleyin.
  • Statik bir oluşturucu kullanıyorsanız sitenizi yeniden oluşturun.
  • theme.json'ın geçerli JSON olup olmadığını kontrol edin.
  • Temanın aktif olup olmadığını doğrulayın.

Renkler farklı sayfalarda farklı görünüyor

  • Eklentilerdeki çakışan CSS olup olmadığını kontrol edin.
  • Tüm sayfaların aynı temayı kullandığını doğrulayın.
  • Herhangi bir önbellekleme eklentisini temizleyin.

Önceki bir tasarım sistemine geri dönmek istiyorum

  • Acente'ye sorun: "Tasarım sistemi geçmişimi göster" (Show me my design system history).
  • theme.json dosyasını manuel olarak önceki değerlere düzenleyin.
  • Farklı seçimlerle beceriyi tekrar çalıştırın.

Sonraki Adımlar​

Tasarım sisteminizi tanımladıktan sonra:

  1. Сайтыңызды текшериңіз: Жаңа дизайны görmek үшін сайтınızı дайындап көрите.
  2. Якинлап чыгыңыз: Қолданыңызды пайдаланып, дизайнды одан әрі жетілдіріңіз.
  3. Шаблон жасаңыз: Дизайн токендерinizden арнайы блок шаблондары құрыңыз.
  4. Құжаттаңыз: Дизайн жүйеңізді команда мүшелерімен бөлісіңіз.