Skip to main content

Design System Aesthetics Skill (طراحی سیستم زیبایی‌شناسی)

Design System Aesthetics skill یعنی یک روش راهنما برای بهتر کردن ظاهر سایت شما. این مهارت به شما کمک می‌کند در مورد فونت‌ها، رنگ‌ها، فاصله و توکن‌های حرکتی که سیستم طراحی شما را تعریف می‌کنند، تصمیمات سازگاری بگیرید.

Design System Aesthetics چیست؟ (زیبایی‌شناسی سیستم طراحی چیست؟)​

Design System Aesthetics یک مهارت ساختاریافته است که موارد زیر را پوشش می‌دهد:

  • Typography (تایپوگرافی): خانواده فونت‌ها، اندازه‌ها، وزن‌ها و ارتفاع خطوط
  • Color (رنگ): پالت‌های اصلی، ثانویه، تاکیدی و خنثی
  • Spacing (فاصله): مقیاس‌های پدینگ (Padding)، مارجین (Margin) و گپ (Gap)
  • Borders (حاشیه): توکن‌های شعاع (Radius) و عرض
  • Shadows (سایه‌ها): توکن‌های ارتفاع (Elevation) و عمق (Depth)
  • Motion (حرکت): انیمیشن‌ها و انتقال‌ها (Transitions)

این تصمیمات در فایل theme.json قالب شما ثبت می‌شوند و یک سیستم بصری منسجم ایجاد می‌کنند.

چرا از Design System Aesthetics استفاده کنیم؟ (چرا از زیبایی‌شناسی سیستم طراحی استفاده کنیم؟)​

Consistency (سازگاری)​

یک سیستم طراحی تضمین می‌کند که:

  • همه متن‌ها از یک مقیاس تایپوگرافی استفاده کنند
  • رنگ‌ها در کل سایت به صورت یکنواخت استفاده شوند
  • فاصله‌ها الگوی قابل پیش‌بینی داشته باشند
  • انیمیشن‌ها با هم هماهنگ به نظر برسند

Efficiency (کارایی)​

به جای اینکه تصمیمات طراحی را صفحه به صفحه بگیرید، شما:

  • توکن‌ها را فقط یک بار تعریف می‌کنید
  • از همه جا از آن‌ها استفاده می‌کنید
  • با تغییر یک مقدار، به‌صورت سراسری به‌روزرسانی می‌کنید

Flexibility (انعطاف‌پذیری)​

شما می‌توانید:

  • کل سیستم طراحی خود را به سرعت تنظیم کنید
  • با زیبایی‌شناسی‌های مختلف آزمایش کنید
  • در عین تکامل، برند خود را حفظ کنید

فعال کردن Design System Aesthetics Skill چگونه است؟ (فعال کردن مهارت زیبایی‌شناسی سیستم طراحی چطور است؟)​

Manual Activation (فعال‌سازی دستی)​

شما می‌توانید هر زمان شروع به استفاده از این مهارت کنید:

"Help me refine my design system"

یا

"Let's improve my site's aesthetics"

یا

"Guide me through design system decisions"

Automatic Suggestions (پیشنهادات خودکار)​

هنگامی که شما موارد زیر را انجام می‌دهید، ممکن است اِجنت‌ها پیشنهاد استفاده از این مهارت را بدهند:

  • درخواست تغییر طراحی می‌کنید
  • یک بازطراحی "مدرن" یا "حرفه‌ای" می‌خواهید
  • می‌خواهید سازگاری بصری خود را بهبود ببخشید
  • در حال آماده‌سازی برای راه‌اندازی سایت هستید

التصميم سیستمی زیبایی‌شناسی فرآیند​

مرحله ۱: تایپوگرافی (Typography)​

مساعد از شما در مورد انتخاب فونت‌هایتان سؤال می‌کند:

سبک تایپوگرافی مورد علاقه شما چیست؟
- سریف (سنتی، شیک)
- سنس سریف (مدرن، تمیز)
- مونو اسپیس (فنی، متمرکز بر کد)

برای فونت عنوان خود:
- آیا می‌خواهید یک فونت عنوان متفاوت داشته باشید، یا از همان متن بدنه استفاده کنید؟
- ترجیح شما چیست: پررنگ، شیک، بازیگوش، مینیمال؟

برای فونت متن اصلی (بدنه):
- خوانایی مهم است. آیا ترجیح می‌دهید:
  - متن بزرگتر و با فضای بیشتر
  - متن فشرده و کارآمد
  - اندازه استاندارد

