Web Tasarım Süreci Nasıl İlerler? 6 Aşamalı Uygulama Rehberi

Web tasarım süreci yalnız görsel hazırlayıp kodlamaya geçmekten oluşmaz. İş hedefi, içerik yapısı, kullanıcı akışı, arayüz, geliştirme, kalite kontrol ve yayın sorumlulukları birbirine bağlıdır. Bu adımların sırası ve kapsamı proje tipine göre değişse de her aşamanın teslimi ve onay ölçütü baştan belirlenmelidir.

Aşağıda web tasarımının adım adım nasıl yapıldığını, her aşamanın ne üretmesi gerektiğini ve süreci geciktiren yaygın sorunları anlatıyoruz.

Web Tasarım Süreci Genel Bakış

Web tasarım süreci çoğunlukla altı ana aşamada yönetilir:

Aşama	Temel teslim	Sonraki aşamaya geçiş ölçütü
1. Keşif ve strateji	Hedef, kullanıcı, kapsam ve başarı ölçütleri	Brief ve sayfa kapsamı onaylı
2. UX ve bilgi mimarisi	Site haritası, kullanıcı akışı ve wireframe	Kritik görevler taslakta tamamlanabiliyor
3. UI tasarım	Görsel sistem, bileşenler ve önemli ekranlar	İçerik ve ekran durumları onaylı
4. Geliştirme	Çalışan, içerik girilebilir ve entegre site	Kabul ölçütleri uygulanmış
5. Test ve optimizasyon	Hata listesi, erişilebilirlik, performans ve SEO kontrolleri	Kritik hata kalmamış
6. Yayın ve bakım	Canlı site, yönlendirmeler, ölçüm ve sorumluluk planı	İzleme ve geri dönüş planı aktif

Süreyi yalnız sayfa sayısı belirlemez. İçeriğin hazır olup olmaması, özel entegrasyonlar, karar verici sayısı, revizyon akışı ve mevcut siteden taşınacak URL’ler çoğu projede daha belirleyicidir.

Web Tasarımı ile Web Kodlama Arasındaki Fark

“Web tasarımı” çoğu zaman hem arayüzü çizmek hem de kodlamak anlamında kullanılır. Oysa bunlar farklı uzmanlık ve teslimlerdir; yukarıdaki tabloda 2. ve 3. aşama tasarımı, 4. aşama kodlamayı kapsar.

Kapsam	Web tasarımı (UX/UI)	Web kodlama (frontend geliştirme)
Ana odak	Bilgi mimarisi, kullanıcı akışı, renk, tipografi, grid ve bileşen durumları	Semantik HTML, CSS, JavaScript etkileşimleri, CMS ve API bağlantıları
Araçlar	Figma benzeri arayüz ve prototip araçları	Kod editörü, Git, framework (Astro, React vb.) ve tarayıcı geliştirici araçları
Çıktı	Wireframe, tıklanabilir prototip ve tasarım sistemi	Çalışan sayfalar, optimize edilmiş görseller ve yayına hazır kod
Etkilediği alan	Anlaşılırlık, güven ve dönüşüm akışı	Yükleme hızı, Core Web Vitals, erişilebilirlik ve taranabilir HTML

İki rol aynı kişide birleşebilir. Önemli olan, tasarım teslimindeki boş, hata, yüklenme ve mobil durumlarının geliştirmeye eksiksiz aktarılması ve kodlanan sayfanın tasarımla karşılaştırılarak kabul edilmesidir.

Aşama 1: Discovery ve Strateji

Brief Toplama

İlk adım: müşteriyi ve markayı tam anlamak.

• İş modeli ve gelir kaynakları
• Hedefler (satış, lead, marka inşası)
• Hedef kitle (demografi, davranış)
• Marka değerleri ve kişiliği
• Rekabet analizi
• Mevcut site durumu (varsa)

Hedef ve KPI Belirleme

• Trafik hedefleri
• Dönüşüm oranı hedefleri
• SEO hedefleri (anahtar kelimeler)
• Kullanıcı deneyimi metrikleri

İçerik Stratejisi

• Sayfa yapısı (site haritası)
• İçerik tonalitesi
• SEO odaklı anahtar kelime planlaması

Teknik Strateji

• Hangi platform (WordPress, Webflow, özel)
• Hosting altyapısı
• Üçüncü parti entegrasyonlar
• Gelecek ölçeklenebilirlik

Aşama 2: UX Tasarım ve Wireframe

Bilgi Mimarisi

Sayfaların nasıl organize edileceği, navigasyon yapısı, kategori hiyerarşisi.

