Web sitesi tasarımı: planlamadan yayına adım adım rehber

Web sitesi tasarımı çoğu işletme sahibine bir görsel iş gibi görünür. Şablon seçilir, logo yerleştirilir, renk paleti ayarlanır. Oysa bir siteyi başarılı ya da başarısız kılan unsur, çoğunlukla ekrana gelmeden önce verilen kararlardır.

Biz web sitesi, reklam ve e-ticaret projelerini kuruyor ve yönetiyoruz. Her projede aynı gerçeği görüyoruz: hedefi net olmayan bir site güzel de olsa iş getirmez. Bu rehberde planlamadan yayına kadar olan sırayı, her adımda neye bakılacağını ve resmî kaynakların verdiği ölçülebilir eşikleri anlatıyoruz.

Web sitesi tasarımı nereden başlar

İlk adım bir tasarım programı açmak değil, üç soruya yazılı cevap vermektir. Site kimin için yapılıyor? Ziyaretçiden tek bir eylem isteyecek olsanız bu ne olurdu? Bu eylemin gerçekleştiğini nasıl anlayacaksınız?

Eylem telefon araması, teklif formu, randevu ya da sipariş olabilir. Birden fazla hedef yazarsanız sayfalar birbiriyle yarışır, ziyaretçi neye tıklayacağını bilemez, ölçüm yapmak da zorlaşır; oysa bir ana hedef ve gerekirse tek bir ikincil hedef, hem tasarımı hem sonradan yapılacak değerlendirmeyi çok daha okunur kılar.

Vikipedi, web tasarımını estetik, işlevsellik ve erişilebilirlik ilkelerine dayanan, kullanıcı deneyimini öne alan bir alan olarak tanımlar. Yani tasarım yalnızca görünüm değildir; ziyaretçinin aradığını bulup bulamadığı da tasarımın parçasıdır.

İpucu: Hedef cümlenizi tek satıra sığdırın. "Ankara'daki restoranımız için masa rezervasyonu almak" gibi. Satıra sığmıyorsa henüz hedef değil, dilek listesidir.

Ziyaretçiyi ve içeriği tanımlamak

Ziyaretçi kimdir, siteye hangi sorusuyla gelir, karar vermek için hangi bilgiye ihtiyaç duyar? Bu üç cevap, ana sayfadan hizmet sayfalarına, oradan iletişim formuna uzanan içerik iskeletinin tamamını belirler. Müşterilerinizin telefonda en sık sorduğu soruları yazın. Büyük ihtimalle ana sayfanın ve hizmet sayfalarının başlıkları orada duruyordur.

Google'ın içerik yönergesi de aynı yöne işaret eder. Sıralama sistemleri arama motoru için değil, öncelikle kullanıcılar için hazırlanmış içeriği ödüllendirmeye çalışır. Metni arama motoruna değil, müşteriye yazın.

İçeriği tasarımdan önce toplayın. Metin gelmeden yapılan tasarım, sonradan gelen uzun başlıklarla, beklenmedik görsellerle, sığmayan paragraflarla bozulur; hizmet açıklamaları, fotoğraflar, müşteri yorumları, iletişim bilgileri elinizdeyken sayfa düzeni çabuk oturur, revizyon turları kısalır, ekip aynı belgeye bakarak ilerler.

Web sitesi tasarımında sayfa yapısı ve gezinme

Küçük bir işletme sitesi için temel sayfalar şunlardır:

• Ana sayfa: kim olduğunuz ve ziyaretçinin ne yapabileceği.
• Hizmet ya da ürün sayfaları: her biri tek bir konuya odaklanan sayfalar.
• Hakkımızda: ekip, çalışma biçimi ve referanslar.
• İletişim: telefon, adres, form ve harita.
• Yasal sayfalar: gizlilik, çerez ve aydınlatma metni.

Menüyü kısa tutun. Ziyaretçi aradığına birkaç tıklamada ulaşamıyorsa menü fazla karışıktır. Sayfa adreslerini de baştan düşünün. Google'ın başlangıç kılavuzu açıklayıcı URL kullanılmasını önerir; yani adres, sayfanın ne hakkında olduğunu okunur biçimde söylemelidir.

