Web Sitesi Tasarım

web sitesi tasarımıStartup girişimciler ve İşletmeler için Mobil, Tablet cihazlarla uyumlu ve SEO uyumlu kurumsal web, ürün tanıtım ve e-ticaret siteleri hazırlıyoruz. Tüm sektörlerde müşteriye özel web çözümler üretiyoruz (turizm, ulaşım, konaklama, emlak, sigorta, medikal, inşaat, ev-bahçe dekorasyon, tasarım, tekstil, otomotiv, restaurant-cafe, gıda, tarım ürünleri, çiçek-fidanlık, spor-fitnes, stil-moda tasarım, kozmetik, eğitim-kurslar, fotoğrafçılık, iş güvenliği)

Hosting ve yönetim panelini içeren ekonomik web tasarım paketleri için bizi arayın
Web tasarımı yaparken ve geliştirirken dikkat edilmesi gereken pek çok ayrıntı vardır. Web sitenizin taslağını belirledikten sonra geriye kalan elementler kullanıcı arayüzü tasarımı’ndan i̇çerik oluşturmaya, site geliştirme aşamasının kendisine kadar değişen geniş bir kategoriye yayılır. Sizin için özetlediğimiz web tasarımında en önemli 15 anahtar ayrıntıya kısaca değinelim

1. Görsel Tasarım
Görsellikle anlatılmak istenen web sitenizde dikkat çekici fotoğraf kullanımı değil tabi ki. Sitenizin görüntüsü ilk bakışta ziyaretçiyi menun etmiyorsa hemen siteden ayrılır. Örneğin; uzun zamandır güncellenmemiş site, okunması ve anlaşılması güç zayıf içerikli metinler, promosyon mesaj kalabalığı, göz yorucu yanıp sönen özel uygulamalar v.b. sitenizin görsel kalitesini düşürür bu da ziyaretcilerinizin etkileşimini düşürür.
Ziyaretci etkileşimini artırmanız kurumsal imajınızı pekiştirir, ürün/hizmet bilinirliğini artırır. Bu rakiplerden kolaylıkla ayrışmanızı sağlar. Görsel kaliteyi artırmak için güncel, sade, az ama öz site görseli çok önemlidir.

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

Başarılı işlevselliği olan sitelerin temelini başarılı kullanıcı arayüz oluşturur. Sitenize hemen her seviyede bilgi ve deneyime sahip pek çok ziyaretcinin geleceğini gözardı etmeyin. En amatör ziyaretcinin bile sitenizden memnun kalabilmesi için arayüzün kullanıcı dostu olması cok önemlidir.
Sitenizi kimler ziyaret edecek – ideal müşteriniz kimler? Teknolojiye yatkınlar mı? Bilgisayar bilgileri iyi mi?
İdeal ziyaretçinizin profilini kafanızda canlandırın ve site tasarımını yaparken bunu göz önünde bulundurun. 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ğlayın. 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.Navigasyonunuz görünebilir olmalı
Ziyaretcilerin etkileşimini kolaylaştıran bir web sitesi sahibi olmak için navigasyon kolaylığı önceliklendirilmelidir. Ziyaretcinin görmesini istediğiniz site anahtar bölümlerine bağlantılar içeren alan ilk bakışta görünebilir olmalıdır. Gelişen teknoloji ile birlikte büyüyen monitör boyutları dikkate alınmalı. Görünebilir kesim derken site tasarımınızın üst kısmındaki 500-600 piksellik kısma işaret edilmektedir. Bu alan içerisinde yer alması gereken elementler logonuz (logo sitenizin ana sayfasına bağlantı içermelidir) ve yanı sıra sitenizin ana alanlarına bağlantılar olmalı. Görünebilir olan bu kısımda ayrıca alt sayfalara bağlantı verebilirseniz ziyaretci etkileşimi artacaktır. Ancak çoğu durumda bu tasarımınızın kalabalıklaşmasına 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 Öz geç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 en önemli nokta tutarlılık prensibidir. Hem ana bağlantılar hem de alt bağlantıların site genelinde aynı yerde olmasına dikkat edilmeli.

4. Alt Alanda Navigasyonu Tekrar Edin
Ziyaretçilerin sitenizde aradıkları içeriğe kolayca ulaşabilmeleri için, sitenizin alt kısmında navigasyon içeriğini tekrar etmeniz faydalı olacaktır. Sitenizin üst kısmında metin bağlantılar kullanıyor olsanız bile altlık kısmında bu bağlantıları yinelemeniz önerilir. Çoğu zaman alt 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 Sağlayın

