پرش به مطلب اصلی

جهت‌گیری طراحی

مرحله جهت‌گیری طراحی به شما امکان می‌دهد تا قبل از اینکه Theme Builder کل قالب شما را تولید کند، طراحی بصری تم خود را بازبینی، اصلاح و نهایی کنید.

نمای کلی​

پس از تکمیل مصاحبه کشف (Discovery Interview)، Theme Builder جهت‌گیری طراحی شما را با نمایش پیش‌نمایش دسکتاپ و موبایل ارائه می‌دهد. این کار به شما امکان می‌دهد تا دقیقاً ببینید که طراحی شما قبل از نهایی کردن قالب، روی دستگاه‌های مختلف چگونه به نظر خواهد رسید.

اجزای جهت‌گیری طراحی​

۱. پالت رنگی​

طرح رنگی تم شما، شامل موارد زیر است:

  • رنگ اصلی (Primary color) — رنگ اصلی برند که برای دکمه‌ها، لینک‌ها و تأکیدات استفاده می‌شود.
  • رنگ ثانویه (Secondary color) — رنگ مکمل برای تنوع بخشیدن.
  • رنگ تأکیدی (Accent color) — رنگ برجسته برای عناصر مهم.
  • رنگ‌های خنثی (Neutral colors) — خاکستری و سفید برای پس‌زمینه و متن.
  • رنگ متن (Text color) — رنگ اصلی متن برای خوانایی.

۲. تایپوگرافی​

انتخاب فونت برای:

  • فونت عنوان (Heading font) — که برای عناوین صفحه و سربرگ‌های بخش استفاده می‌شود.
  • فونت متن اصلی (Body font) — که برای متن پاراگراف و محتوا استفاده می‌شود.
  • اندازه فونت (Font sizes) — اندازه‌بندی واکنش‌گرا برای اندازه‌های صفحه مختلف.
  • ارتفاع خط (Line height) — فاصله بین خطوط برای خوانایی بهتر.
  • وزن فونت (Font weights) — تغییرات بولد، معمولی و سبک.

۳. چیدمان و فاصله‌گذاری​

  • عرض کانتینر (Container width) — حداکثر عرض محتوا.
  • Padding و Margins — فاصله اطراف عناصر.
  • سیستم گرید (Grid system) — چیدمان ستونی برای طراحی واکنش‌گرا.
  • فاصله بین کامپوننت‌ها (Component spacing) — فاصله بین عناصر رابط کاربری (UI).

۴. عناصر بصری​

  • استایل دکمه‌ها (Button styles) — طرح‌های دکمه اصلی، ثانویه و ترتیری.
  • طراحی کارت‌ها (Card designs) — چیدمان‌ها برای بلوک‌های محتوا.
  • آیکون‌ها (Icons) — استایل و اندازه‌بندی آیکون.
  • حاشیه و سایه (Borders and shadows) — عمق بصری ظریف.
  • افکت‌های هاور (Hover effects) — استایل‌دهی حالت تعاملی.

نمایش پیش‌نمایش (Preview Rendering)​

پیش‌نمایش دسکتاپ​

پیش‌نمایش دسکتاپ، طراحی شما را در عرض کامل (معمولاً ۱۲۰۰ پیکسل یا بیشتر) نشان می‌دهد:

  • منوی ناوبری کامل
  • چیدمان کامل با تمام ستون‌ها
  • تایپوگرافی و فاصله‌گذاری بزرگ
  • تمام عناصر بصری در اندازه کامل

پیش‌نمایش موبایل​

پیش‌نمایش موبایل، طراحی شما را در عرض موبایل (معمولاً ۳۷۵ پیکسل) نشان می‌دهد:

  • ناوبری واکنش‌گرا (منوی همبرگری)
  • چیدمان تک ستونی
  • تایپوگرافی و فاصله‌گذاری تنظیم شده
  • اندازه‌های دکمه مناسب لمس

نقاط شکست واکنش‌گرا (Responsive Breakpoints)​

Theme Builder پیش‌نمایش‌ها را در این نقاط شکست رندر می‌کند:

دستگاهعرضپیش‌نمایش
موبایل۳۷۵pxگوشی عمودی
تبلت۷۶۸pxتبلت افقی
دسکتاپ۱۲۰۰pxدسکتاپ تمام عرض
دسکتاپ بزرگ۱۹۲۰pxنمایشگر فوق عریض

