Temel Tasarım İlkeleri 6 - Ana Sayfa Düzeni

 Web sitemizin ana sayfası çok önemlidir. Ana sayfa kullanıcıyı ilk karĢıladığımız yerdir. Bu yüzden düzenli olmalı, sitenin önemli bölümlerine tek tıklama ile ulaĢılmasını sağlamalıdır. Ayrıca hızlı yüklenmesi de çok önemlidir. (ġekil 2.1). ġekil 2.1: Bir ana sayfa örneği

2.2.1. Sayfa Ġçi YerleĢim Planı

Ġçeriklerin verildiği bölüm web sitemizin iç sayfalarıdır. Bu sayfaları hazırlarken referans alacağımız Ģey içerik yerleĢimidir. Ġçeriği koyacağımız yer ile beraber yönlendirici menüler (navigasyon), resimler, animasyonlar, reklam alanlarının yerlerini de planlamamız gerekir. Metin ve resimler arasındaki boĢluklar, yazı tipleri, büyüklükleri, renkler, baĢlıkların planlaması yapılır (ġekil 2.2) ġekil 2.2: Bir iç sayfa örneği

2.2.2. Sayfa Çözünürlüğü

Web tasarımı yaparken dikkat edeceğimiz Ģeylerden biri kullanıcıların ekranında yatay kaydırma çubuğu oluĢturmamaktır. Sayfalarımız uzadığında dikey kaydırma çubuğu oluĢması internet kullanıcılarını çok rahatsız etmez ama dikey kaydırma çubuğu yanında yatay kaydırma çubuğu oluĢması rahatsızlık verir. Kullanıcıyı yorar. Bu yüzden web sayfası tasarlarken genelde yatay olarak sabit büyüklükte çalıĢılır. Web sayfalarında dikey kaydırma çubuğunun oluĢacağı dikkate alınarak yatay çalıĢma alanı gelende ekran çözünürlüğünden daha ufak seçilir. Örneğin 1024 piksel geniĢlikteki bir ekran çözünürlüğü için sayfa kenarındaki boĢluklar da dikkate alınarak 980 piksel geniĢlikte bir sayfa tasarımı yapılır. Biz 1600x1200 çözünürlüklü bilgisayarımızda bir ekranın her yerini dolduran web sayfası tasarımı hazırladık diyelim. Bu tasarım bizim bilgisayarımızda çok iyi görünürken baĢka bilgisayarlarda ekranda tam olarak görünmeyebilir. Bu yüzden sayfa çözünürlüğü belirlerken dikkat etmemiz gereken en önemli Ģey internet kullanıcılarının ekran çözünürlükleridir. Kullanıcıların hangi ekran çözünürlüklerinde bilgisayar kullandıklarını öğrenip en çok kullanılan ekran çözünürlüklerine göre tasarımımızı yapabiliriz. Kullanılan ekran çözünürlükleri analiz yapan, istatistik tutan internet sitelerinden öğrenebilirsiniz (ġekil 2.2).

ġekil 2.3: Bir haber sitesi için kullanıcıların ekran çözünürlükleri

Grafikte en çok kullanılan ekran çözünürlüğü 1024x768 olarak gözükmektedir. Diğer ekran çözünürlükleri daha büyüktür. Eğer biz sitemizi 1366x768 çözünürlüğe göre ayarlayacak olursak sayfa tasarımını en fazla ekran alanını kullanabilmek için 1340 piksel geniĢlikte yaparız. O zaman 1024x768 ekran çözünürlüğünde ekranda yatay kaydırma çubuğu çıkar. Bu da internet kullanıcıların hiç sevmediği bir Ģeydir. Bizim tasarımı 980 piksel geniĢlikte yapmamız bütün ekran çözünürlüklerinde yatay kaydırma çubuğu çıkmasını engelleyecektir. Ancak dikey kaydırma çubuğu kadar bir boĢluk bırakılacak diye bir kural yoktur (Dikey kaydırma çubuğunun geniĢliği 20 piksel kadardır.). Önemli olan dikey kaydırma çubuğunun çıkarılmamasıdır.Ekran çözünürlüğüne göre değiĢen (büyüyüp küçülebilen) web sayfası tasarımları da yapabiliriz. Ama bu istediğimiz tasarımda farklılıklar oluĢturabilir ve biraz daha uğraĢtırıcıdır.

ġekil 2.4: Tasarımımız sabit çözünürlükte olabileceği gibi (solda) ekran çözünürlüğüne göre de büyüyüp küçülebilir (sağda).

Teknoloji geliĢtikçe ekran çözünürlükleri de değiĢmekte ve buna bağlı olarak tasarımların geniĢlikleri de değiĢmektedir. Bu yüzden buradaki veriler ilerleyen zamanlarda değiĢecektir.

2.2.3. Reklam Alanlarını Belirleme

Ġnternet geliĢtikçe internetin para kazanma yöntemlerinden biri olan reklam sektörü de geliĢti. Buna bağlı olarak web sayfalarında kullanılacak reklam alanları (banner) da standart hâle gelmeye baĢladı. Zorunlu olmamakla birlikte web sayfamızda kullanacağımız reklam alanlarımız var ise bu alanları standartlara uygun bir Ģekilde düzenlememiz uygun olacaktır. Ekran çözünürlükleri değiĢtikçe reklam alanı standartları da değiĢse de günümüzde kullanılan reklam alanı standartlarından bazıları aĢağıdaki gibidir.

 468 x 60 piksel – (Tam banner) (ġekil 2.5) ġekil 2.5: 468x60 piksel reklam (banner) örneği  234 x 60 piksel – (Yarım banner) (ġekil 2.6) ġekil 2.6: 234x60 piksel reklam (banner) örneği  88 x 31 piksel – (Mikro Bar) (ġekil 2.7) ġekil 2.7: 88x31 piksel reklam (banner) örneği  120 x 90 piksel – (Buton 1) (ġekil 2.8) ġekil 2.8: 120x90 piksel reklam (banner) örneği  120 x 60 piksel – (Buton 2) (ġekil 2.9) ġekil 2.9: 120x60 piksel reklam (banner) örneği  120 x 240 piksel – (Dikey banner) (ġekil 2.10) ġekil 2.10: 120x240 piksel reklam (banner) örneği  125 x 125 piksel – (Kare Buton) (ġekil 2.11) ġekil 2.11: 125x125 piksel reklam (banner) örneği  728 x 90 piksel- (Leaderboard) (ġekil 2.12) ġekil 2.12: 728x90 piksel reklam (banner) örneği

Ayrıca;  300 x 250 piksel – (Orta Dörtgen)  250 x 250 piksel – (Kare Pop-Up)  240 x 400 piksel – (Dikey Dörtgen)  336 x 280 piksel – (GeniĢ Dörtgen)  180 x 150 piksel – (Dörtgen)  300 x 100 piksel – (3:1 Dörtgen)  720 x 300 piksel – (Pop-Under) büyüklüklerinde reklam alanları da kullanılmaktadır.