Web Sitesi Tasarımı Nasıl Yapılır? İşletmeler İçin Rehber

İyi bir işletme sitesi tasarımı, güzel görünmekten önce ziyaretçinin aradığını hızlıca bulmasını sağlar. Tasarımcı olmanız gerekmez; birkaç ilkeyi doğru sırayla uygulamanız yeterlidir: önce amaç ve ziyaretçi, sonra düzen, renk, yazı, görsel ve mobil. Bu rehber o sırayı izliyor ve her ilke için kendi sitenizde sorabileceğiniz somut bir soru veriyor.

Sitenin kurulum sürecinin tamamını merak ediyorsanız web sitesi nasıl oluşturulur rehberine bakın. Burada yalnızca tasarım kararlarına odaklanıyoruz. Tasarımın içine girecek sayfa ve metin kararları için ise işletme web sitesi nasıl olmalı yazısı tamamlayıcıdır.

Kısa cevap: iyi bir işletme sitesi tasarımının ilkeleri

Bir işletme sitesi tasarımı şu ilkelere dayanır:

1. Amaç önce gelir. Sitenin ziyaretçiden yapmasını istediğiniz tek ana eylem (ara, yaz, rezervasyon yap, teklif iste) tasarımın merkezini belirler.
2. Düzen bir sıra kurar. Ziyaretçinin gözü önce en önemli şeye, sonra bir sonrakine gitmelidir.
3. Metin okunabilir olmalıdır. Renk, kontrast ve yazı boyutu, şıklıktan önce gelir.
4. Görseller gerçek ve amaçlı olmalıdır. Süs için değil, işi göstermek için.
5. Mobil, sonradan eklenen değil, baştan düşünülen bir ekrandır.
6. Tasarım içeriğe hizmet eder. Boş ya da yer tutucu metinle hiçbir tasarım iyi görünmez.

Tasarımcı olmadan iyi tasarım mümkün mü sorusunun cevabı, çoğu işletme için evet: hazır bir tasarım düzen ve mobil kararlarının büyük kısmını sizin yerinize verir; sizin işiniz amacı, içeriği ve markanıza uygun rengi seçmektir.

Önce amaç ve ziyaretçi

Tasarım kararlarının hepsi iki soruya dayanır: Ziyaretçi kim ve siteyi neden açtı? Bir restoranı arayan kişi menüyü, çalışma saatini ve konumu ister; bir danışmanlık firmasına bakan kişi ne yaptığınızı, nasıl çalıştığınızı ve nasıl ulaşacağını. İkisinin aynı tasarımla karşılanması gerekmez.

Google'ın faydalı içerik belgesi de aynı mantıkla başlar: içeriği önce arama motoru için değil, insanlar için, onların ihtiyacına göre kurun. Tasarım için de aynısı geçerlidir; "güzel olsun" hedefi ölçülemez, "ziyaretçi telefonu arayabilsin" hedefi ise yapılabilir ve kontrol edilebilir.

Başlamadan önce iki cümle yazın:

• Ziyaretçi sitede şunu yapabilmeli: ...
• Bunu yaptığında ona şunu söylememiz gerekiyor: ...

Bu iki cümle, ana sayfada neyin öne çıkacağını, düğmenin ne yazacağını ve neyin gösterilmeyeceğini belirler.

Düzen ve görsel hiyerarşi

Görsel hiyerarşi, ziyaretçinin gözünün sayfada hangi sırayla ilerleyeceğidir. Her şey aynı büyüklükte, aynı koyulukta ve aynı yoğunlukta olursa göz hiçbir yere yerleşemez. Hiyerarşiyi üç araç kurar: boyut, kontrast ve boşluk.

• Boyut: en önemli başlık en büyük olandır; ikincil bilgiler daha küçüktür.
• Kontrast ve vurgu: ana çağrı düğmesi sayfadaki diğer öğelerden ayrışmalıdır. Her düğmeyi vurgulu yaparsanız hiçbiri öne çıkmaz.
• Boşluk: bölümler arasındaki boşluk, "burada konu değişiyor" demenin en sade yoludur. Boşluk israf değil, okumayı kolaylaştıran bir araçtır.

