Web tasarımda dikkat edilmesi gerekenler

Planlama ve site yapısı

Tasarıma başlamadan önce üç sorunun yanıtı net olmalı: Site ne için var, kim için var ve ziyaretçiden ne yapmasını istiyorsunuz? Teklif formu doldurmak, aramak, randevu almak ya da satın almak… Her sayfa bu hedeflerden birine hizmet etmeli.

Sayfa yapısını kağıt üzerinde kurun

Ana sayfa, hizmetler, projeler, hakkımızda ve iletişim çoğu kurumsal site için temel iskelettir. Her hizmetin kendi sayfası olması hem ziyaretçiyi doğru yere götürür hem de Google'ın her hizmeti ayrı bir aramada göstermesini sağlar.

Adres yapısı sade ve kalıcı olsun

Sayfa adresleri kısa, okunur ve Türkçe karaktersiz yazılmalı: /hizmetler/web-tasarim/ gibi. Adres bir kez yayına girdikten sonra değişirse, eski adres yeni sayfaya kalıcı olarak (301) yönlendirilmelidir; aksi hâlde Google'da kazanılan yer kaybolur.

Renk seçimi

Renk, markanızın ilk saniyede hissettirdiği şeydir. Ama web sitesinde renk yalnızca zevk meselesi değildir; okunabilirliği ve ziyaretçinin nereye tıklayacağını da belirler.

60-30-10 kuralı

Sayfanın yaklaşık %60'ı ana zemin rengi, %30'u ikincil renk, %10'u vurgu rengi olsun. Vurgu rengi az kullanıldığında güçlüdür: düğmeler, bağlantılar ve önemli rakamlar için saklayın.

Karşıtlık oranı en az 4,5:1

Uluslararası erişilebilirlik standardı (WCAG), normal yazı ile zemini arasında en az 4,5:1 karşıtlık ister. Yukarıdaki örnekte turuncu zemine beyaz yazı 2,9:1'de kalır; aynı turuncuya koyu yazı 6,3:1 ile rahat okunur. Google'ın PageSpeed ölçümü de bu oranı denetler.

Tutarlı olun

Aynı işi yapan öğe her sayfada aynı renkte olmalı. Teklif düğmesi bir sayfada turuncu, diğerinde mavi olursa ziyaretçi neye tıklayacağını düşünmek zorunda kalır. Renklerinizi logonuzla birlikte belirlemek en sağlamıdır. Marka ve kurumsal kimlik tasarımı →

Yazı tipi ve okunabilirlik

• Türkçe karakter desteği: Seçtiğiniz yazı tipi ğ, ş, ı, İ, ç, ö, ü harflerini eksiksiz içermeli. Eksik harf, başka bir yazı tipiyle doldurulur ve metin yamalı görünür.
• Gövde yazısı en az 16 piksel: Telefonda daha küçüğü zor okunur.
• Satır uzunluğu 60–75 karakter: Daha uzun satırlarda göz bir sonraki satırı kaybeder.
• En fazla iki yazı tipi: Biri başlıklar, biri metin için. Her yazı tipi dosyası sayfayı yavaşlatır.

Mobil uyum

Türkiye'de internet kullanıcılarının büyük çoğunluğu sitelere telefondan giriyor. Google da siteleri öncelikle telefondaki hâline bakarak değerlendiriyor (mobil öncelikli dizine ekleme). Telefonda kötü çalışan bir site, masaüstünde ne kadar güzel olursa olsun aramalarda geride kalır.

• Düğmeler ve bağlantılar parmakla rahat basılacak büyüklükte olmalı (en az 44–48 piksel).
• Telefon numarası tıklanınca arama başlatmalı, WhatsApp tek dokunuşla açılmalı.
• Yana kayan, ekrana sığmayan alan olmamalı; formlar telefon klavyesine uygun olmalı (e-posta alanında @ işaretli klavye gibi).

Hız ve Core Web Vitals

Google, sayfa deneyimini üç ölçüyle değerlendirir. Bu ölçüler gerçek ziyaretçilerin deneyiminden toplanır ve sıralamada dikkate alınır:

Hız için yapılması gerekenler

• Görselleri yeni nesil biçimlerde (AVIF, WebP) ve gösterildikleri boyutta sunun; telefona masaüstü boyutunda görsel göndermeyin.
• Her görselin genişliğini ve yüksekliğini belirtin; böylece sayfa yüklenirken yazılar kaymaz.
• Gereksiz eklenti ve betiklerden kurtulun. Her eklenti sayfaya ağırlık ekler.
• Ölçün: PageSpeed Insights ücretsizdir ve telefondaki puanı gösterir.

SEO düzeni

SEO, sitenin Google'a ne olduğunu doğru anlatmasıdır. Bunun büyük kısmı tasarım ve yazılım aşamasında kurulur; sonradan eklemek hem zor hem pahalıdır.

Her sayfanın bir kimliği olmalı

• Sayfa başlığı (title): 60 karakteri geçmesin, en önemli kelime başta olsun.
• Açıklama (meta description): 150–160 karakter; arama sonucunda başlığın altında görünür, tıklamayı o belirler.
• Tek H1: Her sayfada bir ana başlık; altında H2 ve H3'lerle düzenli bir başlık sırası.
• Asıl adres (canonical): Aynı içerik birden çok adreste açılıyorsa Google'a hangisinin asıl olduğunu söyler.
• Yapılandırılmış veri (schema): İşletmenizin adını, adresini, hizmetlerini ve sayfa türünü Google'ın okuyacağı biçimde yazar.

