Estyle Fashion - Ana Sayfa Banner Tasarımı Raporu

🎯 Görev Özeti

Müşteri: Estyle Fashion Proje: WooCommerce Ana Sayfa Hero Banner Tasarımı Uzman: Sude K. — Görsel Tasarım / Banner / UI

---

📋 Tasarım Süreci

1. Marka Analizi & Konsept Belirleme

Estyle Fashion için banner tasarımında aşağıdaki değerleri esas aldım:

---

2. Tasarım Spesifikasyonları

📐 Teknik Detaylar

Banner Boyutları (WooCommerce Uyumlu):
├── Desktop  → 1920 × 800 px
├── Tablet   → 1024 × 600 px
└── Mobile   → 768 × 500 px

Format     : WebP (primary) + JPG (fallback)
Çözünürlük : 72 DPI (web optimize)
Max Dosya  : Desktop < 300KB | Mobile < 120KB

🎨 Renk Paleti

Estyle Fashion — Brand Colors
┌─────────────────────────────────────┐
│  ██████  Primary Black  → #1A1A1A   │
│  ██████  Warm White     → #F8F5F0   │
│  ██████  Gold Accent    → #C9A96E   │
│  ██████  Soft Nude      → #E8D5C4   │
│  ██████  Deep Charcoal  → #2D2D2D   │
└─────────────────────────────────────┘

✍️ Tipografi

Başlık (H1) : Playfair Display — Bold, 72px
Alt Başlık  : Montserrat — Light, 18px, Letter-spacing: 4px
CTA Butonu  : Montserrat — SemiBold, 14px, Uppercase

---

3. Banner Layout Tasarımı

🖥️ Desktop Banner — Wireframe

┌──────────────────────────────────────────────────────────────┐
│                                                              │
│   ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  │
│   ░                                                      ░  │
│   ░   [LOGO]              NAV MENU          🛒 SEARCH    ░  │
│   ░                                                      ░  │
│   ░──────────────────────────────────────────────────────░  │
│   ░                          │                           ░  │
│   ░   ┌─────────────────┐    │    ╔══════════════════╗   ░  │
│   ░   │                 │    │    ║  NEW COLLECTION   ║   ░  │
│   ░   │   [ÜRÜN / MODEL │    │    ║   S/S 2025        ║   ░  │
│   ░   │    FOTOĞRAFI]   │    │    ╠══════════════════╣   ░  │
│   ░   │                 │    │    ║                   ║   ░  │
│   ░   │   Sağ tarafta   │    │    ║  Define Your      ║   ░  │
│   ░   │   model görseli │    │    ║  Style.           ║   ░  │
│   ░   │   tam ekran     │    │    ║                   ║   ░  │
│   ░   │   kaplama       │    │    ║  Her parça bir    ║   ░  │
│   ░   │                 │    │    ║  ifade biçimi.    ║   ░  │
│   ░   │                 │    │    ║                   ║   ░  │
│   ░   └─────────────────┘    │    ║  [KOLEKS. KEŞFEt] ║   ░  │
│   ░                          │    ║  ──────────────── ║   ░  │
│   ░                          │    ║  [YENİ GELENLER]  ║   ░  │
│   ░                          │    ╚══════════════════╝   ░  │
│   ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  │
└──────────────────────────────────────────────────────────────┘

📱 Mobile Banner — Wireframe

┌─────────────────────┐
│  [LOGO]        ☰   │
├─────────────────────┤
│                     │
│  ┌───────────────┐  │
│  │               │  │
│  │  [MODEL IMG]  │  │
│  │               │  │
│  │  NEW COLLECT. │  │
│  │  S/S 2025     │  │
│  └───────────────┘  │
│                     │
│   Define Your       │
│   Style.            │
│                     │
│  ┌───────────────┐  │
│  │ KOLEKSİYONU   │  │
│  │   KEŞFEDİN    │  │
│  └───────────────┘  │
│                     │
└─────────────────────┘

---

4. Tasarım Varyantları

🅰️ Varyant A — "Split Screen" (Önerilen)

Sol %60 → Model / Ürün Fotoğrafı (koyu overlay ile)
Sağ %40 → Metin + CTA (krem/bej zemin)

Özellik: Klasik, editorial his verir.
         Moda dergisi estetiği.

🅱️ Varyant B — "Full Bleed"