Başlık yapısı da hiyerarşinin parçasıdır. MDN'in HTML ile içerik yapılandırma belgesi, başlıkların ve sayfa bölümlerinin yalnızca görünüm için değil, anlamı makinelerin de okuyabileceği biçimde kurulması gerektiğini vurgular; bu hem erişilebilirlik hem arama motorları hem de tarayıcı özellikleri için önemlidir. Pratikte: sayfada tek bir ana başlık, altında bölüm başlıkları olmalı; başlık seviyesini yazıyı büyütmek için değil, yapıyı göstermek için seçin.

Düzende sık görülen üç hata vardır: ilk ekranda çok sayıda eşit vurgulu öğe, uzun metin bloklarının tek sütunda aralıksız akması ve ziyaretçiyi hiçbir yere yönlendirmeyen, yalnızca süs olan bölümler. Her bölüm için "bu bölüm ziyaretçiye ne veriyor?" diye sorun; cevabınız yoksa bölümü çıkarın.

Renk, kontrast ve okunabilirlik

Kaç renk kullanmalıyım?

Sayıdan çok rolleri düşünün. İşletme sitesi için yeterli bir yapı: markanızı temsil eden bir ana renk, çağrı düğmeleri ve bağlantılar için bir vurgu rengi, geri kalan her şey için nötr tonlar (arka plan, metin, ayırıcı çizgiler). Renk sayısı arttıkça tutarlı kalmak zorlaşır ve hiyerarşi bulanıklaşır. Logonuzda çok renk varsa hepsini siteye taşımanız gerekmez; birini ana renk seçin.

Renk tek başına anlam taşımamalıdır. W3C'nin WCAG yönergeleri, bilgiyi iletirken ya da bir eylemi belirtirken rengin tek görsel araç olmaması gerektiğini söyler. Örneğin zorunlu bir form alanını yalnızca kırmızı çerçeveyle işaretlemek yerine yanına bir metin ya da simge ekleyin; renk körlüğü olan kişi de, parlak güneşte telefonuna bakan kişi de farkı görebilsin.

Kontrast: basit kural

Kontrast, metin rengi ile arka plan rengi arasındaki açıklık farkıdır. WCAG yönergeleri normal boyuttaki metin için belirli bir asgari kontrast oranı tanımlar ve büyük yazı için daha düşük bir oran kabul eder; logolar ve yalnızca süs amaçlı öğeler bu kuralın dışındadır. Oranların tam değerini elle hesaplamanız gerekmez: yönergelerin kendi metninden okuyabilir ya da ücretsiz kontrast denetleme araçlarına renk kodlarını girerek ölçebilirsiniz.

Gündelik kural şöyle özetlenebilir:

• Açık gri yazıyı beyaz zeminde kullanmayın; güzel görünür ama okunmaz.
• Fotoğrafın üstüne yazı koyuyorsanız, metnin altına yarı saydam bir koyu zemin ya da fotoğrafın sakin bir bölgesini seçin.
• Düğme yazısı ile düğme rengi arasındaki kontrasta da bakın; vurgu rengi göze hoş geldiği için okunur olduğunu varsaymayın.
• Sitenizi telefonda, açık havada ve ekran parlaklığı düşükken bir kez deneyin.

W3C'nin erişilebilirliğe giriş sayfası, erişilebilir tasarımın yalnızca engelli kullanıcılara değil, küçük ekranlı mobil cihaz kullanıcılarına, parlak güneş altındaki kişilere ve yaşlanmaya bağlı değişiklikler yaşayanlara da fayda sağladığını belirtir. Yani kontrast, dar bir kitle için değil, ziyaretçilerinizin çoğu için bir kolaylıktır.

Site Oluşturucu'da marka renklerinizi panelden değiştirirsiniz ve tasarım yönetimi sayfasında belirtildiği gibi okunmayan renk kombinasyonu engellenir. Bu, her renk seçiminde kontrastı elle hesaplama yükünü hafifletir; yine de yayına almadan önce sitenize gerçek bir göz atmanız iyi olur.

