Modern Web Sitesi Tasarımında Dikkat Edilmesi Gerekenler

Web tasarımı, sadece güzel görseller oluşturmaktan çok daha fazlasıdır. Modern bir web sitesi; hızlı, erişilebilir, kullanıcı dostu ve amacına uygun olmalıdır. Bu kapsamlı rehberde, 2026'da profesyonel bir web sitesi tasarlarken dikkat etmeniz gereken tüm önemli noktaları bulacaksınız.

1. Kullanıcı Deneyimi (UX) Öncelikli Tasarım

Kullanıcı Yolculuğunu Planlayın

Tasarıma başlamadan önce, kullanıcılarınızın sitenizde nasıl gezineceğini planlamalısınız:

Kullanıcı Persona Oluşturma

Hedef kitlenizi tanımlayın:

• Demografik bilgiler: Yaş, cinsiyet, lokasyon, eğitim seviyesi
• Teknolojik yeterlilik: Acemi, orta, ileri seviye
• Hedefler: Siteden ne bekliyor?
• Problemler: Hangi sorunları çözüyor?

Şanlıurfa için Örnek Persona:

İsim: Mehmet Bey
Yaş: 42
Meslek: Restoran Sahibi
Teknoloji: Orta seviye (sosyal medya kullanıyor)
Hedef: Online sipariş sistemi kurmak
Sorun: Teknik bilgi eksikliği, bütçe kaygısı

Kullanıcı Akış Diyagramları

Ziyaretçilerin sitenizde izleyeceği yolları haritalayin:

Ana Sayfa → Hizmetler → Fiyatlandırma → İletişim → Dönüşüm
         ↓
      Blog → Makale → İlgili Hizmet → İletişim

İyi UX'in Temel Prensipleri

1. Basitlik

Az, daha iyidir:

• Gereksiz öğeleri kaldırın
• Her sayfada tek bir ana eylem
• Net ve anlaşılır mesajlar
• Minimum tıklama ile hedefe ulaşma

Kötü Örnek:

Ana sayfa: 10 farklı buton, 5 form, 8 farklı yazı tipi

İyi Örnek:

Ana sayfa: Açık başlık, kısa açıklama, 1 ana CTA butonu

2. Tutarlılık

Her Şey Tutarlı Olmalı:

• Renk paleti
• Tipografi
• Buton stilleri
• İkon seti
• Boşluk kullanımı
• Navigasyon yapısı

3. Geri Bildirim

Kullanıcı her eylemde ne olduğunu anlamalı:

• Form gönderimi: Başarı/hata mesajı
• Yükleme: Loading göstergesi
• Hover efektleri: İnteraktif öğeler
• Doğrulama: Anlık form doğrulama

4. Hata Önleme ve Yönetimi

Hataları Önleyin:

• Otomatik kaydetme
• Onay diyalogları (silme işlemleri için)
• Input validasyonu
• Yardım metinleri

Hataları Yönetin:

• Anlaşılır hata mesajları
• Sorunu nasıl çözeceğine dair yönlendirme
• Friendly dil kullanımı

2. Görsel Tasarım Prensipleri

Renk Teorisi ve Psikolojisi

Renk Seçimi

Psikolojik Etkiler:

• Mavi: Güven, profesyonellik (bankalar, kurumsal)
• Yeşil: Büyüme, sağlık, doğa (sağlık, çevre)
• Kırmızı: Enerji, aciliyet, dikkat (e-ticaret, kampanyalar)
• Turuncu: Arkadaşlık, iyimserlik (yaratıcı ajanslar)
• Mor: Lüks, yaratıcılık (premium markalar)
• Siyah: Prestij, sofistikasyon (lüks markalar)

Renk Paleti Oluşturma

60-30-10 Kuralı:

• %60: Ana renk (arka plan, büyük alanlar)
• %30: İkincil renk (vurgular, alt bölümler)
• %10: Vurgu rengi (CTA butonları, önemli öğeler)

Örnek Palet:

/* Ana Renk */
--primary: #2563eb (mavi)

/* İkincil Renk */
--secondary: #64748b (gri-mavi)

/* Vurgu Rengi */
--accent: #f59e0b (turuncu)

/* Nötr Renkler */
--background: #ffffff
--text: #1e293b
--text-light: #64748b

Erişilebilirlik ve Kontrast