سپس مساعد موارد زیر را تعریف می‌کند:

  • فونت عنوان: فونت اصلی برای عناوین و تیترها
  • فونت بدنه: فونتی که برای پاراگراف‌ها و متن اصلی استفاده می‌شود
  • فونت مونو اسپیس: فونتی که برای کدها و محتوای فنی به کار می‌رود
  • مقیاس اندازه (Size scale): اندازه‌های از پیش تعریف شده (کوچک، پایه، بزرگ، XL و غیره)
  • مقیاس وزن (Weight scale): وزن‌های فونت (عادی، متوسط، پررنگ و غیره)
  • ارتفاع خط (Line height): فاصله بین خطوط برای خوانایی بهتر

مرحله ۲: پالت رنگی (Color Palette)​

بیایید پالت رنگی خود را تعریف کنیم.

رنگ اصلی (رنگ برند شما):
- فعلی: [نمایش رنگ موجود]
- تغییر به: [انتخابگر رنگ یا کد هگز]

رنگ ثانویه (رنگ پشتیبان):
- فعلی: [نمایش رنگ موجود]
- تغییر به: [انتخابگر رنگ یا کد هگز]

رنگ تأکیدی (برای برجسته‌سازی و دکمه‌های فراخوان به عمل - CTAs):
- فعلی: [نمایش رنگ موجود]
- تغییر به: [انتخابگر رنگ یا کد هگز]

پالت خنثی (خاکستری‌ها برای متن، حاشیه و پس‌زمینه):
- روشن: [رنگ]
- متوسط: [رنگ]
- تیره: [رنگ]

مساعد یک پالت کامل شامل موارد زیر را ایجاد می‌کند:

  • رنگ‌های اصلی، ثانویه و تأکیدی
  • خاکستری‌های خنثی (روشن، متوسط، تیره)
  • رنگ‌های معنایی (موفقیت، هشدار، خطا)
  • حالت‌های هاور (Hover) و فعال (Active states)

مرحله ۳: فاصله گذاری (Spacing)​

شما چقدر فضای تنفس می‌خواهید؟

ترجیح مقیاس فاصله (Spacing scale preference):

  • فشرده (طرح‌های متراکم و کارآمد)
  • نرمال (فاصله متعادل)
  • فضایی (فضای خالی زیاد)

این تنظیمات روی موارد زیر تأثیر می‌گذارد:

  • پدینگ داخل دکمه‌ها و کارت‌ها
  • مارجین بین بخش‌ها
  • فاصله بین آیتم‌های گرید (grid items)

عامل (agent) توکن‌های فاصله را تعریف می‌کند:

  • واحد پایه (معمولاً ۴ پیکسل یا ۸ پیکسل)
  • مقیاس: xs، sm، md، lg، xl، 2xl
  • مقادیر خاص برای پدینگ، مارجین و گپ (gap)

مرحله ۴: حاشیه و سایه‌ها (Borders and Shadows)​

عمق بصری و تعریف:

ترجیح شعاع گوشه (Border radius preference):
- تیز (بدون گرد کردن)
- ظریف (شعاع کوچک)
- گرد (شعاع متوسط)
- بسیار گرد (شعاع بزرگ)

عمق سایه (Shadow depth):
- صاف (بدون سایه)
- ظریف (سایه‌های کم‌رنگ)
- برجسته (سایه‌های قوی)

عامل موارد زیر را ایجاد می‌کند:

  • توکن‌های شعاع گوشه (برای دکمه‌ها، کارت‌ها، ورودی‌ها)
  • توکن‌های سایه برای سطوح ارتفاع (elevation levels)
  • توکن‌های ضخامت حاشیه (Border width tokens)

مرحله ۵: حرکت و انیمیشن (Motion and Animation)​

وقتی سایت شما تعاملی باشد چه حسی داشته باشد؟

ترجیح انیمیشن (Animation preference):
- حداقل (بدون انیمیشن)
- ظریف (انتقال‌های ملایم)
- بازیگوش (انیمیشن‌های قابل مشاهده)

انیمیشن‌های خاص:
- انتقال صفحات: محو شدن (fade)، اسلاید (slide) یا هیچ‌کدام؟
- هاور دکمه: تغییر اندازه، تغییر رنگ یا هر دو؟
- وضعیت بارگذاری: اسپینر (spinner)، اسکلت (skeleton)، یا نوار پیشرفت (progress bar)؟