Açık tema mı, koyu tema mı?

Koyu tema işletme sitesi için uygun mu sorusunun cevabı, işinize ve ziyaretçinizin siteyi nerede kullandığına bağlıdır; hiçbiri evrensel olarak daha doğru değildir. Karar verirken şu sorulara bakın:

Soru	Açık tema lehine	Koyu tema lehine
Sitede uzun metin okunacak mı?	Evet: bilgi, rehber, blog ağırlıklı siteler	Hayır: görsel ve vitrin ağırlıklı siteler
Sektörün havası nasıl?	Güven, netlik ve sadelik öne çıkacaksa	Atmosfer, sıcaklık ya da stüdyo hissi öne çıkacaksa
Fotoğraflar nasıl?	Açık fon üzerinde iyi görünüyorlarsa	Koyu fonda canlanıyorlarsa (yemek, mimari, fotoğraf)
Ziyaretçi siteyi nerede açıyor?	Gün ışığında, telefondan hızlıca bakılıyorsa	Akşam saatlerinde ya da loş ortamlarda bakılıyorsa

Hangisini seçerseniz seçin kural aynıdır: metin okunur kalmalı, kontrast yeterli olmalı, vurgu rengi iki temada da ayırt edilmelidir. Koyu tema çoğu zaman "daha modern" göründüğü için seçilir; bu gerekçe tek başına yetmez. Site Oluşturucu'nun tasarım sayfalarında bazı tasarımlar koyu tonlu olarak tarif edilir (örneğin restoran, portfolyo ve ajans tasarımları), hangisinin size uyduğunu görmek için tasarımlar sayfasından her birinin canlı demosunu açıp kendi içeriğinizle nasıl duracağını düşünebilirsiniz.

Yazı tipi ve metin

Web sitesinde yazı tipinin işi göz kamaştırmak değil, okunmaktır. Pratik kurallar:

• Az yazı tipi: bir başlık ve bir gövde yazı tipi çoğu işletme için yeter. Aileyi aynı tutup kalınlığı değiştirmek de bir yoldur.
• Yeterli boyut: gövde metni telefonda yakınlaştırma gerektirmeden okunabilmelidir. Bunu yalnızca bilgisayar ekranında değil, telefonda deneyin.
• Satır uzunluğu: çok uzun satırları gözün takip etmesi zordur. web.dev'in duyarlı tasarım belgesi de okunabilirlik için satır uzunluğunun sınırlı olması gerektiğini, metin blokları bu sınırı aştığında yerleşimi değiştirmek gerektiğini söyler.
• Başlıklar bilgi taşımalı: "Hizmetlerimiz" yerine "Ölçüye göre dolap ve kitaplık" gibi içeriği söyleyen bir başlık, ziyaretçinin yazıya göz atarak karar vermesini kolaylaştırır.
• Kısa paragraflar: her paragraf bir fikir taşısın. Madde işareti, bir listenin gerçekten liste olduğu yerde kullanılsın.

Metnin kendisi tasarımın bir parçasıdır. Kısa, somut ve ziyaretçinin kullandığı kelimelerle yazılmış metin, süslü bir yazı tipinden daha çok iş görür. Sayfa metinlerinin nasıl yazılacağı için işletme web sitesinde olması gereken sayfalar yazısındaki zayıf ve güçlü örneklere bakabilirsiniz.

Görsel kullanımı

Görsel, işinizi göstermelidir: mekân, ürün, çalışma anı, ekip. Genel amaçlı, her sektörde kullanılabilecek görüntüler ziyaretçide "bu bir şablon" izlenimi bırakır; gerçek ama sade bir fotoğraf çoğu zaman daha çok güven verir. Başlamak için profesyonel çekim şart değildir; telefonla çekilmiş net ve iyi ışıklı fotoğraflar bir başlangıçtır.

