hamid zarghami
5.6 KiB
راهنمای طراحی بنرهای Banners4
📐 سایزهای دسکتاپ
Breakpoint 1: Desktop کوچک (1024px - 1279px)
Container با padding: 80px (40px هر طرف)
-
بنر 1 (Order 4) - بنر اصلی
- عرض: متغیر (فضاهای باقیمانده را پر میکند)
- ارتفاع: 340px
- نسبت تصویر: 1:2.94 (پیشنهاد: 1000×340px)
-
بنر 2 (Order 5) - بنر کوچک بالا
- عرض: 140px
- ارتفاع: 158px
- نسبت تصویر: 1:1.13 (پیشنهاد: 140×158px)
-
بنر 3 (Order 6) - بنر کوچک پایین
- عرض: 140px
- ارتفاع: 158px
- نسبت تصویر: 1:1.13 (پیشنهاد: 140×158px)
-
بنر 4 (Order 7) - بنر بزرگ سمت راست
- عرض: 280px
- ارتفاع: 400px
- نسبت تصویر: 1:1.43 (پیشنهاد: 280×400px)
Breakpoint 2: Desktop متوسط (1280px - 1535px)
Container با padding: 80px (40px هر طرف)
-
بنر 1 (Order 4) - بنر اصلی
- عرض: متغیر
- ارتفاع: 340px
- نسبت تصویر: 1:2.94 (پیشنهاد: 1200×340px)
-
بنر 2 (Order 5) - بنر کوچک بالا
- عرض: 180px
- ارتفاع: 158px
- نسبت تصویر: 1:0.88 (پیشنهاد: 180×158px)
-
بنر 3 (Order 6) - بنر کوچک پایین
- عرض: 180px
- ارتفاع: 158px
- نسبت تصویر: 1:0.88 (پیشنهاد: 180×158px)
-
بنر 4 (Order 7) - بنر بزرگ سمت راست
- عرض: 360px
- ارتفاع: 400px
- نسبت تصویر: 1:1.11 (پیشنهاد: 360×400px)
Breakpoint 3: Desktop بزرگ (1536px+)
Container با padding: 80px (40px هر طرف)
-
بنر 1 (Order 4) - بنر اصلی
- عرض: متغیر
- ارتفاع: 340px
- نسبت تصویر: 1:2.94 (پیشنهاد: 1400×340px)
-
بنر 2 (Order 5) - بنر کوچک بالا
- عرض: 220px
- ارتفاع: 158px
- نسبت تصویر: 1:0.72 (پیشنهاد: 220×158px)
-
بنر 3 (Order 6) - بنر کوچک پایین
- عرض: 220px
- ارتفاع: 158px
- نسبت تصویر: 1:0.72 (پیشنهاد: 220×158px)
-
بنر 4 (Order 7) - بنر بزرگ سمت راست
- عرض: 420px
- ارتفاع: 400px
- نسبت تصویر: 1:0.95 (پیشنهاد: 420×400px)
📱 سایزهای موبایل
در موبایل، چیدمان به صورت عمودی است (ستونی) و همه بنرها عرض کامل دارند:
-
بنر 1 (Order 4) - بنر اصلی
- عرض: 100% (کل عرض صفحه منهای padding)
- ارتفاع: 340px
- نسبت تصویر: 1:2.94
-
بنر 2 (Order 5) - بنر کوچک بالا
- عرض: 100%
- ارتفاع: 158px
- نسبت تصویر: متناسب با عرض صفحه
-
بنر 3 (Order 6) - بنر کوچک پایین
- عرض: 100%
- ارتفاع: 158px
- نسبت تصویر: متناسب با عرض صفحه
-
بنر 4 (Order 7) - بنر بزرگ سمت راست
- عرض: 100%
- ارتفاع: 400px
- نسبت تصویر: متناسب با عرض صفحه
📏 جزئیات فنی
فاصلهها (Gap)
- فاصله بین بنرها: 24px (در همه breakpoint ها)
زاویه گوشهها (Border Radius)
- همه بنرها: 10px
فرمت فایل
- فرمت: PNG یا JPG
- کیفیت: 72 DPI (برای وب)
- رزولوشن: طبق سایزهای ذکر شده
💡 توصیههای طراحی
برای طراح:
- بنر اصلی (Order 4): این بنر فضای بیشتری دارد، میتوانید متن و المانهای بیشتری در آن قرار دهید
- بنرهای کوچک (Order 5 و 6): فضای محدودی دارند، طراحی ساده و مینیمال پیشنهاد میشود
- بنر بزرگ (Order 7): میتوانید از این فضا برای نمایش محصولات یا تخفیفات ویژه استفاده کنید
نکات مهم:
- ✅ طراحی باید برای نمایش در RTL (راست به چپ) بهینه باشد
- ✅ تمام متنها و المانها باید در سمت راست قرار گیرند
- ✅ از فونتهای فارسی استفاده کنید (IRANSans)
- ✅ تصاویر باید با نسبتهای ذکر شده طراحی شوند
🎯 سایزهای پیشنهادی برای طراحی
برای راحتی بیشتر، میتوانید در فتوشاپ یا Figma با این سایزها کار کنید:
Desktop کوچک (1024px)
- بنر 1: 1000×340px
- بنر 2: 140×158px
- بنر 3: 140×158px
- بنر 4: 280×400px
Desktop متوسط (1280px)
- بنر 1: 1200×340px
- بنر 2: 180×158px
- بنر 3: 180×158px
- بنر 4: 360×400px
Desktop بزرگ (1536px+)
- بنر 1: 1400×340px
- بنر 2: 220×158px
- بنر 3: 220×158px
- بنر 4: 420×400px
Mobile
- همه بنرها: عرض 375px (برای موبایل استاندارد)
- بنر 1: 375×340px
- بنر 2: 375×158px
- بنر 3: 375×158px
- بنر 4: 375×400px
توجه: برای دسکتاپ، میتوانید با سایز بزرگترین breakpoint (Desktop بزرگ) طراحی کنید و بعد برای سایزهای کوچکتر مقیاس کنید. سیستم به صورت خودکار تصاویر را متناسب با سایز صفحه نمایش میدهد.