Sayfa Tasarımı Rehberi 2026: Wireframe'den Production'a Web Sayfa Tasarımı

Bir web sayfasının tasarımı, sadece güzel görünmekle ilgili değildir; içeriğin bir kullanıcı niyetiyle nasıl buluştuğunu, tipografinin gözü nasıl yönlendirdiğini, gridlerin okunabilirliği ve dönüşümü nasıl etkilediğini birlikte yöneten disiplinli bir mühendislik dalıdır. Bu rehber, modern web sayfa tasarımının uçtan uca pratiğini — keşif sürecinden wireframe'e, mockup ve prototipten erişilebilirlik testlerine, tasarım sistemlerinden CSS'e, performans bütçesinden SEO odaklı kararlara — gerçek araç komutları ve üretim örnekleriyle anlatıyor.

Hedefimiz net: tasarımcı, geliştirici ve içerik yazarının aynı dili konuştuğu, ölçülebilir kararların alındığı ve hem masaüstünde hem mobilde tutarlı çalışan sayfalar üretmek. Sayfa tasarımı, web site dizayn, web tasarım siteleri gibi farklı arama niyetlerinin altında aslında aynı temel sorular yatar: kullanıcı ne istiyor, içerik nasıl hiyerarşiye girer, tarayıcı bunu ne kadar hızlı çizer, arama motoru ne anlar?

İlgili rehberler: Sayfa Hızı ve Core Web Vitals 2026 · Teknik SEO Kontrol Listesi 2026 · Tailwind CSS Sıfırdan · React ile Modern Web Uygulaması · Site Optimizasyonu A'dan Z'ye · Arama Motoru ve SEO Rehberi

Sayfa Tasarımı Nedir, Web Site Dizaynından Farkı Nerede?

Sayfa tasarımı (page design), tek bir sayfanın — anasayfa, ürün detay, blog yazısı, iletişim formu, ödeme ekranı — kullanıcı ile içerik arasındaki ilişkiyi planlama sanatıdır. Web site dizayn (website design) ise birden fazla sayfanın bir arada nasıl bir bilgi mimarisi oluşturduğunu, navigasyonun nasıl kurulacağını, sitenin marka kimliğiyle nasıl bütünleşeceğini kapsayan üst ölçek disiplindir. Web tasarım siteleri aramasının ardındaki niyet ise genellikle iki şeye işaret eder: ya tasarım hizmeti veren ajanslar ya da hazır şablon, builder, ilham galerisi sunan platformlar.

Pratikte üçü iç içedir. Bir e-ticaret sitesinin ürün detay sayfa tasarımını çözebilmek için tüm sitenin bilgi mimarisini, kategori şemasını ve marka renklerini bilmeniz gerekir. Bu yüzden bu yazı boyunca sayfa tasarımı derken hem tek sayfa kararlarını hem de o kararı kuşatan site geneli kuralları konuşacağız.

Tasarım Süreci: Keşiften Lansmana 7 Aşama

Profesyonel ekiplerin uyguladığı süreç tek atışlık değildir; her aşamada öğrenir ve geri döner. Aşağıdaki 7 aşama, bir kurumsal web projesinin gerçek hayatta gittiği yoldur.

• 1. Keşif (Discovery) — Marka, hedef kitle, rakip analizi, içerik envanteri, mevcut analitik. Stakeholder'larla 60-90 dakikalık görüşmeler.
• 2. Strateji & IA — Bilgi mimarisi, sitemap, kullanıcı yolculukları (user journeys), öncelikli sayfalar, KPI'lar (dönüşüm hedefi, organik trafik, etkileşim).
• 3. Wireframe — Düşük çözünürlüklü, gri tonlu sayfa düzenleri. Karar: ne nereye gider, hiyerarşi nasıl?
• 4. Visual Design / Mockup — Tipografi, renk, ikonografi, illüstrasyon. Pixel-perfect statik tasarımlar.
• 5. Prototip — Tıklanabilir, etkileşim akışlı versiyon. Kullanılabilirlik testlerinin temeli.
• 6. Geliştirme — HTML/CSS/JS, tasarım sistemine bağlı bileşenler, CMS entegrasyonu, performans optimizasyonu.
• 7. QA, Lansman, İterasyon — Cross-browser test, erişilebilirlik denetimi, hız testi, A/B test, sürekli iyileştirme.

Her aşama sonunda karar belgesi tutun: hangi seçenek neden seçildi, hangi tradeoff kabul edildi. Bu belgeler 6 ay sonra yeni bir tasarımcı geldiğinde yıllık iş gücü tasarrufu demektir. Süreç ile birlikte yazılım metodolojilerini de okumak isteyenler için Yazılım Geliştirme Süreçleri rehberi iyi bir tamamlayıcıdır.

Kullanıcı Araştırması ve İçerik Önceliği

İyi tasarım, kullanıcının ne yapmaya geldiğini önce keşfeder, sonra çizer. Üç temel araştırma yöntemi: kullanıcı görüşmeleri (5-8 kişi tipik bir doygunluk eşiği), kart sıralama (information architecture için), analitik veri (mevcut site varsa GA4 + Search Console + Hotjar/Microsoft Clarity heatmap). Her sayfa için bir amaç cümlesi yazın: 'Bu sayfa, X kişisinin Y problemiyle gelip Z aksiyonunu almasını sağlar.' Tasarım kararları her zaman bu cümleyle çatışırsa kararı geri çekilir. Bu zihinsel disiplin, en gösterişli stok illüstrasyondan, en moda gradyandan daha değerlidir.

Eye-tracking araştırmaları (Nielsen Norman Group) Latin alfabeli kullanıcıların metin ağırlıklı sayfalarda F-pattern, görsel ağırlıklı sayfalarda ise Z-pattern izlediğini gösterir. Bu örüntüler kesin yasa değildir; ipucudur. Önemli olan en kritik mesajın gözün ilk gittiği noktada (sol üst, hero alanı) durması ve birincil CTA'nın bunu hemen takip etmesidir. Modern içerik düzenlerinde üç yaygın yapı: hero + value props + sosyal kanıt + CTA (SaaS landing); kategori grid + ürün kart + filtre (e-ticaret); başlık + meta + içindekiler + içerik + ilgili yazılar (blog post). Her biri için farklı tipografi ölçeği, farklı görsel ağırlık, farklı boşluk ritmi gerekir.