• Amaçlı kullanın: her görselin sayfada bir görevi olsun; sadece boşluk doldurmak için görsel koymayın.
• Tutarlı olun: benzer ışık, benzer kadraj, benzer ton. Sitenin bütünlüğü buna bağlıdır.
• Yazıyı ezmesin: metin üstüne koyulan görsellerde okunabilirliği kontrol edin.
• Alternatif metin ekleyin: görseli göremeyen kişi için ne gösterdiğini kısa bir cümleyle yazın; bu erişilebilirliğin temel adımlarından biridir.
• Hakkı olmayan görseli kullanmayın: başkasına ait fotoğrafı izinsiz yayınlamayın.

Hazır bir tasarımla başlıyorsanız tasarımın örnek görselleri geçici yer tutucudur; yayına almadan kendi fotoğraflarınızla değiştirin. Site Oluşturucu'da görsel alanında medya kütüphaneniz açılır, bir kez yüklediğiniz görseli istediğiniz bölümde kullanırsınız (Sitede Düzenle sayfasında anlatılıyor).

Mobil öncelikli düşünmek

Ziyaretçilerinizin bir kısmı siteyi telefondan açar; bu yüzden tasarımı telefon ekranından başlatmak, yani önce küçük ekranı çözüp sonra büyütmek, çoğu zaman daha sağlıklı sonuç verir. web.dev'in duyarlı tasarım belgesi de küçük ekrandan başlayıp yerleşim bozulduğunda genişletmeyi önerir. Google ise mobil öncelikli dizinlemede sitenin mobil sürümündeki içeriği kullandığını ve duyarlı tasarımın bunun için uygulaması ve bakımı en kolay yöntem olduğunu söyler.

Tasarım açısından mobil şu anlama gelir:

• İlk ekranda ana mesaj ve ana eylem aşağı kaydırmadan görünür.
• Düğmeler ve bağlantılar parmakla rahat dokunulacak kadar büyük ve birbirinden ayrıdır.
• Yatay kaydırma gerektiren öğe yoktur.
• Telefon numarası dokunulduğunda aranır.
• Masaüstünde görünen önemli içerik telefonda saklanmaz ya da kısaltılmaz.

Site Oluşturucu'nun tasarım yönetimi sayfası, tüm tasarımların masaüstü, tablet ve mobilde ayrı ayrı çalışacak şekilde hazırlandığını belirtir; tasarım sayfalarında da masaüstü, tablet ve telefon önizlemesi bulunur. Yine de kendi içeriğiniz yerleştikten sonra sitenizi gerçek bir telefonda açıp gezin: uzun bir başlık ya da büyük bir görsel hazır tasarımın düzenini sizin içeriğinizde farklı gösterebilir.

Hazır tasarım mı, özel tasarım mı?

Tasarımı nasıl edineceğiniz, sitenizi hangi yöntemle kurduğunuzla bağlantılıdır. Genel kategoriler üzerinden bakalım:

Yol	Ne verir	Neye dikkat edilir
Hazır tasarım (oluşturucu)	Düzen, mobil uyum ve sayfa seti hazırdır; siz içeriği ve rengi seçersiniz	Düzenin esnekliği tasarıma göre sınırlıdır; içeriğinizin tasarıma uyup uymadığını görmek gerekir
Ajansla özel tasarım	Markanıza göre kurgulanmış, özgün bir düzen	Süreç ve bakım ayrı yönetilir; sonraki değişikliklerin kimde olduğunu baştan netleştirin
Özel yazılım	Tam serbestlik	Tasarım kararlarının yanında teknik bakım da size ya da yazılımcınıza aittir

Çoğu küçük ve orta ölçekli işletme için hazır tasarım iyi bir başlangıçtır; çünkü ilk günden çalışan bir düzen sunar ve tasarımı sonradan geliştirebilirsiniz. Özel tasarım, markanızın çok özgün bir görsel kimliğe ihtiyacı olduğunda ya da hazır düzenlerin karşılamadığı işlevler gerektiğinde anlam kazanır. Bu karar, bütçeden çok ihtiyaçla ilgilidir.

