Web Tasarım Rehberi 2026: UX + UI + Next.js + Conversion Odaklı

Meta Title: Web Tasarım Rehberi 2026: UX + UI + Next.js + Conversion Odaklı | Can Davarcı

Meta Description: Web tasarım nedir? UX/UI, Next.js vs WordPress, Core Web Vitals, accessibility. 10+ yıl ve 2,200+ müşteri deneyimiyle conversion odaklı modern web. Ücretsiz audit.

Yazar: Can Davarcı

Yayın: 2026-04-10

Okuma: 19 dakika

Kategori: Web Tasarım

Funnel: TOFU (Pillar Content)

Hub: /tr/cozumler/web-tasarim-ui-ux

---

Web tasarım artık "güzel site çizmek" değil. 2026'da modern web tasarım süreci; kullanıcının ilk 3 saniyede karar verdiği, Google'ın Core Web Vitals ile ölçtüğü, erişilebilirlik yasalarının zorunlu kıldığı ve dönüşüm odaklı mühendislik alanı. Profesyonel web tasarım artık üç ayrı disiplinin — UX, UI ve frontend mühendisliği — tek çatı altında çalıştığı bir süreç.

10+ yılda 2,200+ müşterinin dijital yolculuğuna eşlik ettim; Next.js 16 ile sıfırdan kurduğumuz platformlar ve WordPress ile hızlı lansmana çıkardığımız kurumsal siteler dahil geniş bir portföy yönettim. Türkiye'de web tasarım piyasasının son 10 yılda nasıl değiştiğini yakından gördüm. Gördüğüm şu: tasarım üçgeninin bir köşesi eksikse tüm yapı çöker. Estetik güzel ama yavaş site → terk edilir. Hızlı ama çirkin site → güven vermez. İkisi iyi ama SEO'su bozuk site → kimse bulamaz.

Bu web tasarım rehberinde; web tasarımın ne olduğundan Next.js ile WordPress arasında hangi senaryoda hangisini seçeceğinize, Core Web Vitals eşiklerinden WCAG 2.2 erişilebilirlik standartlarına kadar modern web tasarımın tüm katmanlarını anlatıyorum. Süs değil, araç. Hedef: conversion rate.

Key Takeaways

• Web tasarım üç boyutlu iş: Estetik + UX + Performans üçgeni. Birini atlarsanız diğerleri çürür. Güzel ama 5 saniyede açılan site = terk. Hızlı ama karmaşık site = conversion yok.
• Mobil trafik %70'i aştı. Desktop-first tasarım 2026'da ölü doğmuş bir yaklaşım. Mobil deneyim öncelik, desktop sonradan uyumlanır.
• Next.js ve WordPress rakip değil, farklı senaryolara cevap. E-ticaret + marketing agility + Core Web Vitals → Next.js. İçerik ağırlıklı + editör özerkliği + hızlı lansman → WordPress. Her iki tarafı da fanboy körlüğüyle seçmeyin.
• Core Web Vitals artık ranking faktörü. LCP < 2.5s, INP < 200ms, CLS < 0.1. "Poor" kategorisindeki siteler organik trafiği yavaşça kaybediyor.
• WCAG 2.2 AA bir etik gereklilik değil, hukuki zorunluluk. Avrupa Erişilebilirlik Yasası Haziran 2025'te yürürlüğe girdi. Türkiye'de de benzer düzenlemeler yolda.
• 10+ yıl ve 2,200+ müşteriden çıkardığım tek cümle: Awwwards kalitesi hedefleyin ama her sitenin Awwwards olamayacağını kabul edin. Müşteriniz için doğru kaliteyi bulun.

---

Web Tasarım Nedir? UX vs UI Farkı

Web tasarım; bir internet sitesinin görsel kimliğini, kullanıcı deneyimini ve teknik altyapısını bir bütün olarak planlama ve üretme sürecidir. Ama bu tanım yüzeyde kalır. Gerçek soru şu: bir site kimin için tasarlanır ve neyi başarır?

