Above the fold nedir? İlk Ekran Tasarımının Dönüşüme Etkisi

Above the fold, bir web sayfasına girildiğinde kullanıcının scroll yapmadan gördüğü ekran alanının tamamını ifade eder. Gazetecilikten gelen bu kavram — gazetenin katlama çizgisinin üstündeki alan — dijitalde ilk görünen ekranı tanımlar.

Ziyaretçiler bir sayfaya geldiklerinde ortalama 3–5 saniye içinde "burada kalacak mıyım?" kararını verir. Bu karar, büyük ölçüde above the fold alanında gördüklerine dayanır. Sayfanın geri kalanı ne kadar iyi olursa olsun, bu ilk izlenimi kötüyse bounce rate yüksek kalır.

⠀

Above the Fold'da Mutlaka Bulunması Gerekenler

⠀

Net bir başlık (value proposition):

Ziyaretçi "bu site ne sunuyor ve benim için ne yapabilir?" sorusuna 3 saniyede cevap bulabilmelidir. Belirsiz veya jenerik başlıklar — "Çözümleriniz için buradayız" gibi — bu soruyu yanıtlamaz.

Birincil CTA (call to action) butonu:

Kullanıcının yapmasını istediğiniz en önemli eylem above the fold'da görünür olmalı. Teklif alın, ücretsiz deneyin, bize ulaşın — ne ise ekranda ilk görülen yerde yer almalı.

Görsel destek:

Bir ürün fotoğrafı, hizmet görseli veya ekran görüntüsü mesajı güçlendirir. Soyut illüstrasyonlar veya genel stok fotoğraflar değer katmaz.

Navigasyon:

Menü above the fold'da olmalı ama tasarıma hakim olmamalı. Sade, temiz bir header kullanıcıyı yönlendirmeli.

⠀

Mobilde Above the Fold Farklıdır

⠀

⠀

⠀

Masaüstünde above the fold yaklaşık 768px yükseklikte bir alanı kapsar. Mobilde bu alan çok daha kısadır — genellikle 500–600px. Büyük kapak görselleri, uzun başlıklar veya yoğun navigasyon bu alanı doldurur ve asıl mesajı görünmez kılar.

Mobil above the fold için:

• Büyük hero görsellerini küçültün veya kaldırın
• Başlık kısa ve öz olmalı
• CTA butonu parmaklarla kolayca tıklanabilir boyutta olmalı (min. 44px yükseklik)
• Sticky header kullanıyorsanız içerik alanından yer çalmadığından emin olun

⠀

Türkiye'de mobil trafik oranı masaüstünü geçmiş durumda. Above the fold tasarımını önce mobil için tasarlayıp masaüstüne uyarlamak — mobile-first yaklaşım — daha doğru bir sıralama.

⠀

Yaygın Above the Fold Hataları

⠀

⠀

⠀

Büyük, anlamsız slider kullanımı:

Çok sayıda slayt içeren otomatik geçişli slider'lar kullanıcının odağını dağıtır. Araştırmalar, slider'lardaki yalnızca ilk slaydın anlamlı düzeyde görüntülendiğini gösteriyor. Statik bir güçlü mesaj her zaman daha etkili.

CTA'nın fold altında kalması:

"Hizmetlerimizi keşfedin" butonu sayfanın ortasındaysa above the fold'ı ziyaret eden ve scroll yapmayan kullanıcılar bunu hiç görmez. Dönüşüm hedeflenen butonu yukarı taşıyın.

Yükleme süresi uzun görseller:

Above the fold alanındaki görseller önce yüklenmeli. LCP (Largest Contentful Paint) metriği bu alandaki en büyük içeriğin ne kadar sürede yüklendiğini ölçer. Büyük, optimize edilmemiş görseller LCP skorunu düşürür.

Çok fazla bilgi sıkıştırma:

Her şeyi yukarıya koymak bir şeyin öne çıkmasını engeller. Above the fold tek bir net mesaja hizmet etmeli; kullanıcıyı sayfanın geri kalanına yönlendirmelidir.

Blakfy'nin web sitesi projelerinde above the fold tasarımı, wire frame aşamasında müşteriyle birlikte netleştirilir; hangi mesajın, hangi CTA'nın ve hangi görselin önce görüneceği baştan belirlenir.

⠀

⠀

Sık Sorulan Sorular

⠀

Above the fold alanı kaç piksel yüksekliğinde olmalı?

Kesin bir standart yoktur — cihaza ve tarayıcı boyutuna göre değişir. Masaüstü için 600–768px, mobil için 500–600px referans alınabilir. Google Analytics'te ekran çözünürlüğü verisine bakarak kitlenizin ne kullandığını görün.

Above the fold'a ne kadar metin sığdırılabilir?

Kısa ve etkili: bir ana başlık (6–12 kelime), bir alt başlık veya açıklama (15–25 kelime), bir CTA butonu. Bunun ötesine geçmek alanı karmaşık hale getirir.

Scroll yapmayı teşvik etmek için ne yapılabilir?

Aşağı ok ikonu, içeriğin yarım kalan görseli veya hafif animasyon "devam et" mesajı verir. Ancak asıl hedefiniz ziyaretçinin CTA'yı tıklamasıysa, scroll'a yönlendirmek yerine CTA'yı güçlendirmek daha doğrudur.