Kullanıcı Yolculuğu (User Journey)

Hedef kitlenin siteye giriş noktasından dönüşüme kadar olan yolu haritalanır.

Wireframe Oluşturma

Düşük çözünürlüklü, sadece yapı ve içerik akışı odaklı eskizler. Renk ve görsel olmaz, sadece blok düzeni.

Araçlar: Figma, Sketch, Whimsical, Balsamiq

Prototip

Wireframe’in tıklanabilir hale getirilmiş hali. Akış test edilir.

Aşama 3: UI Tasarım

Moodboard ve Stil Rehberi

• Renk paleti (primary, secondary, accent)
• Tipografi seçimi (en fazla 2-3 font)
• İkon stili
• Görsel dil
• Boş alan kullanım kuralları

Bileşen Kütüphanesi Oluşturma

• Butonlar (primary, secondary, ghost)
• Form elemanları
• Kart bileşenleri
• Gezinme menüsü
• Alt bilgi (footer)
• Modal/popup’lar

Sayfa Tasarımları

Tüm önemli sayfaların yüksek çözünürlüklü tasarımları.

• Ana sayfa (varyasyonları)
• Kategori sayfaları
• Detay sayfaları
• Form sayfaları
• 404 sayfası

Responsive Tasarım

Masaüstü, tablet ve mobil için ayrı tasarım çıktıları; breakpoint kararlarının mantığı mobil uyumlu web tasarım rehberinde.

Onaylama Süreci

Müşteri ile 2-3 revizyon turu. Tasarım onaylanmadan kodlamaya geçilmez.

Aşama 4: Geliştirme (Development)

Front-end Geliştirme

Tasarımın HTML, CSS, JavaScript’e dönüştürülmesi.

Modern stack:

• HTML5 semantik işaretleme
• CSS (Tailwind veya özel)
• JavaScript (Vanilla veya React/Vue/Astro)
• Derleme araçları (Vite, Webpack)

Back-end Geliştirme

Veri yönetimi, kullanıcı sistemi, form işleme, ödeme entegrasyonu.

Yaygın teknolojiler:

• WordPress (PHP)
• Node.js + Express
• Python (Django, FastAPI)
• Headless CMS entegrasyonu (Strapi, Sanity)

CMS Entegrasyonu

İçerik yönetim sistemi kurulumu ve özelleştirilmesi; klasik CMS ile headless ayrımını bu yazıda anlattık.

Üçüncü Parti Entegrasyonlar

• Google Analytics 4
• Google Tag Manager
• CRM (HubSpot, Salesforce)
• E-posta pazarlama (Mailchimp, ActiveCampaign)
• Ödeme sistemi (iyzico, Stripe)
• Canlı sohbet (Intercom, Crisp)

Performans Optimizasyonu

• Görsel optimizasyonu (WebP, AVIF)
• Lazy loading
• Code splitting
• Critical CSS
• CDN kullanımı

Aşama 5: Test ve Optimizasyon

Cross-browser Test

Destek kapsamındaki Chrome, Safari, Firefox ve Edge sürümlerinde kritik sayfalar ile kullanıcı akışları test edilir.

Cross-device Test

iPhone, Android, iPad ve masaüstünde, farklı ekran boyutlarında test.

Performans Testi

• Google PageSpeed Insights
• GTmetrix
• WebPageTest
• Core Web Vitals skorları

Erişilebilirlik (Accessibility) Testi

• Proje hedefi olarak WCAG 2.2 başarı ölçütlerinin değerlendirilmesi
• Ekran okuyucu testi
• Klavye ile gezinme
• Renk kontrastı

SEO Teknik Kontrol

• sitemap.xml
• robots.txt
• Yapılandırılmış veri (Schema.org)
• Meta etiketler
• Canonical URL’ler

Yayın öncesi denetimi teknik SEO kontrol listesiyle yapın.

Form ve Fonksiyon Testi

Tüm formlar, butonlar, ödeme akışları test edilir.

Güvenlik Testi

SSL/TLS, yetkilendirme, girdi doğrulama, bağımlılıklar ve uygulamaya özgü riskler kontrol edilir. OWASP Top 10 farkındalık için başlangıç çerçevesidir; tek başına eksiksiz güvenlik testi değildir. Tehdit modelinin diğer parçaları web sitesi güvenliği yazısında ele alınıyor.

Aşama 6: Yayın ve Sonrası

Yayın Öncesi Kontroller

• DNS ayarları
• SSL sertifikası
• Yedekleme sistemi
• 301 yönlendirmeleri (eski siteden geçiş)
• Analytics entegrasyonu