Cevap üç katmanlı. Birincisi kullanıcı için — ziyaretçi aradığını 3 saniyede bulmalı, 3 tıkla amacına ulaşmalı. İkincisi Google için — arama motoru içeriği anlamalı, hızlı yüklemeli, mobil uyumlu görmeli. Üçüncüsü işletme için — ziyaretçiyi müşteriye çevirecek, marka güveni inşa edecek, tekrar ziyareti tetikleyecek.

UX ve UI Arasındaki Kritik Fark

Bu iki terim Türkiye'de sıklıkla karıştırılır. Oysa aralarındaki UX ve UI farkı bir web sitesinin kaderini belirleyebilir.

UX (User Experience — Kullanıcı Deneyimi): Kullanıcının site üzerindeki yolculuğunu tasarlar. Hangi sayfadan nereye gideceği, bilgiyi nasıl bulacağı, bir eylemi tamamlarken yaşadığı duygu. UX tasarımcı inşaat mühendisi gibidir: yapının sağlamlığını, akışını, kullanım mantığını kurgular.

UI (User Interface — Kullanıcı Arayüzü): Kullanıcının gördüğü yüzeyi tasarlar. Renkler, butonlar, tipografi, ikonlar, boşluklar, animasyonlar. UI tasarımcı iç mimar gibidir: mühendisin kurduğu yapıyı estetik ve işlevsel hale getirir.

İyi UX + kötü UI → işlevsel ama itici arayüz. Kötü UX + iyi UI → güzel görünen ama kullanılmaz platform. UX ve UI farkı konusunda farkındalığı olmayan ekipler genellikle ikinci tuzağa düşer: Awwwards'tan ilham alıp güzel ama kimsenin kullanamadığı siteler üretirler.

Bu İş Kimin Sorumluluğu?

Modern web tasarım tek kişinin işi değil. Minimum üç rol gerekir: UX tasarımcı (wireframe, user flow, prototyping), UI tasarımcı (visual design, design system, component library), frontend developer (tasarımı koda dökme, performans optimizasyonu). Ajansımızda bu üç rol entegre çalışır. "Sadece güzel görünsün" diyen müşteriye bile bu üç katmanı açıklayıp neden gerektiğini anlatırız.

İki disiplin arasındaki sınırları ve hangi projede neyin öncelikli olduğunu detaylı anlatan UX vs UI Farkı: 2026 Komple Rehber yazımızda kullanıcı deneyimi tasarımı ile arayüz tasarımının nasıl bütünleştiğini örneklerle inceliyoruz.

---

Mobile-First ve Responsive Design

2026'da mobil cihaz trafiği global ortalamada %70'i aştı. Türkiye'de bu oran daha yüksek — yerel işletmelerin bazı sektörlerinde %85'e ulaştığını gördüm. Mobil deneyim artık opsiyon değil, temel.

Responsive Değil, Mobile-First

Eski yaklaşım: önce desktop için tasarla, sonra küçülterek mobile'a uyarla (responsive design). Bu strateji 2015'te bile yetersizdi, 2026'da tamamen hatalı. Desktop-first bakış mobil kullanıcıya "sıkıştırılmış desktop" deneyimi verir — butonlar küçük, metin okunmaz, formlar kullanışsız.

Doğru yaklaşım mobile-first: önce mobil ekran için tasarla, sonra tablet ve desktop'a genişlet. Bu sayede mobil kullanıcı birinci sınıf vatandaş olur.

Touch Target ve Thumb Zone

Mobil tasarımda iki teknik detay kritiktir:

Touch target boyutu: Butonlar, linkler ve form alanları minimum 48x48 piksel olmalı. Apple HIG 44x44 önerir, Material Design 48x48. Bu sınırın altında kullanıcı yanlış yere tıklar, öfkelenir, sayfayı terk eder. Bir e-ticaret müşterimizde "Sepete Ekle" butonunu 32 pikselden 48 piksele çıkardığımızda mobil sepet ekleme oranı %22 arttı.

Thumb zone: Kullanıcı telefonu tek elle tutar ve başparmağı ile etkileşir. Ekranın alt 1/3'lük kısmı "kolay bölge"dir. Primary CTA'ları bu bölgeye yerleştirmek dönüşümü artırır. Üstte logo, altta CTA — bu basit kural çoğu sitede yanlış uygulanır.

