Web Dizayn ‘ da Olması Gereken 15 Anahtar İpucu

Bir web sitesinin web dizayn işlemlerini yaparken ve

geliştirirken göz önünde bulundurmak gereken pek çok ayrıntı
vardır. gerçekte bu ayrıntılar sonsuz bir listenin birer parçası
gibi görünebilirler ancak listeye dikkatli bakıldığında bu
elementlerden birkaçının diğerlerinden daha önemli olduğu ve
bu elementlerin de en başarılı web siteleri tarafından kullanıldığı
gözlenir.

web sitenizin planlama aşamasını tamamladığınızda geriye

kalan elementler kullanıcı arayüzü tasarımı’ndan i̇çerik
oluşturmaya, oradan da geliştirme aşamasının kendisine kadar
değişen geniş bir kategori yelpazesine yayılır. elbette arama
motoru optimizasyonu (seo) için de dikkat edilmesi gereken
bazı ayrıntılar var ama şimdilik onu bir kenara bırakalım

işte en iyiyi hedefleyen her web sitesinin sahibi olması gereken

15 anahtar element.

1. İyi Görsel Tasarım

ilk olarak görsel tasarım. sizi bilmem ama ben bir web sitesini
ziyaret ettiğimde eğer site beni görsel olarak tatmin etmiyorsa
o siteyi kısa sürede terk ederim bunu derken her iyi web
sitesinin görsel olarak güzel görünmesi gerektiğini söylemeye
çalışmıyorum, ama eğer bir web sitesi 1994′ten beri
güncellenmemiş gibi görünüyorsa, diğer mükemmel web
sitelerinin yanında sönük kalacağı aşikardır. temiz ve sade bir
tasarım genellikle ihtiyacınız olan tek şeydir. sitenizdeki parıltılı
nesneler de güzeldir ancak ben “az ama öz” teorisine
inanlardanım. tasarımınızın kalabalık olmasını istemezsiniz.
onun sadece güzel görünmesini, böylece rakiplerinizin önüne
geçerek potansiyel müşterilerinizin dikkatini çekmesini
istersiniz.

ilk izlenim önemlidir. her ne kadar tek başına iyi bir tasarım bir
kişiyi sitede tutmaya yetmese de, göz alıcı tasarımlar

1
 ziyaretçinin sitenizde daha uzun süre kalmasını sağlayacak, en
sonunda da aradıkları içeriğe ulaşabilmek için daha fazla çaba
sarfetmiş olacaklardır.

2. Düşünceli Kullanıcı Arayüzü

İyi tasarımla birlikte iyi bir kullanıcı arayüzü de gelir. Kullanıcı

arayüz, başarılı işlevselliği olan sitelerin temelini oluşturur. Bir
siteyi tasarlarken daima averaj kullanıcıyı göz önünde
bulundurmalısınız. Sitenizi kimler ziyaret edecek – ideal
müşteriniz kimler? Teknolojiye yatkınlar mı? Bilgisayar bilgileri
iyi mi?

İdeal ziyaretçinizin bir görselini kafanızda canlandırmak ve

siteniz için yapacağınız tasarımı planlandırırken bunu göz
önünde tutmak daima yardımcıdır. Sitenizi ziyaret eden
ziyaretçilerin birşey satın almadan ya da sitenize abone
olmadan önce onların ihtiyacı olabilecek her şeyi
sunduğunuzdan emin olun.

Navigasyonunuzun kolayca farkedilebilebilir olmasını ve site

genelinde tutarlı bir şekilde kalmasını sağlamalısınız. Hem ana
navigasyon üzerinde hem de içerik alanınızdaki bağlantılarda
kullanıcının nereye tıklaması gerektiğini kolayca anlamalarını
sağlayın.

3. Öncelikli navigasyonunuz görünebilir olsun

Gezinmesi kolay bir web sitesi sahibi olmanın bir bölümü,

