Web Tasarım Nedir? Bir Web Sitesinin Parçaları ve Çalışma Süreci

Web tasarım tam olarak neyi kapsar?

Web tasarım, bir web sitesinin görünümünü, sayfa düzenini ve kullanım akışını ziyaretçinin ihtiyacına göre kurgulama işidir. Web tasarım yalnızca renk ve logo seçimi değildir; güzel görünen ama aradığınız bilgiyi bulamadığınız bir site iyi tasarlanmış sayılmaz.

Pratikte web tasarım birbirine bağlı altı parçadan oluşur. Aşağıdaki tablo her parçanın hangi soruya cevap verdiğini gösterir. Bir proje teklifini okurken hangi kalemin yazılı olduğuna bakmak için de işe yarar.

Web tasarım ile web geliştirme ve web yazılım arasındaki fark nedir?

Web tasarım sitenin planını ve görünümünü, web geliştirme ise bu planın tarayıcıda çalışan koda dönüştürülmesini ifade eder. Sınır her firmada aynı yerden geçmez; küçük projelerde tek kişi ikisini birden yapar, büyük projelerde ayrı roller çalışır.

Kodun tarafında MDN, HTML'i bir sayfanın ve içeriğinin yapısını kuran kod olarak tanımlar. Görünümü CSS, etkileşimi ise JavaScript üstlenir. Tasarımcının çizdiği menü, geliştirici elinde HTML yapısına, CSS düzenine ve gerekirse JavaScript davranışına dönüşür.

Bir kurumsal web sitesinde hangi sayfalar ve bölümler bulunur?

Kurumsal bir tanıtım sitesi genellikle ana sayfa, hakkımızda, hizmetler, iletişim ve teklif ya da randevu talebi sayfalarından oluşur. Hangi sayfanın gerçekten gerektiği işletmenin ziyaretçiden beklediği eyleme göre değişir; her sayfa her işletme için şart değildir.

Aşağıdaki liste tipik bir yapıyı ve her sayfanın ziyaretçiye hangi soruyu cevaplaması gerektiğini özetler.

• Ana sayfa: Bu işletme ne iş yapıyor ve bana uygun mu? Kısa bir tanıtım, ana hizmetlere bağlantılar ve görünür bir iletişim yolu içerir.
• Hizmet sayfaları: Hangi hizmeti, kimin için ve hangi kapsamda veriyorsunuz? Her hizmetin kendi sayfası olması hem ziyaretçi hem arama motoru için konuyu netleştirir.
• Hakkımızda: Karşımdaki kim? Ticari unvan, faaliyet alanı, çalışma şekli ve doğrulanabilir bilgiler burada yer alır.
• İletişim: Size nasıl ulaşırım? Telefon, e-posta, adres ve varsa harita ya da form; bilgiler tüm sitede aynı olmalıdır.
• Teklif ya da randevu formu: Bir sonraki adımı nasıl atarım? Form alanları gerçekten gerekli bilgilerle sınırlı olmalıdır.
• Blog ya da bilgi merkezi: Konuyu anlamak istiyorum. Bu bölüm zorunlu değildir; düzenli bakımı yapılamayacaksa küçük başlamak daha doğrudur.
• Referanslar ve sıkça sorulan sorular: Bu işletmeye güvenebilir miyim? Yalnızca gerçek, izin alınmış bilgilerle doldurulabilen bölümlerdir; boş ya da uydurma bırakılmaz.
• Alt bilgi (footer): Politika sayfaları, KVKK aydınlatma metni, çerez bilgisi ve ana bağlantılar. Sayfa sonuna kadar inen ziyaretçi için ikinci bir menü görevi görür.

Mobil uyum (responsive tasarım) ne demektir ve nasıl çalışır?

Responsive tasarım, aynı sayfanın ekran boyutuna göre düzenini değiştirebilmesidir. MDN bunu ayrı bir teknoloji değil bir yaklaşım olarak tanımlar ve akışkan ızgaralar, esnek görseller ile medya sorgularını ana yapı taşları olarak sayar; terimin 2010'da Ethan Marcotte tarafından ortaya atıldığını da belirtir.

Mobil uyum Google için de önemlidir. Google'ın mobil öncelikli dizinleme rehberi (güncelleme tarihi: 10 Aralık 2025), indeksleme ve sıralama için sitenin akıllı telefon sürümünün esas alındığını anlatır ve tek bir adreste aynı HTML'i sunan responsive tasarımı, uygulaması ve bakımı en kolay desen olarak önerir. Rehber ayrıca masaüstü ve mobil sürümde ana içeriğin eşdeğer olmasını ister.

