Profesyonel Web Sitesi Tasarımı: Amatör Siteden Ayıran 12 Ölçüt

Profesyonel web sitesi tasarımı denildiğinde çoğu kişi ilk olarak şık bir görünüm düşünür. Oysa ziyaretçi bir siteye güvenip güvenmemeye saniyeler içinde, hem görünüme hem de sitenin nasıl davrandığına bakarak karar verir. Sayfa geç açılıyorsa, telefonda kayıyorsa veya iletişim bilgisi bulunmuyorsa, en güzel tasarım bile güven kazandırmaz. Aşağıdaki 12 ölçüt, profesyonelliği görsel bir his olmaktan çıkarıp kontrol edilebilir bir listeye dönüştürüyor.

Profesyonel Web Sitesi Nedir?

Profesyonel web sitesi, sahibinin işine uygun bir amaç için tasarlanmış, teknik olarak sağlam, içeriği güvenilir ve kullanımı zahmetsiz olan sitedir. Tanımın merkezinde "amaç" bulunur: aynı site bir avukatlık bürosu için profesyonelken bir oyun stüdyosu için uygunsuz olabilir. Bu yüzden ölçütleri bir tasarım zevki değil, işlev ve güven üzerinden kuruyoruz.

12 Ölçütle Profesyonel Web Sitesi Değerlendirmesi

Her ölçüt için kendinize "evet / kısmen / hayır" cevabı verin. Sonunda hangi alanların zayıf olduğunu net göreceksiniz.

1. Sayfa hızı

Hız ölçütü Google'ın Core Web Vitals tanımıyla nettir: en büyük içerik öğesinin (LCP) 2,5 saniye veya altında yüklenmesi, etkileşim gecikmesinin (INP) 200 milisaniye veya altında olması ve düzen kaymasının (CLS) 0,1 veya altında kalması "iyi" kabul edilir. Ayrıntıları hız ve Core Web Vitals yazımızda anlattık.

2. Mobil uyum

Google, indeksleme için sayfanın mobil sürümünü esas alır. Site telefonda yatay kaydırma gerektirmemeli, düğmeler parmakla rahat basılabilmeli, metin yakınlaştırma gerektirmeden okunabilmelidir. Bkz. mobil uyumlu web sitesi tasarımı.

3. Okunabilirlik ve kontrast

W3C'nin WCAG yönergeleri, normal boyuttaki metin için en az 4.5:1 kontrast oranı ister. Açık gri yazıyı beyaz zemine koymak şık görünebilir ama okunmaz. Gövde metni en az 16 piksel, satır uzunluğu yaklaşık 45-80 karakter aralığında olmalıdır.

4. Net bir birincil eylem

Her sayfanın tek bir ana hedefi olmalı: "Teklif al", "Randevu oluştur", "Ara". Aynı ekranda beş eşit ağırlıklı düğme, ziyaretçiyi karar vermekten alıkoyar.

5. Anlaşılır bilgi mimarisi

Menü, ziyaretçinin dilinde ve en fazla yedi ana başlıktan oluşmalı. "Çözümlerimiz" gibi soyut başlıklar yerine "Web tasarım", "Mobil uygulama" gibi somut ifadeler kullanın. Ayrıntı: sayfa yapısı ve bilgi mimarisi.

6. Güven unsurları

Şirket unvanı, iletişim bilgileri, gerçek referanslar, proje örnekleri ve gizlilik/KVKK metinleri ziyaretçinin "bu firma gerçek mi?" sorusunu yanıtlar. Uydurma yorum veya sahte puan güveni artırmaz, yıkar. KVKK yükümlülükleri için KVKK uyumlu web sitesi yazımıza bakın.

7. Tutarlılık

Aynı düğme her yerde aynı görünmeli, aynı işlem her yerde aynı adla anılmalı. Bir sayfada "Teklif al", diğerinde "Bilgi iste", ötekinde "Gönder" yazıyorsa ziyaretçi öğrenmek zorunda kalır. Tutarlılık, profesyonelliğin en görünmez ama en güçlü işaretidir.

8. Özgün ve yararlı içerik

Google, insanlar için yazılmış, yararlı ve güvenilir içeriği öne çıkarmayı hedeflediğini yönergelerinde açıkça belirtir. Başka sitelerden alınmış genel metinler yerine, işletmenizin gerçekten bildiği konularda somut bilgi verin.

9. Erişilebilirlik

