Web tasarımı nasıl yapılır

PROFESYONEL WEB TASARIMI
Web, ticaretin, yayıncılığın ve haberleşmenin en pratik yoludur. Bu sebeple başarılı, düzenli ve şematik bir web sitesi veya sayfası dizayn edebilmek önemli bir konu haline geldi.
Bütün bu düzenli şematik görüntülerin altında yatan neden, insan beyninin algılama ve hatırlama kapasitesidir. Psikologlara göre çoğu insanlar, kısa bir zaman diliminde 4 - 7 farklı yoğunlukta bilgileri hatırlayabiliyorlar fakat zaman uzadıkça konuya hakimiyetleri de azalıyor. Şematik görüntülerin hedefleri ise ana başlıklar altında kısa, öz, anlaşılabilir ve tasarım destekli bilgiler vererek insanların belleklerinde belli bir süre de olsa yer edinebilmektir.
Bir çok web sitesi, insanların araştırabileceği küçük bölümlerde referans bilgiler içerirler. Kullanıcılar (okuyucular) uzun ve bitişik belgeleri nadiren bilgisayar ekranından okurlar. Çoğu insanlar özellikle aradığı belgeleri kısa, anlaşılır, referans bilgilerin bulunduğu sayfalardan aramayı ve aradıklarını bulduktan sonra uzun içerikli bilgileri yazıcıda bastırmayı tercih ederler. Küçük bölümler halinde anlatılmış belgeler, anlaşılabilir organizasyon şeması oluşturmak açısından önemlidir ve ayrıca web sitenizde hypertext bağlantılar kurmaya yardımcı olurlar.
Kısa, şekilsel - organize belgeler bölümleri kullanıcıları sayfaya daha fazla çeker. Çünkü:
• Çok az web kullanıcıları, ekranda uzun belgeleri okuyarak zaman kaybederler. Çoğu kullanıcılar uzun belgeleri sabit disklerine kaydederler veya kağıttan okumak amacıyla yazıcıya bastırırlar.
• Belgeleri bölümlere ayırmak, onları web bağlantıları ile birbirine bağlamak açısından yaralıdır. Belli konularda ilgili bilgiler elde etmek isteyen kullanıcılar için, bağlantılar, belgelerin ayıklanması ve aradıklarını kolay bulma açısından önemlidir. Fakat belgeler gereğinden fazla bölümlere ayrılmamalıdır. Aksi halde okuyucuların beklentileri boşa çıkartılır. Bölümlerin web üzerinde 1 - 3 sayfa kadar olmaları mantıklıdır. Sadece küçük bir paragraf içeren bağlantılar çoğu koşullarda çirkin görünecektir.
• Bilgilerin sunumunda ve organize edilmesinde hazırlanan belirli bir format, şekilsel açıdan önemli olmasının yanı sıra kullanıcıların sitenizdeki geçmiş deneyimini, gelecekteki aramalar ve araştırmalarına uygulamalarında yardımcı olur.

Eğer okuyucu için temel tarama yapısına uygun bir site isteniyorsanız, belgeler;
• Uygun bölümlere ayrılmalı,
• Önem ve genelliğe bağlı olarak bir hiyerarşi içinde olmalı,
• Hiyerarşi bölümler arasındaki ilişkiyi yapılandırmada kullanılmalı,
• Sistemin işlevsel ve estetik başarısını analiz etmelidir.

Sayfanızda ilk olarak öncelikli bilgileri sunarsanız, en önemliden veya en genel başlıklardan daha ilgili veya daha ayrıntılı bilgilere doğru bir hiyerarşik düzen kurabilirsiniz. Web’ de hiyerarşik organizasyonlar gereklidir. Çünkü çoğu ana sayfa ve bağlantı şemaları hiyerarşik bir düzene sahiptirler. Aşağıdaki sayfada da görüldüğü gibi ana sayfayı alt sayfalar ve içeriksel sayfalar izler

Sayfalar Arası İlişkiler
Mantıklı bir site organizasyonu, kullanıcıların aradıklarını nerede bulabilecekleri hakkında doğru yönlendirmeler yapar. Eğer ilişkiler mantıklı yapılar halinde kurulmazsanız sayfa okuyucunu aklını karıştırmaktan başka işe yaramaz

Yapıyı oluşturduktan sonra istatistikleri ve organizasyon şemasının pratikliği ve ne kadar hızlı ve verimli çalıştığı analiz edilmelidir. Geçerli www site tasarımı geniş olarak yapının dengelenmesi ve menü ilişkileri veya ana sayfa ve ara sayfalar, diğer bağlantılı sayfalar, grafikler ve belgelerin sonucudur. Amaç kullanıcıya doğal gelen menü ve sayfa hiyerarşisi oluşturabilmektir. Birkaç örnek verirsek:

1- Çok geniş: Esas menü, birbirleriyle ilgisiz çok yayılmış,tekdüze bir yapı gösteriyor.

