2026 Pazarlama Sitesi Stack'i

"Modern" pazarlama sitelerinin çoğu beş yıl geride. 2021'den kalma bir Webflow şablonu, Adobe'den iki webfont, hero'da bir Lottie, bir Marvel filmi boyutunda CSS paketi. Sonra yan kapıda Linear ya da Cursor sayfası 200 ms'de yükleniyor ve aradaki fark ilk kaydırmada ortaya çıkıyor.

2026 stack'i on saniye içinde tanınıyor. Aynı framework, aynı fontlar, aynı hareket, aynı görsel yoğunluk. Bu, en iyi pazarlama sitelerinin gerçekte nasıl inşa edildiğinin marka dökümü ve bir sonraki sitenizin geçmesi gereken denetim.

2026 stack'i beş katmandan oluşuyor

Pazarlama sitesini tek bir şey olarak düşünmeyi bırakın. Tasarımcıların kopyalamak istediği sayfalar, üst üste binmiş beş ayrı katmandır. Herhangi birini yanlış yaparsanız tüm site eski görünür.

Katmanlar sırasıyla: framework ve hosting, fontlar, hareket ve etkileşim, görsel sistem ve performans. Her birinin 2026'da bir varsayılanı var ve her varsayılanın kazanmasının net bir sebebi var.

Katman 1: Framework ve hosting, Next.js artı Vercel'de birleşti

Framework savaşı bitti. Linear, Cursor, v0, Anthropic, OpenAI, Stripe, Vercel ve Notion hepsi Next.js'i Vercel üzerinde yayınlıyor. Bu tesadüf değil, yakınsama. Bu ikili kutudan çıktığı gibi statik render, kısmi ön render, edge önbellekleme, görsel optimizasyonu ve rota seviyesinde ön yükleme veriyor.

Güvenilir alternatifler dar. Astro artı Vercel, içerik ağırlıklı bir sitede neredeyse sıfır JavaScript isteyen indie SaaS'lar için işe yarıyor. Framer (şirketin kendi builder'ı), tasarım ağırlıklı kreatif ajans ve şablon odaklı indie segmentine sahip. Webflow hâlâ birçok sayfada var ama ciddi SaaS içindeki payı kayıyor. Eskiden Webflow ana sayfaları yayınlayan ekipler, pazarlama sitesinin bir ürün gibi davranması gerektiği anda tavana çarptıkları için Next.js artı Sanity ya da Contentful CMS'e geçiyor.

Sitenizde ürün biçiminde herhangi bir yüzey varsa (canlı veri gösteren bir hero bölümü, faturalamaya bağlı fiyatlandırma, kimlik doğrulamalı bir docs rotası), Next.js kullanın. Kreatif bir stüdyonun broşür sitesi için Framer yeterli. Gerisi miras kod.

Katman 2: Fontlar küçük ve belirli bir kadroda birleşti

Gerçekten kopyalamak isteyeceğiniz sitelerdeki tipografiye bakın. Rotasyondaki aynı altı aile. Inter ve display kardeşi, Geist ve Geist Mono, Söhne, Switzer, Tobias ve General Sans. Aktif kadro bu.

Varsayılan Inter. Linear hero'da Inter Display, gövdede Inter kullanıyor. Vercel, v0 ve Vercel sitesinin kendisi dahil her yerde Geist ve Geist Mono yayınlıyor. Anthropic, editoryal için serif bir alt marka ile Söhne kullanıyor. Stripe pazarlama ve ürün boyunca Söhne kullanıyor. OpenAI özel bir Söhne varyantı yayınlıyor. Notion ve Framer ikisi de Inter kullanıyor. Cursor hero'da özel bir display font, gövdede işgücü sans kullanıyor.

Mono font alt trendi geliştirici araçlarına özgü. Vercel, v0, Cursor, Linear ve Anthropic'in hepsi eyebrow etiketlerinde, kod örneklerinde, sürüm chip'lerinde ve minik açıklamalarda monospace kullanıyor. Söylemeden "mühendislik ürünü" diyor ve bir SaaS sitesini 2022 yerine 2026 gibi göstermenin en hızlı yolu bu.

Bunların çoğu, sitenin kendi alan adında barındırılan variable font'lar. Adobe Fonts ciddi SaaS içinde pay kaybediyor çünkü gecikme maliyeti gerçek ve doğrudan lisanslar artık fiyatta onu geçiyor. Font eşleştirme rehberi çifti nasıl seçeceğinizi anlatıyor. 2026'nın meta kuralı: güçlü bir variable aile artı bir mono fazlasıyla yeter.

