Web Tasarım Nedir? Kapsamlı Rehber

Web tasarım, işletme sitesinde “şablon seçmek” veya “renk paleti” değildir. Ziyaretçinin doğru sayfaya ulaşması, teklifi anlaması, güven duyması ve dönüşüm adımını tamamlaması için alınan yapısal kararların bütünüdür. Estetik bu yapının üst katmanıdır — yoksa marka görünür ama iş bitmez.

Bu rehber kurumsal/KOBİ siteleri için UX, bilgi mimarisi (IA), performans, erişilebilirlik, CRO bağlantısı ve SEO etkileşimini tek çerçevede toplar. Amaç süsleme yarışı değil; bu eksenlerin birbirini nasıl bozduğunu veya güçlendirdiğini operasyon dilinde yazmak. Uygulama yolu: kurumsal web sitesi, UX pratikleri.

Bölüm 1İşletme sitesinde web tasarımın işi

Birincil iş: belirsizliği azaltmak. Kim için, hangi hizmet/ürün, neden siz, nasıl iletişim. İlk ekranda marka ve teklif okunmuyorsa tasarım “premium” olsa da görevini yapmıyordur. Karar kriteri: nav’ı kaldırsanız bile ilk viewport’ta marka + teklif + birincil eylem hâlâ anlaşılıyor mu?

• Tek birincil eylem (ara / teklif / randevu) — ikinciller görsel olarak geride
• Hizmet ve kanıtın görünür hiyerarşisi (eşit ağırlıklı 12 kart = hiyerarşi yok)
• Mobilde aynı netlik (küçültülmüş masaüstü değil; öncelik sırası yeniden)

Örnek: “güzel ama iş yapmayan” ana sayfa

Tam ekran video, belirsiz slogan, üç eşit CTA (“Keşfet / Daha fazla / İletişim”) ve aşağıda 9 hizmet kartı. Kullanıcı ne seçeceğini bilmez; SEO tarafında da H1 ve birincil URL belirsiz kalır. Düzeltme: marka + bir cümle teklif + tek CTA; hizmetler 5–7 menü/URL’de toplanır.

Bölüm 2UX ve bilgi mimarisi (IA)

IA; menü, URL grupları, iç link ve “bir sonraki adım” akışıdır. Zayıf IA’nın belirtileri: aynı içeriğin üç URL’de tekrarı, menüde 12 eşit ağırlıklı madde, hizmet sayfasından iletişime üç tık, arama kutusunun tek çıkış yolu olması. UX pratikleri için UX tasarım.

Pratik IA kontrolü

• Ana menü ≤ iş modelleriniz kadar (genelde 5–7); fazlası “diğer” veya hub’a
• Her hizmetin tek birincil URL’si; şehir×hizmet kopyası ayrı politika ister
• Footer’da yasal + iletişim; menüyü kopyalamayın — tarama ve kullanıcı için gürültü
• 404, boş durum ve form hata sayfaları da tasarım kapsamındadır

Karar: yeni sayfa mı, mevcut şablon mu?

Yeni URL açmadan önce sorun: Bu niyet için zaten bir birincil sayfa var mı? Varsa genişletin veya yönlendirin. Yoksa şablon türünü seçin (hizmet / lokasyon / blog / iletişim). “Landing her kampanyaya yeni” IA’yı şişirir; kampanya bitince orphan URL kalır.

Bölüm 3Performans: hız tasarım kararlıdır

Ağır kahraman videoları, sıkıştırılmamış görseller, render-blocking script yığını “tasarım tercihi” gibi görünür; aslında dönüşüm ve tarama bütçesini yer. Ölçün: site hız testi, Core Web Vitals testi. Operasyon listesi: site hızı optimizasyonu.

Tasarım ekibi için kural: LCP adayı görseli bilinçli seçin (hero’daki en büyük görsel genelde LCP’dir); dekoratif animasyonu varsayılan açmayın; font ve üçüncü taraf etiketlerini “sonra bakarız”a bırakmayın. Uyarı: “masaüstünde akıcı” mobil alan verisini gizlemez — karar mobil gerçek kullanıcı verisine bakılarak alınır.

Tasarım → CWV etkileşim örnekleri

• LCP: 4MB hero, lazy olmayan slider, web font flash’ı
• INP: chat widget + scroll animasyonu + ağır carousel aynı anda
• CLS: geç yüklenen banner, rezervasyonsuz reklam/cookie şeridi

Kenar durum: “marka videosu şart” ise poster görsel + kullanıcı tetiklemeli oynatma; otomatik oynatma hem erişilebilirlik hem veri maliyeti riskidir. Performans bütçesini (ör. hero ≤ belirli KB, üçüncü taraf ≤ N) tasarım brief’ine yazın — yoksa sprint sonunda “optimize ederiz” kalır.

Bölüm 4Erişilebilirlik temelleri

İşletme sitesinde minimum: anlamlı başlık sırası, form etiketleri, yeterli kontrast, klavye ile menü/CTA, görsellerde işe yarar alt metin, odak görünürlüğü. Bu hem yasal/etik hem kullanılabilirlik meselesidir. Kontrol: erişilebilirlik kontrol listesi.

• H1→H2 sırası atlanmasın; stil için heading kullanmayın
• Placeholder, label yerine geçmez; hata mesajı alanı ve çözümü söylesin
• Otomatik oynayan medya durdurulabilir olsun
• Yalnızca renkle anlam vermeyin (form hatası, stok durumu)

a11y ile SEO’nun kesişimi (abartmadan)

