Görsel hiyerarşi, paleti seçmek değil bakış sırasını ölçüyle kurmaktır. Bu rehberde boyut, ağırlık, boşluk ve konumla hangi öğenin önce duracağını nasıl kararlaştıracağınızı adım adım ele alıyoruz. Renk vurgu kalır; sıra ise farktan çıkar.
Bir sayfa açıldığında göz rastgele gezmez. Önce büyük, ağır ve etrafı boş olan öğeye takılır; sonra daha küçük ve sıkışık bloklara iner. Görsel hiyerarşi web tasarım işinde asıl karar paleti beğenmek değil; bakış sırasını boyut, ağırlık, boşluk ve konumla bilinçli kurmaktır.
Renk bir vurgu aracıdır. Sıra ise ölçüden çıkar. Aynı font ailesi ve aynı marka rengi dururken bile bir vaat belirgin biçimde büyük ve yalnız, açıklama ise sakin ve sıkıysa ziyaretçi önce teklifi, sonra gerekçeyi okur. Tersi olursa düğme kaybolur, fiyat gürültüye karışır, form yarıda kalır.
Bu rehber palet kartlarını bir kenara bırakır. Amacı, her ekranda “önce bu, sonra şu, en sonda o” demenizi sağlayan uygulanabilir bir ölçü disiplini kurmaktır.
Palet beğenisi bakış sırasını kurmaz
İki sayfa aynı renkleri kullanabilir ve tamamen farklı okunabilir. Biri başlığı şişirir, düğmeyi ayırır, yardımcı metni küçültür. Diğeri her kutuya aynı dolgu, aynı punto, aynı çerçeve verir. İkincisinde marka “güzel” durabilir; bakış yine de dağılır.
Renk körlüğü, güneşli ekran, düşük parlaklık veya gri tonlamalı bir kontrol bu gerçeği hızla gösterir. Yalnızca renk farkına yaslanan bir vurgu, fark yokmuş gibi davranır. Asıl sinyal şudur: bu öğe komşularından ölçülebilir biçimde ayrı mı?
KepezWeb işlerinde önce bakış katmanları yazılır, palet sonra gelir. Katman net değilse mavi veya yeşil seçmek sırayı kurtarmaz; yalnızca gürültünün rengini değiştirir.
- Her öğeye marka rengi vermek vurguyu yok eder.
- Aynı çerçeve kalınlığı her kartı eşit ilan eder.
- Simge, rozet ve etiket çoğalınca göz duracak yer bulamaz.
Paleti kilitlemeden önce sayfanın görevini tek cümleyle yazın: ziyaretçi bu ekranda neyi anlamalı ve hangi eylemi denemelidir? O cümle, hangi öğenin büyük kalacağını söyler.
Boyut ve ağırlık: hangisi önce durur
Boyut, bakışın ilk durağını belirler. Ağırlık ise o durağın “önemli” hissedilmesini sağlar. Büyük ama ince bir başlık bazen küçük ama dolu bir düğmeden zayıf kalır. Çünkü göz yalnızca genişliği değil, görsel kütleyi de okur.
Görsel kütle; punto, yazı kalınlığı, dolgu, fotoğraf yoğunluğu ve kenarlık kalınlığının toplamıdır. Koyu bir fotoğraf bloğu, yanındaki sade metinden daha ağırdır. Kalın bir fiyat, ince bir açıklamadan önce durur. Bu yüzden “her şeyi bir ölçü büyütmek” hiyerarşi değildir; kütleyi yeniden eşitler.
Birincil öğeyi seçin. İlk ekranda tek bir birincil yeter: vaat, ürün adı, fiyat veya eylem düğmesi. İkincil öğeler birincili destekler. Üçüncül öğeler (tarih, etiket, yasal not, ikincil bağlantı) bilinçli olarak sakin kalır.
- Başlık gövde metninden açıkça büyük olsun; “biraz büyük” yetmez.
- Eylem düğmesi metin bağlantısından daha dolu ve daha yalnız dursun.
- Yardım metni, dipnot ve etiket aynı kalınlıkta yarışmasın.
- Görsel varsa kütlesini hesaba katın; ağır fotoğraf zayıf başlığı yutar.
Yaygın hata, navigasyon, slogan, kampanya bandı, üç özellik kartı ve düğmeyi aynı anda “en önemli” ilan etmektir. Hepsi bağırınca hiçbiri duyulmaz. Ölçü sisteminin işi, bağıracak tek sesi seçmektir.
Boşluk ve konumla bakış yolu çizin
Boşluk, sessiz bir ok işaretidir. Bir öğenin etrafı açıldığında göz orada durur. Öğeler birbirine yapışınca tek bir leke gibi okunur. Bu yüzden boşluk “estetik nefes” değil, sıra kuran bir ölçüdür.
Konum da sırayı taşır. Türkçe soldan sağa, yukarıdan aşağı okunur. Kaydırmadan görünen alanda duran öğe, uzun bir metnin ortasındaki öğeden önce gelir. Üstte duran zayıf bir başlık, altta duran şişkin bir kutu tarafından kolayca çalınır. Konumu rastgele bırakmak, ölçüyle kurduğunuz sırayı bozar.
Grupları hizayla anlatın. Aynı işi gören öğeler aynı hizada ve aynı aralıkta dursun. Farklı iş gören öğeler ayrılsın. Kart ızgarasında her kart eşit ölçüdedir; vurguyu kartın içindeki başlık, fiyat ve düğme taşır. Dışarıdan bakınca ızgara düzen, içeride bakış sırası çalışır.
- İlk ekranın sol üstünden sağ alta doğru bakın: göz hangi üç noktada duruyor?
- Durduğu noktalar sizin 1-2-3 sıranız mı, yoksa rastgele görseller mi?
- Birincil eylemi, rakip öğelerden boşlukla ayırın; rengi sona bırakın.
- Mobilde üst üste binince sıra bozuluyorsa konumu, rengi değil yığını düzeltin.
Kurumsal bir anasayfada slogan, hizmet listesi ve iletişim düğmesi aynı ağırlıktaysa ziyaretçi görev seçemez. Kurumsal web tasarımda ilk ekranın işi bu seçimi netleştirmektir: kim olduğunuz, kime yaradığınız, sonraki adım.
Kontrastı renk değil fark olarak okuyun
Kontrast, iki komşu arasındaki farktır. Fark; boyut, kalınlık, boşluk, konum, doluluk veya renkten gelebilir. Yalnızca renk kontrastına güvenmek zayıf bir plandır. Çünkü renk, diğer farklar yoksa bakışı taşıyamaz.
Farkı ölçmenin pratik yolu griye çevirmektir. Sayfayı zihnen veya araçla grileştirdiğinizde sıra hâlâ okunuyor mu? Başlık duruyor mu, düğme ayrışıyor mu, ikincil metin geri çekiliyor mu? Griye rağmen her blok aynı lekeyse palet sizi yanıltıyordur.
Renk vurgu verir. Sıra, ölçü ve farktan çıkar.
Aşırı kontrast da hiyerarşiyi bozar. Her kartta kalın çerçeve, her satırda koyu dolgu, her etikette parlak zemin varsa sayfa alarm tablosuna döner. Kontrastı birincil ve gerekirse bir ikincil için saklayın. Geri kalanı sakin tutmak, vurguyu pahalı hale getirir; pahalı vurgu ise işe yarar.
Görsel hiyerarşi web tasarım için üç bakış katmanı
Ölçüyü tek tek öğelerde tartışmak yorar. Daha kalıcı olan, her şablona üç katman vermektir. Katmanlar punto listesi değil; bakış sözleşmesidir. KepezWeb bu sırayı sayfa görevine bağlar: bilgilendir, ikna et, eylem aldır.
| Katman | Görevi | Ölçü ve konum |
|---|---|---|
| Birincil | İlk durak ve asıl eylem | En büyük veya en ağır; ilk ekranda; etrafı açık |
| İkincil | Gerekçe, kanıt, seçenek | Orta ölçü; birincile yakın; gruplu |
| Üçüncül | Yardım, etiket, dipnot | Küçük ve sakin; kenarda veya sonra |
Aynı şablonu anasayfa, hizmet sayfası ve makale için tekrar kullanın. Başlık her yerde başlık gibi davransın. Düğme her yerde düğme gibi dursun. Üçüncül metin bir sayfada bağırıp diğerinde fısıldamasın. Tutarlılık, ziyaretçinin her yeni ekranda sırayı yeniden öğrenmesini engeller.
Bir ürün detayında ad, fiyat ve sepete ekle düğmesi aynı ölçüde durursa karar yavaşlar. Galeri şişer, varyant metni başlığı geçer, kargo notu düğmeyle yarışır. Bu katmanı e-ticaret ürün detay sayfasındaki bilgi hiyerarşisi ile birlikte düşünün: ilk bakışta duran bilgi ile kaydırınca gelen ayrıntı ayrı iş görür.
Ölçü sistemini web tasarım işinin başında sabitlemek, paleti sonraya bırakmaktan daha az revizyon üretir. Önce “bu ekranda bir numara nedir?” sorusu kapanır; renk tartışması o karardan sonra açılır.
İlk bakış testi ve sık düşülen tuzaklar
Hiyerarşi beğeniyle doğrulanmaz. Kısa bir kontrol, uzun bir palet turundan daha çok şey söyler. Ekranı bir an kapatıp açın. İlk tuttuğunuz öğe, sizin birinciliniz mi? Değilse ölçü veya konum kaymıştır.
- Öğe envanteri çıkarın: başlık, görsel, fiyat, düğme, menü, rozet, dipnot.
- Her öğeye 1, 2 veya 3 yazın. Bir ekranda tek 1 olsun.
- 1 olanı büyütün, ağırlaştırın veya yalnız bırakın. 3 olanı küçültün.
- Gri kontrol yapın. Sıra bozuluyorsa renk değil fark eksiktir.
- Mobil yığında sırayı tekrar okuyun. Üstteki öğe gerçekten 1 mi?
Sık tuzaklar birbirine benzer. Kampanya bandı başlıktan kalındır. Logo, slogan kadar yer kaplar. Dört özellik kartının dördü de ikonla şişer. Form etiketi, gönder düğmesiyle aynı kalınlıktadır. Footer’daki ikinci eylem, ilk ekrandaki asıl eylemden daha parlak durur. Bunların hiçbiri “kötü renk” değildir; tersine çevrilmiş ölçü ve konumdur.
Mobilde masaüstü ölçüsünü küçültmek yetmez. Yığın, konumu değiştirir. Masaüstünde yan yana duran fiyat ve düğme, telefonda alt alta binince araya uzun bir açıklama girebilir. O zaman bakış sırası metin lehine kayar. Çözüm, birincil eylemi yığında da erken ve yalnız tutmaktır.
Tipografi ölçeği bu işi kolaylaştırır. Gövde metni tabandır. Başlıklar tabandan açık ara büyür. Küçük etiket tabanın altına iner. Ölçek yoksa her yazar kendi puntosunu seçer; hiyerarşi kişiye göre dağılır. Ölçek varsa tartışma “bu kutu daha dikkat çeksin” olmaktan çıkar; “bu kutu hangi katmanda?” olur.
Sıkça Sorulan Sorular
Görsel hiyerarşi yalnızca büyük başlık kullanmak mıdır?
Değildir. Büyük başlık boyutu kullanır; sıra ise ağırlık, boşluk ve konumla tamamlanır. Başlık büyük ama düğme daha dolu ve daha yalnızsa göz düğmede durur. Katmanı tek araca indirgemeyin.
Renk kontrastı bakış sırası için yeterli midir?
Yetmez. Renk, diğer farklar varken işe yarar. Gri kontrolde sıra kayboluyorsa sorun palet değil ölçü ve kütledir. Rengi vurgu için saklayın; sırayı boyut ve boşlukla kurun.
Mobilde masaüstü ölçüleri birebir taşınır mı?
Taşınmaz. Yığın konumu değiştirir. Masaüstünde yanındaki öğe, telefonda altına inebilir ve araya başka blok girebilir. Birincil öğeyi mobil yığında da erken, ağır ve yalnız tutun.
Bir sayfada kaç tane birincil vurgu olmalı?
Bir bakışta tek birincil yeter. İkinciller gerekçe ve seçenek taşır. Üçüncüller yardım eder. Birden fazla öğe aynı anda bağırıyorsa ölçü sisteminiz yok demektir; paleti değil katmanları sadeleştirin.
Tipografi ölçeği olmadan hiyerarşi kurulur mu?
Kurulabilir ama çabuk bozulur. Her sayfada punto elle seçilince sıra kişiye kalır. Taban, başlık ve etiket için sabit bir ölçek, bakış sözleşmesini şablona bağlar ve revizyonu kısaltır.
Sayfanızda bakış sırası dağınıksa paleti değiştirmek yetmez; ölçü, ağırlık ve konumu birlikte kararlaştırmak gerekir. KepezWeb ile bu hiyerarşiyi sayfa görevine göre netleştirmek için teklif alın. İhtiyacı ve ilk ekranda durması gereken eylemi yazmanız yeterli.