Taslağı kâğıt üzerinde ya da basit bir tel kafes (wireframe) olarak çizin. Renk ve görsel eklemeden yalnızca kutuları, başlıkları ve düğmeleri yerleştirin. Hatayı bu aşamada yakalamak ucuzdur; sayfa bittikten sonra yakalamak pahalıya patlar.

Görsel tasarım: renk, yazı tipi, okunabilirlik

Marka renginizi ve yazı tiplerini seçtiğinizde görsel dilin büyük kısmı belirlenmiş olur. Burada zevkten önce ölçülebilir bir eşik var: okunabilirlik.

W3C'nin WCAG 2.2 standardında (12 Aralık 2024 tarihli W3C Tavsiyesi) kontrast ölçütü şöyle: metin ile arka plan arasındaki kontrast oranı en az 4.5:1 olmalıdır, büyük ölçekli metinde en az 3:1. Açık gri yazı beyaz zeminde zarif görünür. Kontrast ölçerine tuttuğunuzda çoğunlukla eşiğin altında kaldığı ortaya çıkar. Öğle güneşinde telefon ekranına bakan ziyaretçi içinse yazı silinir gider.

Birkaç pratik kural işe yarar:

• Gövde metni için tek bir okunaklı yazı tipi seçin, başlıklar için en fazla bir tane daha.
• Renk tek başına bilgi taşımasın. Hata mesajı yalnızca kırmızı değil, açıklayıcı bir cümle de içersin.
• Görsellere açıklayıcı alternatif metin yazın. Hem ekran okuyucu kullananlara hem de arama motoruna yarar.

Teknik tarafta anlamsal HTML kullanılmasını isteyin. MDN, anlamsal yazımı bir öğenin görünüşüne değil amacına ve rolüne göre seçilmesi diye tarif eder. Başlık için başlık etiketi, menü için gezinme etiketi kullanılırsa hem erişilebilirlik hem de arama motoru sayfayı daha doğru anlar.

W3C'nin erişilebilirlik planlama kılavuzu bu işi başlat, planla, uygula, sürdür adımlarıyla anlatır. Ders açık: erişilebilirlik sona kalan bir cila değil, baştan konan bir ölçüttür.

Mobil uyum: web sitesi tasarımı küçük ekranla başlar

Ziyaretçilerinizin önemli bölümü siteye telefondan gelir, ama asıl neden başka: Google, dizine ekleme ve sıralama için sitenin akıllı telefon aracısıyla taranan mobil sürümünü kullanır ve bu yönteme mobil öncelikli dizine ekleme denir. Mobilde eksik olan içerik, Google için de eksiktir; masaüstünde ne kadar güzel durduğunun önemi yoktur.

Bu yüzden tasarımı önce dar ekrana göre düşünün, sonra genişletin. Google üç yapılandırmadan söz eder; en sade olanı duyarlı tasarımdır. Duyarlı tasarımda içerik ve meta veriler mobil ve masaüstü sürümlerde aynıdır, tek kod tabanı ekran genişliğine göre uyum sağlar.

Teknik bir ayrıntı: duyarlı sayfanın head bölümünde viewport etiketi bulunur. MDN bu etiketin her belgede olmasını önerir, çünkü mobil tarayıcılara görünüm alanı genişliğini cihaz genişliğine ayarlamalarını söyler. Etiket yoksa telefon sayfayı masaüstü gibi çizer ve yazılar küçülür.

Dikkat: Mobilde gizlediğiniz içerik masaüstünde görünüyorsa, Google mobil sürümü esas aldığı için o içerik sıralamada hesaba katılmayabilir. İçeriği gizlemek yerine mobil için sadeleştirin.

Web sitesi tasarımında hız ve görsel kararlılık

Geç açılan sayfa sabır tüketir. Burada rakam uydurmayacağız; ölçülebilir olan, Google'ın Core Web Vitals olarak yayımladığı üç eşiktir.

Web.dev ve Google Search Central'ın birlikte verdiği hedefler şunlardır: Largest Contentful Paint, yani ana içeriğin görünme süresi, sayfa yüklenmeye başladıktan sonraki 2,5 saniye içinde gerçekleşmelidir. Interaction to Next Paint, yani tıklamaya yanıt süresi, 200 milisaniye veya daha kısa olmalıdır. Cumulative Layout Shift, yani sayfanın kayma miktarı, 0,1 veya daha az olmalıdır. Hedefin kullanıcıların büyük çoğunluğu için tutturulması beklenir; bu, sayfa yüklemelerinin 75. yüzdelik diliminde ölçülür.