Görseller için alternatif metin, klavyeyle gezinebilen menü, görünür odak halkası ve form alanlarında etiket bulunmalı. WCAG 2.2 dokunma hedefleri için en az 24x24 CSS pikselini şart koşar; parmak kullanımında 44 piksel civarı daha rahattır.

10. Güvenlik ve HTTPS

Sitenin tamamı HTTPS ile sunulmalı, form verileri güvenli iletilmeli, yazılım bileşenleri güncel tutulmalıdır. Tarayıcıda "güvenli değil" uyarısı görmek, en hızlı güven kaybı yollarından biridir.

11. Doğru teknik SEO altyapısı

Tek bir H1, mantıklı başlık hiyerarşisi, benzersiz title ve meta description, site haritası ve yapılandırılmış veri profesyonel bir sitenin görünmeyen kısmıdır. Ayrıntı için SEO uyumlu web sitesi tasarımı yazımıza bakın.

12. Ölçülebilirlik

Telefon tıklaması, form gönderimi ve WhatsApp tıklaması gibi eylemler ölçülmüyorsa, site "çalışıyor mu?" sorusuna cevap veremez. Profesyonel siteler baştan ölçüm için hazırlanır.

Amatör ve Profesyonel Site Karşılaştırması

Alan	Amatör yaklaşım	Profesyonel yaklaşım
Hedef	"Bir sitemiz olsun"	Ölçülebilir bir iş hedefi
Hız	Görsel ve eklenti yığını	Optimize edilmiş görsel, minimum kod
Mobil	Masaüstü küçültülmüş	Mobil önce tasarlanmış
Metin	Genel ve şişirilmiş	Somut, ziyaretçinin diliyle
Güven	Stok görsel, belirsiz bilgi	Gerçek referans, açık iletişim bilgisi
Ölçüm	Yok	Eylem bazlı takip

Kısa Bir Öz Değerlendirme: Kendinize Puan Verin

Yukarıdaki 12 maddeyi "evet" için 2, "kısmen" için 1, "hayır" için 0 puanla değerlendirin. 20 ve üzeri sağlam bir zemine, 12-19 arası ciddi iyileştirme fırsatlarına, 12'nin altı ise yeniden yapılandırma ihtiyacına işaret eder. Bu puan bilimsel bir standart değil, öncelik belirlemek için pratik bir araçtır; asıl değer, hangi maddelerde zayıf olduğunuzu görmektir.

Profesyonel Görünüm İçin Yapılan Yaygın Yanlışlar

• Sürekli kayan ana görsel (slider): Genellikle hızı düşürür, mesajı bölüp dikkati dağıtır.
• Otomatik açılan müzik veya video: Kullanıcı kontrolünü elinden alır.
• Stok fotoğraf yığını: Gerçek ekip ve iş fotoğrafları çok daha güven verir.
• Çok fazla yazı tipi ve renk: İki yazı ailesi ve tek bir vurgu rengi çoğu zaman yeter.
• Açılışta ekranı kaplayan pencere: İlk saniyede ziyaretçiyi karşılamak yerine engeller.

Bu ve benzeri hataların dönüşüme etkisini dönüşümü düşüren web sitesi tasarım hataları yazımızda ayrıca ele aldık.

Profesyonelliği Sağlayan Altyapı: Tasarım Sistemi

Bir sitenin "profesyonel" görünmesinin sırrı çoğu zaman tek tek sayfaların özenli tasarlanması değil, tüm sayfaların aynı kurallarla üretilmesidir. Bu kurallar bütününe tasarım sistemi denir. Kurumsal bir sitede tasarım sistemi şunları tanımlar:

• Renkler: Bir zemin, bir metin, bir vurgu rengi ve durum renkleri (başarı, hata). Renkler kod içinde tek tek yazılmaz, adlandırılmış değişkenlerle tanımlanır; böylece marka rengini değiştirmek tek yerden yapılır.
• Tipografi ölçeği: Başlık ve gövde metni için sabit bir boyut kademesi. Her yeni sayfada "bu başlık kaç piksel olsun?" diye düşünmek yerine, ölçekten seçilir.
• Aralık düzeni: Boşlukların 8 piksele bölünebilen değerlerle (8, 16, 24, 32...) kullanılması, sayfalara ritim ve tutarlılık kazandırır.
• Bileşenler: Düğme, kart, form alanı, uyarı gibi yeniden kullanılan parçalar; her birinin normal, üzerine gelinmiş, odaklanmış ve devre dışı halleri tanımlıdır.

Bu yapıyı kurmak başta ek emek gibi görünür; ancak yeni sayfa eklemeyi hızlandırır ve tutarlılığı garanti eder. Bir siteyi yıllar içinde farklı kişiler güncelleyse bile tasarım dağılmaz.