WCAG 2.1 Standartları:

• Normal metin: En az 4.5:1 kontrast oranı
• Büyük metin (18pt+): En az 3:1 kontrast oranı

Test Araçları:

• WebAIM Contrast Checker
• Chrome DevTools Lighthouse
• WAVE Browser Extension

Tipografi

Font Seçimi

Web Safe Font Kombinasyonları:

Kombinasyon 1: Modern & Temiz

/* Başlıklar */
font-family: 'Inter', sans-serif;
/* Gövde Metni */
font-family: 'Inter', sans-serif;

Kombinasyon 2: Profesyonel & Kurumsal

/* Başlıklar */
font-family: 'Montserrat', sans-serif;
/* Gövde Metni */
font-family: 'Open Sans', sans-serif;

Kombinasyon 3: Yaratıcı & Dinamik

/* Başlıklar */
font-family: 'Poppins', sans-serif;
/* Gövde Metni */
font-family: 'Lato', sans-serif;

Tipografi Hiyerarşisi

Ölçek Sistemi:

/* Başlıklar */
h1: 3rem (48px)
h2: 2.25rem (36px)
h3: 1.875rem (30px)
h4: 1.5rem (24px)
h5: 1.25rem (20px)
h6: 1rem (16px)

/* Gövde */
body: 1rem (16px)
small: 0.875rem (14px)

Satır Yüksekliği:

• Başlıklar: 1.2 - 1.3
• Gövde metni: 1.5 - 1.7
• Kısa metinler: 1.3 - 1.5

Okunabilirlik

Optimal Satır Uzunluğu:

• İdeal: 45-75 karakter
• Maksimum: 90 karakter
• Mobil: 35-45 karakter

Paragraf Boşlukları:

p {
  margin-bottom: 1.5em; /* Paragraflar arası */
  line-height: 1.6;     /* Satırlar arası */
}

Beyaz Alan (White Space)

Neden Önemli?

• Okunabilirliği artırır
• Öğelere odaklanmayı sağlar
• Premium his verir
• Görsel hiyerarşi oluşturur

Beyaz Alan Stratejileri

Mikro Boşluklar:

• Buton içi padding
• Form elemanları arası boşluk
• Liste öğeleri arası boşluk

Makro Boşluklar:

• Bölümler arası boşluk
• İçerik blokları arası boşluk
• Sayfa kenarları (margins)

Örnek:

/* Mikro */
.button {
  padding: 12px 24px;
  gap: 8px;
}

/* Makro */
.section {
  padding: 80px 0;
  margin-bottom: 120px;
}

3. Responsive (Duyarlı) Tasarım

Mobil Öncelikli Yaklaşım (Mobile-First)

2026'da web trafiğinin %70'i mobil cihazlardan geliyor. Tasarımınızı mobil ekranda başlatın, sonra büyük ekranlara uyarlayın.

Breakpoint Stratejisi

/* Mobil (varsayılan) */
.container {
  padding: 20px;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    padding: 40px;
  }
}

/* Laptop */
@media (min-width: 1024px) {
  .container {
    padding: 60px;
    max-width: 1200px;
  }
}

/* Desktop */
@media (min-width: 1440px) {
  .container {
    padding: 80px;
    max-width: 1400px;
  }
}

Responsive İçerik Stratejileri

1. Fluid Typography

Ekran boyutuna göre otomatik ölçeklenen yazı boyutları:

h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
}

body {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
}

2. Responsive Images

<picture>
  <source 
    media="(min-width: 1024px)" 
    srcset="hero-desktop.webp"
  />
  <source 
    media="(min-width: 768px)" 
    srcset="hero-tablet.webp"
  />
  <img 
    src="hero-mobile.webp" 
    alt="Hero Image"
    loading="lazy"
  />
</picture>

3. Flexible Grids

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

Touch-Friendly Design

Minimum Dokunma Hedefi:

• Butonlar: 44x44 piksel
• Linkler: 44x44 piksel (padding ile)
• Form elemanları: 44+ piksel yükseklik

Boşluk:

• Dokunma hedefleri arası minimum 8px boşluk

4. Performans Optimizasyonu

Neden Performans Önemli?

İstatistikler:

• Sayfa yüklenme 1 saniye gecikirse, dönüşümler %7 düşer
• 3 saniyeden fazla yükleme süresi, %53 hemen çıkma oranı
• Google, yavaş siteleri sıralamalarda cezalandırır