Site Oluşturucu'da yaklaşım şöyledir: tasarımlar sayfasında sektörünüze göre hazır tasarımları bulursunuz (ajans, restoran, QR menü, emlak, e-ticaret, portfolyo, dergi ve otel). Her tasarımın canlı demosunu inceleyebilir, demo panelde değişiklik deneyebilirsiniz; demo modunda değişiklikler kaydedilmez. Seçtiğiniz tasarım başlangıç sayfaları, örnek metinler ve görsellerle açılır. Tasarımı beğenmezseniz müşteri panelindeki Tasarımı Değiştir ile başka bir tasarıma geçebilirsiniz; hangi tasarımı seçerseniz seçin Yönetim Paneli ve Sitede Düzenle aynıdır (tasarım yönetimi). Platformla hazırlanmış örnek sitelere referanslar sayfasından da bakabilirsiniz.

Hazır tasarımın bir sınırı da vardır: tasarımın sunduğu sayfa ve bölümlerin dışına çıkmak istediğinizde ne kadar esneklik olduğunu karar vermeden önce demoda deneyin.

Tasarımı canlıda düzenlemek

Tasarım bir kerelik bir karar değildir; siteyi yayınladıktan sonra neyin işe yaradığını görüp düzeltmek normaldir. Bu yüzden değişikliği yapmanın kolay ve riskli olmaması önemlidir. Site Oluşturucu'nun Sitede Düzenle aracında bir metne tıklayıp yerinde yazarsınız; değişiklik önce taslağa kaydedilir, Yayınla ile yayına çıkar; bölüm araç çubuğundaki oklarla bölümün yerini değiştirir, Gizle ile bölümü sayfada göstermez, Bölüm Ekle ile yeni bölüm eklersiniz. Yayınladıktan sonra bir bölümün önceki sürümlerine dönmek de mümkündür.

Tasarım kontrol listesi

Yayına almadan önce şu soruları sırayla cevaplayın. Birine "hayır" diyorsanız o başlığa geri dönün.

Konu	Soru
Amaç	Ziyaretçinin yapmasını istediğim ana eylem ilk ekranda görünüyor mu?
Hiyerarşi	Sayfaya bakınca gözüm önce en önemli şeye gidiyor mu? Ana düğme diğerlerinden ayrışıyor mu?
Başlıklar	Sayfada tek bir ana başlık var mı; bölüm başlıkları içeriği söylüyor mu?
Renk	Ana renk, vurgu rengi ve nötr tonlar net mi? Bilgi yalnızca renkle mi veriliyor?
Kontrast	Metin her arka planda rahat okunuyor mu; düğme yazıları dahil?
Yazı	Gövde metni telefonda yakınlaştırmadan okunuyor mu? Yazı tipi sayısı az mı?
Görsel	Görseller gerçek ve amaçlı mı? Alternatif metinleri var mı? Yer tutucu görsel kaldı mı?
Mobil	Siteyi gerçek bir telefonda gezdim mi? Yatay kaydırma, küçük düğme ya da üst üste binen öğe var mı?
İçerik	Örnek metinlerin hepsini kendi metnimle değiştirdim mi?

Sık yapılan tasarım hataları

• Önce tasarım, sonra içerik: içerik bilinmeden seçilen tasarım, gerçek metin gelince bozulur. İçeriğin ilk taslağını erken yazın.
• Her şeyi vurgulamak: her bölüm başlığı büyük ve renkli olursa hiyerarşi kalmaz.
• Okunmayan şıklık: açık gri yazı, ince yazı tipi, fotoğraf üstünde düşük kontrastlı metin.
• Masaüstüne göre kontrol: siteyi yalnızca bilgisayarda görüp telefonda hiç açmamak.
• Yer tutucuyu yayında bırakmak: hazır tasarımın örnek metni ve görseli yayında kalırsa site başkasının sitesine benzer.

Sonraki adımlar için sitenizin genel sürecini web sitesi nasıl oluşturulur rehberinde bulabilirsiniz.