Web tasarım, bir sayfanın yalnızca nasıl göründüğünü değil, nasıl okunduğunu ve kullanıldığını belirler. Renk ve tipografi kadar içerik sırası, mobil davranış, erişilebilirlik ve yüklenme hızı da tasarımın parçasıdır.
İyi bir web sayfası neyi çözer?
Kullanıcı sayfaya geldiğinde üç şeyi kısa sürede anlayabilmeli: Burası kimin sitesi, burada ne bulabilirim ve sonraki adımım ne? Bu bilgiler güçlü bir başlık, kısa açıklama ve açık bir bağlantıyla verilebilir.
Her alanı hareketlendirmek veya her metni karta koymak sayfayı daha modern yapmaz. Görsel kararların içeriğe hizmet etmesi gerekir.
Responsive tasarım nedir?
Responsive tasarım, sayfanın farklı ekran genişliklerine uyum sağlamasıdır. Masaüstü düzenini telefonda yalnızca küçültmek yeterli değildir. Dar ekranda sütunlar alt alta inmeli, dokunma alanları büyümeli ve gereksiz ayrıntılar azaltılmalıdır.
Mobil kontrolde şunlara bakıyorum:
- Metin yakınlaştırmadan okunuyor mu?
- Butonlar parmakla rahatça seçiliyor mu?
- Yatay kaydırma oluşuyor mu?
- Menü klavye ve dokunmayla açılıyor mu?
- Görseller kırpılmadan amacını koruyor mu?
Sayfa hızı tasarımın neresinde?
Yavaş açılan bir sayfanın iyi görünümü kullanıcıya ulaşamaz. En büyük görselleri doğru ölçüde dışa aktarmak, WebP veya AVIF gibi uygun formatları kullanmak ve ilk ekranda gerekmeyen dosyaları sonradan yüklemek önemli fark oluşturur.
JavaScript yalnızca gerçek bir iş yaptığında eklenmeli. Menü ve temel içerik mümkün olduğunca JavaScript çalışmasa bile erişilebilir kalmalı.
Erişilebilirlik için temel kontroller
Renk kontrastı, klavye odağı, anlamlı başlık sırası ve görsel alternatif metinleri başlangıç noktasıdır. “Buraya tıkla” yerine bağlantının nereye gittiğini anlatan metinler kullanmak hem kullanıcıya hem arama motoruna daha açık bilgi verir.
Form alanlarında yalnızca placeholder kullanmak yerine görünür etiket eklemek gerekir. Hareketli efektler için “hareketi azalt” tercihini desteklemek de hassas kullanıcılar açısından önemlidir.
Tasarımdan koda çalışma sırası
- Sayfanın amacını ve ana eylemini belirle.
- İçeriği başlık sırasına göre yaz.
- Siyah-beyaz tel kafes oluştur.
- Mobil düzeni masaüstüyle birlikte düşün.
- Renk ve tipografiyi ekle.
- Gerçek cihazda hız ve kullanım testi yap.
Web tasarımında boşluk kayıp alan değildir; içeriğin anlaşılması için bırakılan nefes alanıdır.
Bu sitede de tasarım kararlarını yalnızca masaüstü ekran görüntüsüne göre değil, görsellerin gerçek oranı ve telefondaki dokunma davranışıyla birlikte değerlendirmeye çalışıyorum.