Tipografi ve Renk İçin Uygulanabilir Kurallar

Estetik tercihler öznel görünür, ancak okunabilirlik ve tutarlılık için kanıtlanmış pratik kurallar var:

Konu	Kural	Gerekçe
Yazı ailesi sayısı	En fazla iki (başlık + gövde ya da tek aile)	Çok aile, kaotik görünüm ve yükleme yükü yaratır
Gövde metni boyutu	En az 16 piksel	Mobilde yakınlaştırma gerektirmez
Satır uzunluğu	Yaklaşık 45-80 karakter	Göz satır başını kaybetmez
Satır aralığı	Gövde metninde yaklaşık 1,5	Uzun metinde okunabilirliği artırır
Metin kontrastı	Normal metinde en az 4.5:1	WCAG erişilebilirlik ölçütü
Vurgu rengi	Bir ana vurgu rengi	Her şey vurgulanırsa hiçbir şey öne çıkmaz
Renkle anlatım	Bilgiyi yalnızca renkle vermeyin	Renk körlüğü olan kullanıcılar için ikon veya metin ekleyin
Türkçe karakter	Yazı tipinin ğ, ş, ı, İ desteğini test edin	Eksik karakterler yedek fonta düşer ve bozuk görünür

30 Dakikada Kendi Sitenizi Denetleyin: Adım Adım

Aşağıdaki denetim, özel bir araç veya uzmanlık gerektirmez. Sitenizin ana sayfası ve bir hizmet sayfası için uygulayın:

1. Telefonunuzdan açın (5 dk): Yatay kaydırma var mı? Menü açılıyor mu? Telefon numarasına dokununca arama ekranı geliyor mu? Formu gerçekten gönderin.
2. PageSpeed Insights'ta ölçün (5 dk): Mobil sonucunda LCP, INP ve CLS değerlerine bakın; gerçek kullanıcı verisi varsa onu esas alın.
3. Klavyeyle gezinin (5 dk): Bilgisayarda Tab tuşuyla ilerleyin. Odaklanan öğe görünüyor mu, menüye ve düğmelere ulaşılabiliyor mu?
4. Sayfa kaynağını inceleyin (5 dk): Tarayıcıda sayfa kaynağını açıp tek bir H1 ve benzersiz title etiketinin bulunduğunu doğrulayın.
5. Beş saniye testi yapın (5 dk): Ana sayfayı birine beş saniye gösterip "Bu firma ne yapıyor?" diye sorun. Cevap yanlış veya belirsizse ana mesaj sorunludur.
6. Güven unsurlarını arayın (5 dk): Şirket unvanı, iletişim bilgisi, gerçek referanslar, gizlilik ve KVKK metinleri bulunuyor mu?

Her adımda "hayır" dediğiniz nokta, yukarıdaki 12 ölçütteki bir eksikliğe karşılık gelir. Hepsini bir anda düzeltmeye çalışmayın; önce mobil, hız ve eylem çağrısı gibi tüm ziyaretçileri etkileyen alanlardan başlayın.

Metin ve Mikro Kopya: Profesyonelliğin Görünmeyen Yarısı

Ziyaretçi bir siteyi görselden önce metinden okur. Düğme etiketleri, hata mesajları ve form açıklamaları gibi küçük metinler (mikro kopya), sitenin ne kadar özenli olduğunu sessizce iletir. Kural basit: dil sade, eylem net, ton tutarlı olsun.

Zayıf	Güçlü	Neden?
Gönder	Teklif talebini gönder	Düğme ne olacağını söyler
Bir hata oluştu	Telefon numarası eksik. 10 haneli numaranızı girin.	Sorunu ve çözümü söyler
Çözümlerimiz	Web tasarım, mobil uygulama, otomasyon	Ziyaretçinin arayacağı kelimeleri kullanır
Bize ulaşın!!!	1 iş günü içinde dönüş yapıyoruz	Söz verir, abartmaz
Sayfa bulunamadı	Aradığınız sayfa taşınmış olabilir. Hizmetlerimize göz atın veya bize yazın.	Ziyaretçiye yol gösterir

Aynı işlem her yerde aynı adla anılmalıdır: bir yerde "Teklif al", başka yerde "Bilgi iste" yazması ziyaretçiyi bunların aynı şey olup olmadığını düşünmeye zorlar.

Sektöre Göre Profesyonellik: Aynı Ölçüt, Farklı Öncelik