önceliğin navigasyonda olmasını sağlamakta yatar. Sitenizin
anahtar bölümlerine bağlantılar içeren kesim, sitenizin ilk
bakışta görünebilir alanında olmalıdır. Günümüzün büyüyen
monitör boyutları göz önüne alındığında görünen kesim site
tasarımınızın üst kısmındaki 500-600 piksellik kısma işaret
ettiğini unutmayın.

1
 Bu alan içerisinde yer alabilecek elementler logonuz (ki bu logo
sitenizin ana sayfasına bağlantı içermelidir) ve bunun yanısıra
sitenizin ana alanlarına bağlantılar olabilir. Bu kısmda eğer alt
sayfalara bağlantı verebilirseniz çok güzel olur ancak çoğu
durumda bu, tasarımınızın kalabalık olmasına yol açacaktır.

Örneğin “Ana Sayfa | Hakkında | Servisler | SSS | İletişim”

bağlantılarını sitenizin en üst kısmında kolay bulunabilecek bir
yere yerleştirebilirsiniz. Biyografi ve Özgeçmiş gibi alt sayfaları,
sitenizin yan çubuğuna ya da dahil oldukları sayfa başlığının
altına bağlantı olarak yerleştirebilirsiniz.

Burada önemli olan şey tutarlılıktır. Hem ana bağlantılarınızın

hem de alt bağlantılarınızın sitenizin geneli boyunca aynı yerde
olmasına özen gösterin.

4. Altlık Kısmında Navigasyonu Tekrar Edin

Eğer sitenizdeki ana navigasyon için görseller (ya da flash)

kullanırsanız, sitenizin altlık kısmında navigasyon içeriğini tekrar
etmeniz önemlidir. Sitenizin üst kısmında metin bağlantılar
kullanıyor olsanız bile altlık kısmında bu bağlantıları yinelemeniz
yardımcı olacaktır. Ziyaretçilerinizin sitenize baktıklarında
aradıkları içeriğe kolayca ulaşabilmelerini sağlamalısınız.

Çoğu zaman altlık kısmı “Kullanım Sözleşmesi” gibi diğer

bilgileri de içerebilir. Bu alanda bulunması kolay olması gereken
ancak üst kısımdaki ana navigasyon bölümünde yer alacak
kadar önemli olmayan bağlantıları listeleyebilirsiniz.

5. Anlamlı İçerik

“İçerik her şeydir” sözünü daha önce duymuşsunuzdur. İlk

bakışta göze hoş gelen bir web sitesi sahib olabilirsiniz ancak o
sitenin içeriği doyurucu değilse, ziyaretçinizin sitenizde uzun
süre kalmayacağından emin olabilirsiniz.

1
 Web siteniz için içerik yazarken şirketiniz, ürünleriniz,
hizmetleriniz gibi öğeler hakkında yardımcı ve öğretici bilgiler
sunabilmeniz önemlidir. Eğer bir blogunuz varsa, uzmanlık
alanınıza yönelik bilgilendirici makaleler inanılmaz derecede
yardımcı olacaktır.

Kendinizi ya da şirketinizi satmanız her ne kadar önemli olsa da,

bunu ziyaretçilerinizin gözüne sokmamalısınız. Özellikle
bloglarda blogunuzu ziyaret eden kullanıcıların daima sizin
kişisel yaşamınız hakkında birşeyler okumak istediğini sanmayın
– ziyaretçileriniz onlara nasıl yardımcı olabileceğinizi bilmek için
oradalar.

6. Düzgün Hakkında Sayfası

Bu makalenin yazarının sitesindeki 10 popüler sayfası arasında

(ana sayfadan, blogdan, 3 özel blog girdisinden ve portfolyo
sayfasından sonra) Hakkında sayfası gelmektedir. İster inanın
ister inanmayın, sitenin Hakkında bölümü, hizmetler ve
portfolyo sayfalarından daha çok dikkat çekmektedir.

Bunun tek açıklaması vardır ki o da insanların meraklı