Semantik HTML ve metin olarak var olan içerik hem yardımcı teknolojilere hem taramaya hizmet eder. “Erişilebilirlik sıralama faktörüdür” diye satmayın; ama içeriği canvas/görsele gömmek, tıklanamayan sahte buton ve klavyesiz menü hem dönüşümü hem keşfi zayıflatır. Kontrast “marka pastel” bahanesiyle okunaksız hale gelmesin — mobil güneş ışığında da okunmalı.

Bölüm 5CRO bağlantısı: tasarım dönüşümü taşır

CRO; hipotez, ölçüm ve test dilidir. Tasarım ise hipotezin ekrandaki hali: CTA kontrastı, form alanı sayısı, sosyal kanıt yerleşimi, sürtünmeli adımlar. Kart ve rozet yığını “dönüşüm tasarımı” değildir; tek net yol çoğu KOBİ’de daha iyidir. Çerçeve: e-ticaret CRO rehberi.

Karar kriteri: neyi test eder, neyi hemen düzeltirsiniz?

Çalışmayan telefon linki, gizli fiyat, kırık form → test beklemeyin. “CTA solda mı sağda mı?” → yeterli trafikte test. Uyarı: her sprintte layout + kopya + teklif birden değişirse hangi kolun işe yaradığı bilinmez. Tasarım sistemi (buton, form, tipografi) tutarlıysa CRO maliyeti düşer; her sayfada yeni UI icat etmek ölçümü bozar.

• Birincil CTA sayfa başına bir; sticky çakışması (cookie/chat) P0
• Güven kanıtı teklifin yanında; footer’a sürmeyin
• Form: zorunlu alanları iş ihtiyacına indirin — “ileride lazım” alanı lead öldürür

Bölüm 6SEO ile etkileşim

SEO tasarımı “anahtar kelimeyi hero’ya yazmak” değildir. Tarama edilebilir HTML, tek H1, anlamlı başlıklar, iç link, kanonik URL’ler, mobil kullanılabilirlik ve hızlı LCP SEO ile doğrudan konuşur. İçerik niyeti sayfa şablonunda yer bulmalıdır: hizmet şablonu bilgisel blogdan farklıdır.

Yayın öncesi: SEO analiz aracı; başlık/meta taslak: SEO başlık, meta açıklama. Şablon çoğaltırken ince lokasyon/hizmet kopyalarından kaçının — IA ve içerik kalitesi birlikte düşünülür.

Tasarım–SEO birlikte karar matrisi

• SPA / ağır client render: SEO maliyeti yüksekse SSR/ön render şart; aksi halde pazarlama vaadi teknik borca döner
• Sonsuz kaydırma: kritik hizmet metni ve CTA’nın indekslenebilir URL’si olsun
• Görsel-metin: teklif ve fiyat düz metinde de dursun; yalnızca görselde kalmasın
• İç link: tasarım “daha az link = temiz” derken orphan hizmet sayfası üretmesin

Bölüm 7Beş eksenin etkileşimi (özet tablo dilinde)

IA zayıfsa CRO “hangi CTA?” sorusunda kaybolur; SEO de hangi URL’nin birincil olduğunu bilemez. Hız kötüyse güzel UI ve iyi kopya dönüşüme ulaşmaz. a11y kırığı form ve menüyü bir kesim için kilitle; aynı kırıklar çoğu zaman semantik kalite sorunudur. SEO niyet uyumsuz trafiği getirirse CRO metrikleri düşer — tasarımı suçlamadan önce trafiği segmentleyin.

Pratik sıra çoğu yenilemede: IA ve şablon netliği → performans bütçesi → a11y temelleri → CRO hipotezleri → on-page SEO cilası. Tersine “önce görsel moodboard” çoğu projede yeniden iş üretir.

Bölüm 8Sık yapılan tasarım–SEO çatışmaları

• İçeriğin tamamını görsele gömmek (tarayıcı ve yardımcı teknoloji metin görmez)
• Sonsuz kaydırmada kritik metnin URL’siz kalması
• Cookie/chat widget’larının LCP ve INP’yi bozması
• “Tek sayfa her şey” SPA hevesi + zayıf ön render
• Hamburger menüde 20 eşit link; masaüstünde gizlenen birincil hizmetler

Bölüm 9Şablon türleri: aynı UI, farklı iş

Ana sayfa keşif ve yönlendirir; hizmet/ürün sayfası karar verir; blog bilgilendirir; iletişim sürtünmeyi düşürür. Aynı “kart ızgarası”nı her şablona yapıştırmak IA’yı öldürür. Kurumsal yenilemede önce şablon envanteri çıkarın — kurumsal web anlatımı bu envanterle uyumludur.

Kenar durum: çok marka / çok lokasyon

Aynı tasarım sistemi kullanılabilir; içerik ve NAP blokları şablon slotu olmalıdır (zorunlu alan). Slot boşken yayın kapalı — aksi halde şehir adı değişmiş doorway sayfalar üretirsiniz. Bu, “tasarım güzel” olsa da SEO ve güven riskidir.

Bölüm 1090 günlük sade yenileme sırası

1–2. hafta: IA ve ana sayfa/hizmet netliği (menü, birincil URL’ler, H1). 3–5. hafta: hız ve CWV (hero, font, üçüncü taraf). 6–8. hafta: form/CTA CRO (tek değişiklik + ölçüm). 9–12. hafta: erişilebilirlik + SEO teknik hijyen (başlık, iç link, kanonik). Paralel “her şeyi yeniden tasarlayalım” çoğu zaman trafiği ve öğrenmeyi sıfırlar; aşamalı yayın daha güvenlidir.

Özet: İyi web tasarım, markayı hero seviyesinde gösteren, yolu netleştiren, hızlı ve erişilebilir bir sistemdir. UX/IA yönlendirir, performans taşır, a11y dışlamaz, CRO ölçer, SEO keşfettirir — tasarım bu beşine zemin olur; süsleme yarışı değil.