Responsive Breakpoint Stratejisi

Cihaz çeşitliliği sınırsız ama pratikte 4 ana breakpoint yeterlidir:

• 375px: iPhone SE, küçük Android telefon
• 768px: iPad portrait, büyük telefon landscape
• 1024px: iPad landscape, küçük laptop
• 1440px: Standart desktop

Ajansımızda her projede bu 4 breakpoint'i manuel test ediyoruz. Chrome DevTools yeterli değil — gerçek cihazda kontrol ediyoruz. Gerçek parmak, gerçek scroll, gerçek tap davranışı emülasyonla tam yakalanmıyor.

Mobil deneyimin e-ticaret ve hizmet sitelerinde nasıl conversion'a dönüştüğünü Web Tasarım ve UI/UX Hizmetleri hub'ımızda müşteri projeleri üzerinden inceliyoruz.

---

Hero Section Tasarımı: İlk 3 Saniye Kuralı

Bir siteye giren kullanıcı, orada kalıp kalmayacağına ortalama 3 saniyede karar verir. Bu 3 saniyede gördüğü alan hero section — sayfanın en üstündeki ilk ekran. Yanlış tasarlandıysa kullanıcı scroll bile etmez, geri tuşuna basar.

Hero Section'ın 4 Cevap Vermesi Gereken Sorusu

Her hero section kullanıcının zihnindeki 4 soruya anında cevap vermeli:

1. Bu site ne yapıyor? — Value proposition net olmalı
2. Bu benim için mi? — Hedef kitleyi adreslemeli
3. Neden burası? — Farklılaşma noktası görünmeli
4. Şimdi ne yapmalıyım? — Tek ve net bir CTA olmalı

Bir e-ticaret müşterimizde hero'yu bu 4 soruyu merkeze alarak yeniden tasarladık. Önceki başlık "Modaya Yön Veren Tasarımlar" idi — güzel ama anlamsız. Yeni başlık: "48 Saatte Kapınızda Özel Dikim Kadın Abiye | %100 İade Garantisi". Aynı trafik, conversion rate %28 arttı. Fark: belirsizlik yerine somut vaat.

Hero'nun Teknik Yanı: LCP Optimizasyonu

Hero section genellikle Largest Contentful Paint (LCP) metriğini belirler. Google'ın Core Web Vitals eşiği LCP için 2.5 saniyedir.

Şunları yapıyoruz:

• Hero görseli priority özelliği ile yüklenir (Next.js'de <Image priority>)
• Görsel formatı AVIF veya WebP, fallback JPEG
• Boyut optimize edilir: desktop 1920px max, mobile 750px max
• Font'lar font-display: swap ile yüklenir

Bir kurumsal projede bu 4 optimizasyon ile hero LCP'yi 4.1 saniyeden 1.8 saniyeye indirdik. Bounce rate 4 hafta içinde %17 düştü.

Hero section tasarım kararlarının kullanıcı deneyimi yolculuğuyla nasıl bağlandığını anlamak için UX vs UI Farkı: 2026 Komple Rehber yazımızdaki kullanıcı akışı bölümüne göz atabilirsiniz.

---

CTA (Call-to-Action) Optimizasyonu: Conversion Arttırma

CTA bir sitenin motorudur. Sayfa ne kadar güzel olursa olsun, kullanıcı bir yere tıklamıyorsa proje işe yaramıyor demektir. CTA tasarımı hem UI (nasıl görünüyor) hem UX (nereye koyuldu) hem copywriting (ne yazıyor) işidir.

CTA'nın 5 Temel Kuralı

1. Kontrast: CTA sayfadaki en baskın unsur olmalı. Ortalama gri bir butonun conversion oranı, kontrastlı renkteki butonun yarısıdır. CTA uyum sağlamak için değil, tıklanmak için var.

2. Boyut: Mobilde minimum 48x48 piksel, desktop'ta daha büyük olabilir. Ortalama 48-56 piksel yükseklik iyidir.

3. Metin: Genel "Tıkla", "Gönder", "Kaydet" kelimeleri CTA öldürücüdür. Spesifik değer vaadi gerekir:

• Kötü: "Gönder"
• İyi: "Ücretsiz Audit Al"
• Çok iyi: "Ücretsiz SEO Audit'imi Hemen Al"

4. Konum: Hero section'da (above the fold), sayfa sonunda, uzun sayfalarda ortada tekrar. Kullanıcı karar verdiği anda elinin altında olmalı.

5. Tek odak: Bir sayfada 5 farklı CTA varsa hiçbirine tıklanmaz. Hick's Law: seçenek arttıkça karar verme süresi artar, sonunda seçim yapılmaz. Primary CTA tek olmalı, secondary görsel olarak daha zayıf.

Mikro-Kopya: Küçük Metinler, Büyük Etki

CTA'nın altına yazılan kısa metinler conversion'ı etkiler. "Ücretsiz, 30 saniyede yanıt, kredi kartı gerekmez" gibi mikro-kopya güven inşa eder. Bir SaaS müşterimizde CTA altına "Kredi kartı gerekmez, 2 dakikada kurulum" eklediğimizde form doldurma oranı %34 arttı. Tek cümle.

Google Ads rehberimizde, Meta Ads rehberimizde ve marka yönetimi rehberimizde CTA stratejisinin reklam ve marka tutarlılığı boyutlarını ele alıyoruz.

---

Landing Page Tasarım Prensipleri: Tek Amaç, Tek Aksiyon

Landing page normal bir sayfa değildir. Normal sayfalar birden çok şey anlatır, kullanıcıyı farklı yönlere yönlendirir. Landing page tek bir hedefe odaklanır: ziyaretçiyi tek bir aksiyona götürmek.

Landing Page'in 7 Olmazsa Olmaz Bölümü

Ajans olarak yaptığımız her landing page şu 7 bölümü içerir. Sıra ve ağırlık projeye göre değişir ama hiçbiri atlanmaz:

1. Hero: Value proposition + primary CTA (above the fold)
2. Sosyal Kanıt: Müşteri logoları, sayılar, rozetler
3. Problem: Kullanıcının acı noktasını dile getir
4. Çözüm: Ürün/hizmet nasıl çözüyor
5. Faydalar: Özellik değil, sonuç odaklı
6. Testimonial: Gerçek müşteri hikayesi
7. Final CTA: Sayfa sonunda tekrar aksiyon çağrısı

Navigasyon Kaldırılabilir mi?

Evet, sıklıkla kaldırırız. Üstte global menü yoksa kullanıcı başka sayfaya gitme şansı azalır, dikkat CTA'ya yoğunlaşır. Bir reklam kampanyası landing page'inde navigasyonu kaldırdığımızda form dolum oranı %19 arttı. Tek değişiklik: menü silindi.

Landing Page vs Normal Sayfa

Özellik · Landing Page · Normal Sayfa

Amaç · Tek conversion · Bilgi ve keşif

CTA sayısı · 1 primary · Birden fazla

Navigasyon · Genelde yok · Tam menü var

İçerik uzunluğu · Orta (uzun scroll OK) · Değişken

SEO öncelik · Düşük (Ads ile çalışır) · Yüksek

Landing page yatırımının ROI'si reklam harcamasıyla birlikte değerlendirilir. Google Ads rehberimizde ve Google Ads Yönetimi hizmet sayfamızda landing page + reklam uyumunu detaylı ele alıyoruz.

---

Form Tasarımı ve UX: Daha Az Alan, Daha Çok Dönüşüm

Form, tasarımın en küçümsenen ama conversion açısından en kritik alanıdır. Kullanıcı sayfaya girer, hero'yu okur, faydalara ikna olur, testimoniallara güvenir — sonra forma gelir ve 12 alan görünce geri döner. Tüm yatırım boşa gitmiştir.

Form Alan Sayısı ve Dönüşüm İlişkisi

Bir B2B müşterimizde iletişim formunda 8 alan vardı: ad, soyad, email, telefon, şirket, pozisyon, konu, mesaj. Form doldurma oranı düşüktü. Alanları 3'e indirdik: ad, email, mesaj. Diğer bilgileri telefon görüşmesinde topladık. Sonuç: lead sayısı %45 arttı.

Kural basit: formda her ek alan, conversion'ı düşürür. Gerçekten gerekli olmayan alanı istemeyin. Telefon numarası zorunlu değilse zorunlu yapmayın. Şirket adını sonra sorabilirsiniz.

Form UX Kontrol Listesi

Her formu şu 10 kontrolden geçiriyoruz:

1. Zorunlu alan minimum mu? (3 alan ideali)
2. Label alanın üstünde mi? (mobil için)
3. Placeholder hint mi, value mi? (otomatik kaybolmuyor)
4. Inline validation var mı? (hata anında gösterilsin)
5. Input type doğru mu? (type="email", type="tel")
6. Autocomplete açık mı? (tarayıcı otomatik doldurması)
7. Error mesajı nazik mi? (örnekle açıklayan)
8. Submit butonu loading state gösteriyor mu? (çifte tıklama önlenir)
9. Başarı mesajı net mi?
10. Form mobilde tam çalışıyor mu?

10 kontrolün 10'unu geçen form, geçmeyen formdan %30-50 daha fazla conversion üretir. Bu liste ajansımızın standart QA checklist'inin parçası.

---

Tipografi ve Renk Paleti: Marka Kimliği Temelleri

Tipografi ve renk bir sitenin karakterini belirler. Aynı içerik farklı tipografi ile farklı marka hissi verir. Aynı layout farklı renk paleti ile farklı duygu uyandırır. Bu iki unsur "dekoratif detay" değil, marka stratejisinin görsel taşıyıcısıdır.

Tipografi Hiyerarşisi

Modern arayüzde okunabilirlik estetiğin önünde gelir. Uyguladığımız temel hiyerarşi:

• Hero başlık: 48-72 piksel, weight 700-900, letter-spacing -0.02em, line-height 1.0-1.1
• Section başlık: 32-40 piksel, weight 600-700, letter-spacing -0.01em
• Alt başlık: 24-28 piksel, weight 600
• Body metin: 16-18 piksel, weight 400, line-height 1.5-1.7
• Caption/meta: 14 piksel, weight 400, muted renk

Mobilde minimum gövde metni 14 piksel olmalı. 12 piksel altı okunamaz. Desktop'ta 16-18 piksel ideal. "Küçük font şık durur" bir yanılgıdır — göz yorar, kullanıcı sayfadan kaçar.

Font Seçimi: Serif vs Sans-Serif

Sans-serif (Inter, Plus Jakarta Sans, Manrope) modern, temiz, dijital ekran için optimize. Serif (Playfair, Merriweather) klasik, güvenilir, lüks marka hissi. İkisini birlikte kullanmak güçlü kontrast yaratır — başlık serif, gövde sans-serif.

Font sayısını sınırlayın: maksimum 2 font ailesi. Üç ve üzeri = kaotik tasarım + yavaş yükleme. Her ekstra font ailesi 30-100KB ek yük demektir ve LCP'yi olumsuz etkiler.

Renk Paleti: 60-30-10 Kuralı

Basit ama işe yarayan kural: bir sayfada kullanılan renkler şu oranda dağılmalı:

• %60: Ana nötr renk (beyaz, açık gri, koyu arka plan)
• %30: İkincil renk (marka rengi veya accent destekçisi)
• %10: Vurgu rengi (CTA, uyarılar, highlight)

Bu kural ihlal edildiğinde sayfa ya çok renksiz ya çok kalabalık görünür. Awwwards sitelerinin büyük çoğunluğu bu kurala uyar — farkında olmadan bile.

WCAG Kontrast Gerekliliği

Erişilebilirlik için renk kontrastı 4.5:1 (normal metin) ve 3:1 (büyük metin) eşiklerini geçmeli. Bu sadece hukuki gereklilik değil, SEO ve UX kazancıdır. Açık gri üzerinde beyaz metin "şık" görünür ama okunamaz. Düşük kontrast = erişilemeyen içerik = kaybedilmiş kullanıcı.

Kontrast kontrolünü WebAIM Contrast Checker ile yapıyoruz. Her renk kombinasyonu deploy öncesi bu kontrolden geçer.

---

Web Erişilebilirliği (WCAG 2.2 AA): Etik ve Yasal Gereklilik

Erişilebilirlik 2026'da artık "opsiyonel iyi özellik" değil. Avrupa Birliği Erişilebilirlik Yasası (European Accessibility Act) Haziran 2025'te yürürlüğe girdi — e-ticaret, bankacılık, ulaşım gibi kritik sektörler için WCAG 2.1 AA uyumu zorunlu. Türkiye'de de benzer düzenlemeler yolda.

Erişilebilirlik Kimin İçin?

Yaygın yanılgı: "Erişilebilirlik sadece görme engelliler için." Gerçek çok daha geniş — ekran okuyucu kullanan görme engelliler, video altyazısı gereken işitme engelliler, fare yerine klavye kullanan motor engelliler, basit dil ve yapı gereken bilişsel engelliler, kol kırık veya göz yorgunu geçici engelliler, küçük font ve düşük kontrastla zorlanan yaşlı kullanıcılar.

Global nüfusun %15'i bir tür engellilikle yaşıyor. Erişilebilir olmayan site bu kitleyi dışlıyor. Hem etik hem ticari hata.

WCAG 2.2 AA Minimum Kontrol Listesi

Ajansımızda her projede uyguladığımız asgari erişilebilirlik standardı:

• [ ] Renk kontrastı 4.5:1 (normal metin), 3:1 (büyük metin)
• [ ] Tüm interaktif elementler klavye ile erişilebilir (Tab, Enter, Space)
• [ ] Focus state görünür (outline kaldırılmadı)
• [ ] Tüm görseller alt metin taşır
• [ ] Form labelları <label for=""> ile bağlı
• [ ] Semantic HTML kullanılır (<header>, <nav>, <main>, <article>, <footer>)
• [ ] Heading hiyerarşisi doğru (H1 tek, H2 → H3 sıralı)
• [ ] Video'larda altyazı var
• [ ] Form hataları açık şekilde bildiriliyor
• [ ] Skip-to-content linki var (ekran okuyucu için)

Bu 10 maddeyi geçen site WCAG 2.2 AA'nın büyük kısmını karşılar. Tam uyum için aXe DevTools veya Lighthouse Accessibility audit'i çalıştırıyoruz.

Erişilebilirlik SEO'ya da Katkı Sağlar

Google'ın algoritması semantic HTML ve erişilebilirlik sinyallerini ranking faktörü olarak kullanır. Alt metin yazmak hem erişilebilirlik hem image SEO. Heading hiyerarşisi hem ekran okuyucu hem Google için. Semantic landmark'lar hem ARIA hem crawlability için. Erişilebilirlik ve SEO birlikte çalışır.

Erişilebilirliğin SEO ile kesiştiği noktaları ve semantic HTML'in organik performansa etkisini SEO Nedir? Rehber 2026 yazımızda ayrıntılı ele alıyoruz.

---

Core Web Vitals: LCP, INP, CLS Optimizasyon

Core Web Vitals, Google'ın kullanıcı deneyimi kalitesini ölçtüğü üç metriktir. 2023'ten beri resmi ranking faktörü. "Poor" seviyedeki siteler organik trafiği yavaş yavaş kaybeder. "Good" seviyedeki siteler rakiplerine karşı avantaj kazanır.

Üç Metrik ve Eşikleri

1. LCP (Largest Contentful Paint) — Largest Contentful Paint

• Sayfanın en büyük görsel/metin unsurunun yüklenme süresi
• İyi: < 2.5 saniye | İyileştirme gerek: 2.5-4s | Kötü: > 4s
• Genellikle hero görseli veya büyük başlıktır

2. INP (Interaction to Next Paint)

• Kullanıcının bir etkileşime verdiği gecikme (tıklama, tap, klavye)
• FID metriğinin 2024 mart'ta yerini aldı
• İyi: < 200ms | İyileştirme gerek: 200-500ms | Kötü: > 500ms
• Ağır JavaScript'ten kaynaklanır

3. CLS (Cumulative Layout Shift)

• Sayfa yüklenirken içeriğin beklenmedik kaymalari
• İyi: < 0.1 | İyileştirme gerek: 0.1-0.25 | Kötü: > 0.25
• Genellikle yüklenen görseller veya font swap'larından kaynaklanır

Optimizasyon Stratejileri

LCP için:

• Hero görseli priority ile yükle (Next.js: <Image priority>)
• AVIF/WebP formatı kullan
• Font'ları font-display: swap ile yükle
• CDN kullan (Vercel, Cloudflare)
• Server response time < 600ms hedefle

INP için:

• Third-party script'leri defer veya async ile yükle
• Uzun task'leri parçala (Web Worker kullan)
• JavaScript bundle size'ı küçült (code splitting)
• Kritik yol dışındaki CSS'leri lazy yükle

CLS için:

• Görsellere width ve height ver (aspect-ratio reserve)
• Font fallback metrik'leri eşleştir (size-adjust)
• Reklamlara yer ayır
• Dynamic content önceden alan rezerv et

Başarı Hikayesi

Bir kurumsal projemizde başlangıçta LCP 4.1s (Poor), INP 340ms, CLS 0.18'di. 6 hafta süren optimizasyon sonrası LCP 1.8s (Good), INP 145ms (Good), CLS 0.05 (Good). 3 ay içinde organik trafik %23 arttı, bounce rate %19 düştü. Core Web Vitals sadece "hız" değil, Google ile dost olma stratejisidir.

PageSpeed Insights ve Chrome UX Report (CrUX) field data ile her ay monitoring yapıyoruz. Optimizasyon bir seferlik iş değil, sürekli bakım işi.

---

Next.js vs WordPress: Hangi Senaryoda Hangisi?

Frontend dünyasının en çok tartışılan kararı: Next.js mi WordPress mi? İki tarafta da fanboy'lar var — Next.js'i "modern", WordPress'i "ölü" ilan edenler bir tarafta; Next.js'i "gereksiz karmaşık", WordPress'i "kanıtlanmış" diyenler diğer tarafta. Gerçek ortada ve senaryoya bağlı.

Next.js'in Gücü

Next.js bir React framework'ü. Server-side rendering, static site generation, app router, server components, incremental static regeneration gibi modern web teknolojilerini bir araya getirir.

Next.js seçin eğer:

• Core Web Vitals kritik (SEO öncelik)
• E-ticaret veya SaaS ürünü
• Karmaşık state management gerekiyor
• Mobil app ile kod paylaşımı ihtiyacı var (React Native)
• Teknik bir ekibiniz var
• Marketing team'in içerik üretme hızı kritik değil, geliştirici kontrolü kritik

Next.js ile ürettiğimiz bir e-ticaret projesinde sayfa yükleme 800ms'ye kadar indi, conversion rate önceki WordPress versiyonuna göre %34 arttı. Performance kazancı direkt ciro kazancına dönüştü.

WordPress'in Gücü

WordPress web'in %43'ünü çalıştırıyor. 20 yıldır aktif, devasa eklenti ekosistemi, milyonlarca geliştirici, yerleşik CMS kullanımı.

WordPress seçin eğer:

• İçerik ağırlıklı site (blog, haber, kurumsal)
• Marketing team sürekli sayfa ekleyecek (geliştirici gerekmeden)
• Yoast SEO, WooCommerce gibi olgun plugin ekosistemi kritik
• Bütçe sınırlı, hızlı lansman öncelik
• Multisite / çok dilli gereksinim kolay çözülmeli
• Editör özerkliği geliştirici özerkliğinden önemli

Bir meslek örgütü müşterimiz her hafta 3-5 yeni haber yayınlıyor, ekipte geliştirici yok. WordPress + Elementor + Yoast SEO kombinasyonu ile bu iş akışı sorunsuz çalışıyor. Next.js seçseydik her sayfa için geliştirici desteği gerekecekti — sürdürülemezdi.

Karşılaştırma Tablosu

Özellik · Next.js · WordPress

Performance (default) · Mükemmel · Orta (optimize gerekli)

SEO out-of-box · Mükemmel · İyi (Yoast ile)

Editör deneyimi · Zayıf (headless CMS gerekir) · Mükemmel

Geliştirme hızı · Orta · Yüksek

Ölçeklenebilirlik · Yüksek · Orta (hosting bağımlı)

Maliyet (ilk kurulum) · Yüksek · Düşük

Maliyet (uzun vadeli) · Düşük · Orta (plugin + bakım)

Ekosistem · Büyüyor · Dev

Güvenlik · Yüksek (build edilmiş) · Orta (plugin riski)

Lansman süresi · 4-8 hafta · 2-4 hafta

Hybrid Yaklaşım: WordPress Headless + Next.js

Üçüncü seçenek: WordPress'i CMS olarak kullan, Next.js ile frontend render et. Marketing team WordPress editöründen içerik girer, Next.js bu içeriği API ile çeker ve performans odaklı render eder. İki dünyanın en iyisi.

Bu yaklaşımı orta-büyük ölçekli projelerde öneriyoruz. Küçük projeler için karmaşıklık maliyeti faydadan fazla.

Teknoloji derinlemesine bakış için WordPress rehberimize ve Next.js rehberimize göz atın. Teknik seçim kararını ajansımızın bakış açısıyla değerlendirmek isterseniz Web Tasarım ve UI/UX Hizmetleri sayfamızda proje örnekleri üzerinden karşılaştırma bulabilirsiniz.

---

Ücretsiz Web Tasarım Audit Alın

Sitenizin UX, performans ve SEO durumunu analiz ediyoruz. Core Web Vitals skorları, mobil deneyim, erişilebilirlik ve conversion darboğazları tek raporda.

[Ücretsiz Web Tasarım Audit için Başvurun →](/tr/cozumler/web-tasarim-ui-ux)

---

Sonuç: Hedef Değil, Araçtır

Web tasarım bir sanat eseri üretmek değil. İşletmenizin dijital varlığını; hızlı, güzel, kullanılabilir, erişilebilir, SEO dostu ve dönüşüm odaklı bir platforma çevirmek. Bu dengeyi kurmak kolay değil — her köşede kompromis var. Hero'daki görseli optimize ederken kaliteden feda ediyor musunuz? Next.js'in performans kazancı için editör kolaylığını kaybediyor musunuz? WordPress'in hızlı lansmanı için uzun vadeli performans maliyetini ödüyor musunuz?

Doğru cevap projeye göre değişir. Ama tek bir gerçek var: kararlar veriyle alınır, hissiyatla değil. 10+ yıl deneyimimin bana öğrettiği şey bu. Her kararın arkasında bir metrik, her metriğin arkasında bir iş sonucu olmalı.

Ajansımızda her projeye üç soruyla başlarız: Bu site kimin için? Hangi aksiyonu tetiklemek istiyor? Başarıyı nasıl ölçeceğiz? Cevaplar netleşene kadar tek bir piksel çizmiyoruz. Çünkü tasarım cevap olmadan soru çözmeye çalışır ve her zaman başarısız olur.

Sitenizin mevcut durumu hakkında net bir resim istiyorsanız ücretsiz audit hizmetimizden yararlanabilirsiniz. Core Web Vitals, mobil deneyim, erişilebilirlik, conversion darboğazları ve rekabet analizi — tek raporda.

[Ücretsiz Audit için Başvurun →](/tr/cozumler/web-tasarim-ui-ux)

---

Bu rehber, ajansımızın 10+ yıl ve 2,200+ müşteri deneyimine ve Next.js 16 + WordPress ekosisteminde geliştirdiğimiz teknik uzmanlığa dayanır. Core Web Vitals eşikleri Google'ın resmi dokümanından, WCAG 2.2 standartları W3C'den, conversion metrikleri müşteri projelerimizden alınmıştır. Yazarı: Can Davarcı — Trusted Digital Partner kurucusu.

İlgili içerikler:

• Web Tasarım ve UI/UX Hizmetleri — Ana hub
• WordPress Rehberi
• Next.js Rehberi
• UX vs UI Farkı: 2026 Komple Rehber
• SEO Nedir? Rehber 2026
• Google Search Console Rehberi
• Backlink Stratejisi Rehberi
• Google Ads Rehberi 2026
• Meta Ads Rehberi 2026
• Marka Yönetimi Rehberi 2026
• Marka Kimliği Rehberi
• SEO Hizmeti
• Google Ads Yönetimi
• Meta Ads
• Marka Yönetimi