olduğudur. İnsanlar bir şirketin ya da blogun ardında kimlerin
olduğunu bilmek isterler. Ben biyografi sayfama kendi
fotoğrafımı eklemek konusunda biraz utangaçtım, ancak birkaç
ay önce en sonunda kendi fotoğrafımı ilgili sayfaya ekledim.
Meraklılık hissinin neler yaptırabileceğine inanamazsınız. Şöyle
bir baktığımda ben de kendimi sık sık bir tasarımcının ya da
yazarın Hakkında sayfasını okurken buluyorum.

Kendi geçmişiniz ve bunun işinize ya da uzmanlık alanınıza olan

etkileri hakkında bilgilerden bahsedin. Hakkında sayfası
potansiyel müşterilerinize kendiniz hakkında biraz daha fazla
bilgi verir ve sitenizin daha “kişisel” bir görünüme bürünmesini
sağlar. Eğer yazınızı okuyorlarsa ve sizin hakkınızda biraz daha
fazla şey bilmek istiyorlarsa, Hakkında sayfası sayesinde sizinle
daha iyi bir bağ kuracaklar ve başka bir seviyede sizinle daha iyi
iletişim kurabileceklerdir.

1
 Potansiyel müşteriler genellikle, azıcık bile kişisel olmayı
reddeden karaktersiz kurumların aksine arkasında “gerçek”
kişilerin olduğu şirketleri seçerler.

7. İletişim Bilgisi

Sizinle nasıl iletişim kurabileceğini bulamamaktan başka hiçbir

şey potansiyel müşteriyi bu kadar geri çekmez. Eğer
hizmetlerinizle ilgileniyorlarsa ve sizinle iletişim kurup sizi
kiralayabilecek basit bir sayfa dahi bulamıyorlarsa, kendinizi
yarışmayı kaybetmiş olarak görebilirsiniz.

İdeal olarak tek bir iletişim yönteminden daha fazlasını vermek

isteyeceksinizdir. En azından bir elektronik posta adresi ve
iletişim formu. Sizi daha “gerçek” kılmak için ise bir telefon
numarası ve eğer mümkünse bir posta adresi eklemeniz önerilir.
Pek çok bireysel çalışanın (freelancer) evlerinden çalıştığını
biliyorum, zira ben de öyleyim. Bu durumda ev telefonunuzu
sitenizde yayımlamak istemeyebilirsiniz. Bu sebeple sadece iş
görüşmeleri için kullanacağınız bir hat alarak ve bir posta
kutusu kiralayarak bu sorunun önüne geçebilirsiniz.

Bu yöntemlerin vergiden düşülebildiğini ve sizi sitesinde sadece

elektronik posta adresi sunanlardan çok daha profesyonel
göstereceğini unutmayın. Aynı gemideki diğer evden çalışanlar
için bu bir değişiklik arz etmeyecektir. Ancak eğer büyük
boyutlu ya da kurumsal müşterilerle çalışırsanız, ulaşılabilir bir
telefon numarası ve posta adresi, kararlılığın bir göstergesi
olacak ve onların bir başkası yerine sizi tercih etmelerinde
küçük bir rol oynayacaktır.

8. Arama

1
 Eğer büyük bir web siteniz ya da blogunuz varsa, arama özelliği
kullanmanız çok yardımcı olacaktır. Arama özelliği olmadan
sitenizdeki yüzlerce sayfa arasında ziyaretçinizin aradığını
bulmasını beklemek doğru olmaz. Eğer potansiyel müşteriniz
aradıklarını bulamazsa, ancak bir başka sitede bulursa, sizin
hizmetiniz daha iyi olsa bile “bulunamadığı” için potansiyel
müşteriniz diğerini seçecektir. Siteniz üzerinde Google Arama
özelliğini kullanabilir ya da eğer WordPress (ya da diğer
bloglama platformu veya içerik yönetim sistemi) kullanıyorsanı,
bu platformlar genellikle bütünleşik arama motoru içerirler.
Statik HTML sitesi üzerinde arama motoru inşa etmek her ne
kadar kolay olmasa bile sizin için bunu yapabilecek servisler yok
değil.