Soft Launch

Önce sınırlı kullanıcıya, sonra genele açma.

Lansman ve Tanıtım

• Sosyal medya duyuruları
• E-posta bülteni
• PR kampanyası (büyük markalar için)
• Search Console’a site haritası gönderimi

Lansman Sonrası

• İlk günlerde hata kayıtları, form teslimleri, yönlendirmeler ve ölçüm verisi izlenir.
• Yeterli kullanıcı verisi biriktiğinde içerik ve kullanılabilirlik sorunları önceliklendirilir.
• A/B test yalnız yeterli trafik ve açık bir hipotez varsa planlanır.
• Yeni ihtiyaçlar bakım listesi ile ürün geliştirme listesi arasında ayrıştırılır.

Sürekli Bakım

Yayın sonrası ritmin nasıl kurulduğu site bakım yazısında özetli.

Web Tasarım Süresi Nasıl Tahmin Edilir?

Sağlıklı süre tahmini, yalnız “kurumsal site” veya “e-ticaret” etiketiyle yapılamaz. Önce aşağıdaki değişkenler netleştirilmelidir:

Süreyi etkileyen değişken	Sorulması gereken soru
Sayfa ve şablon sayısı	Kaç benzersiz ekran ve içerik tipi tasarlanacak?
İçerik hazırlığı	Metin, çeviri, fotoğraf ve ürün verisinin sorumlusu kim?
Entegrasyon	CRM, ödeme, üyelik, rezervasyon veya özel API var mı?
Onay yapısı	Kim karar verecek ve geri bildirim hangi sürede birleşecek?
Taşıma	Eski URL, medya, kullanıcı veya ürün verisi aktarılacak mı?
Kalite hedefi	Erişilebilirlik, performans, güvenlik ve tarayıcı kapsamı nedir?

Takvim hazırlanırken her aşamaya teslim, sorumlu, bağımlılık ve kabul ölçütü yazın. Teklifte yalnız bitiş tarihi varsa ama içerik ve onay sorumluluğu tanımlanmamışsa tahmin güvenilir değildir.

Web Tasarım Sürecinde Sık Yapılan Hatalar

1. Brief Aşamasını Atlamak

“Hızlı yapalım” diyerek strateji aşamasına yeterli zaman verilmemesi.

2. Müşteri ile Sürekli İletişim Kurmamak

Haftalık check-in olmadan sonda büyük revizyon talebi gelir.

3. Mobil Tasarımı Sonradan Düşünmek

Mobil ekranlarda içerik önceliği, menü, form, dokunma alanları ve performans en baştan değerlendirilmelidir. Google, dizine ekleme ve sıralamada sitenin mobil sürümündeki içeriği kullanır; responsive tasarımı uygulaması ve bakımı kolay bir yaklaşım olarak önerir.

4. SEO’yu Geliştirmenin Sonuna Bırakmak

SEO sıfırdan tasarımın parçası olmalı; içerik tarafının kurgusunu içerik SEO yazısı anlatır.

5. Test Aşamasını Hızlandırmak

Test yetersiz yapılırsa hatalar lansmandan sonra ziyaretçinin karşısına çıkar.

6. İçerik Hazır Olmadan Geliştirmeye Başlamak

Lorem ipsum ile yapılan tasarımlar gerçek içerikle bozulabilir.

7. Performans Optimizasyonunu İhmal Etmek

Sona bırakılırsa düzeltmek çok zor olur.

8. Yayın Sonrası Bakımı Düşünmemek

Sitenin yayına alınması sürecin sonu değildir. Güncelleme, yedekleme, güvenlik, içerik sahipliği ve hata yanıt sorumluluğu tanımlanmazsa kalite zamanla düşer.

Web Tasarım Teklifinde Hangi Kalemler Ayrılmalı?

Evrensel bir bütçe yüzdesi yoktur. Hazır altyapı kullanılan içerik sitesinde tasarım ve içerik ağırlığı artabilir; özel entegrasyonlu projede geliştirme ve test daha büyük pay alabilir. Teklifte en az şu kalemleri ayrı görün:

• keşif, bilgi mimarisi ve içerik kapsamı
• UX/UI tasarım teslimleri ve revizyon sınırı
• frontend, CMS ve özel entegrasyon geliştirmeleri
• içerik girişi veya veri taşıma sorumluluğu
• test kapsamı, tarayıcı/cihaz desteği ve hata sınıfları
• yayın, yönlendirme, ölçüm ve eğitim teslimleri
• garanti dönemi ile devam eden bakımın ayrımı