Wireframe ve Mockup: İskeletten Visual Design'a

Wireframe, tasarımın 'iskelet'idir. Renk yok, font yok, sadece kutular ve etiketler. Amacı estetik değil, içerik düzeni ve hiyerarşi kararını netleştirmektir. Erken aşamada bir wireframe üzerinde 30 dakika tartışmak, mockup aşamasında 3 günlük geri dönüş demektir. Üç sadakat seviyesi: lo-fi (kâğıt-kalem veya Balsamiq, hızlı iterasyon), orta (Figma gri tonlar, gerçek kopya), hi-fi (visual design'a yakın, stakeholder onayı için). Annotated wireframe — her bileşenin yanında davranış açıklaması — geliştirici teslimatı için zorunludur.

Figma, Sketch ve Adobe XD üçü de yetenek olarak yakın; ancak Figma multi-player real-time iş birliği ve tarayıcıdan çalışması nedeniyle 2026 itibarıyla pazarın baskın aracı. Penpot açık kaynak alternatif olarak self-hosted senaryolarda öne çıkar. Wireframe onaylandıktan sonra visual design'a geçilir; dört temel karar netleşir: tipografi, renk, ikon-illüstrasyon, görsel/fotoğraf yönü. Mockup üretirken her ekran için en az iki state hazırlayın: ideal-state ve empty-state. 'Arama sonucu yok', 'sepet boş', 'henüz yorum yok' boş durumlarının tasarımı, gerçek kullanım deneyimini korumanın anahtarıdır.

Tipografi: Web'in Sessiz Gücü

Bir sayfada okunan metnin %95'inden fazlası tipografi kararlarıyla şekillenir. Kötü tipografi, en güzel görseli bile kullanılmaz hâle getirir. Modern web tipografisinin sekiz temel kuralı:

• Maksimum 2 yazı tipi ailesi: Bir başlık fontu + bir gövde fontu yeter. Üç ve üzeri ailenin getirdiği fayda nadiren maliyetini karşılar.
• Modular type scale: 1.125, 1.2, 1.25, 1.333, 1.5 gibi orana dayalı boyut listesi. Major Third (1.25) çoğu sayfa için çalışır.
• Satır yüksekliği (line-height): Gövde için 1.5-1.7, başlıklar için 1.1-1.3. Çok geniş veya çok dar satır yüksekliği okuma yorgunluğu yaratır.
• Satır uzunluğu (measure): 45-75 karakter optimum. Çok geniş kolonda göz satır sonunu bulamaz.
• Tracking (letter-spacing): Büyük başlıklarda hafif negatif (-0.02em), versal (uppercase) etiketlerde hafif pozitif (+0.05em).
• Hiyerarşi farkı en az 1.25x: Yan yana iki seviye arasında belirgin boy farkı olmalı.
• Variable font: Tek dosyada tüm weight ve italic. Network ve cache açısından net kazanç.
• System font stack: Performans öncelikli sayfalarda system-ui, -apple-system, Segoe UI, Roboto, sans-serif hâlâ savunulabilir bir seçim.

<!-- Variable font preload + font-display: swap -->
<link rel="preload"
 href="/fonts/Inter-Variable-latin.woff2"
 as="font" type="font/woff2" crossorigin>

<style>
 @font-face {
 font-family: 'Inter';
 src: url('/fonts/Inter-Variable-latin.woff2') format('woff2-variations');
 font-weight: 100 900;
 font-style: normal;
 font-display: swap;
 /* Latin + Türkçe için yeterli */
 unicode-range: U+0000-00FF, U+0131, U+011E-011F, U+0130-0131,
 U+015E-015F, U+0152-0153;
 }

 :root {
 /* Modular scale: 1.25 (Major Third) */
 --step--1: clamp(0.875rem, 0.83rem + 0.22vw, 1rem);
 --step-0: clamp(1rem, 0.94rem + 0.31vw, 1.125rem);
 --step-1: clamp(1.25rem, 1.16rem + 0.43vw, 1.4rem);
 --step-2: clamp(1.563rem, 1.43rem + 0.66vw, 1.75rem);
 --step-3: clamp(1.953rem, 1.75rem + 1.02vw, 2.2rem);
 --step-4: clamp(2.441rem, 2.13rem + 1.55vw, 2.75rem);
 --step-5: clamp(3.052rem, 2.59rem + 2.30vw, 3.5rem);
 }

 body { font: var(--step-0)/1.6 'Inter', system-ui, sans-serif; }
 h1 { font-size: var(--step-5); line-height: 1.1; letter-spacing: -0.02em; }
 h2 { font-size: var(--step-3); line-height: 1.2; }
 h3 { font-size: var(--step-2); line-height: 1.25; }
 p, li { max-width: 70ch; } /* okunabilirlik */
</style>

Türkçe karakterli (ı, ğ, ş, ç, ö, ü, İ) içerik tasarlarken fontun bu glyph'leri içerdiğinden mutlaka emin olun. Google Fonts'ta filtreleme yaparken 'Turkish' subset kutusunu işaretleyin. Kötü subset edilmiş bir font 'i' yerine kutu, 'ş' yerine boşluk gösterir; bu en hızlı kullanıcı kaybı yollarından biridir.

Renk Sistemi: Algı, Marka ve Erişilebilirlik

Renk; marka tanınırlığı, duygusal ton ve kullanılabilirliğin kavşağında durur. Profesyonel bir renk sisteminin üç katmanı vardır: brand (1-2 birincil + 1-2 vurgu rengi), functional (success, warning, error, info), neutral (50-900 arası gri tonları, arka plan, kenar, metin).

# CSS değişkenleri olarak palet — token-bazlı tasarım sistemi
:root {
 /* Brand */
 --brand-50: #eef4ff;
 --brand-100: #d9e6ff;
 --brand-500: #2c5cff; /* primary */
 --brand-600: #1d49e0; /* primary hover */
 --brand-900: #0a1d72;

 /* Functional */
 --success-500: #16a34a;
 --warning-500: #f59e0b;
 --danger-500: #dc2626;
 --info-500: #0284c7;

 /* Neutral (Tailwind benzeri ölçek) */
 --neutral-0: #ffffff;
 --neutral-50: #f8fafc;
 --neutral-100: #f1f5f9;
 --neutral-200: #e2e8f0;
 --neutral-400: #94a3b8;
 --neutral-700: #334155;
 --neutral-900: #0f172a;
}

@media (prefers-color-scheme: dark) {
 :root {
 --neutral-0: #0b1220;
 --neutral-50: #0f172a;
 --neutral-700: #cbd5e1;
 --neutral-900: #f1f5f9;
 }
}

Renk paletini kurarken WCAG 2.2 kontrast oranlarını sağlayın: normal metin için 4.5:1, büyük metin (≥18pt veya 14pt bold) için 3:1, UI bileşenleri ve grafik nesneler için 3:1. WebAIM Contrast Checker, Figma'da Stark plugin veya Chrome DevTools'un Issues panelinden hızlı kontrol edebilirsiniz.

Rengin sadece tek başına anlam taşımasından kaçının. Form alanı kırmızı kenarlıkla 'hatalı' işaretleniyor ama renk körü kullanıcı bunu göremiyor; mutlaka bir ikon, etiket veya metinle tamamlayın. Başlığı bold yaparak ek görsel sinyal verin.

Grid Sistemi ve Sayfa Düzeni

Web'de en yaygın 12 kolonlu grid hâlâ yaşıyor — basit oransal bölünmeleri kolay kıldığı için. Modern CSS Grid ve Flexbox bunun çok ötesine geçer; named grid lines, subgrid, container queries ile artık kolon sayısı'na bağlı kalmaksızın içerik bazlı düzen kurulabilir.

<!-- Modern responsive layout — CSS Grid + container query -->
<style>
.layout {
 display: grid;
 grid-template-columns:
 [full-start] minmax(1rem, 1fr)
 [content-start] minmax(0, 72rem)
 [content-end] minmax(1rem, 1fr) [full-end];
 row-gap: clamp(1.5rem, 2vw, 3rem);
 }
.layout > * { grid-column: content; }
.layout >.full { grid-column: full; }

 /* 3 kolonlu kart düzeni — auto-fit + minmax pattern */
.card-grid {
 display: grid;
 grid-template-columns:
 repeat(auto-fit, minmax(min(280px, 100%), 1fr));
 gap: 1.5rem;
 }

 /* Container query ile bileşen-içi responsive */
.card { container-type: inline-size; }
 @container (min-width: 480px) {
.card { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; }
 }
</style>

Bu örnekteki auto-fit + minmax(min(280px, 100%), 1fr) deseni, ekran genişledikçe kartların otomatik olarak yan yana sıralanmasını ve daraldıkça alt alta gelmesini sağlar — media query yazmadan. Container queries ise bir kartın içinde bulunduğu konteynerin genişliğine göre düzen değiştirmesine izin verir; aynı kart bileşeni hem dar sidebar'da hem geniş ana alanda farklı görünebilir.

Spacing sistemi de gridin parçasıdır. Modern tasarım sistemleri spacing'i 4px veya 8px temel adımlardan türetir (Tailwind spacing-1 = 4px, spacing-4 = 16px). Bu disiplin, yan yana iki bileşenin tutarlı boşluk hissetmesini ve geliştirici tarafında 'biraz daha boşluk lazım' tartışmalarının sona ermesini sağlar.

• Inline spacing: Aynı satırdaki öğeler arası — buton metni ile ikon arası tipik 8px.
• Stack spacing: Yaslı sıralı öğeler arası — paragraflar arası tipik 16-24px.
• Inset (padding): Bir konteynerin iç boşluğu — kart için 16-24px tipik.
• Section spacing: Sayfa bölümleri arası — 64-128px arası, breakpoint'e göre.
• Optical adjustment: Yuvarlak veya üçgen şekilli ikonlarda 1-2px elle ayar gerekebilir; matematiksel hizalama her zaman görsel hizalama değildir.

Responsive ve Mobil Uyum

Trafiğin %60-70'i mobilden geliyorsa tasarım sürecini mobile-first kurmak en güvenli yoldur. Önce 360-414px genişlikte tasarım yapın; sonra ekranı genişletip yeni breakpoint'lerde içeriğin nasıl yeniden düzenleneceğine karar verin. Aksi yön — geniş ekranı sıkıştırmak — neredeyse her zaman bozulur.

/* Modern breakpoint setup — Tailwind benzeri */
@media (min-width: 640px) { /* sm */ }
@media (min-width: 768px) { /* md */ }
@media (min-width: 1024px) { /* lg */ }
@media (min-width: 1280px) { /* xl */ }
@media (min-width: 1536px) { /* 2xl */ }

/* Hover'ı sadece pointer'ı olan cihazlarda kullan */
@media (hover: hover) and (pointer: fine) {
.btn:hover { background: var(--brand-600); }
}

/* Düşük güçlü cihaz / data-saver tespiti */
@media (prefers-reduced-data: reduce) {
.hero-video { display: none; }
.hero-poster { display: block; }
}

/* Hareket azaltma */
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after {
 animation-duration: 0.01ms !important;
 transition-duration: 0.01ms !important;
 }
}