Google'ın sayfa deneyimi belgesi bu verilerin tek başına sıralamayı belirlemediğini, ancak sıralama sistemlerinin ödüllendirmek istediği noktalarla genellikle uyumlu olduğunu söyler; yani hız için çalışmak hem ziyaretçiye hem arama görünürlüğüne yarar, fakat bu çaba tek başına belirli bir sıralama sonucu vaat etmez ve hiçbir ajansın vaat etmemesi gerekir.

Tasarım aşamasında hızı etkileyen kararlar şunlardır:

• Büyük, optimize edilmemiş görseller. Boyutu sayfada gösterilen alana göre hazırlayın.
• Gereğinden fazla yazı tipi ağırlığı ve üçüncü taraf betik.
• Boyutu belirtilmemiş görsel ve reklam alanları. Sayfa yüklenirken kaymaya yol açar.
• Aşırı animasyon. Etkileşimi geciktirir, çoğu zaman bilgiye bir şey katmaz.

Tahmin etmeyin. Ölçün. Search Console'daki Core Web Vitals raporu gerçek ziyaretçi verisiyle sonuç verir. Ölçümü yayın öncesinde ve yayından birkaç hafta sonra tekrarlayın.

Arama motorları için temel hazırlık

Arama görünürlüğü, site yayına çıktıktan sonra eklenen bir katman değildir; tasarım sırasında alınan kararların sonucudur. Google'ın başlangıç kılavuzundaki temel noktalar tasarımcıyı da ilgilendirir.

Her sayfaya tek bir konu verin ve başlığını o konuya göre yazın. Google, sayfa başlığını arama sonucunda görünen başlık bağlantısı için bir kaynak olarak kullanır. Başlığın içeriği özetlemesini ve sayfalar arasında birbirinden ayrılmasını ister. Görsellere açıklayıcı alternatif metin ekleyin. Sayfaları birbirine anlamlı bağlantı metinleriyle bağlayın.

Site haritası sıradan ama işe yarar bir kalemdir. Google, sayfalar doğru bağlantılandıysa sitenin büyük bölümünü genellikle kendisi keşfedebildiğini söyler. Site haritası keşfi kolaylaştırır; ancak haritadaki her sayfanın taranacağı veya dizine ekleneceği anlamına gelmez. Yeni açılan bir sitede haritayı hazırlayıp Search Console'a göndermek, keşfi tesadüfe bırakmamaktır.

Web sitesi tasarımında güven ve yasal unsurlar

İşletme sitesinde güven duygusu da tasarımın bir parçasıdır. Bunun iki ayağı var.

Birincisi HTTPS. Sitenin tüm sayfaları güvenli bağlantı üzerinden sunulmalıdır. Web.dev, HTTPS'yi etkinleştirmenin adımlarını ve HTTPS sayfasında HTTP kaynak kalması hâlinde ortaya çıkan karışık içerik sorununu anlatır. Sertifikayı hosting sağlayıcınız genellikle sağlar; yine de yayından önce tarayıcıda "güvenli değil" uyarısı çıkmadığını kontrol edin.

İkincisi kişisel veri. Sitenizdeki iletişim formu, bülten kaydı ya da sipariş ekranı kişisel veri toplar. 6698 sayılı Kişisel Verilerin Korunması Kanunu'nun 10. maddesine göre veri sorumlusu, veri elde edilirken ilgili kişilere kimliğini, verilerin işlenme amacını, kimlere ve hangi amaçla aktarılabileceğini, toplama yöntemini ve hukuki sebebini ve diğer haklarını bildirmekle yükümlüdür. Pratikte bu, formun yanında görünür bir aydınlatma metni anlamına gelir; metnin içeriği ise hukuki bir iştir, bu yüzden hangi verinin hangi amaçla işlendiğini yazarken bir hukuk danışmanıyla netleştirmeniz gerekir.

Altyapı: alan adı ve hosting