Katman 3: Hareket dekorasyon değil, affordance'tır

2026'da hareket sessizliği doldurmuyor, iş yapıyor. Set parçaları kaydırmayla yönetiliyor, sayfa geçişleri View Transitions API'sini kullanıyor ve mikro etkileşimler Framer Motion'da ya da saf CSS'te yaşıyor.

Üç kalıp baskın. Hero koreografisi (Linear'ın ilk boyamada gradient çiçeklenmesi, Anthropic'in ölçülü yazı solması). Kaydırmaya sabitlenmiş ürün gösterimleri (Cursor bir paneli sabitliyor, sayfa kayıyor, panel yerinde güncelleniyor). View transition sayfa geçişleri (Vercel ve v0, gezinmenin yeniden yükleme değil durum değişikliği gibi hissettirmesi için View Transitions API'sini kullanıyor).

Lottie ciddi sitelerde sessizce emekli oluyor. Ağır, erişilebilirliğe düşman, 2021 kokuyor. Şimdi animasyon yayınlayan markalar bileşenler için Framer Motion, set parçaları için GSAP ya da kaydırmaya bağlı CSS, gezinme için View Transitions kullanıyor. Çıta "animasyonumuz var" değil, "her hareketin bir sebebi var."

Katman 4: Görsel sistem geometrik, grid dışı ve gürültülü

2026 sitelerinin görsel dili bağlam olmadan da tanınıyor. Hero öğesi olarak büyük geometrik tipografi. Kolonun dışına taşan, grid dışı mikro ekran görüntüleri. Yerel görünen yüksek kontrast modlu OKLCH renk paletleri. Düz gradientlerin yerini alan gürültülü gradientler (film greni gürültü katmanlı yumuşak bir gradient). Stok fotoğraf yerine üretken SVG hero desenleri.

Linear'ın hero'su kanonik referans: iri ağırlıkta tek bir cümle, yumuşak bir gradient çiçeklenmesi, hafif parallax ile süzülen bir ürün ekran görüntüsü, tek renkte vurgu chip'leri. Stripe'ın ana sayfası, yazının arkasında kendi gradient üreticisiyle, kaydırmada animasyon yapan özel bir SVG kompozisyonu çalıştırıyor. Anthropic serif öncülüğünde bir editoryal alt marka ve sans öncülüğünde bir ürün markası yayınlıyor ve aradaki kontrast gerçek bir iş yapıyor.

Birleştirici hamle ölçülülük. En fazla üç ya da dört kez kullanılan tek bir vurgu rengi. Tek bir büyük hero görseli. Site boyunca tek bir tipografik ses. 2026'da en çok "tasarlanmış" görünen markalar, sayfa başına en az görsel malzemeye sahip olanlar. Görsel hiyerarşi yazısı, çıkarmanın neden zevk gibi okunduğunu anlatıyor.

Katman 5: Performans son estetik karardır

En iyi görünen markalar en hızlı yüklenenler. Aynı disiplinin iki ifadesi. 4G'de bir saniyenin altında boyanmayan site, nasıl göründüğünden bağımsız olarak 2026 sitesi değil.

Kalıp liderler arasında tutarlı. font-display: swap ile önceden yüklenen, kendi sunucusunda barındırılan variable fontlar. Vercel Image Optimization ile statik üretim. Rota seviyesinde ön yükleme. Yumuşak sayfa geçişleri için View Transitions. Kritik yolda üçüncü taraf script yok. Bir slayda koyabileceğiniz gerçek Core Web Vitals rakamları.

"Anında hissettiren" gezinme kalıbı en kolay kopyalanan parça. Bir linkin üzerine gelin, Next.js rotayı önceden yükler. Tıklayın, sayfa önbellekte, View Transition geçişi yumuşatır. Pazarlama sitesi bir ürün gibi hissettiriyor ve mesele de bu. Hız markadır yazısı daha derine iniyor.

Marka marka döküm

Spesifikler ilkelerden daha önemli. İşte adı geçen sitelerin her birinin yüzeyde gerçekte neyle çalıştığı.

Linear. Vercel üzerinde Next.js. Kendi sunucusunda barındırılan Inter ve Inter Display. Bileşen etkileşimleri için Framer Motion, gradient hero için kaydırmaya bağlı CSS. Tek vurgu rengi, ilk boyamada hero koreografisi, uzun sayfalarda yapışkan CTA.

Cursor. Vercel üzerinde Next.js. Hero için özel display font, gövde için işgücü sans, etiketler için mono. Kaydırmaya sabitlenmiş ürün gösterimleri imza hamle.

v0 ve Vercel. Next.js, Geist ve Geist Mono, pazarlama rotaları boyunca View Transitions. v0'ın "canlı önizleme" hero'su, üretilmiş bir sayfanın gerçekten çalışan bir iframe'i ve bir ürünün gösterebileceği en güçlü kanıt bu.

Anthropic. Next.js, Söhne, ölçülü hareket (yazı solmaları, parallax numaraları değil), editoryal için serif alt marka. Neredeyse her rakibinden daha azını yapıyor ve bu yüzden daha "premium" okunuyor.

Stripe. Next.js, Söhne, hero'da özel SVG kompozisyonlar, yazının arkasında gradient üretici ve fintech çıtasını on yıldır belirleyen dokümantasyon odaklı bir bilgi mimarisi.

OpenAI. Next.js, Söhne'ye yakın özel font, bir SaaS açılış sayfasından çok müzeye yakın minimalist yoğunluk. Hero'da neredeyse hiç sayfa içi CTA yok ve bu işe yarıyor çünkü marka bunu göze alabiliyor.

Notion. Vercel üzerinde Next.js, Inter, gerçek arayüzün gerçek işi yaptığını gösteren animasyonlu ürün illüstrasyonları. Gerçek ürün görsellerinde yoğun, stok metaforlarda hafif.

Framer (şirket). Framer'ın kendisiyle inşa edilmiş, mümkün olan en güçlü dogfood. Tasarım ağırlıklı şablon estetiği, yoğun sayfalar, hareket dolu ve net bir "böyle bir site istiyorsanız bu aracı kullanın" önermesi.

Karşı örnekleri fark etmek kolay. Hâlâ 2018 WordPress temasında olan ve "dizüstü kullanan insanlar" stok illüstrasyonu taşıyan bir SaaS sitesi, ilk kaydırmadan önce on yaşında okunuyor. Yavaş otomatik oynatılan videolu ve dört CTA'lı hero'ya sahip bir kreatif ajans ana sayfası, web sitesi gibi davranan bir pitch deck gibi okunuyor. Ders marka değil, kategori.

Herhangi bir stack'i değerlendirmek için beş soru

Bir stack'i kopyalamadan önce değerlendirin. Beş soru, bu sırayla.

1. Gezinme nasıl hissettiriyor? Stilsiz içerik flaşıyla tam yeniden yükleme, stack'in en az bir döngü geride olduğu anlamına gelir. Durum değişikliği güncel olduğu anlamına gelir.
2. Orta seviye mobilde ilk boyama ne kadar hızlı? 800 ms altı 2026 çıtası. 2 saniye üstü başarısızlık.
3. Tipografi nasıl yükleniyor? Önceden yüklenen kendi sunucusunda variable font mu, yoksa yedek metin flaşlı üçüncü taraf CDN mi? İlki mühendislik ürünü okunur, ikincisi 2019 okunur.
4. Hareket mesaja nasıl hizmet ediyor? İçeriğe göre koreografi yapılmış mı, yoksa dekorasyon olarak yapıştırılmış mı? Lottie hero animasyonları ele veren işaret.
5. Boş sayfa neye benziyor? Hero'yu ve gradientleri sökün. Tipografi, boşluk ve yapı hâlâ bir marka gibi okunuyorsa stack gerçek. Dağılıyorsa şablondu. Boş durumlar üründür yazısı daha derin versiyonu anlatıyor.

Bir siteyi bir gecede eskitten anti-kalıplar

Yayınlandığı anda siteleri eskiten altı kalıp.

• Sürükle-bırak builder çorbası. On iki pazar yeri bölümünü sürükleyerek birleştirilmiş sayfa, on iki pazar yeri bölümü gibi görünür. Hiçbir şey bir sonrakine karşı tasarlanmadı.
• Kimsenin tanımadığı illüstrasyon paketleri. Her SaaS'ın kullandığı aynı üç kütüphaneden düz arka planlı jenerik vektör insanlar. Akılda kalmayan görsel gürültü.
• Her bölümde Lottie animasyonları. Ağır, erişilebilirliğe düşman ve hepsi aynı şablon pazarından geldiği için aynı easing eğrilerini kullanıyor.
• 600 KB CSS yayınlayan sayfa oluşturucular. 600 KB CSS paketli bir site, performansın bir marka kararı olduğunu anlamıyor.
• 2021'de elle kodlanmış tuzağı. Bir kez özenle elle kodlanmış, bir daha güncellenmemiş. Yapı temiz, tipografi eskimiş, kontrast yanlış. Bakım stack'in parçasıdır.
• Hero'yu engelleyen çerez modalları. İlk etkileşim olarak onay duvarı, uyumluluk kılığına girmiş bir stack başarısızlığıdır.

2026 stack denetimi

Mevcut pazarlama sitenizi bu yedi soruya göre puanlayın. Beş ya da daha fazla "hayır" cevabı varsa 2026 stack'inde değilsiniz.

1. Sayfa 4G bağlantıda bir saniyenin altında boyanıyor mu?
2. Fontlar ekranın üst kısmında önceden yüklenen, kendi sunucusunda barındırılan variable fontlar mı?
3. Rotalar arası gezinme yeniden yükleme değil, durum değişikliği gibi hissettiriyor mu?
4. Sayfada dört kez ya da daha az kullanılan tek bir vurgu rengi var mı?
5. Her animasyonun net bir işi var mı (affordance, gösterim, geçiş)?
6. Ürün görselleri gerçek ürünün gerçek ekran görüntüleri mi, stok ya da 3D soyutlamalar değil mi?
7. Sayfa hero çıkarıldığında bile markaya uygun okunur muydu?

Beş ya da daha fazla "evet" cevabı 2026 stack'inde olduğunuz anlamına gelir. Beşin altı, bir sonraki yeniden tasarımın görsel bir tazeleme değil, stack yükseltmesi olduğu anlamına gelir. 2026 web tasarım trendleri yazısı bu denetimin içinde yaşadığı daha geniş kalıp haritası, landing page tasarım ilkeleri sayfanın kendisi için ilke katmanı, tipografi sistemi tasarımı ile web tasarım ilkeleri ise gerisini kapsıyor.

Sıkça sorulan sorular

Next.js 2026'da pazarlama siteleri için gerçekten tek güvenilir framework mü?

Ciddi SaaS ve marka siteleri için fiilen evet. Astro, neredeyse sıfır JavaScript ihtiyacı olan içerik ağırlıklı siteler için güvenilir. Framer, tasarım ağırlıklı kreatif ajans yüzeyleri için güvenilir. Diğer her şey, sitenin bir ürün gibi davranması gerektiği anda ortaya çıkan bir tavanla geliyor.

Sitem zaten çalışıyorsa Webflow'dan ayrılmalı mıyım?

Sadece estetik için hayır. Webflow, sitenin ihtiyaç duyduğu şeyi yapamaz hale geldiğinde (özel hareket, rota seviyesinde ön yükleme, view transition'lar, gerçek performans bütçeleri) ya da pazarlama sitesinin ürünle bileşen paylaşması gerektiğinde geçin. Broşür sitesiyse ve iyi dönüşüm alıyorsa bırakın.

Küçük bir marka için Framer mı, Webflow mu, Next.js mi?

Framer, hareketin ve görsel sistemin ağır işi yaptığı tasarım ağırlıklı, şablon odaklı estetik için kazanır. Webflow, pazarlama ekibinin mühendislik olmadan güncelleme yayınladığı ve sitenin gerçekten broşür olduğu durumlarda kazanır. Next.js, sitenin gerçek bir ürünle kod, bileşen ya da içerik paylaşması gereken her yerde kazanır.

Siteyi 2026 stack'i üzerinde inşa edin

Stack bir sır değil. Liderlerin hepsi aynı karar ailesini yayınlıyor ve 2026 sitesiyle 2021 sitesi arasındaki fark, tek bir odaklı projede kapatılabilir. Framework'ü seçin. Variable fontu ve mono'yu seçin. Sayfanın gerçekten ihtiyaç duyduğu üç hareket kalıbını seçin. Gerisini kesin.

Geçen döngüden kalma bir Webflow şablonu yerine 2026 stack'i üzerinde inşa edilmiş bir pazarlama sitesi istiyorsanız, Brainy'yi tutun. Marka sitelerini Next.js üzerinde, kendi sunucusunda barındırılan variable fontlarla, gerçek hareketle ve bir slayda koyabileceğiniz bir performans bütçesiyle yayınlıyoruz.