M.AIM.AISoloLabsUI Sözlüğü · İçerik ve yerleşim

← UI Sözlüğü

Vitrin hero

bilinen diğer adları hero · hero section · vitrin alanı · üst görsel

Böyle diyorsan: "ana sayfanın en üstündeki büyük alan" · "kocaman başlıklı giriş bölümü" → bunun adı vitrin.

Ana sayfanın ilk ekranını kaplayan büyük tanıtım alanı: vaat + aksiyon + görsel.

Vitrin, sayfanın en üstündeki büyük tanıtım alanıdır: tek başlık, tek açıklama, tek birincil eylem. Değerli olduğu kadar tehlikeli bir alandır çünkü sayfanın ilk ekranını tamamen tüketir — buraya konan her fazladan mesaj, kullanıcının aşağı inip gerçek içeriği görmesini geciktirir. İkinci mesele performanstır: vitrin görseli neredeyse her zaman sayfanın en büyük görselidir, yani ilk yükleme hızını doğrudan belirler. Boyutu önceden ayrılmamış bir vitrin görseli yüklenince sayfa zıplar; optimize edilmemiş bir vitrin görseli ise ziyaretçinin ilk izlenimini bekleme ekranına çevirir. Üçüncüsü başlık düzenidir: sayfanın tek <h1> etiketi genelde buradadır ve büyük yazılmış bir <div> onun yerine geçmez.

Kapsam: Bu madde sayfanın üst tanıtım alanını kapsar. Listelerde tekrarlanan içerik kabı Kart, dönen görsel şeridi Kaydırmalı Galeri maddesindedir — vitrin bir galeriye dönüştüğünde artık vitrin değildir.