Güncel fiyatı belirleyen kapsam kalemleri web tasarım fiyatları rehberinde daha ayrıntılı açıklanıyor.

Sıkça Sorulan Sorular

Web tasarım nasıl yapılır, ana adımları neler?

Web tasarım süreci altı ana aşamada yürütülebilir: keşif ve strateji, UX/bilgi mimarisi, UI tasarım, geliştirme, test ve optimizasyon, son olarak yayın ve bakım. Her aşamada teslim ile kabul ölçütü yazılmalı; içerik, entegrasyon ve onay bağımlılıkları takvime eklenmelidir.

Web tasarım yapmak ne kadar sürer?

Süre; benzersiz ekran sayısı, içerik hazırlığı, entegrasyonlar, veri taşıma, onay veren kişi sayısı ve kalite hedeflerine bağlıdır. Bu değişkenler bilinmeden proje türüne bakarak kesin hafta vermek yanıltıcı olur.

Web tasarım yapmak için hangi programlar gerekli?

Tasarım için Figma benzeri arayüz araçları; geliştirme için kod editörü, tarayıcı geliştirici araçları ve sürüm kontrolü kullanılabilir. WordPress projelerinde yerel geliştirme ortamı, cihaz kapsamı geniş projelerde gerçek cihaz veya tarayıcı test hizmetleri gerekebilir. Araç ekosistemini web tasarım programları yazısında karşılaştırdık.

Wireframe yapmak şart mı?

Her proje için aynı ayrıntıda wireframe gerekmez. Ancak karmaşık bilgi mimarisi, çok adımlı form veya farklı kullanıcı rolleri varsa akışları düşük maliyetle doğrulamak için güçlü bir araçtır. Basit bir sayfada kâğıt eskizi veya içerik sıralaması yeterli olabilir.

Web tasarım için brief nasıl alınır?

İyi bir brief sorusu listesi: (1) Şirketinizin işi nedir, (2) Hedef kitleniz kim, (3) Sitenizin ana hedefi nedir (satış, lead, marka inşası), (4) Rekabetçi siteler hangileri (beğenilenler ve beğenilmeyenler), (5) Marka kimliğiniz var mı, (6) Bütçe ve zaman çizelgesi, (7) Teknik gereksinimler, (8) Üçüncü parti entegrasyonlar.

Web tasarımda mobile-first ne demek?

Mobile-first, en dar ekranda içerik ve işlev önceliklerini belirleyip tasarımı daha geniş ekranlara doğru geliştirme yaklaşımıdır. Her proje aynı tasarım sırasını izlemek zorunda değildir; önemli olan mobil sürümde ana içerik, metadata, yapılandırılmış veri ve kritik işlevlerin eksilmemesidir. Google’ın mobil öncelikli dizine ekleme rehberi bu eşdeğerliği özellikle vurgular.

Web tasarım yaparken SEO ne zaman düşünülmeli?

Sıfırdan, ilk gün. SEO sonradan eklenecek bir özellik değil, tasarım kararlarının her birini etkileyen temel disiplindir. URL yapısı, sayfa yükleme hızı, semantik HTML, başlık hiyerarşisi ve yapılandırılmış veri tasarım sürecinin başından itibaren planlanmalı.

İçerik tasarımdan önce mi sonra mı hazırlanmalı?

İçerik stratejisi ve gerçekçi örnek içerik tasarımdan önce hazırlanmalıdır; nihai metin ile UI çalışması paralel ilerleyebilir. Tasarım kararlarını yalnız lorem ipsum ile vermek başlık uzunluğu, tablo, hata mesajı ve görsel oranı gibi gerçek durumları gizler.

Web tasarım sonrası ne yapılmalı?

Beş ana aktivite: (1) Sürekli performans takibi (Google Analytics 4, Search Console), (2) A/B testler (CTA, başlık, sayfa düzeni), (3) Düzenli içerik üretimi (blog, sayfa güncellemeleri), (4) Güvenlik ve teknik bakım, (5) SEO optimizasyonu. Site yayını başlangıç, asıl iş sonra başlar.

Özet

Web tasarım süreci; strateji, kullanıcı deneyimi, görsel tasarım, geliştirme, test ve yayın olarak altı ana aşamada yönetilebilir. Küçük projelerde bazı aşamalar birleşebilir; önemli olan hedefin, teslimin, sorumlunun ve kabul ölçütünün kaybolmamasıdır.

Projenizin tasarım ve geliştirme kapsamını çıkarmak için kurumsal web sitesi hizmetimizi inceleyebilir, web projesi formundan ihtiyaçlarınızı paylaşabilirsiniz.