12. SınıfGrafik ve Fotoğraf / Tasarım
Web Tasarımı — Çalışma Sayfası
Kazanımlar, önemli noktalar ve sık yapılan hatalar tek sayfada.
Bu konuda öğrenecekleriniz
- Web sayfasının amacını ve kullanıcı yolunu netleştirebilir.
- Duyarlı yerleşimin gerekçesini ve kırılma noktalarını açıklar.
- Okuma sırasına uygun içerik yerleşimi kurabilir.
- Görsel ve dosya boyutlarını yükleme süresine etkisiyle birlikte değerlendirir.
- Erişilebilirlik ve ölçüm adımlarını uygulama planına dâhil eder.
Önemli noktalar
- Web sayfası, ziyaretçinin ihtiyacına göre kurgulanır.
- Üstbilgi, sitenin adını, gezinme bağlantılarını ve ana eylemi barındırır.
- Yerleşim, ekran genişliğine göre yeniden düzenlenmelidir.
- Okuma sırası, önem sırasına göre kurulur.
- Bağlantı metni, nereye gidildiğini açık biçimde söyler.
- Görseller, ekranda görüneceği boyuttan büyük hazırlanmaz.
- Görsellere alternatif metin eklenerek erişilebilirlik sağlanır.
Formüller ve kurallar
- Sayfa amacı = ziyaretçinin ulaşacağı bilgi veya eylem
- Yükleme süresi = indirilen dosya toplamı ÷ bağlantı hızı
- Form doldurma oranı = formu gönderen sayısı ÷ formu gören sayısı
- Alternatif metin kapsama oranı = açıklaması olan görsel ÷ toplam görsel
- Duyarlı yerleşim = kırılma noktalarında yeniden düzenlenen yapı
- İçerik hiyerarşisi = başlık → alt başlık → paragraf düzeni
- Ölçüm = ziyaretçi davranışının sayısal olarak izlenmesi
Sık yapılan hatalar
- Sayfayı sabit genişlikte tasarlamak: Sabit genişlik, dar ekranda yatay kaydırma çıkarır ve okuma konforunu düşürür.
- Önemli bilgiyi sayfanın altına koymak: Göz yukarıdan aşağıya okuduğu için alt bölümdeki bilgi geç fark edilir.
- Anlaşılmaz bağlantı metni kullanmak: Tıklamadan önce nereye gidildiği bilinmediğinde kullanıcı yanlış sayfaya yönelir.
- Görselleri yüksek çözünürlükte hazırlamak: Ekran ihtiyacının çok üzerindeki çözünürlük, dosyayı büyütür ve yükleme süresini uzatır.
- Alternatif metni atlamak: Açıklama içermeyen görseller, ekran okuyucu kullanıcıları için bilgi taşımaz.
Hızlı tekrar ipuçları
- Sayfayı dar ekranda açarak yatay kaydırma olup olmadığını denetle.
- Ön bilgiyi ilk bakışta görüp göremediğini küçük ekran görüntüsüyle ölç.
- Görsellerin dosya boyutunu ölç ve gereksiz büyük dosyaları küçült.
- Bağlantı metinlerini tek tek okuyup neyi anlattığını kontrol et.
- Alternatif metni olmayan görselleri listeleyerek erişilebilirlik açığını kapat.
Kendini dene
Bu sayfayı okuduktan sonra konu anlatımını tekrar oku ve kendi cümlelerinle özetle.