Ana içeriğe geç

Tasarım Yönü

Tasarım Yönü adımı, Tema Oluşturucu'nun (Theme Builder) tüm temayı oluşturmasından önce temanızın görsel tasarımını gözden geçirmenize, iyileştirmenize ve son haline getirmenize olanak tanır.

Genel Bakış​

Keşif Görüşmesi'ni (Discovery Interview) tamamladıktan sonra, Tema Oluşturucu tasarım yönünüzü masaüstü ve mobil önizleme gösterimi ile sunar. Bu, temaya bağlı kalmadan, tasarımınızın farklı cihazlarda tam olarak nasıl görüneceğini görmenizi sağlar.

Tasarım Yönü Bileşenleri​

1. Renk Paleti​

Temanızın renk şeması şunları içerir:

  • Ana renk (Primary color) — düğmeler, bağlantılar ve vurgular için kullanılan ana marka rengi
  • İkincil renk (Secondary color) — çeşitlilik için tamamlayıcı renk
  • Vurgu rengi (Accent color) — önemli öğeler için dikkat çekici renk
  • Nötr renkler (Neutral colors) — arka planlar ve metinler için gri ve beyazlar
  • Metin rengi (Text color) — okunabilirlik için ana metin rengi

2. Tipografi​

Şunlar için yazı tipi seçimleri:

  • Başlık yazı tipi (Heading font) — sayfa başlıkları ve bölüm başlıkları için kullanılır
  • Gövde yazı tipi (Body font) — paragraf metinleri ve içerik için kullanılır
  • Yazı boyutları (Font sizes) — farklı ekran boyutları için duyarlı boyutlandırma
  • Satır aralığı (Line height) — okunabilirlik için satırlar arasındaki boşluk
  • Yazı ağırlıkları (Font weights) — kalın, normal ve açık varyasyonlar

3. Düzen ve Boşluk (Layout and Spacing)​

  • Kapsayıcı genişliği (Container width) — içerik için maksimum genişlik
  • İç dolgu ve dış boşluklar (Padding and margins) — öğeler etrafındaki boşluk
  • Izgara sistemi (Grid system) — duyarlı tasarım için sütun düzeni
  • Bileşen boşluğu (Component spacing) — kullanıcı arayüzü öğeleri arasındaki mesafe

4. Görsel Öğeler​

  • Düğme stilleri (Button styles) — ana, ikincil ve üçüncül düğme tasarımları
  • Kart tasarımları (Card designs) — içerik blokları için düzenler
  • İkonlar (Icons) — ikon stili ve boyutlandırma
  • Kenarlıklar ve gölgeler (Borders and shadows) — zarif görsel derinlik
  • Üzerine gelme efektleri (Hover effects) — etkileşimli durum stillendirmesi

Önizleme Gösterimi (Preview Rendering)​

Masaüstü Önizlemesi​

Masaüstü önizlemesi, tasarımınızı tam genişlikte (genellikle 1200 piksel veya daha geniş) gösterir:

  • Tam navigasyon menüsü
  • Tüm sütunlarla birlikte eksiksiz düzen
  • Büyük tipografi ve boşluklar
  • Tüm görsel öğeler tam boyutta

Mobil Önizlemesi​

Mobil önizlemesi, tasarımınızı mobil genişlikte (genellikle 375 piksel) gösterir:

  • Duyarlı navigasyon (hamburger menü)
  • Tek sütunlu düzen
  • Ayarlanmış tipografi ve boşluklar
  • Dokunmaya uygun düğme boyutları

Duyarlı Ekran Boyutları (Responsive Breakpoints)​

Tema Oluşturucu, önizlemeleri bu noktalarda oluşturur:

CihazGenişlikÖnizleme
Mobil375pxPortre telefon
Tablet768pxManzara tablet
Masaüstü1200pxTam genişlik masaüstü
Büyük Masaüstü1920pxUltra geniş ekran

Tasarımınızı İyileştirme​

Ayarlamalar Yapmak​

Tasarım yönünüzü aşağıdaki yollarla iyileştirebilirsiniz:

  1. Renkleri ayarlama — paletinizdeki herhangi bir rengi değiştirebilirsiniz
  2. Yazıları değiştirme — farklı yazı tipleri seçebilirsiniz
  3. Boşluğu değiştirme — iç dolgu ve dış boşlukları ayarlayabilirsiniz
  4. Düzeni güncelleme — kapsayıcı genişliklerini ve ızgara sütunlarını değiştirebilirsiniz
  5. Öğeleri özelleştirme — düğme stilleri, kart tasarımları vb. düzenleyebilirsiniz

Önizleme Güncellemeleri​

Değişiklikler gerçek zamanlı olarak yansır:

  • Masaüstü önizlemesi anında güncellenir
  • Mobil önizlemesi anında güncellenir
  • Tüm duyarlı ekran boyutları güncellenir
  • Değişiklikleri doğrulamak için önizlemeler arasında geçiş yapabilirsiniz

Karşılaştırma Görünümü​

Tasarım yönünüzü şunlarla karşılaştırın:

  • Orijinal tasarım — neyin değiştiğini görmek için
  • Rakip tasarımlar — ilham aldığınız sitelerle karşılaştırmak için
  • Önceki versiyonlar — daha önceki tasarım yönlerine geri dönmek için

Tasarım Yönü Onayı​

Tasarımınızdan memnun kaldığınızda:

  1. Her iki önizlemeyi de gözden geçirin — masaüstü ve mobil görünümün iyi olduğundan emin olun
  2. Tüm renkleri kontrol edin — kontrast ve erişilebilirliği sağlayın
  3. Tipografiyi test edin — tüm boyutlarda okunabilirliği doğrulayın
  4. Düzeni onaylayın — boşlukları ve hizalamayı kontrol edin
  5. Tasarımı onaylayın — tema oluşturma işlemine devam edin

Sonraki Adımlar​

Tasarım yönünüzü onayladıktan sonra:

  1. Tema Oluşturucu, eksiksiz temanızı oluşturur
  2. Tema, WordPress sitenize kurulur
  3. WordPress özelleştirici'yi kullanarak daha fazla özelleştirme yapabilirsiniz
  4. Hospitality Menus veya diğer özelliklere geçin

En İyi Uygulamalar​

  • Gerçek cihazlarda test edin — mümkünse gerçek telefonlar ve tabletler kullanın
  • Okunabilirliği kontrol edin — metnin tüm boyutlarda okunabilir olduğundan emin olun
  • Kontrastı doğrulayın — erişilebilirlik için Validate Palette Contrast kullanın
  • Performansı düşünün — hız için görselleri ve yazı tiplerini optimize edin
  • İçeriği planlayın — düzenin gerçek içeriğinizle çalıştığından emin olun

Sorun Giderme​

Önizleme Güncellenmiyor​

  • Sayfayı yenileyin
  • Tarayıcı önbelleğini temizleyin
  • Farklı bir tarayıcı deneyin
  • İnternet bağlantınızı kontrol edin

Renkler Farklı Görünüyor​

  • Monitör renk ayarlarını kontrol edin
  • Farklı cihazlarda deneyin
  • Renk kontrastını erişilebilirlik araçlarıyla doğrulayın
  • Renk körlüğü simülatörlerini düşünün

Tipografi Sorunları​

  • Yazı tipi dosyalarının yüklendiğini doğrulayın
  • Farklı ekran boyutlarında yazı boyutunu kontrol edin
  • Gerçek içerikle test edin
  • Okunabilirlik için satır uzunluğunu düşünün

İlgili Dokümantasyon​