Tasarım biterken altyapı kararı da netleşmiş olmalı. Alan adı sitenizin adresi, hosting ise dosyalarının durduğu sunucudur. İkisi ayrı hizmettir ve ayrı kişilere kayıtlı olabilir. Önce alan adını kendi işletmeniz adına aldığınızdan emin olun; ayrıntıyı alan adı nedir yazımızda anlattık. Sunucu tarafını hosting nedir yazımızda ele alıyoruz. Alan adı seçeneklerini görmek isterseniz alan adları sayfamız var.

Sitede ödeme alacaksanız ödeme altyapısını tasarımdan önce belirleyin; çünkü sipariş ve ödeme sayfalarının akışı seçilen altyapıya göre değişir. Bu konuyu ödeme altyapıları yazısında karşılaştırıyoruz.

Yayın öncesi kontrol listesi

Yayına almadan önce şu listeyi sırayla geçin:

1. Her sayfanın tek bir başlığı, açıklayıcı adresi ve ana eylem düğmesi var mı?
2. Metin kontrastı 4.5:1 eşiğinin üzerinde mi, büyük metin 3:1 eşiğini geçiyor mu?
3. Site gerçek bir telefonda sorunsuz açılıyor, viewport etiketi bulunuyor mu?
4. Ana içerik 2,5 saniye içinde görünüyor, sayfa yüklenirken kaymıyor mu?
5. Tüm sayfalar HTTPS üzerinden açılıyor, karışık içerik uyarısı yok mu?
6. Formların yanında aydınlatma metni, altbilgide gizlilik ve çerez sayfaları var mı?
7. Site haritası hazır, Search Console'a eklendi mi?
8. İletişim formu ve telefon bağlantısı gerçekten çalışıyor mu?

Sekizinci madde en sık atlanandır. Formu bizzat doldurun.

Yayından sonra iş bitmez. Birkaç hafta sonra Search Console'dan hangi sayfaların görüntülendiğine, hangi sorgularla bulunduğunuza bakın; hız ölçümünü tekrarlayın; içeriği işletmedeki değişikliklerle güncel tutun. Site, basılıp rafa konan bir broşür sayılmaz.

Kendiniz mi yapmalı, ekiple mi

Bu soruya tek bir cevap yok, ama ölçütler var. Hedefiniz net, içeriğiniz hazır ve işiniz basit bir tanıtım sayfasıysa hazır araçlarla başlamak mümkündür. Birden fazla hizmet, ödeme, reklam bağlantısı ya da özel bir akış gerekiyorsa tasarım ve teknik kurulum birbirine bağlanır; tasarım ile teknik kurulumu tek ekibin yürütmesi aktarım hatalarını azaltır.

Biz önce yol haritasını birlikte çıkarıyor, sonra kurulumu yapıyor ve yayından sonra yönetmeye devam ediyoruz. İşletmeniz için hangi yapının uygun olduğunu görmek isterseniz ücretsiz ilk değerlendirme için bize yazabilirsiniz.

Web sitesi tasarımı, bir kerelik bir görsel çalışmadan çok bir karar zinciridir. Hedefi yazıya döken, içeriği önceden toplayan, mobili ve okunabilirliği ölçen, yasal metinleri atlamayan bir plan ziyaretçiyi de sizi de yıllarca rahatlatır.

Yazar: Blakfy Studio ekibi, web sitesi, reklam ve e-ticaret projelerinde kurulum ve yönetim. Kaynaklar aşağıda listelenmiştir.

Kaynaklar

• web.dev, Web Vitals
• Google Search Central, Core Web Vitals ve Google Arama
• Google Search Central, Sayfa deneyimi
• Google Search Central, Mobil öncelikli dizine ekleme
• Google Search Central, Kullanıcı odaklı içerik
• Google Search Central, SEO başlangıç kılavuzu
• Google Search Central, Başlık bağlantıları
• Google Search Central, Site haritaları
• web.dev, HTTPS'yi etkinleştirme
• W3C, WCAG 2.2
• W3C, Understanding Contrast (Minimum)
• W3C WAI, Planning and Managing Web Accessibility
• MDN, Responsive Design
• MDN, Semantics
• 6698 sayılı Kişisel Verilerin Korunması Kanunu, mevzuat.gov.tr
• Vikipedi, Web grafik tasarımı