9. Kayıt / Abonelik

Eğer web siteniz düzenli olarak içerik sunuyorsa (örneğin bir

blog), kullanıcılarınızın bu içeriğe kolayca abone olabilmelerini
isteyeceksinizdir.

Eğer WordPress blogunuz var ise bu eklemesi gerçekten kolay

olan bir başka özelliktir. Öntanımlı olarak WordPress üzerinde
besleme (feed) adresi bulunur. Ancak eğer bu durumu kontrol
altına almak istiyorsanız FeedBurner üzerinde ücretsiz bir hesap
açabilirsiniz. Daha da iyisi FeedBurner FeedSmith eklentisini
kullanarak blogunuzdaki tüm içeriğin otomatik olarak
FeedBurner hesabınıza aktarılmasını sağlayabilirsiniz. Bu
sayede içeriğinize abone olan kullanıcılar üzerindeki
kontrolünüz artacaktır.

Eğer bir blogunuz yoksa ancak buna rağmen elektronik posta

bildirileri için abonelik sunmak istiyorsanız örneğin, bunu sizin
için sağlayacak pek çok şirket bulunuyor. Bu şirketler sitenize
ekleyebileceğiniz ve bu sayede elektronik posta listeleri
oluşturup onları yönetebileceğiniz bir kod sunarlar (bu arada
FeedBurner da elektronik posta adreslerini toplamayı
destekliyor). Bazı durmlarda elektronik posta adresleri RSS

1
 aboneliklerinden daha iyidir, zira potansiyel alıcılarınızın
elektronik posta adreslerini depolayabilirsiniz. Abonelik
sayılarının ve diğer genel istatistiklerin izini sürebilirken, RSS
aboneliği olanlar güncellemelerinizi besleme okuyucuları
aracılığı ile alabilir ve herhangi bir elektronik posta adresi
vermek zorunda kalmazlar.

Bu Konu İle İlgili Aşağıdaki Yazıları da Okumak İsteyebilirsiniz 10

Kullanışlı Web Uygulaması Arayüzü Tekniği

10. Sitemap (Site Haritası)

İki tür site haritası bulunur – biri insanlar, diğeri arama motorları
içindir. Bir HTML (ya da PHP vs.) site haritasın sitenizi ziyaret
eden ziyaretçiler için paha biçilmez bir araç olabilir ziya bu
sayede sitenizin içeriğinin genel bir görünümüne ulaşarak
aradıklarını kolayca bulabilirler.

Bir web sitesindeki tüm sayfaların bir listesini oluşturan bir site
haritası özellikle sitenize arama özelliği ekleyemediğiniz
durumlarda çok kullanışlı olacaktır. Sitenizin altlıkkısmına
ekleyebileceğiniz bir diğer bağlantı da site haritası olabilir. İyi
bir site haritası sitenizdeki her bir sayfaı hiyerarşik olarak
listeleyerek sayfalar arasındaki ilişkileri ve onların alt ve alt-alt
sayfalarını gösterir.

11. Web Dizayn ve içeriği Ayırı Tutun

Anahat ve tasarım için HTML tablosu kullandığımız günler geride

kaldı. Günümüzde en iyi şekilde geliştirilmiş siteler XHTML ve
CSS kullanarak tasarım elementleri ile içerik elementlerini
birbirlerinden ayırıyorlar.

< div > etiketlerini kullanarak sayfanızdaki çeşitli metin ve

görsel alanları için kapsayıcılar oluşturabilirsiniz. CSS dosyası
kullanılmadığında tek göreceğiniz şey metindir, ki bu tam da
arama motorlarının görmek istediği şeydir.

1
 Harici bir CSS dosyasına bağlantı vererek içeriğinizi tasarımdan