CANLI ÖRNEK — kullan, numaralara tıkla, parçayı tanı
görsel
▸ giriş sıralaması: başlık → alt metin → CTA → görsel (6 sn'de bir)
Aşama aşama gezmek için okları ya da numaraları kullan.
YAPIM PROMPTU — AJANINA YAPIŞTIR
Landing hero'su kur: solda tek cümlelik güçlü başlık (akışkan boyut — mobilde de sığsın) + 2 satır alt metin + iki buton (birincil 'Başla', hayalet 'İncele'); sağda boyutu önceden ayrılmış ürün görseli. Mobilde metin üstte görsel altta; başlık ve birincil CTA ilk ekranda tam görünsün.
DEBUG PROMPTU — HUYSUZLANIRSA

Yapıştır, sonuna belirtiyi ekle — ajana klasik hata kalıplarını önden verir.

Hero'm bozuk; şu klasikleri sırayla ele: (1) mobilde başlık devasa kalıyor ya da taşıyor (clamp yok); (2) görsel yüklenene dek yerleşim zıplıyor (boyut rezervasyonu yok — CLS); (3) iki buton da birincil görünüyor, hiyerarşi yok; (4) yükseklik 100vh'e sabit, mobil tarayıcı çubuğu altında CTA kesiliyor; (5) arka plan görseli üstünde metin okunmuyor (kontrast katmanı yok). Belirti şu:
ANATOMİ — HER PARÇANIN ADI VAR (tıkla ya da üzerine gel → örnekte yansın)
  • 1Başlıkheadline / h1

    Tek cümlelik net vaat — sayfanın en büyük yazısı; akışkan boyut (clamp) ile mobilde küçülür.

  • 2Alt metinsubheadline

    Vaadi 1-2 cümleyle açan destek satırı; başlıktan belirgin küçük ve soluk.

  • 3CTA çiftiprimary + ghost

    Bir birincil ('Başla') + bir hayalet ('İncele') buton — ikisi de birincil olursa hiyerarşi ölür.

  • 4Medya alanıimg / video

    Sağdaki görsel/animasyon; boyutu önceden ayrılır ki yüklenirken yerleşim zıplamasın.

DURUMLAR — HANGİ HÂLDE NE OLUR
  • ANormalh1 + açıklama + CTA

    Tek mesaj, tek eylem. İkinci bir birincil buton eklediğin an kullanıcıya hangi yolun ana yol olduğunu sen değil o seçtirmiş olursun.

  • BGörsel yükleniyorwidth/height ayrılmış

    Yer önceden ayrılmalı. Ayrılmazsa görsel gelince metin aşağı kayar ve kullanıcı tıklamak üzere olduğu butonu kaçırır.

  • CMobilmin-height: 100dvh

    Tam ekran vitrin mobilde tarayıcı çubuklarıyla sorun çıkarır; dvh birimi bunu çözer, vh çözmez.

  • DVideoluotomatik oynatma

    Arka plan videosu sessiz olmalı, duraklatılabilmeli ve prefers-reduced-motion açıkken statik görsele düşmelidir.

  • EKısa içerikyükseklik kısılır

    Vitrin her zaman tam ekran olmak zorunda değildir. İçerik zenginse vitrini kısaltmak, kullanıcıyı asıl içeriğe daha çabuk ulaştırır.

KODDAKİ ADLARI
CSSfont-size: clamp(...)akışkan başlık boyutu
CSSmin-height: 100dvhmobil-güvenli tam yükseklik
HTMLwidth/height + prioritygörsel için yer rezervasyonu
ERİŞİLEBİLİRLİK & SIK HATA
  • Sayfanın <h1> etiketi burada olsun; görsel olarak büyük yazılmış bir div, ekran okuyucu için başlık değildir ve başlık listesinde görünmez.
  • Arka plan görseli dekoratifse CSS ile ver ya da alt="" bırak; bilgi taşıyorsa alt metnini yaz (WCAG 1.1.1).
  • Görselin yerini önceden ayır (width/height ya da aspect-ratio); yerleşim zıplaması hem rahatsızlıktır hem yanlış tıklamaya yol açar.
  • Metni görselin üstüne koyuyorsan kontrastı en kötü bölgeye göre ölç; fotoğrafın açık ve koyu alanları değiştikçe okunabilirlik de değişir — gerekirse koyu bir katman ekle.
  • Otomatik oynayan arka plan videosunu duraklatılabilir yap ve reduced-motion açıkken kapat (WCAG 2.2.2).
SIK KARIŞTIRILANLAR

Karttan farkı. Vitrin sayfada TEKTİR ve tek bir mesajı taşır; kart bir LİSTENİN üyesidir ve benzerleriyle birlikte anlam kazanır. Vitrini kart gibi çoğaltmak (üç eşit büyüklükte tanıtım alanı) hiçbirinin öne çıkmaması demektir; kartı vitrin gibi büyütmek de listenin ritmini bozar.

Kart sayfasına git →

Galeriden farkı. Vitrin SABİTTİR ve tek mesajı garanti eder; galeri döner ve mesajı kullanıcının o an baktığı slayta bırakır. Dönen bir vitrin, ilk ekranın kimin eline geçtiğini rastlantıya çevirir — ölçümler ilk slayttan sonrakilerin neredeyse hiç görülmediğini gösterir, o yüzden 'hepsini koyalım' çözümü aslında 'ilkinden başkası görülmesin' demektir.

Kaydırmalı galeri sayfasına git →

KAYNAKLAR
Bu parçayı 12 ayrı stilde gör. Tam sayfa stil örneklerindeki landing bu parçadan da kurulu; stilin parçayı nasıl giydirdiğini yan yana karşılaştırabilirsin — stil parçayı değiştirmez, giydirir.

Tam sayfa örneğini aç →üstteki şeritten stil atlayabilirsin

İLGİLİ PARÇALAR

Kart cardKaydırmalı galeri carouselEylem çağrısı CTA buttonİskelet yükleme skeleton

AYNI AİLEDE · İÇERIK VE YERLEŞIM