Spor başlıklarının farklı bilgi katmanlarına nasıl ayrıldığını, mobil cihazlarda sayfa yoğunluğunun nasıl yeniden düzenlendiğini ve uzun içeriklerde daha kolay takip edilen bir arayüz yapısının nasıl oluşturulduğunu ele alan yeni inceleme.
Açılış alanı ziyaretçiyi doğrudan uzun açıklamalarla karşılamak yerine sayfanın temel yönünü birkaç bileşenle anlatır. Marka, kısa navigasyon, ana başlık ve iki temel geçiş seçeneği bu bölümde bir arada bulunur.
Daha ayrıntılı içeriklerin ana gövdeye bırakılması, ilk ekranın hem masaüstünde hem de telefonda daha rahat taranmasını sağlar.
Hero bölümünden sonra gelen kısa bilgi şeridi ise sayfanın genel özelliklerini tek satırlık ifadelerle özetler.
Sayfa genel yapıdan spor kategorilerine, mobil davranıştan görsel kurguya doğru farklı başlıklarda ilerler.
Her ana bölümün farklı bir konuya sahip olması, aynı fikirlerin tekrarını azaltarak içerik çeşitliliğini artırır.
Bir spor sayfasında kategori sayısı yükseldikçe bütün başlıkların aynı görsel ağırlıkta sunulması bilgi yoğunluğunu artırabilir.
Ana branşlara daha belirgin tipografi verilmesi ve yardımcı açıklamaların daha sakin tutulması ziyaretçinin hangi içeriğin öncelikli olduğunu daha hızlı anlamasına yardımcı olur.
Kartlar uzun açıklamaları tekrar etmek yerine bölümün temel fikrini kısa biçimde göstermeye odaklanabilir.
Daha ayrıntılı değerlendirmelerin paragraf düzeninde devam etmesi, kartların mobil görünümde gereğinden fazla uzamasını da önler.
Farklı branşlarda aynı kenarlık, boşluk ve yazı ölçeklerinin kullanılması sayfa boyunca ortak bir arayüz dili oluşturur.
Dar ekranlarda bütün navigasyon bağlantılarını aynı anda göstermek, marka ve temel kontrollerin yatay alanını azaltabilir.
Daha düşük öncelikli bağlantıların mobil görünümde gizlenmesi temel menünün daha rahat kullanılmasını sağlar.
Masaüstünde merkezde sınırlanan metin kolonu telefon görünümünde ekranın kullanılabilir genişliğine daha fazla yaklaşır.
Kartların daha az kolon kullanması ise kısa açıklamalar için daha geniş bir metin alanı oluşturur.
| Arayüz Bölümü | Masaüstü | Mobil |
|---|---|---|
| Navigasyon | Geniş menü seçenekleri | Öncelikli bağlantılar |
| Hero Alanı | Büyük başlık kullanımı | Kompakt metin düzeni |
| Özet Kartlar | Çoklu kolon | Daha az kolon |
| Ana İçerik | Merkezde kontrollü genişlik | Ekranı daha fazla kullanır |
| SSS Alanı | Standart tıklama satırı | Daha rahat dokunma alanı |
Bu sürümde koyu grafit ana arayüz rengini oluştururken canlı cyan etiket, ikon ve önemli bağlantılarda vurgu olarak kullanılır.
Uzun metin alanlarının açık mavi-gri ve beyaz yüzeylerde devam etmesi sayfanın daha hafif görünmesine yardımcı olur.
Ana bölümler arasında daha geniş boşluk bırakılması yeni bir konuya geçildiğini görsel olarak belirtir.
Paragraf aralıkları ise aynı bölüm içerisindeki farklı düşünceleri daha küçük bir ritimle birbirinden ayırır.
Kartların yalnızca kısa özet gerektiren alanlarda kullanılması uzun metnin gereksiz biçimde parçalara ayrılmasını önler.
Responsive grid sistemi, sabit üst menü ve açılır soru alanlarıyla ilgili kısa açıklamalar aşağıdaki bölümde devam ediyor.
Teknik SSS'yi AçGrid yapısında minimum kart genişliği tanımlandığında geniş ekranda daha fazla, dar ekranda ise daha az kolon oluşabilir.
Sticky header kullanımı ziyaretçinin sayfanın alt bölümlerindeyken bile ana navigasyon seçeneklerine hızlıca ulaşabilmesini sağlar.
details ve summary etiketleri temel açılır-kapanır davranışını ek JavaScript koduna ihtiyaç duymadan sağlayabilir.
Sayfanın ana konusunun hızlı anlaşılmasını ve ziyaretçinin uzun içeriğe daha erken ulaşmasını sağlayabilir.
Büyük monitörlerde satırların gereğinden fazla uzamasını önleyerek okuma konforunu desteklemek için.
Ana ve yardımcı kategori seviyelerinin daha hızlı fark edilmesini sağlar.
Her zaman değil. Daha düşük öncelikli bağlantılar küçük ekranlarda alan kazanmak amacıyla gizlenebilir.
Her kart için daha geniş metin alanı oluşturarak içerik sıkışıklığını azaltabilir.
Ana metin korunur; ağırlıklı değişiklikler yerleşim, tipografi ve boşluklarda yapılır.
Önceki gece mavisi, petrol-mint ve diğer varyasyonlardan farklı yeni bir görsel kimlik oluşturmak amacıyla.
Uzun sayfalarda ana bölüm bağlantılarının kullanıcı tarafından daha kolay erişilebilir kalmasını sağlar.
Evet. HTML details ve summary elemanları temel açılır-kapanır davranışını tarayıcı üzerinden sağlayabilir.
Zaman içinde değişebilecek platform veya hizmet bilgileri yayımlanmadan önce güncel ve doğrulanabilir kaynaklardan ayrıca kontrol edilmelidir.