2- Çok derin: Menü sayfaları gereksizce derinlere doğru uzanıyor, fakat içerik oldukça az. Yani başı ve sonu gelen sayfalar var. Sayfalar hem çok ince hem de çok uzun görünüyor.

3- İyi dengelenmiş:İyi dengelenmiş hiyerarşik bir ağaç yapısı oluşturmada amaç, okuyucunun sayfa yapısını kolay idrak edebilmesini ve sayfalar arasında kaybolmamasını sağlamaktır. Eğer menülerimiz 4 - 5 bağlantıdan az bağlantı içeriyorsa değerlerini kaybederler.
Web sayfalarının düzenli ve tutarlı bir sistemle hazırlanmasındaki amaç, hedef kitlenin kısa sürede sayfa düzenine adapte olarak aradıkları bilgiye kolayca erişmelerini sağlamaktır.
Web sayfasına iyi bir örnek Şekil - 2.7.’ de verilmiştir. Bu örnekte; sayfanın alt ve üst kısmında görüntü haritaları kullanılmıştır.
Sayfanın hangi siteye ait olduğu, belgelerin içeriği, konu başlıkları gibi temel bilgiler burada sabit bir düzen içinde verilerek aynı zamanda "ileri" "geri" düğmeleri eklenerek bir önceki ve bir sonraki sayfaya geçiş kolaylığı sağlanmıştır.
Sayfanın sol yanında ayrılan bölüm ana sayfaya ve konunun alt başlıklarına bağlantı için kullanılmıştır. Okuyuculara sunulan bilgi bu sınırlandırma içinde, düzgün ve orantılı başlıklar altında metin ve grafik olarak gösterilmiştir. Belgelerin bütün sayfaları bu standart formata uygun halde hazırlanmıştır. Böylece, kullanıcılar ilk sayfayı inceledikten sonra diğer sayfalarda aradıkları bilgilerin nerede olduğunu tahmin edebileceklerdir


Bir Sayfa Hazırlanırken Dikkat Edilecekler

Sayfada Grafik Kullanılırken Dikkat Edilecekler
Grafiklerin güvenli bir şekilde görüldüğü alan, iki ayrıntıya göre belirlenir:
1. Günümüzde kullanılan en düşük ekran çözünürlüğü.
2. Web sayfalarının yazdırılacağı kağıdın boyutu.

Ekran Boyutu
Akademik olarak ve iş ortamında en çok kullanılan ekranlar 14 - 16 inch’ lik olanlardır ve bu nispeten küçük olan ekranlar 640X480 nokta ekran çözünürlüğüne sahiptir. Bu ölçüleri aşan web grafiklerini görebilmek için kullanıcılar ekrandaki görüntüyü aşağı ve yana kaydırmak zorunda kalacaklardır.

Sayfanın Yazdırılabilirliliği
En küçük ekranlarda bile görülebilen grafikler bazen yazdırılma sırasında standard A-4 sayfasını aşmaktadırlar. Özellikle uzun metinler halinde hazırlanan web sayfalarının yazdırılabilirliliğine çok dikkat edilmelidir. Birçok okuyucu ekrandan okumak yerine bu sayfaları yazdırmayı tercih eder ve sayfalar fazla geniş hazırlanmış ise artan kelimeler yazdırılamayacaktır.
Aşağıda verilen değerler, 640X480 nokta ekran çözünürlüğü baz alınarak hesaplanmış, Internet Explorer ve Netscape Navigator gibi sık kullanılan tarayıcılar ve MacOS ve Windows95 işletim sistemlerinde problemsiz olarak görülüp yazdırılabilecek sayfa boyutlarıdır.

Yazdırılabilirlik ===> Maksimum genişlik : 535 piksel
Maksimum yükseklik : 295 piksel
Ekranda Görüntü ===> Maksimum genişlik : 595 piksel
Maksimum yükseklik : 295 piksel

Planlı bir grafik tasarımın amaçlarından birisi de kullanıcıların gözünde, siteye ait her sayfaya bir özellik kazandırmaktır. Siteye ait olan her sayfada bir imza niteliği taşıyan bantlar kullanıcılara farklı başlıklar sunarak istedikleri diğer bağlantı sayfalarına geçiş imkanı verir.
Uzun dokümanlar halinde hazırlanan web sayfalarında konu başlıkları her sayfada verilerek okuyucuya kolaylık sağlanmalıdır. Böylece okuyucular, istedikleri zaman konunun herhangi bir alt başlığına doğrudan geçiş yapabileceklerdir. Ayrıca genel hatlarıyla dokümanın neleri içerdiğini her an görebilecek ve bir kopukluk yaşamadan istedikleri bilgileri alabileceklerdir.
Sayfa sonlarında yine sayfanın hangi siteye ait olduğunu ve siteden genel anlamda ulaşıla bilinecek sayfaları gösteren bir bant bulundurulabilir. Genelde kullanıcılar sayfa sonuna geldiklerinde, sayfanın en başında sunulan bilgileri ve bağlantıları göremezler, dolayısıyla sayfa sonundaki menü kullanıcılar için bir avantaj sağlayacaktır (2).


