Zeynep Dandin
Project Manager
4 Kasım 2026
Web tasarım, bir web sitesinin görünümünü, yerleşimini ve kullanım akışını planlama ve oluşturma işidir. Renkler, yazı tipleri, görseller, menüler ve sayfaların birbirine bağlanma biçimi web tasarımın konusudur. Amaç yalnızca güzel görünmek değil, ziyaretçinin aradığını kolay bulmasını ve istenen eylemi yapmasını sağlamaktır.
Bu yazıda web tasarımın ne olduğunu, hangi bileşenlerden oluştuğunu, tasarım sürecinin nasıl ilerlediğini, iyi bir tasarımın ilkelerini ve maliyeti hangi etkenlerin belirlediğini anlatıyoruz.
Web Tasarım Nedir?
Web tasarım, internet üzerinden erişilen sayfaların arayüzünü ve kullanıcı deneyimini tasarlama disiplinidir. İki katmandan oluşur: görsel tasarım (nasıl göründüğü) ve etkileşim tasarımı (nasıl çalıştığı).
Web tasarım ile web geliştirme çoğu zaman karıştırılır. Tasarım, sayfanın nasıl görüneceğine ve hissettireceğine karar verir. Geliştirme ise bu tasarımı çalışan koda dönüştürür. İki iş birbirine bağlıdır, ama farklı uzmanlıklar gerektirir. Kod tarafını frontend nedir yazımızda, sunucu tarafını backend nedir yazımızda ele aldık.
“Web tasarım ve kodlama” ifadesi bu yüzden iki işi birlikte anlatır. Küçük projelerde tek kişi ikisini birden yapabilir, büyük projelerde ayrı ekipler çalışır.
Web Tasarımın Temel Bileşenleri
İyi bir web tasarım şu parçaların uyumundan oluşur:
Yerleşim (layout): Sayfadaki öğelerin sırası ve boşlukları. Göz hangi sırayla gezer, neye önce bakar?
Renk: Marka kimliğini yansıtır ve okunabilirliği belirler. Metin ile arka plan arasındaki kontrast önemlidir.
Tipografi: Yazı tipi, boyut ve satır aralığı. Okunabilirliğin en büyük etkeni budur.
Görseller: Fotoğraf, ikon ve illüstrasyonlar. Hem hız hem tutarlılık açısından seçilmelidir.
Navigasyon: Menü ve sayfalar arası geçişler. Kullanıcı nerede olduğunu ve nereye gidebileceğini bilmelidir.
Etkileşim: Düğmeler, formlar ve animasyonlar. Her etkileşim kullanıcıya geri bildirim vermelidir.
UI, UX ve Web Tasarım Farkı
Üç kavram birbirine çok yakındır.
Kavram | Odak | Soru |
UI (Kullanıcı Arayüzü) | Görünüm: renk, düğme, ikon | Arayüz nasıl görünüyor? |
UX (Kullanıcı Deneyimi) | Akış ve kolaylık | Kullanıcı hedefine kolayca ulaşıyor mu? |
Web tasarım | İkisinin web’e uygulanması | Sayfa hem iyi görünüyor hem iyi çalışıyor mu? |
Güzel görünen ama kullanması zor bir site iyi tasarım sayılmaz. Tersi de geçerlidir. Süreci ayrıntılı görmek için UI/UX tasarım süreci ve tasarım sistemi yazımıza bakabilirsiniz. Tasarım ekibimizin hizmeti için UI/UX tasarım sayfamız var.
Responsive Web Tasarım Nedir?
Responsive (duyarlı) web tasarım, bir sayfanın telefon, tablet ve masaüstünde ekran boyutuna göre kendini uyarlamasıdır. Aynı site her cihazda okunabilir, tıklanabilir ve düzenli görünür.
Bugün web trafiğinin büyük bölümü mobil cihazlardan gelir, bu yüzden tasarım çoğu zaman önce küçük ekran düşünülerek başlar (mobile-first). Responsive olmayan bir site hem kullanıcıyı kaybettirir hem arama sonuçlarında geride kalır. Google, sitelerin mobil sürümünü esas alarak dizine ekler.
Web Tasarım Süreci: Adım Adım
Bir web tasarım projesi genellikle şu aşamalardan geçer:
Keşif ve hedef belirleme: Site kimin için, ne için yapılıyor? Hedef kitle, rakipler ve başarı ölçütü netleşir.
Bilgi mimarisi: Hangi sayfalar olacak ve nasıl bağlanacak? Site haritası ve sayfa akışı çıkarılır.
Tel kafes (wireframe): Renk ve görselden önce, sayfaların iskeleti çizilir. İçerik yerleşimi burada test edilir.
Görsel tasarım: Marka renkleri, tipografi ve görseller eklenir. Tasarım sistemi oluşturulur.
Prototip: Tıklanabilir bir model hazırlanır. Kullanıcı testi ve geri bildirim bu aşamada alınır.
Geliştirme: Tasarım koda dönüşür ve içerik yönetim sistemine bağlanır.
Test ve yayın: Farklı cihaz ve tarayıcılarda test edilir, hız ve erişilebilirlik kontrol edilir, site yayına alınır.
Yayın sonrası iyileştirme: Kullanım verisine bakılarak sayfalar geliştirilir.
Bu süreç yazılım geliştirmeyle benzerlik taşır. Genel çerçeveyi SDLC nedir yazımızda anlattık.
Web Tasarım Nasıl Yapılır?
Kendi sitenizi yapmak ya da bir ekiple çalışmak için üç yol vardır.
Hazır site oluşturucular (Wix, Squarespace gibi): Kod bilmeden, şablonla hızlı bir site kurulur. Basit ve küçük siteler için uygundur. Özelleştirme sınırlıdır.
İçerik yönetim sistemleri (WordPress gibi): Daha fazla esneklik ve eklenti sunar. Biraz teknik bilgi gerektirir.
Özel tasarım ve geliştirme: Tasarımı sıfırdan çizdirip kodlatmak. Markaya tamamen özel, hızlı ve ölçeklenebilir bir site sağlar. Kurumsal ihtiyaçlarda tercih edilir. Kurumsal web projelerinde nelere bakmak gerektiğini kurumsal web geliştirme rehberimizde anlattık.
Hangi yolun doğru olduğu, sitenin işlevine ve büyüme planına bağlıdır. Bir broşür sitesi için şablon yeterli olabilir. Üyelik, ödeme ya da panel içeren bir ürün için özel geliştirme gerekir.
İyi Bir Web Tasarımın İlkeleri
Sadelik: Her öğe bir amaca hizmet etmeli. Fazla seçenek kullanıcıyı yorar.
Görsel hiyerarşi: Önemli içerik ilk bakışta fark edilmeli. Başlık, alt başlık ve eylem düğmesi net ayrışmalı.
Tutarlılık: Renk, yazı tipi ve düğme stili tüm sayfalarda aynı mantıkla kullanılmalı.
Hız: Yavaş açılan sayfa kullanıcıyı kaybettirir. Görseller optimize edilmeli.
Erişilebilirlik: Görme ya da hareket kısıtı olan kullanıcılar da siteyi kullanabilmeli. Yeterli kontrast, klavye ile gezinme ve görsel açıklamaları bunun parçalarıdır. W3C WCAG yönergeleri bu konuda temel kaynaktır.
Net eylem çağrısı: Ziyaretçiden ne yapması beklendiği (iletişime geç, satın al, kaydol) açıkça görünmeli.
Güven: Referanslar, iletişim bilgisi ve gizlilik politikası ziyaretçide güven oluşturur.
Web Tasarım Maliyetini Ne Belirler?
Web tasarım fiyatları projeden projeye büyük farklılık gösterir. Sabit bir rakam vermek yanıltıcı olur, ancak maliyeti belirleyen unsurlar bellidir:
Sayfa sayısı ve karmaşıklığı: Beş sayfalık tanıtım sitesi ile yüzlerce sayfalık içerik platformu aynı değildir.
Özel tasarım ihtiyacı: Şablon kullanmak ile sıfırdan tasarım çizdirmek arasında belirgin fark vardır.
Fonksiyonlar: Üyelik, ödeme, çok dilli yapı, panel ve entegrasyonlar kapsamı büyütür.
İçerik: Metin, fotoğraf ve video üretimi ayrı bir kalemdir.
Teknoloji seçimi: Hazır sistem ya da özel geliştirme maliyeti değiştirir.
Bakım ve hosting: Yayından sonra güvenlik, yedekleme ve güncelleme maliyeti sürer.
Teklif isterken kapsamı yazılı netleştirin ve teklifleri aynı kapsam üzerinden karşılaştırın. Aynı rakamın arkasında çok farklı işler olabilir.
Web Tasarım Yaparken Sık Yapılan Hatalar
Mobili sona bırakmak: Mobil görünüm sonradan eklenince çoğunlukla yamalı kalır.
İçeriği tasarımdan sonra yazmak: Gerçek içerik gelince yerleşim bozulur. İçerik ve tasarım birlikte ilerlemeli.
Ziyaretçi yerine sahibi memnun etmek: Tasarım, ekibin zevkine göre değil kullanıcının ihtiyacına göre kararlaştırılmalı.
Hızı önemsememek: Büyük, optimize edilmemiş görseller sayfayı yavaşlatır.
Ölçmemek: Hangi sayfada kullanıcı kaybolduğunu görmeden iyileştirme yapılamaz.
Web Tasarım ve SEO
Tasarım kararları, sitenin arama sonuçlarındaki performansını etkiler. Net başlıklar ve mantıklı bir sayfa yapısı, arama motorlarının içeriği anlamasına yardım eder. Hızlı yüklenme, mobil uyumlu yerleşim ve kaymayan sayfa öğeleri, arama motorlarının ölçtüğü deneyimi iyileştirir. Açıklayıcı bağlantı metinleri, okunabilir URL’ler ve anlamlı görsel açıklamaları hem kullanıcıya hem tarayıcı botlarına yardım eder. Tasarım ve SEO’yu tel kafes aşamasından itibaren birlikte planlamak gerekir, çünkü sayfa yapısını sonradan değiştirmek pahalıdır.
Web Tasarım Trendleri
Trendler değişir, ancak kullanıcıya hizmet ettikleri için kalıcı olanlar vardır. Karanlık mod desteği, okurken rahat bir seçenek sunar. Mikro etkileşimler, yani bir tıklamayı ya da kaydı onaylayan küçük animasyonlar, arayüzü duyarlı hissettirir. Cesur tipografi ve bol boşluk sayfaları okunabilir tutar. Hareket amaçlı kalmalıdır: içeriği geciktiren ya da ana eylemden dikkat dağıtan animasyon fayda değil zarar verir. Bir trendi, ziyaretçileriniz için netliği, hızı ya da erişilebilirliği artırmıyorsa isteğe bağlı sayın.
Web Tasarımda Erişilebilirlik Kontrol Listesi
Erişilebilir bir site için şu kontrolleri yapın:
Metin ile arka plan arasında yeterli kontrast var mı?
Tüm işlevler yalnızca klavye ile kullanılabiliyor mu?
Her görselde anlamlı bir alternatif metin var mı?
Form alanlarının görünür etiketleri var mı?
Hata mesajları neyi nasıl düzelteceğinizi söylüyor mu?
Web Sitesi Türüne Göre Tasarım Yaklaşımı
Her site aynı şekilde tasarlanmaz. Hedefe göre öncelikler değişir:
Tanıtım (kurumsal) siteleri: Güven ve netlik öne çıkar. Hizmetler, referanslar ve iletişim yolu hızlı bulunmalıdır.
E-ticaret siteleri: Ürün arama, filtreleme, sepet ve ödeme akışı sürtünmesiz olmalıdır. Ödeme adımındaki her gereksiz alan satış kaybettirir.
İçerik ve blog siteleri: Okunabilirlik ve gezinme önemlidir. Başlık yapısı, arama ve ilgili yazı önerileri tasarımın merkezindedir.
Web uygulamaları ve paneller: Yoğun veriyi sade bir arayüzle göstermek gerekir. Burada tasarım sistemi ve tutarlılık belirleyicidir.
Açılış (landing) sayfaları: Tek bir hedefe odaklanır. Dikkat dağıtan menüler ve bağlantılar azaltılır.
Önce sitenin kullanıcıya ne yaptıracağını belirleyin, tasarımı ona göre kurun. Aynı renk paleti bile farklı hedefler için farklı yerleşimlerle kullanılır.
Tasarımcı ve Geliştirici Nasıl Birlikte Çalışır?
Tasarım ile geliştirme arasındaki geçiş (handoff), projelerin en kırılgan noktasıdır. Tasarımcı, bileşenlerin boyutlarını, durumlarını (üzerine gelme, tıklama, hata) ve farklı ekran boyutlarındaki davranışını açıkça belgelemelidir. Geliştirici ise tasarımın uygulanamayacağı noktaları erken söylemelidir. İki tarafın tasarım aşamasında birlikte gözden geçirme yapması, geliştirme sırasındaki “bu ekran nasıl olacaktı?” sorularını büyük ölçüde azaltır. Tasarım sistemi bu işi kolaylaştırır, çünkü renk, aralık ve bileşen kararları tek bir yerde tutulur.
Web Sitesini Yayına Almadan Önce Kontrol Listesi
Yayın günü sürpriz yaşamamak için şu kontrolleri yapın:
Sayfalar telefon, tablet ve masaüstünde doğru görünüyor mu?
Tüm bağlantılar ve formlar çalışıyor mu? Form gönderimlerinin size ulaştığını test ettiniz mi?
Sayfa başlıkları ve açıklamaları (meta) yazıldı mı?
Görsellerin boyutu optimize edildi mi, alternatif metinleri var mı?
Gizlilik politikası ve çerezle ilgili gereken bilgilendirmeler var mı?
Analitik aracı kurulu mu, böylece yayından sonra ziyaretçi davranışını ölçebilir misiniz?
Yedekleme ve güvenlik güncellemeleri planlandı mı?
Bu listeyi yayından bir hafta önce uygulamak, son günkü acelenin getirdiği hataları azaltır.
Web siteniz ya da web uygulamanız için tasarım ve geliştirmeyi birlikte planlamak isterseniz web uygulama geliştirme hizmetimizi inceleyebilirsiniz.
