Hero section, ziyaretçinin ilk saniyelerde gördüğü mesaj ve eylem alanıdır. Bu rehberde başlık hiyerarşisi, tek CTA ve mobil kırılımı anasayfa genelinden ayırarak ele alıyoruz. Amacınız net bir ilk izlenim ve tıklanabilir bir sonraki adım olmalı.
Hero section tasarımı, sitenizin ilk ekranında ne söylediğinizi ve ziyaretçiden ne istediğinizi belirler. Anasayfanın tamamını planlamadan önce bu alanın mesaj hiyerarşisini, tek bir net CTA’yı ve mobil kırılımını ayrı düşünmek gerekir. Ziyaretçi kaydırma yapmadan önce yalnızca bu çerçeveyi görür; bu yüzden karmaşık vaatler ve birden fazla eylem aynı anda yer almamalıdır.
Bu rehber, hero’yu genel anasayfa düzeninden ayırır. Odak noktamız: başlık–alt metin–destek unsuru sırası, tek CTA mantığı ve küçük ekranda bozulmayan hiyerarşi.
Hero section ne işe yarar?
Hero section, sayfanın “above the fold” olarak bilinen ilk görünür alanıdır. Görevi üç parçalıdır: kim olduğunuzu kısa söylemek, kime hitap ettiğinizi göstermek ve tek bir sonraki adımı netleştirmek.
İyi bir hero, ürün kataloğu veya hizmet listesi değildir. Ziyaretçinin “doğru yerde miyim?” sorusuna saniyeler içinde yanıt verir. KepezWeb tarafında kurumsal ve e-ticaret projelerinde de aynı kural geçerlidir: ilk ekran sade, eylem net, görsel destekleyici olmalıdır.
- Kimlik: Ne sunduğunuz bir cümlede anlaşılır.
- Uygunluk: Hedef kitlenin kendini bulduğu bir ipucu vardır.
- Eylem: Tek bir CTA, belirsizlik bırakmadan yönlendirir.
Mesaj hiyerarşisi: Başlık, alt metin, destek
Hero section tasarımında en sık yapılan hata, her şeyi aynı ağırlıkta yazmaktır. Okuyucu hiyerarşiyi başlık boyutundan, satır uzunluğundan ve boşluktan okur. Sıra şöyle kurulmalıdır:
- Ana başlık (H1): Tek vaat veya net sonuç. Uzun slogan değil; tarayarak okunabilir bir cümle.
- Alt metin: Başlığı somutlaştıran 1–2 kısa cümle. Kim için, hangi bağlamda, ne kazanılacağı.
- Destek unsuru: Kısa bir güven sinyali, özellik etiketi veya ikincil açıklama. Asıl mesajı ezmemeli.
- CTA: Tek eylem, eylem odaklı fiil.
Başlıkta marka jargonu ve soyut sıfatlar yerine ziyaretçinin dilini kullanın. “Dijital dönüşüm çözümleri” gibi geniş ifadeler yerine “B2B satış ekibiniz için teklif formu ve CRM entegrasyonu” gibi somut bir çerçeve daha net çalışır.
Başlık yazarken kontrol listesi
- Tek ana fikir var mı, yoksa iki vaat mi sıkıştırılmış?
- Mobilde 2–3 satırı aşıyor mu? Aşıyorsa sadeleştirin.
- Alt metin olmadan da anlam korunuyor mu?
- CTA ile mantıksal bağlantı var mı? (Başlık ne vaat ediyorsa buton o yöne gitmeli.)
Tek CTA kuralı neden işe yarar?
İlk ekranda birden fazla birincil buton, seçim yorgunluğu yaratır. “Teklif al”, “Demo izle”, “Fiyatları gör” ve “İletişim” aynı anda birincil görünürse ziyaretçi hangisinin asıl yol olduğunu bilemez.
Hero için pratik kural şudur: bir birincil CTA. İkincil bir metin linki (örneğin “Nasıl çalışır?”) ancak birincilin gölgesinde ve görsel olarak daha zayıf kalırsa kabul edilebilir. İkisi de aynı boyutta, aynı renkte ve aynı hizada olmamalıdır.
CTA metni eylem fiili taşımalıdır: “Teklif al”, “Ücretsiz keşif görüşmesi planla”, “Katalogu incele”. “Devam” veya “Daha fazla bilgi” gibi belirsiz ifadeler, niyeti zayıflatır. Buton tasarımının detayları (renk, hover, boyut) ayrı bir konu olsa da hero bağlamında kritik olan, butonun tek ve görsel olarak baskın olmasıdır.
CTA’yı nereye koymalı?
Masaüstünde metin bloğunun hemen altında, görsel ile çakışmadan; mobilde başlık ve kısa alt metinden hemen sonra. Görselin altına gömülü, kaydırma gerektiren bir buton “ilk ekran CTA’sı” sayılmaz. Mobil kırılımda butonun ekranın ilk kaydırma alanına sığdığını cihaz önizlemesiyle doğrulayın.
Mobil kırılım: İlk ekranın gerçek boyutu
Hero section tasarımı masaüstünde etkileyici görünüp mobilde bozuluyorsa işe yaramaz. Mobilde adres çubuğu, tarayıcı arayüzü ve cihaz oranları ilk görünür alanı daraltır. Bu yüzden “fold” sabit bir piksel değil, cihaza göre değişen bir sınırdır.
Mobil öncelikli kontrol noktaları:
- Başlık uzunluğu: Küçük ekranda 3–4 satıra taşan başlık hiyerarşiyi bozar.
- Görsel yüksekliği: Tam ekran arka plan, metni ve CTA’yı aşağı iterse mesaj kaybolur.
- Boşluk: Aşırı padding ilk ekranı “boş” gösterir; aşırı sıkışık düzen ise okunabilirliği düşürür.
- Tek sütun: Metin sol, görsel sağ düzeni mobilde üst üste biner; hangisinin önce geleceğini bilinçli seçin (çoğu durumda metin + CTA önce).
Tasarımı yalnızca tarayıcıyı daraltarak değil, gerçek cihaz oranlarında da kontrol edin. Özellikle uzun logo şeridi, çok satırlı navigasyon veya büyük arama çubuğu hero’nun üstünden yer çalar; bu elemanlar da ilk ekran hesabına dahildir.
Görsel, metin ve boşluk dengesi
Hero görseli dekoratif bir arka plan değil, mesajı destekleyen bir unsur olmalıdır. Ürün, hizmet veya kullanım anını gösteren sade bir görsel; soyut stok fotoğraftan genelde daha net okunur. Metnin okunabilirliği için kontrast şarttır: açık metin + düşük kontrastlı arka plan, hero’nun en hızlı bozulduğu yerdir.
Boşluk (whitespace) lüks değil, hiyerarşi aracıdır. Başlık ile alt metin arası, alt metin ile CTA arası ve blok ile kenar boşlukları ritmik olmalı; her öğe “aynı kutuda sıkışmış” hissi vermemelidir.
| Öğe | İyi uygulama | Kaçınılacak |
|---|---|---|
| Başlık | Tek vaat, tarayarak okunur | Uzun slogan + iki farklı mesaj |
| Alt metin | 1–2 cümle, somut | Paragraf uzunluğunda açıklama |
| CTA | Tek birincil eylem | Eşit ağırlıklı 3–4 buton |
| Görsel | Mesajı destekler, kontrastlı | Metni boğan, belirsiz stok görsel |
| Mobil | CTA kaydırmadan görünür | Buton fold’un altında kalır |
Sektöre göre hero yaklaşımı
Mesaj hiyerarşisi sabittir; içerik sektörle değişir. Kurumsal web tasarım projelerinde hero genelde güven, kapsam ve net hizmet çerçevesi taşır. E-ticaret tarafında ise ürün vaadi, kampanya değilse kategori veya koleksiyon yönlendirmesi ve sepete giden yol daha öne çıkar. E-ticaret sitesi hero’sunda her seferinde indirim bağıran bir alan, marka algısını zayıflatabilir; kalıcı değer mesajı ile dönemsel kampanyayı ayırmak daha sağlıklıdır.
Hizmet odaklı sitelerde “kim için” ipucu özellikle önemlidir. “KOBİ’ler için”, “üretim firmaları için” veya “yerel işletmeler için” gibi kısa bir çerçeve, doğru ziyaretçinin kalmasını kolaylaştırır. Yanlış kitleyi filtrelemek de hero’nun görevidir; herkese hitap eden metin kimseye hitap etmez.
Uygulama: Hero’yu yayına almadan önce kontrol
Tasarımı tamamladıktan sonra aşağıdaki kontrol listesini geçirin. Bu adımlar, hero section tasarımını yalnızca görsel bir şablon olmaktan çıkarıp ölçülebilir bir ilk temas noktasına çevirir.
- İlk 5 saniyede tek cümleyle ne sunduğunuz anlaşılıyor mu?
- Sayfada tek bir birincil CTA var mı ve metni eylem odaklı mı?
- Mobilde başlık, kısa alt metin ve buton kaydırmadan görünüyor mu?
- Metin–arka plan kontrastı okunabilir mi?
- Navigasyon ve logo hero mesajını ezmiyor mu?
- CTA hedef sayfası, başlıktaki vaatle uyumlu mu?
- Görsel yükü ilk boyamayı gereksiz yere yavaşlatmıyor mu? (Ağır video/otomatik oynatma özellikle risklidir.)
Bu kontrolleri web tasarım sürecinin erken aşamasında yapmak, sonradan “metni kısaltalım” tartışmalarını azaltır. Wireframe aşamasında yalnızca metin iskeletiyle hero’yu test etmek de faydalıdır: görsel olmadan mesaj anlaşılıyorsa hiyerarşi doğrudur.
Sıkça Sorulan Sorular
Hero section ile banner aynı şey midir?
Hayır. Banner genelde görsel odaklı bir şerit veya kampanya alanıdır. Hero section ise ilk ekranın mesaj, hiyerarşi ve CTA omurgasıdır; yalnızca büyük bir görsel koymak hero tasarımı sayılmaz.
Hero’da video kullanmak ne zaman mantıklıdır?
Ürünün kullanımı kısa ve sessiz (veya kontrollü sesle) anlatılabiliyorsa ve performans bütçesi izin veriyorsa. Otomatik ses, ağır dosya ve metni örten video, mesajı bozar. Çoğu kurumsal sitede sade görsel + net metin daha güvenli bir başlangıçtır.
İkincil CTA hiç olmamalı mı?
Olabilir; ancak birincilden görsel ve dil olarak zayıf olmalı, aynı “acil eylem” seviyesinde yarışmamalıdır. İki eşit buton, tek CTA kuralını fiilen iptal eder.
Hero metni SEO için anahtar kelimeyle doldurulmalı mı?
Hayır. Anahtar kelime doğal ve anlamlı yerde geçebilir; ancak hero’nun önceliği insan okuyucusudur. Anahtar kelime yığını hem okunabilirliği hem güveni zedeler.
Anasayfa ile landing page hero’su aynı mı olmalı?
Yapı benzer olabilir; içerik farklıdır. Anasayfa hero’su marka ve genel yönlendirme taşır, landing page hero’su tek teklife ve tek eyleme daha sıkı bağlanır. Kampanya sayfalarında mesajı reklam metniyle hizalamak özellikle önemlidir.
İlk ekranınızı sade bir mesaj hiyerarşisi ve tek CTA ile kurmak istiyorsanız, KepezWeb ekibi olarak web tasarım sürecinde bu kararları birlikte netleştirebiliriz. Projenize uygun bir yol haritası için teklif al sayfasından bize ulaşabilirsiniz.
