feat: add chapter 05-design-and-ux specs

chapters/05-design-and-ux/02-lesson-wireframing-and-visual-hierarchy/spec.md

@@ -0,0 +1,120 @@
+# مشخصات درس‌نامه: وایرفریم و سلسله‌مراتب بصری (Wireframing & Visual Hierarchy)
+- **شناسه در سیلابس:** `L5.3`
+- **فصل:** فصل ۵: طراحی تجربه و هویت محصول (Ch 5)
+- **نوع محتوا:** 📘 درس‌نامه متنی
+- **زمان تقریبی مطالعه:** ۱۲ دقیقه
+- **پیش‌نیازهای مستقیم:** `L5.2` (مبانی تجربه کاربری و جریان کاربر)
+
+---
+
+## ۱. اهداف یادگیری (Learning Objectives - Bloom's Taxonomy)
+دانشجو پس از مطالعهٔ این درس‌نامه باید بتواند:
+- [ ] **درک کند (Understand):** وایرفریم (Wireframe) چیست و چرا ترسیم اسکلت اولیه چیدمان پیش از درگیر شدن با رنگ‌ها و استایل‌های نهایی، جلوی اتلاف ده‌ها ساعت زمان را می‌گیرد.
+- [ ] **تحلیل/ارزیابی کند (Evaluate):** اصول سلسله‌مراتب بصری (Visual Hierarchy: مقیاس اندازه، وزن فونت، تضاد رنگ و الگوهای خوانش چشم نظیر الگوی Z و F) را در طراحی صفحات به کار گیرد.
+- [ ] **به‌کار ببندد (Apply):** وایرفریم بخش‌های اصلی پروژه محوری (صفحه اصلی پورتفولیو، مودال جزئیات، و داشبورد پنل ادمین و سئو) را با بلوک‌های چیدمانی شفاف طراحی کند.
+- [ ] **به‌کار ببندد (Apply):** تکنیک سریع «وایرفریم متنی / اسکی (ASCII Wireframe)» را برای انتقال دقیق ساختار چیدمان به ایجنت‌های هوش مصنوعی در پرامپت‌ها اجرا کند.
+
+---
+
+## ۲. محدوده و مرزهای محتوا (Scope & Boundaries)
+
+### آنچه باید پوشش داده شود (In-Scope):
+1. **وایرفریم چیست؟ اسکلت ساختمان قبل از نقاشی دیوارها:**
+   * وایرفریم طرحی سیاه‌وسفید و ساده از موقعیت المان‌ها، کادرها و دکمه‌ها بدون توجه به رنگ، عکس یا فونت است.
+   * چرا دادن وایرفریم به هوش مصنوعی مانع از به هم ریختگی چیدمان (Layout) می‌شود.
+2. **اصول حاکم بر سلسله‌مراتب بصری (Visual Hierarchy):**
+   * **اندازه و مقیاس (Size & Scale):** چشمان کاربر ابتدا بزرگ‌ترین عنصر (تیتر `<h1>`) را می‌بیند.
+   * **وزن و ضخامت (Weight):** کلمات بولد توجه بیشتری نسبت به کلمات معمولی جلب می‌کنند.
+   * **الگوهای خوانش چشم (F-Pattern و Z-Pattern):** چشم در صفحات پرمحتوا به شکل حرف F و در لندینگ‌پیج‌های خلوت به شکل حرف Z حرکت می‌کند.
+   * **لنگرگاه بصری (Visual Anchor):** عنصری شاخص (مانند تصویر چهره یا یک دکمه CTA درخشان) که نگاه را به خود قفل می‌کند.
+3. **طراحی اسکلت وایرفریم پروژه محوری (پورتفولیوی پویا):**
+   * **وایرفریم صفحه اصلی ویترین:**
+     * نوار ناوبری بالا (لوگو/نام در چپ یا راست، لینک‌ها، دکمه ارتباط).
+     * بخش هدر قهرمان (Hero Section): جایگاه آواتار/عکس، تیتر جذاب موقعیت شغلی، بیوگرافی کوتاه، دو دکمه عمل «مشاهده کارهای من» و «ارتباط».
+     * ردیف نمایش تگ‌های مهارت‌ها (Skills Bar).
+     * گرید کارت‌های پروژه‌ها (گرید ۳ ستونه در دسکتاپ و ۱ ستونه در موبایل).
+     * فوتر ساده همراه با لینک‌های شبکه‌های اجتماعی.
+   * **وایرفریم مودال جزئیات پروژه:**
+     * کادر نمایش تصویر اصلی با ابعاد ۱۶:۹، تایتل، برچسب تکنولوژی‌ها، دو پاراگراف شرح چالش و راه‌حل، و دکمه‌های «مشاهده دموی زنده» و «کدهای گیت‌هاب».
+   * **وایرفریم پنل مدیریت و تنظیمات سئو:**
+     * سایدبار یا تب‌های بالای صفحه (پروژه‌ها | سئو | خروج).
+     * تب پروژه‌ها: جدول/کارت‌های فعلی با دکمه ویرایش و حذف + دکمه شناور «افزودن پروژه جدید».
+     * تب تنظیمات سئو: فرم ورودی با فیلدهای عنوان متا، توضیحات، آدرس تصویر و کارت پیش‌نمایش در گوگل.
+4. **تکنیک جادویی وایرفریم متنی (ASCII/Text Wireframing) در پرامپت‌ها:**
+   * آموزش ترسیم چیدمان با کاراکترهای ساده در پرامپت:
+     ```text
+     +--------------------------------------------------+
+     | [Logo]                           [About] [Contact] |
+     +--------------------------------------------------+
+     |                    [Avatar]                      |
+     |              I build AI products                 |
+     |                 [View Work CTA]                  |
+     +--------------------------------------------------+
+     |  [Card 1]          [Card 2]          [Card 3]   |
+     +--------------------------------------------------+
+     ```
+   * چرا مدل‌های زبانی این ساختار متنی را با درک ۱۰۰٪ به کدهای Flexbox و Grid ترجمه می‌کنند.
+5. **کال‌اوت‌های Quera:**
+   * `<details class="violet">`: قدرت وایرفریم متنی در چت با ادیتور؛ سریع‌ترین متد هدایت چیدمان بدون نیاز به خروج از ویرایشگر کد.
+   * `<details class="red">`: تله «همه عناصر جیغ می‌زنند!»؛ وقتی رنگ و اندازه همه دکمه‌ها یکسان باشد، کاربر گیج می‌شود و هیچ‌کدام را کلیک نمی‌کند.
+
+### آنچه نباید وارد آن شویم (Out-of-Scope):
+- انتخاب کدهای رنگی هگز، گرادیان‌ها یا فونت‌ها (درس بعدی ۵.۴).
+- تعیین گرید پیکسلی دقیق و فاصله‌گذاری‌های مارجین و پدینگ (درس ۵.۵).
+
+---
+
+## ۳. مفاهیم کلیدی و کلمات تخصصی (Key Concepts & Terms)
+
+| اصطلاح انگلیسی | معادل فارسی مصوب | توضیح یک‌خطی ساده |
+| :--- | :--- | :--- |
+| Wireframe | وایرفریم / اسکلت بصری | نقشه اولیه چیدمان عناصر صفحه بدون جزئیات رنگی و گرافیکی |
+| Visual Hierarchy | سلسله‌مراتب بصری | ترتیب چیدمان عناصر برای هدایت چشم کاربر از مهم‌ترین به کم‌اهمیت‌ترین بخش |
+| Z-Pattern / F-Pattern | الگوی حرکت Z و F | مسیر طبیعی حرکت مردمک چشم انسان هنگام مرور صفحات وب |
+| Low-Fidelity (Low-Fi) | با جزئیات کم / اولیه | طرح‌های شماتیک و ساده‌ای که فقط ساختار کلی را منتقل می‌کنند |
+| ASCII Wireframe | وایرفریم متنی | ترسیم جعبه‌ها و ساختار صفحه با استفاده از نمادها و حروف کیبورد در پرامپت |
+
+---
+
+## ۴. جایگاه‌های تصاویر و نمودارها (Visual & Diagram Placeholders)
+> **راهنمای ایجنت نویسنده:** تمام تصاویر باید در پوشهٔ `images/` قرار گرفته و در قالب جدول تک‌خانه‌ای وسط‌چین با کپشن تفصیلی درج شوند:
+
+1. **تصویر کاور درس:** `images/cover.png`
+   * **موضوع:** کاور مدرن با تم تیره که اسکلت جعبه‌ای خاکستری یک وایرفریم را نشان می‌دهد که با نور نئونی به یک رابط کاربری کامل تبدیل می‌شود.
+2. **سیر تکامل سه‌مرحله‌ای از وایرفریم تا خروجی نهایی:** `images/wireframe-to-ui-evolution.png`
+   * **موضوع:** تصویر مقایسه‌ای سه گام: ۱. اسکلت وایرفریم اولیه (Boxes) $\rightarrow$ ۲. چیدمان ساختاریافته $\rightarrow$ ۳. رابط کاربری کامل با رنگ و تصویر.
+3. **نقشه الگوهای خوانش چشم (Z-Pattern و F-Pattern):** `images/eye-reading-patterns.png`
+   * **موضوع:** نمایش تصویری خط سیر نگاه کاربر روی یک صفحه لندینگ پورتفولیو با نقاط داغ (Heatmap) قرمز و زرد.
+4. **وایرفریم صفحه اصلی پورتفولیوی پویا:** `images/portfolio-homepage-wireframe.png`
+   * **موضوع:** اسکلت شماتیک و برچسب‌گذاری‌شده از بخش‌های ناوبری، هدر، گرید پروژه‌ها و فوتر.
+5. **وایرفریم پنل مدیریت و تنظیمات سئو:** `images/admin-panel-wireframe.png`
+   * **موضوع:** اسکلت داشبورد ادمین با سایدبار، کارت‌های پروژه‌ها و فرم تنظیمات سئو به همراه کارت پیش‌نمایش گوگل.
+
+---
+
+## ۵. بخش‌بندی و ساختار محتوایی پیشنهادی درس‌نامه (`README.md`)
+
+1. **تیتر اصلی:** `# وایرفریم و سلسله‌مراتب بصری: پی‌ریزی اسکلت قبل از نقاشی ساختمان`
+2. **مقدمه:** چرا ورود مستقیم به رنگ و عکس در هوش مصنوعی، کدهایی شلخته و چیدمانی آشفته به بار می‌آورد؟
+3. **جدول کاور درس**
+4. **وایرفریم (Wireframe) چیست و چه فایده‌ای دارد؟:** ارزش چیدمان ساختاری پیش از جزئیات.
+5. **سلسله‌مراتب بصری: چشم کاربر چگونه صفحه را می‌خواند؟:**
+   * مقیاس، وزن و کنتراست.
+   * الگوهای حرکتی Z و F در وب‌سایت‌ها.
+6. **کالبدشکافی وایرفریم پروژه پورتفولیوی پویا:**
+   * اسکلت صفحه اصلی ویترین.
+   * اسکلت پنجره مودال جزئیات کارها.
+   * اسکلت پیشخوان ادمین و فرم اختصاصی سئو.
+7. **باکس نکته پیشرفته Quera (`<details class="violet">`):** استفاده از وایرفریم‌های متنی (ASCII) در پرامپت‌ها.
+8. **اشتباهات مرگبار در سلسله‌مراتب بصری:**
+   * مسابقه جیغ زدن دکمه‌ها و سردرگمی نگاه کاربر.
+9. **باکس هشدار Quera (`<details class="red">`):** ایجاد یک نقطه فوکوس واحد در هر بخش از صفحه.
+10. **جمع‌بندی درس‌نامه:** تکمیل معماری چیدمان و آماده شدن برای انتخاب رنگ‌ها و تایپوگرافی دوزبانه.
+
+---
+
+## ۶. معیارهای پذیرش (Acceptance Criteria for Reviewer)
+- [ ] مفهوم وایرفریم و مزیت آن در پیشگیری از بازنویسی کدهای CSS تبیین شده باشد.
+- [ ] اصول سلسله‌مراتب بصری و الگوهای F و Z به درستی آموزش داده شوند.
+- [ ] وایرفریم‌های صفحه اصلی، مودال جزئیات، و پنل مدیریت و سئو برای پروژه محوری مستند گردند.
+- [ ] شیوه پرامپت‌نویسی با وایرفریم متنی (ASCII) در متن گنجانده شود.