Merhaba, ben Ali Karabüyük. Web sitesi banner’ları, ziyaretçinin gördüğü ilk şey. Ama aynı zamanda sayfayı en çok yavaşlatan öğeler.

İyi bir banner tasarımı iki şeyi birden başarmak zorunda: dikkat çekmek ve hızlı yüklenmek. Bu ikisi çoğu zaman birbirinin zıddı.

Bu yazıda ölçülerden dosya optimizasyonuna kadar dengeyi nasıl kurduğumu anlatıyorum.

Web’de sabit ölçü diye bir şey yok; aynı banner farklı ekranlarda farklı genişlikte görünüyor.

Bu yüzden tek bir ölçü değil, bir ölçü stratejisi gerekiyor.

Tam genişlik banner’lar için 1920 piksel genişlik yeterli. Daha büyük ekranlarda tarayıcı görseli esnetiyor ama fark edilmiyor.

Yükseklik ise içeriğe bağlı. Ana sayfa hero alanları 600–800 piksel, iç sayfa başlıkları 300–400 piksel arasında iyi çalışıyor.

Web sitesi ekran genişliğine göre banner’ı kırpıyor. Genellikle kenarlardan kesiyor ve merkezi koruyor.

Tasarımı buna göre kurmak gerekiyor:

Bir başka yöntem de art direction: farklı ekran boyutları için farklı görseller sunmak. HTML’de picture etiketi bunu sağlıyor. Daha fazla iş ama sonuç çok daha kontrollü.

Banner üzerindeki yazı, fotoğrafın karmaşık bölgesine denk gelirse okunmuyor. Bu, en sık gördüğüm sorun.

Yarı saydam örtü yöntemi en güvenilir olanı. Fotoğrafın üzerine %30–40 opaklıkta koyu bir katman koymak, hangi fotoğraf gelirse gelsin yazının okunmasını garantiliyor.

Bu özellikle içerik yönetim sistemlerinde işe yarıyor; müşteri fotoğrafı değiştirse bile yazı okunur kalıyor.

Görseller, bir web sayfasının ağırlığının büyük kısmını oluşturuyor. Yavaş yüklenen sayfa hem ziyaretçiyi kaçırıyor hem arama sıralamasını etkiliyor.

Dördüncü madde ilginç bir teknik: keskin detaylar sıkıştırmayı zorlaştırıyor. Zemin fotoğrafına çok hafif bir bulanıklık uygulamak hem dosyayı küçültüyor hem de üstteki yazıyı okunaklı yapıyor.

Web siteniz için banner, hero görseli ve ürün görselleri hazırlıyorum. İhtiyacınızı anlatın, birlikte planlayalım.

0555 650 41 11

Hangi formatı seçeceğiniz, görselin içeriğine bağlı.

Logo ve ikon gibi öğeleri SVG olarak kullanmak hem dosyayı küçültüyor hem de her ekranda keskin görünmesini sağlıyor. Fotoğraf için ise SVG uygun değil.

Modern yaklaşım, WebP sunup eski tarayıcılar için JPEG yedeği bırakmak. Çoğu site altyapısı bunu otomatik yapıyor.

Teknik konular bir yana, banner’ın asıl işi mesaj vermek. Ziyaretçi ortalama birkaç saniye bakıyor.

Ziyaretçinin gözü genellikle sol üstten sağ alta doğru gidiyor. Başlığı sol tarafa, eylem düğmesini onun altına yerleştirmek bu doğal akışa uyuyor.

Slider (kayan banner) kullanıyorsanız dikkatli olun: araştırmalar ilk karo dışındakilerin neredeyse hiç görülmediğini gösteriyor. En önemli mesajı ilk banner’a koyun.

Banner tasarımında iki şeyi aynı anda dengelemek gerekiyor: görsel etki ve yükleme hızı.

Kritik öğeleri merkeze yakın tutun, yazının geleceği bölgeyi sadeleştirin, dosyayı 200 KB altına indirin ve tek bir net mesaj verin.

Tasarımı bitirdiğinizde tarayıcı penceresini daraltıp genişleterek test edin — responsive sorunlar orada ortaya çıkıyor.

Siteniz için %100 memnuniyet garantisi ile çalışıyorum:

0555 650 41 11