‏واژه‌نامهٔ زبان طراحی که هر دولوپر باید بلد باشه

این مطلب یه واژه‌نامهٔ مرجع از زبان طراحیه؛ همون اصطلاحاتی که به قول خودش طراح‌ها وقتی دقیقاً می‌دونن به چی نگاه می‌کنن به کار می‌برن. به‌جای یه مقالهٔ استدلالی، یه مجموعهٔ منظم از واژه‌هاست که هرکدوم با یه تعریف کوتاه و عملی توضیح داده شدن. کل محتوا توی دوازده بخش دسته‌بندی شده: تایپوگرافی، رنگ، آیکون، چیدمان، تعامل، حرکت، دسترس‌پذیری، معماری اطلاعات، کپی‌رایتینگ، ابزارها، تحلیل و کامپوننت‌ها.

بخش تایپوگرافی روی این تمرکز داره که متن چطور چیده و خونده می‌شه: تفاوت kerning (فاصلهٔ بین دو حرف خاص) با tracking (فاصلهٔ یکنواخت کل کلمه)، نقش leading یا فاصلهٔ خطوط، و اینکه چرا x-height باعث می‌شه دو فونت با یه اندازهٔ نقطه‌ای متفاوت دیده شن. مفهوم‌هایی مثل tabular nums برای هم‌ترازی اعداد و font stack برای جلوگیری از پرش چیدمان موقع لود فونت هم همین‌جان.

بخش رنگ از فضاهای رنگی مثل sRGB و P3 و OKLCH حرف می‌زنه و توضیح می‌ده چرا OKLCH با درک انسان از روشنایی هماهنگ‌تره، طوری که دو رنگ با یه مقدار lightness واقعاً هم‌روشنایی دیده می‌شن. روی نکات کاربردی هم دست می‌ذاره، مثل اینکه برای یه تینت روشن بهتره chroma رو کم کنی نه opacity رو، چون کم کردن شفافیت رنگ رو خاکستری و بی‌جون می‌کنه.

بخش‌های چیدمان و تعامل بیشترِ ربط رو به کار دولوپرها دارن. مثلاً توضیح می‌ده شعاع گوشهٔ یه المان داخلی باید برابر شعاع بیرونی منهای padding باشه وگرنه یه فاصلهٔ تابلو ایجاد می‌شه، یا اینکه overflow: hidden بی‌سروصدا چسبندگی sticky رو می‌شکنه. توی تعامل هم به touch target حداقل ۴۴ در ۴۴ پیکسل، debounce حدود ۳۰۰ میلی‌ثانیه برای ورودی جستجو، و آپدیت خوش‌بینانه (optimistic update) با امکان rollback اشاره می‌کنه.

بخش حرکت روی این تأکید داره که انیمیشن صرفاً تزئین نیست، بلکه بازخورده. می‌گه ease-out برای چیزهایی که وارد صفحه می‌شن مناسبه و ease-in برای چیزهایی که خارج می‌شن، و ورود و خروج نباید آینهٔ هم باشن. یه نکتهٔ مهم کارایی هم داره: انیمیشن روی opacity و transform روی GPU اجرا می‌شه و محاسبهٔ مجدد چیدمان رو راه نمی‌ندازه، ولی انیمیشن روی width یا height یا top مرورگر رو مجبور می‌کنه هر فریم چیدمان رو دوباره حساب کنه.

بخش‌های دسترس‌پذیری و کپی‌رایتینگ هم اصول مهمی رو جمع کردن: استاندارد WCAG و نسبت کنتراست ۴.۵ به ۱ برای متن، اهمیت focus state و اینکه حذفش یه نقص دسترس‌پذیریه، و اینکه رنگ به‌تنهایی نباید تنها سیگنال یه وضعیت باشه. توی کپی‌رایتینگ هم می‌گه placeholder جای label رو نمی‌گیره و پیام خطا باید دقیقاً بگه چی اشتباه بوده و چطور درستش کنیم.

نکات کلیدی:

• یه واژه‌نامهٔ منظم از زبان طراحی توی دوازده بخش، از تایپوگرافی تا تحلیل
• هر واژه یه تعریف کوتاه و عملی داره، نه توضیح آکادمیک
• خیلی از مفهوم‌ها مستقیم به CSS و رفتار مرورگر وصلن (overflow، sticky، GPU compositing)
• روی نکات کاربردی دست می‌ذاره: touch target ۴۴px، debounce ۳۰۰ms، کم کردن chroma به‌جای opacity
• برای پر کردن فاصلهٔ بین «یه‌جوریه» و گفتن دقیقِ مشکل خوبه