ayırabilirsiniz. Bu sayede HTML sayfanızın kaynak kodunda
metinden başka neredeyse başka hiçbir şey yer almaz. Ayrı bir
CSS dosyası yazıtiplerini, renkleri ve arkaplan görselleri gibi site
tasarımınızı ilgilendiren elementleri içerirler.

İşin bir diğer güzel yanı ise sadece bir CSS dosyası üzerinde
güncelleme yaparak sitenizin tamamında görsel değişkliğe
gidebilecek olmanız. Bu sayede örneğin ana bağlantı renginizi
maviden yeşile dönüştürmek için sitenizdeki her bir sayfayı
değiştirmeniz gerekmez.

İçeriğin tasarımdan bu şekilde ayrılması ile arama motorları

karmaşık kodlar arasından içeriğinizi çekip çıkarmak zorunda da
kalmazlar. Harici dosya kullanımı ile sayfanızın açılma süresi de
kısalacaktır ki ziyaretçilerinizin istediği şey de budur.

Bu Konu İle İlgili Aşağıdaki Yazıları da Okumak İsteyebilirsiniz

Web dizayncılarının Kodlama Yapmalarının 6 Gereği

12. Geçerli XHTML / CSS

Sitenizi XHTML ve CSS kullanarak kodlamak yetmez. Kodun

doğru olması gerekir. Internet üzerinde kaynak kodunuzun
doğruluğunu test edebilecek paha biçilmez iki adet araç
bulunmaktadır.

W3C Kod Doğrulama Servisi

W3C CSS Doğrulama Servisi

Geçerli kod yazmak için pek çok sebep bulunmaktadır.

Doğrulanabilir bir kod yazarak sitenizin farklı tarayıcılarda aynı
biçimde görünmesine bir adım daha yaklaşmış olursunuz
(detayları için 13. adımı okuyun) ve bu arama motorlarına da
yardımcı olacaktır. Eğer siteniz geçerli web standartları
kullanılarak geliştirilmişse, arama motorları içeriğinize kolay bir
şekilde ulaşacaktır.

1
 Doğrulanabilir kod kullanarak işinizin ehli olduğunuzu göstermiş
olduğunuzdan bahsetmeme bile gerek yok. Evet,
müşterilerinizin pek çoğu aradaki farklı bilmeyecektir, ancak
bazıları bu farkı bilir, özellikle de sizden standartlarla uyumlu
kod yazmanızı isteyen müşteriler bu farkı önemserler.

Bunun dışında diğer web geliştiricileri de muhtemelen görünen

dağın ardında neler olup bittiğini görmek için sitenizin kaynak
kodunu kontrol edeceklerdir… Hem meraktan, hem de sırf bunu
yapabildikleri için!

13. Çapraz Tarayıcı Uyumluluğu

Firefoxla yatıp kalkıyor olabilirsiniz ancak bu müşterinizin de

sizinle aynı şeyi yaptığı anlamına gelmez. Müşterinizin Internet
Explorer kullanıyor olma ihtimali gerçekten yüksektir. Hatta ne
yazık ki Internet Explorer 6 bile kullanıyor olabilirler (beni bu
konuda konuşturmayın lütfen. Internet Explorer’ın defolup
gitmesini isteyen tek geliştirici olmadığımı söyleyeyim gitsin).

Hem kendi sitenizin hem de müşterileriniz için geliştirdiğiniz

sitelerin farklı tarayıcılar üzerinde aynı şekilde
görüntülenebilmesi önemlidir. Eğer sitenizi farklı platformlar
üzerinde de aynı şekilde görüntüleyebilirseniz bu size artı puan
kazandırır. Her ne kadar pek çok son kullanıcı PC kullanıyor olsa
da, Mac kullanan kullanıcı sayısında özellikle son iki yıldır büyük
artış gözlenmiştir. Eskiden sadece tasarımcıların ve
profesyonellerin kullandığı bir platform olan Mac, günümüzde
her kesim taradından kullanılmaktadır. Bu sebeple sitenizin Mac
üzerinde de PC’de göründüğü gibi görünmesini sağlamak
önemlidir.

