WEB SİTESİ TASARIMI

Tim Berners-Lee 1991'de ilk web sayfasını yayınladığında, sayfa düz metinden ve birkaç bağlantıdan ibaretti. O günden bugüne web sitesi tasarımı; tablo tabanlı düzenlerden CSS grid'lere, masaüstü odaklı sabit genişliklerden mobile-first responsive yapılara, monolitik PHP sistemlerinden statik üretici ve CDN üzerinde çalışan Jamstack mimarilerine kadar köklü bir dönüşüm geçirdi. Bu yazıda web tasarımının ne olduğunu, hangi katmanlardan oluştuğunu ve nereden nereye geldiğini birlikte ele alıyoruz.

Web Sitesi Tasarımı Tam Olarak Ne Anlama Geliyor?

Web sitesi tasarımı, bir internet sayfasının görsel düzeni, kullanıcı akışı ve teknik altyapısının birlikte planlanıp uygulanması sürecidir. Sadece renk ve yazı tipi seçmek değildir; bilgi mimarisi, erişilebilirlik, performans ve cihaz uyumluluğu da bu kapsama girer. İyi bir tasarımda ziyaretçi aradığı bilgiye en az tıklamayla ulaşır, sayfa hızlı yüklenir ve her ekran boyutunda okunabilir.

Genel olarak tasarım süreci üç katman üzerinde ilerler: Konuyu daha derinlemesine incelemek isteyenler için konunun temel referansı faydalı bir başlangıç noktasıdır.

• Görsel katman: Tipografi, renk paleti, boşluk yönetimi, ikon ve illüstrasyon dili.
• Etkileşim katmanı: Menü davranışı, form akışları, mikro animasyonlar, geri bildirim mesajları.
• Teknik katman: HTML semantiği, CSS yapısı, JavaScript performansı, sunucu ve barındırma tercihleri.

Statik HTML Dönemi: Tablo Tabanlı Düzenler

1990'ların ikinci yarısında siteler tek tek yazılmış HTML dosyalarından oluşurdu. CSS henüz olgunlaşmadığı için sayfa düzeni `<table>` etiketleriyle kurulurdu — hücreler iç içe yerleştirilerek sütunlar oluşturulurdu. Bu yöntem ekran genişliği değiştiğinde bozulur, sayfa boyutu büyür ve modem üzerinden yüklenmesi dakikalar alırdı.

Bu dönemin temel sınırları şunlardı:

• Tek bir ekran çözünürlüğü (genellikle 800x600 veya 1024x768) hedeflenirdi.
• Her sayfa elle güncellenirdi, içerik yönetim sistemi kavramı yoktu.
• Sunum (görsel) ile yapı (HTML) iç içeydi, bakım maliyeti yüksekti.

CSS Devrimi ve Ayrıştırılmış Katmanlar

2000'lerin başında CSS yaygınlaştıkça yapı (HTML) ile sunum (CSS) birbirinden ayrıldı. `div` tabanlı düzenler, float'lu sütunlar derken sayfalar daha hafif, daha bakımı kolay hale geldi. CSS Zen Garden projesi aynı HTML üzerinde sadece CSS değiştirerek yüzlerce farklı görünüm üretilebileceğini göstererek topluluğun yönünü değiştirdi.

Bu evrede ortaya çıkan kavramlar bugün hâlâ temel oluşturuyor: kutu modeli, semantik etiketler, dış tipografi (web fonts), grid sistemleri. HTML ve CSS'in temel mantığını öğrenmek için HTML CSS eğitimi içeriğinden yararlanabilirsiniz.

Mobile-First ve Responsive Tasarım

2010'da Ethan Marcotte "Responsive Web Design" makalesini yayınladığında akıllı telefon kullanımı patlama yapıyordu. Tek bir HTML dosyasının; medya sorguları, akışkan ızgaralar ve esnek görsellerle her ekran boyutuna uyum sağlaması fikri hızla standart oldu. Kısa süre sonra Google "mobile-first indexing" yaklaşımına geçince tartışma kapandı: artık tasarım küçük ekrandan başlıyordu.

Modern responsive tasarımın temel araçları şunlardır:

1. Medya sorguları: `@media (min-width: 768px)` gibi kurallarla katmanlı stil tanımı.
2. Esnek ızgaralar: CSS Grid ve Flexbox ile orantısal yerleşim.
3. Esnek görseller: `srcset` ve `picture` etiketleriyle çözünürlüğe göre kaynak seçimi.
4. Akışkan tipografi: `clamp()` fonksiyonu ile minimum-maksimum sınırlı yazı boyutu.

Jamstack: Statik Dosyalar, Dinamik Deneyim

Jamstack (JavaScript, API, Markup) mimarisi son yıllarda ön plana çıktı. Fikir basit ama güçlü: sayfalar derleme zamanında statik HTML'e dönüştürülür, CDN üzerinden milisaniyeler içinde sunulur, dinamik kısımlar ise tarayıcıdan API'lere konuşur. Bu yaklaşım hem performans hem güvenlik açısından geleneksel sunucu tarafı render'a göre belirgin avantaj sağlar.

Jamstack'in tipik bileşenleri:

• Statik üretici: Next.js, Astro, Hugo, Eleventy gibi araçlar.
• Headless CMS: İçerik bir API arkasında, sunum katmanından bağımsız.
• CDN dağıtımı: Netlify, Vercel, Cloudflare Pages gibi platformlarda otomatik yayın.
• Sunucusuz fonksiyonlar: Form gönderimi, kimlik doğrulama gibi işlemler için anlık çalışan kod parçaları.

İyi Bir Web Tasarımını Belirleyen Ölçütler

Tasarımın başarılı sayılması için yalnızca güzel görünmesi yetmez. Ölçülebilir kriterler vardır: Core Web Vitals (LCP, INP, CLS) sayfanın algılanan hızını gösterir; WCAG erişilebilirlik kontrol listesi görme veya hareket kısıtlaması olan kullanıcıların da siteyi kullanabilmesini sağlar; semantik HTML hem arama motorları hem ekran okuyucular için anlamlıdır.

Tasarım kararlarınızı şu sorulara göre kalibre etmek genellikle iyi sonuç verir:

• Sayfa ilk 2.5 saniyede ana içeriği gösterebiliyor mu?
• 320 piksel genişlikte tüm fonksiyonlar erişilebilir mi?
• Klavye ile her etkileşime ulaşılabiliyor mu?
• Renk kontrastı en az 4.5:1 oranında mı?

Tasarımcının Bilmesi Gereken Temel Beceriler

Web sitesi tasarımcısı bugün yalnızca Photoshop ya da Figma'da maket çizen kişi değildir. Tarayıcının nasıl çalıştığını, CSS'in render ağacını nasıl etkilediğini, JavaScript'in sayfa yüklemesini nasıl bloklayabileceğini anlamak gerekir. Yazılım tarafında temel HTML ve CSS yetkinliği için HTML ve CSS eğitim içeriklerini inceleyebilirsiniz.

Tablo tabanlı eski sayfalardan bugünün edge fonksiyonlarıyla beslenen statik sitelerine uzanan bu otuz yıllık yolculuk, web tasarımının aslında sürekli yeniden tanımlanan bir alan olduğunu gösteriyor. Yarın hangi araç çıkarsa çıksın, değişmeyen şey şu: kullanıcı hızlı, erişilebilir ve anlaşılır bir sayfa bekliyor. Tasarımcının işi de bu beklentiyi her cihazda karşılayabilmek.