“İçerik her şeydir” sözünü daha önce duymuşsunuzdur. İlk bakışta göze hoş gelen bir web sitesi yapabilirsiniz ancak sitenin içeriği doyurucu değilse, ziyaretçinizin sitenizde uzun süre kalmayacağından emin olabilirsiniz.
Ziyaretcilerin bakış açısıyla web sitenizin içeriğini hazırlayıp oluşturun. Bunun için çözüm ortağınızla ürünleriniz, hizmetleriniz ve işletmenize dair diğer kurumsal ögeler hakkında yardımcı ve öğretici bilgiler sunabilmeniz önemlidir. Eğer bir blogunuz varsa, uzmanlık alanınıza yönelik bilgilendirici makaleler faydalı olacaktır.
6.Etkili bir Hakkında Sayfası hazırlayın
İster inanın ister inanmayın, sitenin Hakkında bölümü, hizmetler ve portfolyo sayfalarından daha çok dikkat çekmektedir. Ziyaretçilerinize ilk bakışta işletmenize dair kurumsal imajınızı yansıttığınız alandır. İnsanlar bir şirketin ya da blogun ardında kimlerin olduğunu bilmek isterler. İşletmenizin geçmişi, vizyonunuz, uzmanlık alanınızdaki önemli gelişmeler, dönüm noktaları gibi bilgilerden bahsedin. Hakkında sayfası potansiyel müşterilerinize işletmeniz ve sizin hakkınızda daha fazla bilgi verir ve sitenizin daha “ziyaretci dostu” 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.
Bireysel ziyaretciler , bireysel dokunuştan uzak katı kurumsal şirketlerden ziyade arkasında “gerçek” kişilerin ve uzmanlık hikayelerinin olduğu şirketleri seçerler.

7. İletişim Bilgisi Ekleyin
Ziyaretçiler hizmetlerinizle ilgileniyorlarsa ve sizinle iletişim kurabilecekleri basit bir sayfa, telefon, e-mail dahi bulamıyorlarsa, kendinizi yarışmayı kaybetmiş olarak görebilirsiniz. İdeal olarak tek bir iletişim yönteminden daha fazlasını vermek isteyeceksinizdir. Web sitesinde tam iletişim bilgisi belirtmek güven pekiştirir ve ziyaretçilerin sizi tercih etmelerinde küçük de olsa bir katkı sağlayabilir. En azından bir elektronik posta adresi ve iletişim formu eklenmelidir. Sizi daha “ulaşılabilir” kılmak için bir telefon numarası ve eğer mümkünse bir posta adresi eklemenizi öneriyoruz. Bireysel çalışan (freelancer) yani evden çalışıyorsanız ev telefonunuzu sitenizde yayımlamak istemeyebilirsiniz. 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.

8.Site içi Arama yapılabilmesini sağlayın
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ığını sitenizde kolaylıkla bulamıyorsa ve gidip rakibinizin sitesinde buluyorsa, sizin sağladığınız hizmet çok daha iyi olsa bile “aradığını kolaylıkla bulunamadığı” için rakip ürünü seçecektir. Siteniz üzerinde Google Arama özelliğini kullanabilir ya da WordPress (gibi diğer blog platformu / içerik yönetim sistemi) kullanıyorsanız 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 mevcuttur.

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 sağlayın. Eğer WordPress blogunuz var ise bu eklemesi gerçekten kolay olan bir başka özelliktir. Ön tanı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ğe abone olan kullanıcılar üzerindeki kontrolünüz artacaktır.

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 zira 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 ekleyememeniz halinde çok kullanışlı olacaktır. Sitenizin alt kısmına ekleyebileceğiniz bir diğer bağlantı da site haritası olabilir. İyi bir site haritası sitenizdeki her bir sayfayı 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 Ayrı Tutun
Ana hat 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.
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 arka plan 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şikliğ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.

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.
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üşteriniz internet browser olarak en eski versiyonlardan birini kullanıyor olabilir.
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 tarafı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 Internet Explorer 6’ya erişiminiz yoksa bu durum çok kullanışlı olabilir.

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.

15. İstatistikler, İzleme ve Analiz
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.Bu iş için kullanabileceğiniz en etkili (ve ücretsiz) çözüm Google Analytics olacaktır. Web sitenizi oluştururken destek aldığınız çözüm ortağınızın bu analizlerin anlamlandırılması noktasında size destek olmasını beklemeyin zira her işin ayrı bir uzmanı var.
Online performans pazarlama kampanyası yapmak istiyorsanız bu konuda uzman danışman ile ilerlemenizi öneriyoruz.