Mobil görünümde dikkat edilecek bir nokta, masaüstünde olan metin ya da bağlantıların telefon sürümünden çıkarılmamasıdır. Rehberin ifadesiyle içerik mobilde açılır bölümlere ya da sekmelere taşınabilir, ancak tamamen kaldırılması trafik kaybına yol açabilir.

Responsive tasarımın üç temel satırı

<!-- HTML: sayfanın cihaz genişliğine göre çizilmesi için -->
<meta name="viewport" content="width=device-width">

/* CSS: görsellerin kapsayıcısından taşmaması için */
img, picture, video { max-width: 100%; }

/* CSS: yalnızca geniş ekranda iki sütun */
@media screen and (width >= 48rem) {
  .icerik { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; }
}

Bu kod MDN'nin responsive tasarım sayfasındaki yaklaşıma dayanan bir örnektir; sütun sayısı ve eşik değeri (48rem) yalnızca örnektir ve her proje için ayrıca belirlenir. Viewport etiketi olmadan telefonlar sayfayı masaüstü genişliğinde çizip küçülterek gösterebilir.

Erişilebilirlik ve hız neden tasarımın parçasıdır?

Erişilebilirlik, sitenin engelli kişiler dahil herkes tarafından algılanıp kullanılabilmesidir ve sonradan eklenen bir süs değil, tasarım kararlarının içinde alınan bir tercihtir. W3C'nin WCAG rehberi bunu dört ilke altında toplar: algılanabilir, işletilebilir, anlaşılabilir ve sağlam. Başarı ölçütleri A, AA ve AAA olmak üzere üç düzeyde yazılmıştır.

W3C'nin sayfasına göre WCAG'nin son sürümü 2.2'dir (5 Ekim 2023'te yayımlandı, 12 Aralık 2024'te güncellendi) ve 2.2 ile uyumlu içerik 2.0 ve 2.1 ile de uyumludur. Bir siteyi ‘WCAG'ye uyumlu’ diye sunmak için hangi sürüm ve hangi düzeyin hedeflendiğinin yazılı olması gerekir; genel bir ‘erişilebilir tasarım’ ifadesi bunu ölçülebilir kılmaz.

Hız tarafında web.dev, Core Web Vitals'ı üç metrikle tanımlar: en büyük içeriğin yüklenmesi (LCP) için ‘iyi’ eşik 2,5 saniye, etkileşim yanıtı (INP) için 200 milisaniye ve görsel sıçrama (CLS) için 0,1 veya altıdır. Aynı rehber, başarıyı sayfa yüklemelerinin 75. yüzdelik diliminde, mobil ve masaüstü ayrı ayrı değerlendirmeyi önerir (sayfa tarihi: 31 Ekim 2024).

Hızın sıralamadaki yeri için Google'ın sayfa deneyimi sayfası (güncelleme: 22 Eylül 2026) dengeli bir çerçeve çizer: tek bir sayfa deneyimi sinyali yoktur, iyi Core Web Vitals sonuçları sıralamada üst sırayı garanti etmez ve mükemmel puanları kovalamak zamanın en iyi kullanımı olmayabilir. Yine de benzer faydalı seçenekler arasında iyi bir sayfa deneyimi başarıya katkı sağlayabilir.

Neyin tasarım, neyin içerik, neyin teknik SEO işi olduğunu nasıl ayırırım?

Bir iş tasarımdan mı, içerikten mi yoksa teknik SEO'dan mı geliyor sorusunun kısa cevabı şudur: görünüm ve kullanım akışı tasarımdır, ziyaretçinin okuyacağı bilgi içeriktir, arama motorunun siteyi tarayıp anlamasını sağlayan altyapı ise teknik SEO'dur. Üçü kesişir ama aynı iş değildir.

Google'ın SEO başlangıç rehberi (güncelleme: 10 Aralık 2025) bu kesişimi gösterir: sayfaya özgü ve açıklayıcı başlıklar, kısa ve özgün meta açıklamaları, görseller için kısa ama açıklayıcı alternatif metin, açıklayıcı bağlantı metinleri, konuya göre düzenlenmiş URL'ler ve kullanıcıya fayda sağlayan okunabilir içerik öneriler. Aşağıdaki karar tablosu bu işleri kimin üstlenmesi gerektiğine dair bir başlangıç sunar; asıl iş bölümü sözleşmede yazılı olmalıdır.

Bir web sitesi projesi hangi adımlarla ilerler?

Tipik bir web tasarım süreci hedefin belirlenmesiyle başlar, yayına alma ve sonrasındaki kontrolle biter. Süre ve ayrıntı projeye göre değişir; küçük bir tanıtım sitesi ile çok sayfalı bir yapı aynı takvimle ilerlemez.