عامل موارد زیر را تعریف می‌کند:

  • مدت زمان انتقال (fast، normal، slow)
  • توابع نرم‌سازی (Easing functions): ease-in، ease-out، ease-in-out
  • فریم‌های کلید انیمیشن برای تعاملات رایج

اعمال زیبایی‌شناسی سیستم طراحی (Applying Design System Aesthetics)​

اعمال خودکار (Automatic Application)​

بعد از اینکه مهارت را کامل کردید، عامل موارد زیر را انجام می‌دهد:

۱. theme.json قالب شما را با تمام توکن‌ها به‌روزرسانی می‌کند ۲. سیستم طراحی را روی قالب فعال شما اعمال می‌کند ۳. استایل‌های بلوک‌ها را برای مطابقت با سیستم جدید بازسازی می‌کند ۴. قالب به‌روز شده را فعال می‌سازد

اعمال دستی (Manual Application)​

شما می‌توانید مستقیماً 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"
        }
      ]
    }
  }
}

Dizayn Sisteminizi Görme​

Agent'a Sorun​

"Show me my design system"

yoki

"What are my current design tokens?"

Agent sizden tipografi, renkler, boşluklar (spacing) va boshqa tokenlarni ko'rsatadi.

theme.jsonni Ko'rish​

Rohli token ta'riflarini ko'rish uchun /wp-content/themes/[theme-name]/theme.json faylini matn muharririda oching.

Dizayn Sistemingizni Yangilash​

Tezkor Yangilanishlar​

Agentdan aniq o'zgarishlar so'rashingiz mumkin:

"Make the primary color darker"

yoki

"Increase the spacing scale by 20%"

yoki

"Change the heading font to a serif"

To'liq Qayta Dizayn​

Dizayn Sistemining Estetikas (Design System Aesthetics) ko'nikmasini qayta ishga tushiring:

"Let's redesign my entire design system"

Bu sizni hozirgi qiymatlaringizdan boshlab barcha qarorlaringiz orqali yo'l ko'rsatadi.

Qisman Yangilanishlar​

Aniqlangan jihatlarni yangilang:

"Just update the color palette, keep everything else"

Dizayn Sistemining Eng Yaxshi Amaliyotlari (Best Practices)​

Birjiy Bo'yicha Ishlash (Consistency)​

  • Barcha joylarda bir xil tokenlardan foydalaning.
  • Bir martalik ranglar yoki o'lchamlarni yaratmang.
  • Qiymatlarni bevosita yozish o'rniga tokenlarni ishora qiling.

Nomlash (Naming)​

Aniqlangan, ma'noli nomlardan foydalaning:

  • ✓ primary, secondary, accent

  • ✗ blue, color-1, main

  • ✓ heading-lg, body-sm

  • ✗ font-size-24, text-large

Kengaytirish Imkoniyati (Scalability)​

سیستم خود را مقیاس‌پذیر طراحی کنید:

  • پیکسل yerine نسبی واحدları (rem, em) kullanın
  • Rastgele değerler yerine ölçekler oluşturun (xs, sm, md, lg, xl)
  • Gelecekteki eklemeler için plan yapı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 yazı tipleri (Inter, Helvetica)
  • Sınırlı renk paleti (2-3 renk)
  • Bol boşluk bırakma
  • Hafif gölgeler
  • Akıcı, hızlı animasyonlar

Sıcak ve Dostça​

  • 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 bir palet
  • Yapılandırılmış boşluklar
  • Minimum gölgeler
  • Hafif geçişler

Yaratıcı ve Cesur​

  • Farklı tipografi
  • Cesur renk paleti
  • Çeşitli boşluklar
  • Güçlü gölgeler
  • Dikkat çekici 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

  • Eklentilerde çakışan CSS olup olmadığını kontrol edin
  • Tüm sayfaların aynı temayı kullandığından emin olun
  • 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:

۱. سایتinizi inceleyin: Yeni tasarımı görmek için sitenizi ziyaret edin ۲. আরও পরিমার্জন করুন: আপনার দক্ষতা ব্যবহার করে আরও পরিবর্তন করুন ৩. টেমপ্লেট তৈরি করুন: আপনার ডিজাইন টোকেনগুলো ব্যবহার করে কাস্টম ব্লক টেমপ্লেট তৈরি করুন ৪. নথিভুক্ত করুন: আপনার ডিজাইন সিস্টেমটি দলের সদস্যদের সাথে শেয়ার করুন