hamid zarghami
169 lines
5.6 KiB
Markdown
169 lines
5.6 KiB
Markdown
# راهنمای طراحی بنرهای 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** (برای وب)
|
||
- رزولوشن: طبق سایزهای ذکر شده
|
||
|
||
---
|
||
|
||
## 💡 توصیههای طراحی
|
||
|
||
### برای طراح:
|
||
1. **بنر اصلی (Order 4)**: این بنر فضای بیشتری دارد، میتوانید متن و المانهای بیشتری در آن قرار دهید
|
||
2. **بنرهای کوچک (Order 5 و 6)**: فضای محدودی دارند، طراحی ساده و مینیمال پیشنهاد میشود
|
||
3. **بنر بزرگ (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 بزرگ) طراحی کنید و بعد برای سایزهای کوچکتر مقیاس کنید. سیستم به صورت خودکار تصاویر را متناسب با سایز صفحه نمایش میدهد.
|
||
|