Web tasarımında güçlü hiyerarşi, “H1’i 72 px yapalım” diye başlamaz. Önce sayfanın kullanıcıya hangi bilgiyi hangi sırayla vermesi gerektiğini belirlersin; sonra boyut, weight, renk, boşluk, grid ve konum bu sırayı görünür hale getirir. Görsel önem ile içerik/semantic önem birbirinden koparsa sayfa etkileyici görünse bile taranması ve anlaşılması zorlaşır.
1. Görsel tasarımdan önce içerik sırasını yaz
İyi hierarchy için önce page objective’i netleştir. Kullanıcı sayfaya geldiğinde hangi soruların cevabını hangi sırada almalı? Örneğin bir hizmet landing page’inde sıra “ne sunuyorsun → kimin için → neden güvenilir → nasıl çalışıyor → ne yapmalıyım?” olabilir. Portfolio project’te ise “sonuç → bağlam → rol → süreç → çıktı” daha mantıklı olabilir.
- Primary message
Sayfanın tek cümlelik ana vaadi veya konusu.
- Proof / context
Bu iddiayı anlamlı kılan kanıt, açıklama veya görsel.
- Decision support
Kullanıcının seçenekleri, kapsamı veya ayrıntıları değerlendirmesi için gerekli bilgi.
- Action
İletişim, satın alma, okuma, proje inceleme gibi birincil aksiyon.
2. Boyut tek başına hiyerarşi değildir
Bir öğeyi daha önemli göstermek için yalnız font size artırmak zorunda değilsin. Weight, contrast, white space, position, width, isolation, background treatment ve motion da visual weight yaratır. İyi sistem birkaç sinyali birlikte ama kontrollü kullanır.
| Araç | Ne yapar | Risk |
|---|---|---|
| Scale | Öğeyi hızlıca dominant yapar | Her şey büyükse hiçbir şey büyük değildir |
| Weight | Type veya shape yoğunluğunu artırır | Aşırı bold uzun metni yorabilir |
| Contrast | Foreground/background ayrımını artırır | Sadece renk farkına güvenmek erişilebilirliği zayıflatabilir |
| Space | Öğeyi çevresinden izole eder | Aşırı boşluk ilişkili öğeleri koparabilir |
| Position | Üst/merkez/edge ile dikkat yönlendirir | Responsive reflow’da sıra değişebilir |
| Motion | Dikkati geçici olarak çeker | Sürekli motion bilgi hiyerarşisini bozar |
3. Semantic heading ile görsel heading aynı mantığı desteklemeli
Web’de başlık hiyerarşisi sadece görsel değildir. H1, H2, H3 gibi semantic heading’ler doküman yapısını programatik olarak da tanımlar. W3C rehberleri, bilgi ve ilişkilerin yalnız görsel sunumla değil markup üzerinden de belirlenebilir olmasını vurgular. NN/g de kullanıcıların içeriği tararken headings ve formatting üzerinden hızla bölüm bulduğunu belirtir.
- H1’i yalnız büyük göründüğü için değil sayfanın ana başlığı olduğu için kullan.
- H2/H3 sırası içerik yapısını temsil etsin; font boyutuna göre heading level seçme.
- Görsel olarak küçük ama semantik olarak önemli başlıkları CSS ile stilize et; markup’ı bozma.
- Bir kart içindeki title ile sayfa section heading’i aynı visual scale’i almak zorunda değildir.
4. Grouping ve spacing ile ilişkileri görünür yap
Kullanıcı yalnız tek tek elementleri değil, aralarındaki ilişkileri okur. Heading ile paragraph arasındaki mesafe, iki ayrı section arasındaki mesafeden küçükse grouping doğal görünür. Aynı spacing değerini her yerde kullanmak matematiksel düzen yaratabilir ama semantic grouping’i zayıflatabilir.
| İlişki | Spacing yaklaşımı |
|---|---|
| Heading → açıklama | Yakın |
| Label → value | Çok yakın / aynı grup |
| Card title → card body | Yakın |
| Section → section | Belirgin şekilde daha geniş |
| Primary CTA → secondary info | Hierarchy’ye göre kontrollü ayrım |
5. CTA’yı en parlak obje yapmak zorunda değilsin
CTA önemli olabilir ama kullanıcı neye tıkladığını anlamadan agresif button görmek güven oluşturmaz. İyi hierarchy, CTA’yı page narrative içinde doğru zamanda dominant hale getirir. Hero’da birincil CTA görünür olabilir; ancak proof, pricing veya contact section’da başka supporting actions da bulunabilir.
Primary ve secondary CTA arasında sadece renk farkı değil weight, fill/stroke, size ve placement farkı kullan. Aynı anda üç “primary” button göstermek kullanıcıya seçim yardımı sunmaz.
6. Mobilde hierarchy yeniden kurulabilir
Desktop’ta iki kolon içinde görsel sağda, metin solda çalışabilir. Mobilde kolonlar stack olduğunda DOM order ve reading order daha görünür hale gelir. Responsive tasarım yalnız elementi küçültmek değil; öncelik sırasını dar alanda yeniden kurmaktır.
- Desktop side-by-side öğelerde mobile stacking sırasını bilinçli seç.
- Hero headline satır uzunluğu dar ekranda anlamsız kırılıyorsa scale/width ayarını yeniden düşün.
- Decorative media önemli içeriğin önüne geçiyorsa mobilde aşağı taşı veya azalt.
- CTA’yı sticky yapmak hierarchy problemini çözmez; yalnız görünürlüğünü artırır.
7. Contrast hem hierarchy hem erişilebilirlik meselesidir
Düşük kontrastlı secondary text kullanmak hierarchy oluşturabilir; fakat text okunamaz hale gelirse sistem amacını kaybeder. WCAG, normal text için minimum contrast kriterleri tanımlar. Tasarımcı açısından pratik sonuç şu: “secondary” demek “görünmez” demek değildir.
8. Bir sayfayı 30 saniyelik hierarchy audit’inden geçir
- Uzaklaş / zoom out
İlk üç dikkat noktası gerçekten istediğin öğeler mi?
- Başlıkları tek başına oku
Sayfanın anlatısı yalnız headings üzerinden anlaşılabiliyor mu?
- Rengi zihinsel olarak kaldır
Scale, space ve weight hierarchy’yi hâlâ taşıyor mu?
- Primary action’ı bul
Kullanıcı 2–3 saniyede ne yapabileceğini anlıyor mu?
- Mobil sıra kontrolü yap
Desktop hierarchy stack olduğunda bozuluyor mu?
- İkincil elementleri azalt
Ana mesajla rekabet eden label, badge, icon veya card varsa gerçekten gerekli mi?