Ne yazık ki pek çok kişi hem PC hem de Mac sahibi olacak kadar
şanslı değildir (Linux ve türevlerinden bahsetmiyorum bile)
ancak Browser Shots adı verilen bir sitenin yardımı ile sitenizin
adresini girip farklı platformlar altında farklı tarayıcıları seçerek
sitenizin ilgili tarayıcılar üzerindeki ekran görüntüsüne
ulaşabilirsiniz. Eğer PC’de Windows Vista kullanıyorsanız ve

1
 Internet Explorer 6′ya erişiminiz yoksa bu durum çok kullanışlı
olabilir.

Bu Konu İle İlgili Aşağıdaki Yazıları da Okumak İsteyebilirsiniz

Öğrenilmesi Gereken 15 CSS Hilesi

Her Web dizayncısının Öğrenmesi Gereken 9 Önemli CSS

Yeteneği

14. Web İçin Optimize Edilmiş Görseller

Web için tasarım yaptığınızda tüm görsellerinizi sıkıştırılmış bir

biçimde kaydetmeniz önemlidir. Ancak sıkıştırmada aşırıya
kaçmamalısınız zira o zaman görselin kalitesi düşecektir.
Kaliteyi kabul edilebilir düzeyde tutarak sıkıştırma yapmanız
yapılabilecek en doğru şeylerden biridir.

Eğer baskı işi ile haşır neşirseniz, 300dpi’nin standart olduğunu

bilirsiniz. Ancak bu oran web siteleri için geçerli değildir. Ekran
için tasarım yaptığınızda görsellerinizi 72dpi çözünürlükte
kaydetmeniz gerekir. Bu çözünürlüğü kullanırsanız hem dosya
boyutu azalacak, hem de ilgili görselin yüklenme süresinde
önemli bir düşüş gözlenecektir.

Adobe Photoshop gibi programların “Web İçin Kaydet” özelliği

bulunmaktadır. Bu özellik sayesinde görsellerinizi otomatik
olarak 72dpi çözünürlükte kaydedebilirsiniz. Yine bu ve bunun
gibi programlar, ilgili görselin kaydedilmesi sırasında size
sıkıştırma ile ilgili bazı ince ayarlar yapabilmenizi sağlayacak
ayar pencerelerini de sunarlar. Web için seçmeniz gereken
biçimin, sitenizin içeriğine ve hedef kitlenize göre değişmekle
birlikte png, jpg ya da gif olması gerektiğini hatırlatmak isterim.

Bu Konu İle İlgili Aşağıdaki Yazıları da Okumak İsteyebilirsiniz

45+ Ücretsiz Tasarım Şablonu ve PSD Dosyaları

Web Uygulamaları İçin En İyi 21 Simge Seti

15. İstatistikler, İzleme ve Analiz

1
 Her ne kadar bu element sahne arkası için geçerli olsa ve bir
ziyaretçi olarak bilmeniz gerekmeyen bir element olsa da, bir
web sitesi sahibi olarak bağımlılık derecesinde olmasa
(olmaması gerekse) bile hayati önem taşımaktadır.

Internet üzerinde aşağıdaki bilgileri size sunabilecek pek çok

analiz ve istatistik servisi bulunmaktadır.

Sitem kaç kez ziyaret ediliyor?

Kaç adet tekil ziyaretçi sitemi takip ediyor?

İnsanlar sitemi nereden buluyorlar?

Beni hangi arama terimleri sayesinde buluyorlar?

Hangi web siteleri bana bağlantı vermiş?

Sitemdeki en popüler sayfalar hangileri?

Ortalama ziyaretçim kim (platform / tarayıcı / ekran

çözünürlüğü)?

İyi bir analiz programı ile neleri takip edebileceğinizi

gördüğünüzde şaşırabilirsiniz. Belki de bu iş için
kullanabileceğiniz en etkili (ve ücretsiz) çözüm Google Analytics
olacaktır.

FlexyWeb İnternet Çözümleri

web.getamarket.com