Tap target boyutu (Material Design ve Apple HIG'in örtüştüğü değer) en az 48×48 CSS px; bitişik tap target'lar arasında ise 8px boşluk. Form alanlarında label-input arası 4px, input height 44-56px arası mobilde rahattır. Mobil keyboard tipini doğru ayarlayın: e-posta için type="email" inputmode="email", telefon için type="tel", sayı için inputmode="numeric".

Erişilebilirlik (a11y): WCAG 2.2 Pratik Rehberi

Erişilebilirlik bir 'iyi olur' değil, yasal yükümlülük ve aynı zamanda SEO/UX için doğrudan kazanç. Avrupa Erişilebilirlik Yasası (EAA) Haziran 2025'te yürürlüğe girdi; Türkiye'de Engelliler Hakkında Kanun ve TS EN 301 549 standardı kamu kurumlarını ve giderek özel sektörü kapsar. WCAG 2.2 Quick Reference birinci kaynaktır.

• Anlamsal HTML — <header>, <nav>, <main>, <article>, <footer>. Div ile her şeyi yapmaktan kaçının.
• Heading hiyerarşisi — Sayfada tek bir h1, sonra h2 → h3 sıralı. Atlamayın.
• Alt metin — Anlam taşıyan görsele alt; süsleme görseline alt="".
• Form etiketleri — Her input'a <label for="...">. Placeholder, label yerine geçmez.
• Klavye navigasyonu — Tüm interaktif elemanlar Tab ile gezilebilmeli, focus halkası görünür olmalı.
• Skip link — Sayfanın başında 'İçeriğe atla' linki, ekran okuyucu kullanıcılarına navigasyon turundan kurtulma şansı verir.
• ARIA — Yalnızca anlamsal HTML'in çözmediği yerlerde. Yanlış ARIA, ARIA olmayandan daha kötüdür.
• Renk kontrastı — 4.5:1 normal, 3:1 büyük metin (yukarıdaki bölüm).

<!-- Erişilebilir form örneği -->
<form action="/iletisim" method="post" novalidate>
 <div class="field">
 <label for="email">E-posta adresi</label>
 <input id="email" name="email" type="email"
 autocomplete="email" required
 aria-describedby="email-help email-error">
 <small id="email-help">Yanıt için kullanacağız.</small>
 <p id="email-error" role="alert" hidden>Geçerli bir e-posta girin.</p>
 </div>

 <button type="submit">Gönder</button>
</form>

<!-- Skip link — ilk odaklanılabilir eleman olmalı -->
<a class="skip-link" href="#main">İçeriğe atla</a>
<style>
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 999;
 background: #000; color: #fff; padding:.5rem 1rem; }
</style>

Test araçları: tarayıcıda axe DevTools, Lighthouse'un Accessibility kategorisi, NVDA (Windows) veya VoiceOver (macOS) ile elle ekran okuyucu testi. Otomatik araçlar kuralların yaklaşık %30-40'ını yakalar; geri kalan elle test gerektirir.

Tasarım Sistemi (Design System) ve Tokenler

Birkaç sayfayı geçen her projede tek tek mockup üretmek sürdürülemez. Tasarım sistemi = paylaşılan dil. Tokenler (renk, spacing, tipografi, shadow, radius) + bileşenler (Button, Input, Card, Modal) + örüntüler (form pattern, navigation pattern) + dokümantasyon. Önemli olan kim için tasarladığınızı bilmek: 1 ekip için Storybook + Figma library yeterli; 10+ ekipli kurumsal yapıda Material/Carbon ölçeğinde bir sistem gerekir.

{
 "$description": "Design tokens — Style Dictionary uyumlu format",
 "color": {
 "brand": {
 "500": { "value": "#2c5cff", "type": "color" },
 "600": { "value": "#1d49e0", "type": "color" }
 },
 "text": {
 "primary": { "value": "{color.neutral.900.value}" },
 "secondary": { "value": "{color.neutral.700.value}" },
 "muted": { "value": "{color.neutral.400.value}" }
 }
 },
 "spacing": {
 "1": { "value": "4px" },
 "2": { "value": "8px" },
 "4": { "value": "16px" },
 "6": { "value": "24px" },
 "8": { "value": "32px" },
 "12": { "value": "48px" }
 },
 "radius": {
 "sm": { "value": "4px" },
 "md": { "value": "8px" },
 "lg": { "value": "16px" },
 "full": { "value": "9999px" }
 },
 "shadow": {
 "sm": { "value": "0 1px 2px 0 rgb(0 0 0 / 0.05)" },
 "md": { "value": "0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.05)" },
 "lg": { "value": "0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.05)" }
 }
}

Style Dictionary, Theo veya Tokens Studio bu JSON'ı CSS değişkenlerine, iOS.xcassets'e, Android XML'e, Tailwind config'e dönüştürür. Tasarımcı Figma'da rengi değiştirir, build pipeline tüm platformları senkronize eder. Bu disiplinin değeri, projeniz büyüdükçe katlanarak artar.

Geliştirici tarafında Storybook, bileşenleri sayfa bağlamından bağımsız test ettiğiniz, dokümante ettiğiniz ortamdır. Tasarımcı tarafında Figma library, aynı bileşenleri tıklayıp sürükleyip kullandığı kütüphane. İdeal akışta her Figma component'inin bir Storybook karşılığı vardır ve QA, üretim sayfasında gördüğü bileşenle Storybook'taki bileşeni karşılaştırarak regresyon tespit eder.

Görsel ve İllüstrasyon: Kalite ve Performans

Bir sayfanın ağırlığının %50-65'i tipik olarak görsellerden gelir (HTTP Archive verisi). Yanlış formatta tek bir hero image, performans bütçenizin tamamını yer. Üç temel karar:

• Format: AVIF (en iyi sıkıştırma, modern tarayıcı), WebP (yaygın destek), JPEG (fallback). PNG sadece şeffaflık gereken yerde. Vektör (logo, ikon) için SVG.
• Boyut: srcset ile birden fazla genişlik (480, 960, 1440, 1920). 2x retina için DPR'ye göre seçim tarayıcıya bırakılır.
• Lazy load: Fold üstü görseller loading="eager" fetchpriority="high", fold altı loading="lazy".

<!-- Modern responsive picture: AVIF + WebP + JPEG fallback -->
<picture>
 <source
 type="image/avif"
 srcset="/img/hero-480.avif 480w,
 /img/hero-960.avif 960w,
 /img/hero-1440.avif 1440w,
 /img/hero-1920.avif 1920w"
 sizes="(max-width: 600px) 100vw,
 (max-width: 1200px) 90vw,
 1200px">
 <source
 type="image/webp"
 srcset="/img/hero-480.webp 480w,
 /img/hero-960.webp 960w,
 /img/hero-1440.webp 1440w"
 sizes="(max-width: 600px) 100vw, 1200px">
 <img
 src="/img/hero-960.jpg"
 alt="Tasarımcı bilgisayarda wireframe çiziyor"
 width="1920" height="1080"
 loading="eager"
 fetchpriority="high"
 decoding="async">
</picture>

# Komut satırından format dönüşümü
# AVIF — libavif (avifenc)
sudo apt install libavif-bin
avifenc --min 30 --max 40 -j 8 hero.jpg hero.avif

# WebP — Google libwebp
sudo apt install webp
cwebp -q 80 hero.jpg -o hero.webp

# Sharp (Node.js) ile responsive boy üretme
npx sharp-cli -i hero.jpg -o hero-{width}.webp \
 --resize 480 --resize 960 --resize 1440 --resize 1920 \
 --webp

# ImageMagick ile toplu sıkıştırma
for f in src/*.jpg; do
 magick "$f" -quality 82 -strip -interlace Plane \
 "out/$(basename "${f%.jpg}.jpg")"
done

Görsel ağırlıklı kararlarda her zaman width ve height attribute'unu HTML'de verin — tarayıcı yer ayırır, layout shift (CLS) olmaz. CSS ile height: auto kullanmak responsive davranışı bozmaz; bu attribute'lar yalnızca oranı bildirir.

Hareket, Animasyon ve Mikro Etkileşim

İyi animasyon dikkati yönlendirir, durumu gösterir, hatayı yumuşatır. Kötü animasyon sayfayı yavaşlatır, kullanıcıyı yorar, erişilebilirliği baltalar. Üç kural: amaca yönelik (her animasyonun bir görevi olmalı), kısa (UI animasyonları 150-300ms tatlı noktasıdır), iptal edilebilir (prefers-reduced-motion). Performans kritik kuralı: animate ettiğiniz CSS özelliği yalnızca transform ve opacity olsun. Diğer özellikler (top, left, width, height, margin) layout/paint tetikler ve düşük güçlü cihazda akmayan animasyona yol açar. csstriggers.com hangi özelliğin neyi tetiklediğini görmek için iyi bir kaynak.

/* CSS easing tokens — tasarım sisteminin parçası */
:root {
 --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
 --ease-in: cubic-bezier(0.55, 0, 0.85, 0.06);
 --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
 --ease-spring: cubic-bezier(0.5, 1.25, 0.75, 1.25);

 --dur-fast: 120ms;
 --dur-base: 200ms;
 --dur-slow: 320ms;
}

.btn {
 transition:
 background-color var(--dur-fast) var(--ease-out),
 transform var(--dur-base) var(--ease-spring);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Scroll-driven animation — modern API */
@supports (animation-timeline: view()) {
.reveal {
 animation: fadeUp linear both;
 animation-timeline: view();
 animation-range: entry 10% cover 30%;
 }
 @keyframes fadeUp {
 from { opacity: 0; transform: translateY(40px); }
 to { opacity: 1; transform: translateY(0); }
 }
}

Bilgi Mimarisi ve Navigasyon

Sayfa tasarımı sayfayla başlayıp sayfayla bitmez; kullanıcı bir sonraki sayfaya nasıl gidecek? Navigasyon, IA'nın yüzeyidir. Sekiz kuralın özeti:

• Yatay menü: 5-7 ana öğeyi geçmesin. Geçerse mega menü veya 'Daha fazla' grupla.
• Mobile menu pattern: Hamburger ikonu standart hâline geldi; ancak 'görmek-tıklamak' alışkanlığı için label ('Menü') eklemek %20'ye yakın artış sağlayabilir.
• Breadcrumb: Derin sitelerde (>=3 seviye) zorunlu. Schema.org BreadcrumbList ile işaretleyin.
• Aktif state: Kullanıcı hangi sayfada olduğunu menüden okuyabilmeli (renk + altçizgi + aria-current="page").
• Search: 50+ sayfalı sitelerde mutlaka. Algolia, Meilisearch, Typesense self-hosted seçenekler.
• Footer nav: Sitemap'in özetidir; tüm önemli sayfalara link, dipnot bilgileri, sosyal hesaplar.
• 404 sayfası: Tasarlayın. 'Aradığınızı bulamadık ama şunlar var:' + arama kutusu + popüler sayfalar.
• Sitemap.xml + robots.txt: SEO katmanının olmazsa olmazları.

Form Tasarımı: Dönüşümün Sahnesi

İletişim, kayıt, ödeme — sayfanın ucunda tipik olarak bir form vardır. Formdaki her gereksiz alan bir kullanıcı kaybıdır. Üç prensip: tek kolon (göz dikey akışta daha hızlı tarar), en az alan (gerçekten ihtiyaç duyduğunuz veriyi sorun), anlık doğrulama (alanı bırakırken hemen kontrol; submit'te toplu hata göstermek kötü deneyim).

<form class="signup" action="/api/signup" method="post" novalidate>
 <h2>Hesap oluşturun</h2>

 <div class="field">
 <label for="name">Ad Soyad</label>
 <input id="name" name="name" type="text"
 autocomplete="name" required minlength="2">
 </div>

 <div class="field">
 <label for="email">E-posta</label>
 <input id="email" name="email" type="email"
 autocomplete="email" required
 inputmode="email">
 </div>

 <div class="field">
 <label for="pw">Şifre</label>
 <input id="pw" name="password" type="password"
 autocomplete="new-password" required
 minlength="12" aria-describedby="pw-help">
 <small id="pw-help">En az 12 karakter, 1 rakam, 1 büyük harf.</small>
 </div>

 <button type="submit">Üye ol</button>
</form>

autocomplete attribute'unu mutlaka doğru değerle verin — tarayıcının dolduğu form, doldurmadığından her zaman daha hızlı dönüşüm yapar. Şifre alanları için autocomplete="new-password" (kayıt) veya current-password" (giriş). E-posta için email, telefon için tel.

Performans: Tasarım Kararları Hızı Belirler

Performans, tasarımın görünmez katmanıdır. Bir tasarımcının LCP'yi, INP'yi, CLS'yi anlaması artık zorunluluktur. Detaylı metrik dalışı için Sayfa Hızı ve Core Web Vitals 2026 yazısı; uygulamalı optimizasyon için Site Optimizasyonu A'dan Z'ye.

• LCP < 2.5s: Hero görselin tarayıcıya çizilme süresi. fetchpriority="high", preload, doğru görsel boyutu, fast TTFB.
• INP < 200ms: Tıklamadan sonraki çerçevenin çizilme süresi. Ana iş parçacığını blok eden ağır JS başlıca düşmandır.
• CLS < 0.1: Sayfa yüklenirken kayma. width/height attr eksik görsel, geç yüklenen banner, font swap başlıca tetikleyicilerdir.
• TTFB < 600ms: Sunucudan ilk byte. Backend, CDN, cache.
• FCP < 1.8s: İlk içerik parçacığının ekrana gelmesi.

Tasarım sürecinin başında bir performans bütçesi belirleyin. Örneğin: 'Anasayfa toplam ağırlık < 1.5MB, JS bundle < 200KB, hero görsel < 200KB, font < 60KB.' Tasarımcı yeni bir bileşen önerirken bu bütçeye sığıp sığmayacağını sorgular hâle gelir.

SEO Odaklı Tasarım Kararları

Tasarım, SEO'nun karşıtı değil; ortağıdır. Google'ın E-E-A-T kriterleri ve Helpful Content Update'leri içeriği ödüllendirirken, sayfanın o içeriği nasıl sunduğu da sıralamayı etkiler. Geniş bir teknik liste için Teknik SEO Kontrol Listesi 2026'ya bakın.

• Heading hiyerarşisi: Tek h1, sıralı h2-h3-h4. Anahtar kelime başlıkta doğal yer almalı.
• Schema.org markup: Article, Product, BreadcrumbList, FAQ, Organization, LocalBusiness — sayfa türüne göre. JSON-LD önerilen format.
• Internal link: İlgili içerik blokları, ekosistem oluşturur. WordPress SEO Plugin Önerileri yazımız link inşası açısından detaylı.
• Open Graph + Twitter Card: Sosyal paylaşımlarda görünüm. og:image 1200×630, twitter:card summary_large_image.
• Canonical: Aynı içeriğin birden fazla URL'de servis edildiği durumlarda <link rel="canonical"> ile asıl URL'i belirtin.
• Yapılandırılmış URL: /blog/sayfa-tasarimi gibi okunabilir, kısa, tireli URL'ler.
• Meta description: 150-160 karakter, anahtar kelime + değer önerisi + CTA.

<!-- Article schema (JSON-LD) — head içinde -->
<script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@type": "BlogPosting",
 "headline": "Sayfa Tasarımı Rehberi 2026",
 "description": "Wireframe'den production'a uçtan uca web sayfa tasarımı.",
 "image": "https://www.ornek.com/img/sayfa-tasarimi.jpg",
 "author": { "@type": "Organization", "name": "markaadi" },
 "publisher": {
 "@type": "Organization",
 "name": "markaadi",
 "logo": { "@type": "ImageObject", "url": "https://www.ornek.com/logo.png" }
 },
 "datePublished": "2026-05-06",
 "dateModified": "2026-05-06"
}
</script>

Web Tasarım Siteleri: Builder, Şablon ve İlham Kaynakları

'Web tasarım siteleri' aramasının ardında üç farklı niyet vardır: hazır şablon arayan kurucu, ilham galerisi gezinen tasarımcı, hizmet veren ajansa bakan müşteri. Hangisini seçeceğiniz süre, bütçe, ekibinizdeki tasarımcı/geliştirici varlığı ve içerik güncelleme sıklığına bağlıdır. Bir 5 sayfalık kurumsal site WordPress + Elementor/Bricks ile 1 haftada teslim edilebilir; 50.000 SKU'lu B2B platform ise 6 ay süren özel geliştirmedir.

• No-code/low-code builder'lar: WordPress + Elementor/Bricks, Webflow, Wix, Squarespace, Framer. Hazır şablon + drag-drop. Hızlı başlangıç, tasarım özgürlüğü, sonradan limitler.
• Headless CMS: Sanity, Strapi, Contentful, Storyblok, Payload. İçerik backend'i ayrı, frontend serbest (Next.js, Astro, Nuxt).
• Şablon platformları: ThemeForest, TemplateMonster, HTML5 UP, Cruip. Hazır HTML/Figma şablonu, başlangıç için.
• İlham galerileri: Awwwards, Behance, Dribbble, SiteInspire, Lapa Ninja, Land-book. Trend gözlemleme.
• UI kit kütüphaneleri: Untitled UI, ShadcnUI, MUI, Mantine. Production-ready bileşenler.
• Türkiye'de yerel ajanslar: Web tasarım hizmeti veren onlarca firma vardır; seçim yaparken portfolyolarındaki sayfaların gerçek hız, mobil uyum ve erişilebilirlik testlerini kendiniz yapın.

Modern Frontend Stack: HTML, CSS, JS Çağı

Tasarım kararını koda dökerken seçtiğiniz stack üretkenliği belirler. 2026 itibarıyla yaygın seçenekler:

• Vanilla HTML+CSS+JS: 5-10 sayfalık siteler, blog, landing page için fazlasıyla yeterli. Astro, 11ty veya basit Eleventy ile statik üretim.
• React + Next.js: Next.js 15 App Router server components, streaming, ISR. Büyük e-ticaret ve SaaS için fiili standart.
• Vue + Nuxt: Vue 3 Composition API yaklaşımı reaktivite anlamında zarif; kurumsal projelerde popülerleşiyor.
• Svelte + SvelteKit: Compile-time framework. Daha küçük bundle, mükemmel DX.
• Astro: İçerik odaklı (blog, dokümantasyon, marketing) için zero-JS by default; islands architecture.
• Remix / React Router 7: Web platformuna sadık, progressive enhancement öncelikli.

CSS tarafında Tailwind CSS utility-first yaklaşımı tasarım sistemiyle çok iyi çalışır; Tailwind v4 Oxide motoru ile build hızını dramatik biçimde artırdı. Alternatif olarak CSS Modules, Vanilla Extract, Open Props gibi token-bazlı yaklaşımlar da değerli.

Karanlık Mod (Dark Mode)

Karanlık mod artık beklenen özellik. Doğru uygulanmazsa kullanıcı deneyimini bozar. İki kural: sistem tercihini takip et (prefers-color-scheme) ve kullanıcının manuel seçimine saygı göster (localStorage'a kaydet). Karanlık modda saf siyah (#000) yerine çok koyu lacivert tercih edin (örn. #0b1220) — saf siyah üzerinde saf beyaz metin halo efekti ve göz yorgunluğu yapar. Kontrast oranı yine 4.5:1 hedeflenmeli; testinizi her iki modda da çalıştırın.

// Tema toggle — flicker-free pattern (head içinde, ilk script)
<script>
(function() {
 var stored = localStorage.getItem('theme');
 var systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
 var isDark = stored ? stored === 'dark' : systemDark;
 document.documentElement.dataset.theme = isDark ? 'dark' : 'light';
})();
</script>

/* CSS — data-theme attribute ile geçiş */
:root[data-theme='light'] {
 --bg: #ffffff;
 --fg: #0f172a;
}
:root[data-theme='dark'] {
 --bg: #0b1220;
 --fg: #f1f5f9;
}
body { background: var(--bg); color: var(--fg); }

Test ve QA: Tasarımı Lansman Öncesi Doğrulama

Tasarım lansmana hazır mı? Beş test katmanı:

• Cross-browser: Chrome, Firefox, Safari, Edge (Chromium); iOS Safari + Chrome Android. BrowserStack veya LambdaTest cloud.
• Erişilebilirlik: axe DevTools, Lighthouse a11y, WAVE, NVDA/VoiceOver elle test.
• Performans: PageSpeed Insights, WebPageTest, Lighthouse CI eşik değerlerle.
• Görsel regresyon: Chromatic, Percy, Playwright snapshot — bileşen Storybook'taki gibi mi?
• Kullanılabilirlik testi: 5 kullanıcıyla görev tabanlı oturum (Maze, UserTesting). Sürtünmeli yerleri çıkarır.

#.github/workflows/visual-regression.yml — Playwright snapshot
name: Visual Regression
on: pull_request

jobs:
 visual:
 runs-on: ubuntu-latest
 steps:
 - uses: actions/checkout@v4
 - uses: actions/setup-node@v4
 with: { node-version: 20 }
 - run: npm ci
 - run: npx playwright install --with-deps
 - run: npm run build
 - name: Run visual tests
 run: npx playwright test --project=visual
 - name: Upload diff on fail
 if: failure()
 uses: actions/upload-artifact@v4
 with:
 name: playwright-report
 path: playwright-report/

Lansman Sonrası: Analitik, A/B Test, İterasyon

Tasarım, lansmanla bitmez; başlar. Üç katmanlı veri toplayın:

• Quantitative: GA4, Plausible, Matomo. Sayfa görüntüleme, dönüşüm, bounce, oturum süresi, scroll depth.
• Behavioral: Microsoft Clarity (ücretsiz), Hotjar, FullStory. Heatmap, scroll map, session replay.
• Qualitative: NPS, CSAT, kısa anket pop-up'ları. 'Aradığınızı buldunuz mu?'

A/B testi için trafik az değilse Google Optimize artık yok; alternatifler: VWO, Optimizely, Convert, açık kaynak GrowthBook. İstatistiksel anlamlılık'a ulaşana kadar test etmek esas; 100 ziyaretçide 'bu daha iyi' demek genellikle yanılgıdır. Her test için bir hipotez yazın: 'Hero CTA renginin daha kontrastlı olması, mobilde tıklama oranını artırır.' Bu hipotez yanlış çıkarsa tasarımcı için daha öğretici, doğru çıkarsa kalıcıdır.

Yaygın Tasarım Hataları (ve Düzeltmeleri)

• Çok fazla CTA — Sayfa başına bir birincil aksiyon. İkincil ve üçüncül aksiyonlar görsel olarak daha sönük.
• Hero karuseli — Kullanıcılar 1. slayttan ötesini nadiren görür. Tek hero + güçlü mesaj kullanın.
• Modal pop-up bombardımanı — Sayfaya geldikten 3sn sonra 'Bültene abone ol' modalı dönüşüm öldürür. Exit-intent veya scroll-based deneyin.
• Stok fotoğraf — Yapay duran insan fotoğrafları güveni düşürür. Gerçek ekibinizden çekim yapın.
• Düşük kontrast tipografi — Açık gri zemin üstünde açık gri metin moda mı, okumayı zorlaştırıyor mu?
• Animasyon kirliliği — Her şey kayıyor, dönüyor, parlıyor; ama hangisi önemli?
• Aşırı sticky elementler — Sticky header + sticky footer + sticky sidebar = mobilde tek elinizle kullanabileceğiniz alan kalmadı.
• Erişilebilir olmayan form — Etiketsiz input, focus halkası kapalı CSS, hata mesajı renge bağlı.
• Mobilde test edilmemiş tasarım — Tasarımcı 27" 4K monitörde tasarlar, kullanıcı 6" telefondan ziyaret eder.
• İçerik alanı çok dar/çok geniş — Optimum 60-75 karakter satır uzunluğu.

Bütçe ve Süre: Gerçekçi Beklentiler

Tasarım projesi büyüklükleri ve tipik aralıklar (yaklaşık, sağlayıcıya göre değişir, 2026 verisi). Türkiye pazarı ortalamalarıdır; kurumsal markalı, RFP süreçli, çoklu paydaşlı projeler iki katına çıkabilir. Yurt dışı ajanslarla çalışırken (US/EU) USD/EUR cinsinden 2-5x daha yüksek beklenmeli.

• 1 sayfalık landing page: 1-2 hafta · 8.000-25.000 TL (freelance), 25.000-60.000 TL (ajans).
• 5-10 sayfalık kurumsal site: 3-6 hafta · 25.000-80.000 TL (freelance), 60.000-180.000 TL (ajans).
• E-ticaret (50-500 ürün): 6-12 hafta · 80.000-200.000 TL (Shopify/WooCommerce), 200.000-600.000 TL (özel).
• Custom SaaS dashboard: 3-9 ay · 250.000-1.500.000 TL ve üstü, kapsama göre.
• Tasarım sistemi (50+ bileşen): 4-12 hafta · 100.000-400.000 TL.
• Yenileme (redesign): Mevcut site ile karmaşıklığa bağlı; tipik 4-10 hafta.

E-ticaret Sayfa Tasarımı: Özel Düşünceler

Ürün, kategori, sepet ve ödeme sayfalarının her biri kendi içinde bir disiplindir. E-ticaret SEO Rehberi yazımız bu sayfaların arama motoru tarafını detaylandırır; tasarım tarafında dikkat edilecekler:

• Ürün galerisi: 6-8 yüksek çözünürlüklü fotoğraf + bir adet 360° veya video. AVIF/WebP zorunlu.
• Sepete ekle butonu: Sticky veya yüksek görünürlükte. Stok durumu ve teslimat süresi yanında.
• Sepet drawer: Sayfa değişmeden açılan yan panel. 'Sepete eklendi' bildiriminden daha güçlü dönüşüm.
• Filtre + sort: Mobilde alt sheet, masaüstünde sol sidebar. Active filter chip'leri üstte göster.
• Ödeme akışı: 3-4 adımdan fazlaysa terkedilme oranı yükselir. Misafir checkout zorunlu.
• Trust signals: SSL rozeti (gerçek), iade politikası, müşteri yorumları, ödeme yöntemleri ikon şeridi.

Blog ve İçerik Sayfaları

İçerik odaklı sayfalarda tasarımın görevi okumayı kolaylaştırmaktır. Beş öneri: satır uzunluğu 60-72 karakter (max-width: 70ch), satır yüksekliği 1.6-1.8, paragraflar arası 1em, başlıklar arası bol nefes, kod blokları ve alıntılar görsel olarak ayrışır. İçindekiler (table of contents) uzun yazılarda kullanıcının atlamak istediği yere zıplamasını sağlar — sticky pozisyonda solda veya sağda, mobilde collapse içinde. Reading progress bar (sayfanın yukarısında ilerleyen şerit) okuma motivasyonunu artırır.

Hukuki Yükümlülükler ve Sürdürülebilir Tasarım

Türkiye'de bir web sayfası yayınlarken tasarımcıyı doğrudan etkileyen yasal başlıklar var. KVKK kişisel veri toplayan formlarda aydınlatma metni ve açık rıza onay kutusunu (varsayılan işaretli olamaz) zorunlu kılar. Çerez onayı GDPR/KVKK uyumlu, kategorize edilmiş, reddetme seçeneği 'Kabul et' ile aynı görünürlükte olmalıdır. Erişilebilirlik kamu kurumlarında TS EN 301 549 ile zorunlu; özel sektörde de finans, sağlık ve eğitim sektörlerinde genişliyor. E-ticarette ayrıca mesafeli satış sözleşmesi, ön bilgilendirme formu ve iade hakkı sayfada net konumlandırılmalı. Telif tarafında stok görsel lisansları, font lisansları ve 3rd-party kütüphane lisansları (MIT, Apache, GPL) takip edilmeli. Sürdürülebilirlik açısından websitecarbon.com ile karbon ayak izini ölçebilir; az JavaScript, optimize görsel ve yeşil enerjili hosting ile düşürebilirsiniz.

Tek Sayfa Anatomisi: Anasayfa Örneği

Tipik bir SaaS anasayfasının üst-alt akışı (her bölüm 60-120 ekran yüksekliği):

• 1. Header — Logo, ana menü, secondary nav (giriş/kayıt). Sticky veya scroll'da gizlenen.
• 2. Hero — H1 + alt metin + birincil CTA + ikincil CTA + hero görseli/animasyon.
• 3. Sosyal kanıt — 'Bu firmalar bize güveniyor' logo şeridi.
• 4. Value props — 3 sütunlu özet (icon + başlık + 1-2 cümle açıklama).
• 5. Feature blocks — Görsel + metin alternatif düzeni, her özelliği derinlemesine.
• 6. Sosyal kanıt II — Müşteri testimonial, vaka çalışması, rating.
• 7. Pricing — Şeffaf fiyat tablosu, popüler plan vurgulu.
• 8. FAQ — Schema FAQ markup'lı, accordion.
• 9. Final CTA — Tekrar dönüşüm fırsatı, daha güçlü vaat.
• 10. Footer — Sitemap özet, sosyal, yasal, abone formu.

Bu yapı standart; tartışılmaz gerçek değil ama 'ne göstereceğimi bilmiyorum'dan iyi başlangıç. Kendi pazarınız ve kullanıcınızın alışkanlığına göre sırayı değiştirin.

İleri Teknikler: Container Queries, Subgrid, View Transitions

2026'nın CSS yeniliklerinin tasarım pratiğine etkisi büyük. Container queries bileşeni media query'den kurtarır; aynı kart farklı konteynerlerde farklı düzen alır. Subgrid nested grid'lerin ata grid'in çizgilerine hizalanmasını sağlar — tipografi hizalamada devrim. View Transitions API sayfalar arası geçişlerde native, yumuşak animasyon.

/* View Transition — sayfalar arası geçiş */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
 animation-duration: 250ms;
 animation-timing-function: var(--ease-out);
}

/* Subgrid — child grid, parent'in kolonlarına yapışır */
.product-card {
 display: grid;
 grid-template-rows: subgrid;
 grid-row: span 4;
}

/* Anchor positioning — modern dropdown */
.menu-trigger { anchor-name: --menu-anchor; }
.menu-popup {
 position-anchor: --menu-anchor;
 position-area: bottom span-right;
 position-try: flip-block, flip-inline;
}

Kaynaklar ve Daha Fazla Okuma

• Smashing Magazine — Web tasarım derinlemesine yazılar.
• Nielsen Norman Group — Kullanılabilirlik araştırmaları.
• Refactoring UI — Pratik tasarım kitap ve kursu.
• web.dev — Performans ve web platform standartları.
• MDN — HTML/CSS/JS referans.
• WCAG 2.2 Quick Reference — Erişilebilirlik kuralları.
• Design Systems Repo — Tasarım sistem örnekleri.
• Utopia.fyi — Fluid type ve space hesaplayıcı.
• Awwwards — Yaratıcı sayfa örnekleri.

İlgili Yazılar

• Sayfa Hızı ve Core Web Vitals 2026 — LCP, INP, CLS detaylı.
• Teknik SEO Kontrol Listesi 2026 — İndekslenebilirlik, schema, hız.
• Site Optimizasyonu A'dan Z'ye — Frontend, backend, DB, CDN.
• Tailwind CSS Sıfırdan — Utility-first ile modern UI.
• Tailwind CSS v4 Yenilikleri — Oxide, CSS-first config.
• React ile Modern Web Uygulaması — Component, state, ekosistem.
• Next.js 15 App Router — Server components, streaming.
• Vue 3 Composition API — Reactivity, refs, composables.
• WordPress SEO Plugin Önerileri — Yoast, Rank Math, AIOSEO.
• E-ticaret SEO Rehberi — Ürün, kategori, schema.