Doküman Uzunluğu ve Ekran
Araştırmalara göre uzun dokümanlarda, tarayıcı ekranını aşağıya doğru kaydırmak zorunda kalmak problem yaratmaktadır. Kullanıcılar sayfada aşağı doğru indiklerinde sayfanın üst kısmında verilmiş olan ana başlıkları, diğer sayfalara olan bağlantıları ve konu başlıklarını kaybetmektedir.
Uzun web sayfalarında gezinebilmek için kullanıcı ekranın sağında bulunan kaydırma çubuğunu kullanmak zorunda kalmaktadır. Machintosh ve Windows 3.1 gibi birçok grafik ara yüzünde kaydırma çubuğunun boyutu sabittir ve belgelerin uzunluğu hakkında fazla bilgi vermez. Çok uzun web sayfalarında kaydırma çubuğunun küçük bir hareketi ekranın tüm görünümünü değiştirebilir (2).

Ancak uzun web sayfalarının bazı avantajları da vardır. Sayfa tasarımcıları için hazırlaması, kullanıcılar içinde yüklemesi kolaydır. Uzun belgelerde site tasarımcıları bağlantı sayfalarını organize etmek zorunda kalmazlar. Böylece kullanıcılarda her defasında ayrı ayrı dosyaları yüklemek yerine bir kerede uzun belgeleri yüklerler.
Web sayfaları çok uzun olduğunda kullanıcılar bu sayfaları okumak yerine yazdırırlar.

Browser Yazılımlarına Dikkat
Dünya çapında en çok kullanılan browser yazılımları Microsoft Internet Explorer ve Netscape Communicator yazılımlarıdır. Sitenizi oluştururken mutlaka ve mutlaka her ikisinde de test edin. Mümkünse bu testi sabit diskinizde değil siteniz server bilgisayarına yüklendikten sonra ağ üzerinden yapın. Böylece sayfanın yükleniş hızı hakkında da bir fikir elde edersiniz. Yazılımların birbirinden ters düştüğü hususların başında tablolar geliyor. Tabloları oluştururken genişlik elemanlarını % ile değil de piksel olarak verilirse daha sağlam bir sayfa ortaya çıkar. Böylece farklı ekran çözünürlülüklerinde çalışan kullanıcıların sayfayı aynı şekilde görmeleri sağlanmış olur (3).

Sütunlar
Bir gazete veya dergi satın aldığınızda yazıların belirli sütunlar halinde yerleştirildiğini görürsünüz. Asla ve asla yazılar dümdüz bir sıra halinde yazılmaz. Bunun amacı yazıların daha kolay okunabilir hale getirmek. insan gözü ancak 5 veya 6 kelimelik sütunları problemsiz olarak takip edebilir. Daha uzun yazları okurken, özellikle bir alt satıra geçerken yazının hakimiyeti kaybedilebilir ve zamanla göz yorulur. Bunun için sayfalarınıza metinler yerleştirirken mümkün olduğunca daha ince sütunlar kullanmaya çalışın. Böylece daha hoş görünümlü bir sayfa elde edersiniz. Aynı zamanda ziyarete gelenler sayfaları daha rahat okuyabilirler (3).

Paragraflar
Uzun yazıları paragraflara ayırmak, onları çekici hale getirmenin bir yolu. Paragrafsız uzun yazılar, hem görünüm açısından kötü olur hem de okuyucu yazıyı takip etmekte zorlanır. Paragraflar ayrıca değişik konuları birbirinden ayırmak içinde iyi bir yöntemdir (3).

Klişe Görüntüler
Web üzerindeki binlerce URL artık birbirinin kopyası haline geldi. Aynı zemin desenleri, butonlar, javascriptler vs. her sayfanın birbirine benzemesine sebep oluyor. Öncelikle kendinize özgü bir şeyler yapmalısınız. Eğer bir sayfada butonların yerleşimini beğendiyseniz ve bunu kullanmak istiyorsanız en azından butonlar oldukça farklı bir şekilde kendiniz dizayn etmeye çalışın (3).

Çalışma Ortamı
Bilgisayarınızla çalışırken hangi editörü kullanıyor olursanız olun birkaç yardımcı programa ihtiyaç duyacaksınız. Bu programların kısa yollarını kolay ulaşabileceğiniz yerlerde bulunsun (3).

Ana sayfa scrollbar’ ı bu kadar küçültecek derecede uzun olmamalı
Font rengi sayfa ile uyuşmuyor. Başlık resim olmadığı için antialias problemi var
Zemin deseni kötü seçilmiş Bu sebepten yazılar kolay okunamıyor. Sayfanın ortasına konulan uyarı ise bir çok ziyaretçinin canını sıkacaktır.
Lüzumsuz bir gif animasyonu

640x480 ayarında monitör kullananlar logoyu ortadan kesik görüyorlar