Adımların çoğunda işletmeden de bir şey beklenir. Bu beklentiler baştan konuşulmazsa en sık gecikme sebebi haline gelir.

1. Hedef ve kitle: Sitenin ziyaretçiden hangi eylemi istediğini (arama, form, randevu, bilgi alma) tek cümleyle yazın.
2. Site haritası: Hangi sayfaların olacağını ve menüde hangi sırada duracağını belirleyin; bilgi mimarisi bu adımda kurulur.
3. Tel kafes (wireframe): Renk ve görsel olmadan, yalnızca sayfa düzeninin ve bölüm sırasının çizildiği taslağı onaylayın.
4. Görsel tasarım: Renk, yazı tipi, görsel dil ve bileşenlerin ana sayfa ile bir iç sayfa üzerinde gösterildiği taslağı inceleyin.
5. İçerik hazırlığı: Metinler, logo, fotoğraflar ve yasal bilgiler toplanır; işletme bilgilerin doğruluğunu onaylar.
6. Geliştirme: Onaylanan tasarım HTML, CSS ve gerekiyorsa JavaScript ile koda dökülür; form ve iletişim işlevleri bu aşamada kurulur.
7. Test: Telefon ve masaüstünde, farklı tarayıcılarda; klavyeyle gezinme, form gönderimi ve sayfa hızı açısından kontrol edilir.
8. Yayın ve kayıt: Site yayına alınır, site haritası hazırlanır ve arama motoru araçlarına tanıtılır; yayın sonrası ilk günlerde kırık bağlantı ve form kontrolü yapılır.

Kendi web sitenizin ihtiyaç listesini nasıl çıkarırsınız?

İhtiyaç listesi, bir firmadan teklif istemeden önce kendi sitenizin neye ihtiyacı olduğunu yazıya dökmenizdir. Aşağıdaki sorulara verdiğiniz evet ya da hayır cevapları, hangi sayfanın, hangi işlevin ve hangi iş kaleminin teklife yazılması gerektiğini gösterir.

Listeyi çıktı alıp doldurabilir, aynı soruları teklif veren her firmaya yöneltebilirsiniz. Bu şekilde teklifleri aynı kapsam üzerinden karşılaştırmak kolaylaşır.

• Amaç: Ziyaretçiden tek bir ana eylem seçtiniz mi (telefonla arama, form doldurma, randevu, bilgi alma)? Seçilemiyorsa tasarım dağınık olur.
• Sayfalar: Her hizmetiniz için ayrı sayfa gerekiyor mu? Hakkımızda ve iletişim sayfasına yazacağınız doğrulanabilir bilgiler hazır mı?
• Online satış: Sitede ödeme alınacak mı? Alınacaksa bu yazıda anlatılan tanıtım sitesi kapsamının dışına çıkılır; Tuba Yazılım e-ticaret hizmeti vermez.
• Form ve randevu: Hangi bilgileri istiyorsunuz ve gelen talepler kime, hangi e-posta adresine düşecek?
• Mobil: Müşterilerinizin çoğu sizi telefondan mı arıyor? Öyleyse telefon numarası, harita ve WhatsApp bağlantısı ilk ekranda görünmeli mi?
• İçerik: Metinleri ve fotoğrafları kim hazırlayacak? Hazır değilse proje takviminin ne kadarının içeriğe bağlı olduğu yazılı olmalı.
• Erişilebilirlik: Hangi WCAG sürümü ve düzeyi hedefleniyor? Hedef yazılı değilse ‘erişilebilir’ ifadesi ölçülemez.
• Hız: Yayın sonrası sayfa hızı hangi araçla ve hangi eşiklerle kontrol edilecek (örneğin Core Web Vitals eşikleri)?
• Arama motoru: Başlık, meta açıklaması, site haritası ve Search Console kaydı kapsamda mı? Bunlar yazılı değilse varsayılmamalıdır.
• Güncelleme: Yayından sonra metin ve görseli kim değiştirecek? Panel mi, firma mı, ne kadar sürede?
• Sahiplik: Alan adı, hosting ve site dosyaları kimin adına kayıtlı olacak ve yönetim bilgileri size teslim edilecek mi?
• Kapsam dışı: Teklifte yazmayan bir işi (ek sayfa, çok dillilik, entegrasyon) sonradan istemenin nasıl fiyatlandırılacağı belli mi?

Sık sorulan sorular

Kaynaklar

1. MDN: Responsive web design
2. MDN: Creating the content (HTML'in rolü)
3. web.dev: Web Vitals (Core Web Vitals eşikleri)
4. W3C WAI: WCAG Overview
5. Google Search Central: Mobile-first indexing best practices
6. Google Search Central: SEO Starter Guide
7. Google Search Central: Understanding page experience