Tek Sayfa Web Tasarım
Ziyaretçinin scroll ederek tüm hikayenizi keşfettiği, odaklı ve etkileyici one-page web siteleri. Karmaşık navigasyon yok — tek bir akışta ikna, bilgi ve eylem.
Tek Sayfanın Gücü
Bir web sitesinde ziyaretçinin dikkatini elde tutmak giderek zorlaşıyor. Çok sayfalı sitelerde kullanıcılar alt sayfalara geçmeden sayfayı terk ediyor; navigasyonda kaybolup asıl mesajı kaçırıyor. Tek sayfa web sitesi bu davranışı tersine çevirir.
Her şey tek bir akışta: kim olduğunuz, ne yaptığınız, referanslarınız ve nasıl ulaşılacağı. Ziyaretçi sayfayı scroll ederek kurgulanmış bir hikayeyi yaşar. Kaybolacak yer yok, dikkat dağıtacak menü yok — yalnızca mesajınız ve bir eylem çağrısı.
Kişisel markalar, serbest çalışanlar, ajanslar, etkinlik siteleri ve küçük işletmeler için tek sayfa tasarım çoğu zaman çok sayfalı siteden daha iyi sonuç üretir. Daha az bakım, daha hızlı yükleme ve daha kolay güncelleme de cabasıyla.
Tek Sayfa mı, Çok Sayfa mı?
İki yaklaşımın güçlü ve zayıf yönlerini karşılaştırın — hangisi ihtiyacınıza uygun?
| Kriter | Tek Sayfa | Çok Sayfalı |
|---|---|---|
| Yükleme Hızı | Tek HTTP isteği, çok hızlı | Her sayfa geçişinde istek |
| Bakım Kolaylığı | Tek dosya, hızlı güncelleme | Her sayfayı ayrı güncellemek |
| SEO Potansiyeli | Sınırlı anahtar kelime hedefi | Her sayfa ayrı kelime hedefler |
| Kullanıcı Deneyimi | Akıcı scroll, basit navigasyon | Hiyerarşik, ayrıntılı yapı |
| İçerik Hacmi | Öz, hedefe odaklı içerik | Geniş ve detaylı içerik |
| Dönüşüm Odağı | Tek CTA, yüksek odak | Birden fazla dönüşüm noktası |
| Maliyet | Daha düşük geliştirme maliyeti | Daha yüksek maliyet |
| Hedef Kitle | Kişisel, portföy, küçük iş | E-ticaret, blog, kurumsal |
Neler Dahil?
Akış Mimarisi
Hikaye anlatımı mantığıyla bölüm sıralaması. Ziyaretçi scroll ederken merak, güven ve motivasyon aşamalarından geçer. Sıra rastgele değil, stratejik.
Scroll Animasyonları
Her bölümün kendine özgü giriş animasyonu. Parallax, fade, slide ve stagger efektleri. Sayfayı ağırlaştırmayan, hafif ve performanslı CSS/JS animasyonlar.
Sabit Navigasyon
Scroll edildikçe yerinde kalan, aktif bölümü işaretleyen sticky menü. Mobilde hamburger menü. Anchor link'ler smooth scroll ile çalışır.
Mobil Öncelikli Tasarım
Tüm bölümler küçük ekrana göre yeniden kurgulanan responsive yapı. Thumb-zone dostu butonlar, okunabilir font boyutları, sıkışmayan grid.
Yüksek Hız
Tek sayfa tek HTTP isteği demek. Lazy load, optimize görsel, minimal JS. Lighthouse 90+ ve Core Web Vitals yeşil bölge standart hedef.
İletişim Formu
Doğrulama, spam koruması ve e-posta bildirimi dahil iletişim bölümü. Formspree, Netlify Forms veya özel API. KVKK uyumlu onay kutusu.
SEO Temelleri
Tek sayfa için anchor URL'leri, canonical tag, meta başlık/açıklama, schema markup ve öncelikli anahtar kelime optimizasyonu.
Analytics Kurulumu
GA4, bölüm bazlı scroll derinliği takibi, CTA tıklama event'leri. Ziyaretçinin hangi bölümde ne kadar kaldığı ölçülür.
Bakım Kolaylığı
İçerik güncellemesi kolay, hafif CMS veya JSON tabanlı yapı opsiyonu. Küçük değişiklikler için teknik bilgi gerekmez.
Kimler İçin Uygun?
Freelancer ve Danışmanlar
Adınız bir marka. Kim olduğunuz, ne yaptığınız, projeleriniz ve nasıl ulaşılacağı — hepsi tek sayfada. Hızlı güncelleme, düşük bakım maliyeti, güçlü kişisel izlenim.
Yaratıcı Profesyoneller
Grafik tasarımcı, fotoğrafçı, illüstratör, video editör. Portfolyo ağırlıklı, görsel akış öncelikli yapı. Her proje bir bölümde, scroll ile galeri deneyimi.
Yerel Hizmet İşletmeleri
Kuaför, diş kliniği, oto servis, butik. Hizmetler, kadro, yorumlar ve telefon/iletişim bilgisi — müşteriyi aramaya teşvik eden tek sayfa.
Konferans ve Lansman
Tek bir etkinliğe özel: tarih, konuşmacılar, program, kayıt formu. Etkinlik bitince arşive alınır. Yeni etkinlik için yeni sayfa.
Uygulama Lansman Sayfası
Mobil uygulama veya SaaS ürünü için özellikler, ekran görüntüleri, fiyatlandırma ve indirme/kayıt CTA'sı. App Store / Google Play yönlendirme dahil.
MVP ve Coming Soon
Ürün hazır olmadan piyasayı ölçmek için tek sayfa. Email listesi topla, problem-çözüm anlatısı kur, erken kayıt indirimini sun. Minimum yatırım, maksimum veri.
Tipik Bir Tek Sayfa Nasıl Kurgulanır?
Hero / Karşılama
İlk 5 saniyede ziyaretçiyi tutmak. Kim olduğunuz ve ne sunduğunuz tek cümlede. Arka plan görsel/video veya animasyon, birincil CTA butonu, güven sinyali.
Hakkında / Değer Önerisi
Neden siz? Kısa özgeçmiş, değerleriniz veya markanızın felsefesi. Fotoğraf veya video ile sıcaklık katılması. Sayılar (yıl, proje, müşteri) ile inanılırlık.
Hizmetler / Ürünler
Ne sunuyorsunuz? Kart veya liste formatında hizmetler. Her biri için kısa açıklama ve değer odaklı dil. Fiyat varsa şeffaflık artı yaratır.
Portföy / Referanslar
Sosyal kanıt bölümü. Önceki projeler, müşteri logoları, vaka çalışmaları. Görsel ağırlıklı grid veya slider. Her çalışma için kısa bağlam bilgisi.
Müşteri Yorumları
Gerçek isim + fotoğraf + unvan ile yorumlar. Üç beş yorum yeterli — çok sayıda yorum dikkat dağıtır. Yıldız puanı varsa öne çıkarın.
İletişim / CTA
Son dönüşüm noktası. Form, telefon, e-posta ve sosyal medya linkleri. Harita gerekiyorsa embed. İkinci bir CTA ile yukarı scroll teşvik edilebilir.
Proje Nasıl İlerler?
Hedefinizi, hedef kitlenizi ve içerik envanterinizi konuşuyoruz. Varsa logo, renkler, fotoğraflar ve metin içerikleri alınıyor.
Scroll sırası ve bölüm başlıkları belirleniyor. Her bölümde hangi içerik formatının (metin, görsel, video, form) kullanılacağı netleştiriliyor.
Figma'da tam sayfa tasarımı. Masaüstü ve mobil versiyonlar. Her bölüm için animasyon ve etkileşim önerisi. Revizyon sonrası onay alınıyor.
Tasarım kodlanıyor. Scroll animasyonları, sticky nav, form entegrasyonu, analytics. Core Web Vitals 90+ hedefi ile hız optimizasyonu.
Tüm metin, görsel ve videolar sayfaya entegre ediliyor. Tipografi, renk ve aralık tasarımla uyum kontrol ediliyor.
Tüm tarayıcı ve cihazlarda test. Canlıya alındıktan sonra 1 hafta boyunca performans ve form bildirimleri izleniyor.
Hangi Teknoloji?
Astro / Next.js
Statik site üretimi. Yıldırım hızında yükleme, SEO dostu markup, modern geliştirici deneyimi.
Tailwind CSS
Utility-first stil yaklaşımı. Tutarlı tasarım sistemi, responsive breakpoint'ler, dark mode desteği.
GSAP / Framer Motion
Performanslı scroll animasyonları. Tarayıcı uyumluluğu yüksek, GPU hızlandırmalı efektler.
Netlify / Vercel
Sıfır yapılandırma deployment. Otomatik CDN, HTTPS, form işleme ve preview deploy desteği.
Sıkça Sorulan Sorular
Tek sayfa siteler SEO açısından çok sayfalı sitelere göre sınırlamalar taşır — her sayfa kendi anahtar kelimesini hedefleyemez. Ancak bu, iyi SEO yapılamayacağı anlamına gelmez. Öncelikli anahtar kelime için güçlü on-page optimizasyon, schema markup, hızlı yükleme ve yerel SEO sinyalleri (özellikle yerel işletmeler için) single-page siteyi yarışabilir kılar. Eğer geniş bir içerik stratejisi planlanıyorsa blog bölümü ayrı sayfalara çıkarılabilir.
Optimal sayı 5–8 bölüm arası. Az bölüm yeterli bilgi vermeyebilir; çok bölüm ziyaretçiyi yorar. Her bölümün bir amacı olmalı ve yalnızca o amaca hizmet etmeli. En sık kullanılan yapı: Hero + Hakkında + Hizmetler + Portföy/Referanslar + Yorumlar + İletişim. Projenin türüne göre bölüm sayısı ve sırası özelleştiriliyor.
Bu durumda hibrit yaklaşım ideal: ana site tek sayfada kalır, blog /blog/ altında kendi sayfalarına sahip olur. Navigasyondan hem tek sayfanın anchor\'larına hem de blog\'a ulaşılır. Böylece hem single-page sitenin sade deneyimi korunur hem de içerik üretimiyle SEO potansiyeli kullanılır.
Evet. Dil değiştirme butonu ile farklı dil içerikleri arasında geçiş sağlanabilir. Daha profesyonel bir çözüm için /tr/ ve /en/ path\'leri altında ayrı sayfa sürümleri oluşturmak ve hreflang etiketleri eklemek hem UX hem de SEO açısından daha güçlü bir yaklaşım.
Doğru yapıldığında hayır. CSS transform ve opacity tabanlı animasyonlar GPU hızlandırmalıdır ve JavaScript thread'ini bloke etmez. IntersectionObserver ile tetiklenen scroll animasyonları sayfanın başında yüklenmez. prefers-reduced-motion media query ile animasyonları kısıtlamayı tercih eden kullanıcılar için animasyonlar otomatik devre dışı bırakılır.
Evet, bu en yaygın büyüme yollarından biri. Tek sayfa, işletme henüz küçükken veya içerik hacmi sınırlıyken başlangıç için mükemmel. İşletme büyüdüğünde — yeni hizmetler eklendikçe, blog kurgulandıkça — mevcut tek sayfa ana sayfa olarak kalır, altına yeni sayfalar eklenir. Tasarım sistemini baştan tutarlı kurmak bu geçişi kolaylaştırır.
Tasarım sürecini başlatmak için temel içerik şeması yeterli — tüm içeriğin bitmiş olması gerekmiyor. Tasarım sırasında placeholder metin ve görseller kullanılır. Ancak gerçek içerikle revizyon yapılması genellikle ekstra tur gerektirir. En iyi akış: tasarım wireframe\'de onaylanırken içerik de paralel hazırlanır, geliştirme aşamasında entegre edilir.
Standart tek sayfa proje: 10–15 iş günü. İçerik müşteri tarafından hazır getirilirse 7–10 iş gününe iner. Animasyon yoğun veya özel etkileşim içeren projeler 15–20 iş günü alabilir. Acil durumlarda ekspres teslim de mümkün; proje başında netleştiriliyor.
Evet. Netlify veya Vercel üzerinde barındırma, custom domain bağlama, SSL sertifikası ve temel DNS yapılandırması proje kapsamında yer alıyor. Mevcut hosting hesabınız varsa oraya deploy da yapılabilir. Domain satın alımında tercih ettiğiniz sağlayıcıda yönlendirme adımları da anlatılır.
Evet. Temel metin ve görsel değişiklikler için iki seçenek: (1) Netlify CMS veya Decap CMS entegrasyonu — tarayıcı üzerinden panelden düzenleme, kod bilgisi gerekmez. (2) GitHub üzerinden doğrudan dosya düzenleme — biraz teknik bilgi gerektirir ama fazladan bağımlılık yok. Yapısal değişiklikler (bölüm ekleme/çıkarma) için ek geliştirme desteği sunuyorum.
Tek sayfa web sitesi çok sayfalı siteye kıyasla daha düşük maliyetli bir çözüm. Fiyatı etkileyen faktörler: animasyon yoğunluğu, özel etkileşimler, form entegrasyonu ve CMS gereksinimi. Net fiyat için kısa bir brief (hedef, bölüm listesi, referans site varsa) paylaşmanız yeterli — 24 saat içinde detaylı teklif gönderiyorum.