Core Web Vitals

Google'ın resmi performans metrikleri:

1. Largest Contentful Paint (LCP)

Ne ölçer: Ana içeriğin yüklenme süresi Hedef: < 2.5 saniye

İyileştirme:

• Image optimization
• Server response time
• Render-blocking resources

2. First Input Delay (FID)

Ne ölçer: İlk etkileşime yanıt süresi Hedef: < 100 milisaniye

İyileştirme:

• JavaScript optimizasyonu
• Code splitting
• Web Workers

3. Cumulative Layout Shift (CLS)

Ne ölçer: Görsel kararlılık Hedef: < 0.1

İyileştirme:

• Image/video boyutları tanımlama
• Font loading stratejisi
• Dinamik içerik rezervasyonu

İmage Optimization

Modern Format Kullanımı

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description">
</picture>

Format Karşılaştırması:

• AVIF: %50 daha küçük (en yeni)
• WebP: %30 daha küçük
• JPEG/PNG: Standart

Lazy Loading

<img 
  src="image.jpg" 
  loading="lazy" 
  alt="Description"
/>

Responsive Images

<img 
  srcset="
    image-small.jpg 400w,
    image-medium.jpg 800w,
    image-large.jpg 1200w
  "
  sizes="
    (max-width: 400px) 100vw,
    (max-width: 800px) 50vw,
    33vw
  "
  src="image-medium.jpg"
  alt="Description"
/>

CSS ve JavaScript Optimizasyonu

Critical CSS

Sayfa yüklenirken görünen kısım için gerekli CSS'i inline ekleyin:

<style>
  /* Above-the-fold critical CSS */
  .hero { ... }
  .nav { ... }
</style>

<link rel="stylesheet" href="main.css" media="print" onload="this.media='all'">

JavaScript Defer/Async

<!-- Defer: HTML parse ettikten sonra çalıştır -->
<script src="app.js" defer></script>

<!-- Async: İndirdiğinde hemen çalıştır -->
<script src="analytics.js" async></script>

Caching Stratejileri

# .htaccess
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpg "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
</IfModule>

5. Erişilebilirlik (Accessibility)

WCAG 2.1 Standartları

A Seviyesi (Minimum):

• Tüm görüntülere alt text
• Klavye ile navigasyon
• Yeterli renk kontrastı

AA Seviyesi (Önerilen):

• Gelişmiş kontrast oranları
• Responsive metin boyutlandırma
• Anlamlı link metinleri

AAA Seviyesi (İdeal):

• Maksimum erişilebilirlik
• Sign language desteği
• Gelişmiş kontrast

Semantic HTML

<!-- YANLIŞ -->
<div class="header">
  <div class="nav">...</div>
</div>

<!-- DOĞRU -->
<header>
  <nav>...</nav>
</header>

ARIA Labels

<button aria-label="Menüyü kapat">
  <svg>...</svg>
</button>

<nav aria-label="Ana navigasyon">
  ...
</nav>

Klavye Navigasyonu

Tüm interaktif öğeler klavye ile erişilebilir olmalı:

• Tab: İleri gitme
• Shift+Tab: Geri gitme
• Enter/Space: Aktivasyon
• Esc: Kapatma

Skip to Content

<a href="#main-content" class="skip-link">
  Ana içeriğe geç
</a>

<main id="main-content">
  ...
</main>

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: white;
  padding: 8px;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

6. Modern Tasarım Trendleri (2026)

1. Glassmorphism (Cam Efekti)

.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
}

2. Neumorphism (Yumuşak UI)

.neumorphic {
  background: #e0e0e0;
  box-shadow: 
    20px 20px 60px #bebebe,
    -20px -20px 60px #ffffff;
  border-radius: 20px;
}

3. Dark Mode

:root {
  --bg: #ffffff;
  --text: #000000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1a;
    --text: #ffffff;
  }
}

4. Mikro Animasyonlar