12 ölçüt her siteye uygulanır, ancak ağırlıkları sektöre göre değişir. Bir hukuk bürosu için profesyonellik sakinlik, sadelik ve güven demektir; bir teknoloji firması için canlı örnekler ve teknik derinlik; bir e-ticaret sitesi için hız ve ödeme güveni. Aşağıdaki tablo öncelikleri gösterir:

Sektör	Öne çıkan ölçütler	Profesyonellik işareti
Hizmet ve danışmanlık	Güven unsurları, net eylem çağrısı, içerik	Somut süreç anlatımı ve gerçek referanslar
Üretici ve B2B	Bilgi mimarisi, teknik içerik, katalog erişimi	Ürün gruplarının net sınıflandırması, teknik belgeler
Yerel işletme	Mobil uyum, hız, tıkla-ara, tutarlı iletişim bilgisi	Doğru saatler, gerçek fotoğraflar, hızlı açılış
E-ticaret	Hız, güvenlik, ürün sayfası kalitesi	Şeffaf teslimat ve iade koşulları, güvenli ödeme
Teknoloji ve yazılım	Vaka çalışmaları, teknik yetkinlik, performans	Çalışan örnekler ve açık teknik anlatım

Profesyonellik Bir Bakım Düzenidir

Bir site yayına girdiği gün profesyonel görünebilir, ancak altı ay sonra eski bir referans, çalışmayan bir form ve güncellenmemiş bir telefon numarasıyla amatör hale gelebilir. Profesyonellik tek seferlik bir teslim değil, düzenli bir bakım disiplinidir:

• Aylık kontrol: Formları test edin, kırık bağlantıları tarayın, iletişim bilgilerini doğrulayın.
• Üç aylık gözden geçirme: Hız ve Core Web Vitals raporlarına bakın, eski içeriği güncelleyin veya kaldırın.
• Yıllık envanter: Kullanılan üçüncü taraf betikleri, yazılım sürümlerini ve güvenlik güncellemelerini denetleyin.
• Yedekleme: Sitenin düzenli yedeği alınmalı ve geri yükleme yönteminin çalıştığı bir kez denenmiş olmalı.

Bu bakım sorumluluğunun kimde olduğu sözleşmede açıkça yazılmalıdır; yazılmadığında çoğu site yayından sonra kimsenin sahiplenmediği bir varlığa dönüşür.

Özet Notlar: Profesyonellik İçin 5 Cümle

• Profesyonellik şıklık değil, hız, okunabilirlik, güven ve net eylem çağrısı gibi ölçülebilir ölçütlerin toplamıdır.
• Önce herkesi etkileyen alanları düzeltin: mobil uyum, sayfa hızı ve iletişim yolu.
• Tutarlılık, tasarım sistemiyle sağlanır; sistem yeni sayfa eklemeyi de hızlandırır.
• Metin ve mikro kopya, sitenin özenini sessizce anlatır; düğmeler ne olacağını söylemelidir.
• Profesyonellik yayın günü bitmez; düzenli bakım ve gözden geçirmeyle korunur.

Profesyonel Site İçin Nereden Başlamalı?

Sıralama önemlidir: önce herkesi etkileyen hız ve mobil uyumu, sonra eylem çağrısını ve güven unsurlarını, en son görsel yenilemeyi ele alın. Sıfırdan bir site planlıyorsanız süreci işletmeler için web sitesi tasarımı rehberimizle başlatabilir, tasarım ekibi seçerken web tasarım firması seçim rehberimizi kullanabilirsiniz.

ORCA Software olarak siteleri şablon üzerine değil, işletmenin hedefine göre sıfırdan kodluyoruz. Mevcut sitenizin bu 12 ölçütteki durumunu birlikte değerlendirmek için bizimle iletişime geçebilirsiniz.

Web Sitesi Tasarımı Rehber Serisindeki Diğer Yazılar

Bu yazı, işletmeler için web sitesi tasarımını farklı açılardan ele alan bir serinin parçası. İlgilendiğiniz konuya doğrudan geçebilirsiniz:

• İşletmeler için web sitesi tasarımı rehberi
• Kurumsal web sitesi sayfa yapısı ve bilgi mimarisi
• Web sitesi tasarım süreci: adım adım
• Mobil uyumlu web sitesi tasarımı
• Web sitesi hızı ve Core Web Vitals
• SEO uyumlu web sitesi tasarımı
• Yapay zekâ aramaları için web sitesi tasarımı
• Dönüşümü düşüren web sitesi tasarım hataları
• Yerel işletmeler için web sitesi tasarımı