İç bağlantılar

Sayfalarınız birbirine anlamlı bağlantılarla bağlanmalı. Bir blog yazısından ilgili hizmet sayfasına, hizmet sayfasından örnek projelere verilen bağlantılar hem ziyaretçiyi yönlendirir hem de Google'a hangi sayfanın önemli olduğunu gösterir. Bağlantı yazısı "buraya tıklayın" değil, gittiği sayfayı anlatan kelimeler olmalı.

Görsellerin etiketlenmesi

Google bir görselin ne gösterdiğini dosya adından, alt metninden ve çevresindeki yazıdan anlar. Doğru etiketlenmiş görseller Google Görseller'de de çıkar ve sitenize ikinci bir yoldan ziyaretçi getirir.

YanlışIMG_4821.jpgalt=""

Doğrusakli-bahce-web-sitesi.webpalt="Saklı Bahçe web sitesi tasarımı: masaüstü, tablet ve telefonda görünümü"

• Dosya adı: Görseli anlatan, Türkçe karaktersiz, kelimeleri tireyle ayrılmış ad.
• Alt metin: Görseli göremeyen birine anlatır gibi yazın. Ekran okuyucular bu metni okur; anahtar kelimeyi doğal biçimde içersin, kelime yığını olmasın.
• Boyut: Görseli gösterileceği ölçüde kaydedin ve sıkıştırın; 5 MB'lık bir fotoğraf sayfayı saniyelerce bekletir.
• Görsel site haritası: Sitedeki önemli görselleri Google'a liste hâlinde bildirir.

Arama motorlarına kayıt

Yeni bir siteyi Google'ın kendi kendine bulmasını beklemek haftalar sürebilir. Kayıt işlemleri ücretsizdir ve sitenin ne durumda olduğunu da gösterir.

1. Google Search Console

   Sitenizin sahibi olduğunuzu doğrulayın, site haritanızı (sitemap.xml) gönderin. Hangi sayfaların dizine girdiğini, hangi aramalarda göründüğünüzü ve hataları buradan izlersiniz.

2. Bing Webmaster Tools

   Search Console hesabınızı içe aktararak birkaç dakikada kurulur. Bing sonuçları başka arama araçlarında da kullanılır.

3. Yandex Webmaster

   Türkiye'de Yandex kullanan azımsanmayacak bir kitle var; site haritanızı oraya da gönderin.

4. IndexNow

   Bir sayfa eklendiğinde ya da değiştiğinde Bing ve Yandex'e anında haber verir. Google bu protokolü kullanmaz; Google için site haritası yeterlidir.

5. Google Benim İşletmem

   Haritalarda ve yerel aramalarda görünmek için işletme profilinizi açın ve sitenize bağlayın. Google Benim İşletmem hizmetimiz →

Güven ve yasal gereklilikler

Türkiye'de bir web sitesi yayına alırken göz ardı edilmemesi gereken başlıklar:

• SSL sertifikası (https): Tarayıcılar SSL'siz siteleri "güvenli değil" diye işaretler; form içeren her sitede şarttır.
• KVKK aydınlatma metni: Formla ad, telefon, e-posta topluyorsanız kişisel verilerin nasıl işlendiğini açıklamanız gerekir. Gereksiz veri toplamayın.
• Çerez bilgilendirmesi: Analiz ve reklam çerezleri kullanıyorsanız ziyaretçiyi bilgilendirin.
• E-ticarette ETBİS kaydı: İnternetten satış yapan işletmelerin Ticaret Bakanlığı'nın Elektronik Ticaret Bilgi Sistemi'ne kayıt olması gerekir; mesafeli satış sözleşmesi ve ön bilgilendirme formu da sitede yer almalıdır.
• Ticari e-posta ve SMS: Tanıtım iletileri için alıcının onayı ve İYS (İleti Yönetim Sistemi) kaydı gerekir.

Bu bölüm genel bilgilendirmedir, hukuki danışmanlık yerine geçmez. Kendi durumunuz için bir hukukçuya danışın.

İçerik ve iletişim

Ziyaretçi sitenize bir soruyla gelir: "Bu işi yapıyorlar mı, güvenilir mi, nasıl ulaşırım?" İçerik bu üç soruyu hızlıca yanıtlamalı.

• Ne yaptığınız ilk ekranda anlaşılsın. Genel sloganlar yerine somut hizmet adları.
• Güven verin: gerçek projeler, müşteri adları, adres ve telefon. Yayındaki projelerimiz →
• İletişim her sayfada bir dokunuş uzaklıkta: telefon, WhatsApp, form ya da randevu.
• Özgün metin yazın. Başka sitelerden kopyalanan metin Google'da değer görmez.

Yayından sonra

Site yayına girdiğinde iş bitmez, asıl iş başlar. Search Console'dan hangi aramalarda göründüğünüzü izleyin, ziyaretçi davranışını ölçün, eklentileri ve yazılımı güncel tutun, düzenli yedek alın. Ayda bir PageSpeed ölçümü, küçük sorunları büyümeden yakalar.

Kontrol listesi

Sitenizde hangileri tamam? İşaretleyin, eksiklerinizi görün.

Sık sorulanlar