Tam ekran fotoğraf (dark overlay %40)
Metin: Sol alt köşe, altın rengi vurgu
CTA: Şeffaf border (ghost button)

Özellik: Dramatik, lüks his.
         Etkileyici ilk izlenim.

🅲️ Varyant C — "Minimalist Editorial"

Beyaz / krem zemin
Büyük tipografi (sol hizalı)
Küçük ürün karesi (sağ)
İnce gold line separator

Özellik: Temiz, premium, typographic odak.

---

5. Metin Kopyası (Copywriting)

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
BANNER KOPYASİ — TÜRKÇE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Üst Tag    : YENİ KOLEKSİYON • İLKBAHAR / YAZ 2025

Başlık     : Define Your
             Style.

Alt Metin  : Her parça bir ifade biçimi.
             Senin tarzın, senin kuralların.

CTA 1      : [KOLEKSİYONU KEŞFEDİN →]
CTA 2      : [YENİ GELENLER]

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
BANNER KOPYASİ — İNGİLİZCE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Üst Tag    : NEW COLLECTION • SPRING / SUMMER 2025

Başlık     : Define Your
             Style.

Alt Metin  : Fashion is not just clothing.
             It's the art of being you.

CTA 1      : [EXPLORE COLLECTION →]
CTA 2      : [NEW ARRIVALS]

---

6. WooCommerce Entegrasyon Notları

⚙️ Teknik Uygulama Rehberi

WooCommerce Uyumlu Slider Önerileri:
┌────────────────────────────────────┐
│ ✅ Revolution Slider (Revslider)   │
│ ✅ Smart Slider 3                  │
│ ✅ MetaSlider                      │
│ ✅ Elementor Hero Section          │
└────────────────────────────────────┘

CSS Snippet — CTA Buton Stili:

/* Estyle Fashion — CTA Button */
.estyle-cta-primary {
  background-color: #1A1A1A;
  color: #F8F5F0;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 16px 40px;
  border: 2px solid #1A1A1A;
  transition: all 0.3s ease;
  cursor: pointer;
}

.estyle-cta-primary:hover {
  background-color: transparent;
  color: #1A1A1A;
}

.estyle-cta-secondary {
  background-color: transparent;
  color: #1A1A1A;
  border-bottom: 1px solid #C9A96E;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding-bottom: 4px;
}

/* Banner Gold Accent Line */
.estyle-banner-accent {
  width: 60px;
  height: 2px;
  background-color: #C9A96E;
  margin: 20px 0;
}

/* Responsive Banner */
.estyle-hero-banner {
  height: 800px;
  position: relative;
  overflow: hidden;
}

@media (max-width: 1024px) {
  .estyle-hero-banner { height: 600px; }
}

@media (max-width: 768px) {
  .estyle-hero-banner { height: auto; }
}

---

7. Fotoğraf Yönlendirmesi

📸 FOTOĞRAF ÇEKİM BRİEFİ

Genel Ton    : Natural light, editorial moodboard
Arka Plan    : Nötr — bej, krem, gri tonları
Model Pozu   : Confident, minimal hareket
              Yüze odaklanmadan, ürün ön planda
Renk Uyumu   : Sıcak tonlar (nude, camel, ivory)
Kaçınılacak  : Parlak renkler, karışık arka plan,
              fazla aksesuar

Stok Fotoğraf Kaynakları (Ücretsiz):
→ Unsplash.com/s/photos/fashion
→ Pexels.com/search/fashion
→ Burst.shopify.com

---

✅ Teslim Listesi

TASARIM ÇIKTILARI:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 ☑  Desktop Banner (1920×800)
    ↳ Varyant A, B, C
 ☑  Tablet Banner (1024×600)
 ☑  Mobile Banner (768×500)
 ☑  CTA Buton Tasarımı
 ☑  Font & Renk Kılavuzu
 ☑  CSS Kodları
 ☑  Metin Kopyası (TR + EN)
 ☑  WooCommerce Entegrasyon Notu
 ☑  Fotoğraf Brief

---

📌 Önerilen Sonraki Adımlar

---

💡 Öneri: Varyant A (Split Screen) ile başlamak, marka kimliğini en güçlü şekilde yansıtacaktır. İlk lansmanın ardından A/B testi ile Varyant B'nin dönüşüm performansı karşılaştırılabilir.

---

Rapor Tarihi: Haziran 2025 | Sude K. — Görsel Tasarım / Banner / UI Uzmanı