TEMA VE TASARIM
Renk ve Logo Ayarları
Markanıza uygun görünümü oluşturun
5 dakika
Dokümantasyon
Markanızı Yansıtan Görünüm Oluşturun
Logo, renkler ve tipografi markanızın dijital kimliğini oluşturur. Bu temel öğeleri doğru yapılandırarak tutarlı ve profesyonel bir görünüm elde edin.
Marka kimliği tutarlılığı müşteri güvenini artırır. Tüm platformlarda aynı logo, renkler ve yazı tiplerini kullanın.
1
Logo Yükleme ve Ayarlama
Profesyonel görünüm için kaliteli logo dosyalarını hazırlayın ve yükleyin:
Logo Dosya Formatları
Ana Logo
- PNG formatı (şeffaf arka plan)
- Minimum boyut: 300x100 px
- Maksimum dosya boyutu: 500 KB
- Yüksek çözünürlük (Retina ready)
Favicon
- ICO veya PNG formatı
- 32x32 px boyut
- Maksimum dosya boyutu: 50 KB
- Basit ve tanınabilir tasarım
Logo Yükleme Süreci
- Mağaza paneli > Tasarım > Marka Ayarları'na gidin
- 'Logo Yükle' butonuna tıklayın
- Ana logo ve favicon dosyalarını seçin
- Logo boyutunu ve konumunu ayarlayın
Logo Konumlandırma
Logo Yerleşim Seçenekleri
Logo Konumları:
├── Sol Üst (Varsayılan)
│ ├── Header başlangıcında
│ ├── Menü ile aynı hizada
│ └── Mobilde merkez
├── Merkez
│ ├── Header ortasında
│ ├── Menü üstünde/altında
│ └── Büyük logo desteği
└── Özel Konum
├── CSS ile özelleştirilebilir
├── Esnek boyutlandırma
└── Responsive ayarlarLogo Optimizasyonu
En İyi Uygulamalar
- SVG format kullanın (mümkünse)
- Farklı arka plan renklerinde test edin
- Mobil cihazlarda okunabilirliği kontrol edin
- Yükleme hızını optimize edin
2
Renk Paletini Oluşturun
Markanızın renk kimliğini yansıtan tutarlı bir renk paleti oluşturun:
Ana Renk Kategorileri
Primary
Ana marka rengi
- Logodaki ana renk
- CTA butonları
- Linkler
- Vurgular
Secondary
Destekleyici renk
- İkincil butonlar
- Hover efektleri
- Akcentler
- Dekorasyonlar
Neutral
Arka plan ve metinler
- Arka plan renkleri
- Metin renkleri
- Kenarlıklar
- Gölgeler
System
Sistem mesajları
- Başarı (Yeşil)
- Uyarı (Sarı)
- Hata (Kırmızı)
- Bilgi (Mavi)
Renk Seçimi Rehberi
Renk Paleti Örneği
Marka: Teknoloji E-ticaret
Primary Renk: #2563EB (Mavi)
├── Light: #DBEAFE
├── Default: #2563EB
├── Dark: #1D4ED8
└── Darker: #1E3A8A
Secondary Renk: #7C3AED (Mor)
├── Light: #EDE9FE
├── Default: #7C3AED
├── Dark: #6D28D9
└── Darker: #581C87
Neutral Griler:
├── #F9FAFB (Açık arka plan)
├── #F3F4F6 (Kartlar)
├── #E5E7EB (Kenarlıklar)
├── #6B7280 (İkincil metin)
└── #111827 (Ana metin)Renk Erişilebilirliği
⚠️ Kontrast Kontrolü
Metin okunabilirliği için kontrast oranlarını kontrol edin:
- AA Standardı: En az 4.5:1 kontrast oranı
- AAA Standardı: En az 7:1 kontrast oranı
- Büyük metinler: En az 3:1 oranı
- WebAIM Contrast Checker kullanın
3
Tipografi Ayarlarını Yapın
Okunabilir ve markanıza uygun font seçimleri yapın:
Font Kategorileri
Google Fonts
- 600+ ücretsiz font
- Web optimized
- Çoklu dil desteği
- Hızlı yükleme
Popüler Seçenekler:
- • Inter (Modern, okunabilir)
- • Poppins (Friendly, professional)
- • Roboto (Clean, versatile)
- • Open Sans (Classic, safe)
Premium Fonts
- Benzersiz tasarım
- Lisanslı kullanım
- Geniş karakter seti
- Professional görünüm
Kaynak Platformlar:
- • Adobe Fonts
- • MyFonts
- • Font Squirrel
- • Fontspring
Font Hiyerarşisi
Tipografi Sistemi
Font Kullanım Alanları:
Heading Font (Başlıklar):
├── H1: 36px, Bold - Ana başlıklar
├── H2: 30px, Semibold - Bölüm başlıkları
├── H3: 24px, Semibold - Alt başlıklar
└── H4: 20px, Medium - Küçük başlıklar
Body Font (İçerik):
├── Large: 18px, Regular - Ana içerik
├── Base: 16px, Regular - Standart metin
├── Small: 14px, Regular - Açıklamalar
└── Tiny: 12px, Regular - Footer, notlar
Özel Kullanımlar:
├── Button Text: 16px, Semibold
├── Navigation: 16px, Medium
├── Price: 20px, Bold
└── Caption: 13px, RegularFont Performansı
Çok fazla font kullanımı sayfa yükleme hızını olumsuz etkiler. İdeal olarak 2-3 font ailesini 4-5 ağırlıkla sınırlayın.
4
Buton ve UI Elemanları
Kullanıcı arayüzü elemanlarının tutarlı görünümünü sağlayın:
Buton Stilleri
Primary
Sepete Ekle
- Ana aksiyonlar
- Marka rengi
- Belirgin görünüm
Secondary
Favorilere Ekle
- İkincil aksiyonlar
- Outline stil
- Daha az dikkat çekici
Tertiary
İptal
- Nötr aksiyonlar
- Gri tonlar
- Minimum vurgu
Form Elemanları
Input Field Stilleri
Input Özellikleri:
├── Border: 1px solid #E5E7EB
├── Border Radius: 8px
├── Padding: 12px 16px
├── Font Size: 16px
├── Background: #FFFFFF
└── Focus Border: Primary Color
State Renkleri:
├── Default: #E5E7EB
├── Hover: #D1D5DB
├── Focus: Primary Color
├── Error: #EF4444
└── Success: #10B981
Placeholder:
├── Color: #9CA3AF
├── Font Style: Regular
└── Opacity: 0.7Hover ve Animasyonlar
Etkileşim Efektleri
- Hover: 0.3s yumuşak geçiş
- Scale: 1.05 büyütme
- Shadow: Derinlik efekti
- Color: Renk değişimi
5
Responsive Tasarım Ayarları
Tüm cihazlarda tutarlı görünüm sağlayın:
Breakpoint Sistemi
Responsive Kırılma Noktaları
Cihaz Boyutları:
├── Mobile: 0px - 768px
│ ├── Logo: Küçük boyut, merkez
│ ├── Menü: Hamburger menü
│ ├── Font: Küçük boyutlar
│ └── Buton: Tam genişlik
├── Tablet: 768px - 1024px
│ ├── Logo: Orta boyut
│ ├── Menü: Hybrid yaklaşım
│ ├── Font: Orta boyutlar
│ └── Buton: Esnek boyut
└── Desktop: 1024px+
├── Logo: Tam boyut
├── Menü: Horizontal
├── Font: Büyük boyutlar
└── Buton: Optimum boyutMobil Optimizasyon
- Touch target minimum 44px
- Kolay erişim menü sistemi
- Hızlı yükleme için optimizasyon
- Thumb-friendly navigation
6
Canlı Önizleme ve Test
Yaptığınız değişiklikleri canlı olarak test edin:
Test Kontrolleri
- Farklı sayfalarda görünüm kontrolü
- Mobil cihazlarda test
- Tarayıcı uyumluluğu
- Yükleme hızı ölçümü
A/B Test Önerileri
Test Edilecek Elementler
- Farklı buton renkleri
- Logo boyut ve konumları
- Font boyutları
- Renk kombinasyonları
Marka Tutarlılığı İpuçları
Style Guide Oluşturun
- Tüm renk kodlarını belgeleyin
- Font kullanım kuralları belirleyin
- Logo kullanım kılavuzu hazırlayın
- Sosyal medya için template'ler oluşturun
- E-posta imza standardı belirleyin
Yaygın Tasarım Hataları
❌ Kaçınılacaklar
- • Çok fazla farklı renk kullanma
- • Düşük kontrast oranları
- • Tutarsız font boyutları
- • Pikselleşmiş logolar
✅ Yapılacaklar
- • Tutarlı renk paleti
- • Yüksek kalite görseller
- • Okunabilir font boyutları
- • Responsive tasarım