.button {
  transition: all 0.3s ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

5. 3D Elements

.card-3d {
  transform: perspective(1000px) rotateY(10deg);
  transition: transform 0.5s;
}

.card-3d:hover {
  transform: perspective(1000px) rotateY(0deg);
}

7. Güvenlik

SSL/HTTPS

Tüm modern web siteleri HTTPS kullanmalı:

• Google sıralama faktörü
• Kullanıcı güveni
• Veri güvenliği

Güvenli Formlar

<form method="POST" action="/submit">
  <input type="hidden" name="csrf_token" value="...">
  ...
</form>

Content Security Policy

<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; 
               script-src 'self' 'unsafe-inline'; 
               style-src 'self' 'unsafe-inline';">

8. SEO Temel Prensipleri

Meta Tags

<title>Şanlıurfa Web Tasarım | Profesyonel Web Sitesi Hizmetleri</title>
<meta name="description" content="Şanlıurfa'da web tasarım ve dijital çözümler. Modern, hızlı ve SEO uyumlu web siteleri.">
<meta name="keywords" content="şanlıurfa web tasarım, web sitesi, dijital ajans">

<!-- Open Graph -->
<meta property="og:title" content="...">
<meta property="og:description" content="...">
<meta property="og:image" content="...">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="...">

Structured Data

{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "name": "Ana Sayfa",
  "description": "...",
  "url": "https://webtasarim63.com"
}

URL Yapısı

İyi URL:

https://webtasarim63.com/hizmetler/web-tasarim

Kötü URL:

https://webtasarim63.com/page.php?id=123&cat=services

9. Dönüşüm Optimizasyonu (CRO)

Etkili CTA (Call-to-Action)

İyi CTA Özellikleri:

• Eylem odaklı ("Hemen Başla", "Ücretsiz Dene")
• Kontrast renk kullanımı
• Yeterli boyut ve padding
• Beyaz alan ile çevrili

A/B Test Örnekleri:

• "Kayıt Ol" vs "Ücretsiz Deneyin"
• "İletişime Geçin" vs "Ücretsiz Teklif Alın"
• "Satın Al" vs "Hemen Sipariş Ver"

Sosyal Kanıt (Social Proof)

• Müşteri yorumları
• İş ortağı logoları
• Vaka çalışmaları
• İstatistikler ("500+ Mutlu Müşteri")
• Medya bahisleri

Güven Sinyalleri

• SSL sertifikası göstergesi
• İletişim bilgileri (telefon, adres, email)
• Gizlilik politikası
• Hizmet şartları
• Sosyal medya profilleri
• Sertifikalar/ödüller

Sonuç ve Kontrol Listesi

Modern web sitesi tasarımı, birçok unsurun uyumlu çalışmasını gerektirir. İşte proje başlamadan önce kontrol etmeniz gereken liste:

Tasarım Öncesi

• [ ] Kullanıcı persona oluşturuldu
• [ ] Kullanıcı akış diyagramı hazırlandı
• [ ] Wireframe/mockup tasarımı yapıldı
• [ ] Renk paleti belirlendi
• [ ] Tipografi seçildi
• [ ] İçerik stratejisi hazır

Geliştirme Sırasında

• [ ] Responsive tasarım
• [ ] Performans optimize edildi
• [ ] Erişilebilirlik standartları uygulandı
• [ ] SEO temel yapısı kuruldu
• [ ] Güvenlik önlemleri alındı
• [ ] Cross-browser testleri yapıldı

Yayınlama Öncesi

• [ ] Tüm linkler çalışıyor
• [ ] Formlar test edildi
• [ ] Performans skoru > 90
• [ ] Mobil uyumluluk doğrulandı
• [ ] SSL sertifikası kuruldu
• [ ] Analytics entegre edildi
• [ ] Sitemap ve robots.txt eklendi

Yayınlama Sonrası

• [ ] Google Search Console kayıt
• [ ] İlk performans baseline oluşturuldu
• [ ] Kullanıcı testleri yapıldı
• [ ] A/B testler planlandı
• [ ] Düzenli güncellemeler planlandı

Modern web tasarımı sürekli evrim geçiren bir alan. Bu rehberdeki prensipleri uygulayarak, kullanıcı dostu, performanslı ve dönüşüm odaklı bir web sitesi oluşturabilirsiniz.

Webtasarım 63 olarak, Şanlıurfa'daki işletmelere bu standartlarda web siteleri tasarlıyoruz. Profesyonel ve modern bir web sitesi için iletişime geçin.

---

Modern Web Sitenizi Oluşturun: Kullanıcı deneyimi odaklı, hızlı ve dönüşüm optimize edilmiş web sitesi tasarımı için ücretsiz danışmanlık alın.