اصلاح طراحی شما​

اعمال تغییرات​

شما می‌توانید جهت‌گیری طراحی خود را با انجام موارد زیر اصلاح کنید:

۱. تنظیم رنگ‌ها — هر رنگی را در پالت تغییر دهید. ۲. تغییر فونت‌ها — تایپوگرافی‌های متفاوتی انتخاب کنید. ۳. اصلاح فاصله‌گذاری — Padding و Margins را تنظیم کنید. ۴. به‌روزرسانی چیدمان — عرض کانتینرها و ستون‌های گرید را تغییر دهید. ۵. سفارشی‌سازی عناصر — استایل دکمه‌ها، طراحی کارت‌ها و غیره را تغییر دهید.

به‌روزرسانی پیش‌نمایش​

تغییرات به صورت بلادرنگ منعکس می‌شوند:

  • پیش‌نمایش دسکتاپ بلافاصله به‌روز می‌شود.
  • پیش‌نمایش موبایل بلافاصله به‌روز می‌شود.
  • تمام نقاط شکست واکنش‌گرا به‌روز می‌شوند.
  • می‌توانید بین پیش‌نمایش‌ها جابجا شوید تا تغییرات را تأیید کنید.

نمای مقایسه​

جهت‌گیری طراحی خود را با موارد زیر مقایسه کنید:

  • طراحی اصلی (Original design) — ببینید چه چیزی تغییر کرده است.
  • طراحی رقبا (Competitor designs) — مقایسه با سایت‌های الهام‌بخش.
  • نسخه‌های قبلی (Previous versions) — بازگشت به جهت‌گیری‌های طراحی قبلی.

تأیید جهت‌گیری طراحی​

هنگامی که از طراحی خود راضی بودید:

۱. هر دو پیش‌نمایش را بررسی کنید — مطمئن شوید که ظاهر دسکتاپ و موبایل خوب است. ۲. تمام رنگ‌ها را چک کنید — اطمینان حاصل کنید که کنتراست و دسترسی‌پذیری کافی است. ۳. تایپوگرافی را تست کنید — خوانایی را در تمام اندازه‌ها تأیید کنید. ۴. چیدمان را تأیید کنید — فاصله و تراز بودن را بررسی کنید. ۵. طراحی را تأیید کنید — برای تولید تم پیش بروید.

مراحل بعدی​

پس از تأیید جهت‌گیری طراحی:

۱. Theme Builder تم کامل شما را تولید می‌کند. ۲. تم روی سایت WordPress شما نصب می‌شود. ۳. می‌توانید با استفاده از Customizer وردپرس بیشتر سفارشی‌سازی کنید. ۴. به Hospitality Menus یا سایر ویژگی‌ها بروید.

بهترین شیوه‌ها​

  • تست روی دستگاه‌های واقعی — در صورت امکان از گوشی‌ها و تبلت‌های واقعی استفاده کنید.
  • بررسی خوانایی — مطمئن شوید که متن در تمام اندازه‌ها قابل خواندن است.
  • تأیید کنتراست — برای دسترسی‌پذیری از Validate Palette Contrast استفاده کنید.
  • توجه به عملکرد (Performance) — تصاویر و فونت‌ها را برای سرعت بهینه کنید.
  • برنامه‌ریزی برای محتوا — مطمئن شوید که چیدمان با محتوای واقعی شما کار می‌کند.

عیب‌یابی​

پیش‌نمایش به‌روز نمی‌شود​

  • صفحه را رفرش کنید.
  • کش مرورگر را پاک کنید.
  • یک مرورگر متفاوت امتحان کنید.
  • اتصال اینترنت را بررسی کنید.

رنگ‌ها متفاوت به نظر می‌رسند​

  • تنظیمات رنگ مانیتور را چک کنید.
  • روی دستگاه‌های مختلف امتحان کنید.
  • کنتراست رنگ را با ابزارهای دسترسی‌پذیری تأیید کنید.
  • شبیه‌ساز رنگ کور بودن را در نظر بگیرید.

مشکلات تایپوگرافی​

  • تأیید کنید که فایل‌های فونت بارگذاری می‌شوند.
  • اندازه فونت را در نقاط شکست مختلف چک کنید.
  • با محتوای واقعی تست کنید.
  • برای خوانایی، طول خط را در نظر بگیرید.

مستندات مرتبط​