Web Tasarım Nedir? Neleri Kapsar, İyi Tasarım Nasıl Anlaşılır?
Web tasarım nedir, web geliştirmeden farkı ne ve iyi bir tasarım nasıl anlaşılır? UX/UI, mobil uyum, erişilebilirlik ve hız kriterleriyle sade bir rehber.
Web tasarım, bir web sitesinin görünüşünü, sayfa düzenini ve kullanım akışını planlayıp oluşturma işidir. Renk ve yazı tiplerinden menü yapısına, düğmelerin yerinden sayfanın telefonda nasıl görüneceğine kadar ziyaretçinin gördüğü ve kullandığı her şey web tasarımın konusudur. İyi bir tasarım yalnızca güzel görünmez; ziyaretçinin aradığını hızla bulmasını ve bir sonraki adımı (arama, form, satın alma) kolayca atmasını sağlar.
Kısaca:
- Web tasarım: Sitenin nasıl görüneceği ve nasıl kullanılacağı.
- Web geliştirme: Bu tasarımı çalışan bir siteye dönüştüren kod ve teknik altyapı.
- İyi tasarım ölçülebilir: Mobilde eksiksiz çalışır, hızlı açılır, herkes tarafından okunabilir ve ziyaretçiyi hedefe götürür.
Web tasarım neleri kapsar?
| Bileşen | Ne demek? | Örnek |
|---|---|---|
| Görsel tasarım (UI) | Renk, yazı tipi, ikon, görsel ve boşluk kullanımı | Marka renkleri, düğme stili |
| Kullanıcı deneyimi (UX) | Ziyaretçinin siteyi kullanırken izlediği yol | Menü, form adımları, satın alma akışı |
| Bilgi mimarisi | Sayfaların ve içeriğin gruplanması | Hizmet sayfaları, kategori yapısı |
| Responsive tasarım | Düzenin her ekran boyutuna uyması | Telefon, tablet ve masaüstü görünümü |
| Erişilebilirlik | Engelli kullanıcıların da siteyi kullanabilmesi | Yeterli kontrast, alt metin, klavyeyle gezinme |
| Mikro metinler | Düğme, form ve uyarı metinleri | “Ücretsiz teklif alın”, hata mesajları |
Web sitesi türlerine göre tasarım öncelikleri
Her web sitesi aynı işi yapmaz; tasarım kararları sitenin amacına göre değişir.
| Site türü | Asıl amacı | Tasarımda öncelik | Olmazsa olmaz öğeler |
|---|---|---|---|
| Kurumsal / hizmet sitesi | Güven kazanmak, teklif ve arama almak | Net hizmet anlatımı, referanslar, görünür iletişim | Hizmet sayfaları, hakkımızda, referanslar, iletişim formu |
| E-ticaret sitesi | Ürün satmak | Hızlı ürün bulma, filtreler, sorunsuz ödeme | Kategori ve ürün sayfaları, sepet, ödeme, iade bilgisi |
| Açılış sayfası (landing page) | Tek bir kampanyada dönüşüm almak | Tek mesaj, tek eylem çağrısı, dikkat dağıtmayan düzen | Teklif, fayda listesi, sosyal kanıt, form |
| Blog / içerik sitesi | Bilgi vermek, arama trafiği çekmek | Okunabilirlik, içerik yapısı, iç linkler | Kategori sayfaları, yazar bilgisi, site içi arama |
| Portföy sitesi | İşleri sergilemek | Görsel kalitesi, proje anlatımı | Proje sayfaları, hakkımda, iletişim |
Bir site birden fazla amaç taşıyabilir; örneğin bir hizmet sitesinde blog da bulunabilir. Bu durumda ana amaç belirlenir, menü ve ana sayfa ona göre kurgulanır.
Web tasarım ile web geliştirme arasındaki fark
| Web tasarım | Web geliştirme | |
|---|---|---|
| Odak | Görünüş, düzen, kullanım deneyimi | Kod, işlev, sunucu ve veritabanı |
| Çıktı | Tasarım dosyası, prototip, stil rehberi | Çalışan site, formlar, entegrasyonlar |
| Araçlar | Figma, Adobe XD, sayfa oluşturucular | HTML, CSS, JavaScript, PHP, WordPress |
| Cevapladığı soru | Site nasıl görünmeli ve kullanılmalı? | Site nasıl çalışmalı? |
Küçük projelerde iki işi çoğu zaman aynı kişi ya da ekip yapar. WordPress ve Elementor gibi sayfa oluşturucular, kod yazmadan tasarım yapılabildiği için bu ayrımı daha da bulanıklaştırdı.
UX ve UI farkı nedir?
UX, ziyaretçinin bir işi ne kadar kolay tamamladığıyla ilgilenir. UI ise bu sırada gördüğü ekranın görünüşüdür. Bir randevu formunun kaç adımda bittiği UX’in, formdaki düğmenin rengi ve yazı tipi UI’nin konusudur.
Web tasarım ne işe yarar?
- Güven oluşturur. Ziyaretçi, markayı ilk birkaç saniyede sitenin düzenine ve netliğine bakarak değerlendirir.
- Ziyaretçiyi müşteriye çevirir. Net bir eylem çağrısı ve kısa bir form, aynı trafikten daha fazla talep alınmasını sağlar.
- SEO’yu destekler. Google, sitelerin mobil sürümünü dizine ekler. Mobilde eksik ya da yavaş bir tasarım, arama sonuçlarındaki performansı da olumsuz etkiler.
- Marka tutarlılığı sağlar. Aynı renk, yazı tipi ve dil tüm sayfalarda tekrarlandığında marka akılda kalır.
- Yönetimi kolaylaştırır. İyi kurgulanmış bir tasarımda yeni sayfa veya içerik eklemek düzeni bozmaz.
İyi bir web tasarımın 8 kriteri
- İlk ekranda ne yaptığınız anlaşılıyor. Başlık, kime hangi hizmeti sunduğunuzu tek cümleyle söylüyor.
- Mobilde eksiksiz. Masaüstündeki ana içerik, başlıklar ve bağlantılar mobilde de var. Google, mobilde içerik kısaltmak yerine akordeon ve sekme gibi düzenlerin kullanılmasını öneriyor.
- Hızlı. Google’ın Core Web Vitals ölçülerinde “iyi” eşikler LCP için 2,5 saniye, INP için 200 milisaniye, CLS için 0,1’dir. Değerler ziyaretlerin %75’inde bu sınırların içinde kalmalıdır (web.dev). Sitenizin hızını artırmak için web site hızlandırma sayfamıza göz atabilirsiniz.
- Okunabilir ve erişilebilir. W3C’nin WCAG 2.2 standardına göre normal metin ile arka plan arasında en az 4,5:1 kontrast olmalı (AA düzeyi). Görsellerde açıklayıcı alt metin bulunmalı, site klavyeyle de gezilebilmeli.
- Tutarlı. Aynı işi yapan düğmeler her sayfada aynı görünür. Nielsen Norman Group’un 10 kullanılabilirlik ilkesinden biri olan “tutarlılık ve standartlar” tam olarak bunu anlatır.
- Tek ve net bir eylem çağrısı var. Her sayfa ziyaretçiden bir şey ister: aramak, form doldurmak ya da ürün incelemek.
- Güven unsurları görünür. Gerçek iletişim bilgisi, referanslar, SSL sertifikası ve gizlilik politikası kolayca bulunur.
- Yönetilebilir. İçerik ekip tarafından kod bilgisi gerekmeden güncellenebilir.
Mobil uyumun ayrıntılarını mobil uyumlu web sitesi rehberimizde anlattık.
Web tasarım süreci nasıl ilerler?
| Adım | Ne yapılır? | Çıktı |
|---|---|---|
| 1. Keşif | Sitenin hedefi, hedef kitle, rakipler ve başarı ölçütü (form, arama, satış) belirlenir. | Proje özeti |
| 2. Site haritası ve içerik planı | Hangi sayfaların olacağı, her sayfanın hangi soruyu cevaplayacağı ve hangi arama ifadesini hedefleyeceği yazılır. | Site haritası, içerik listesi |
| 3. Tel çerçeve (wireframe) | Renk ve görsel olmadan bilgi hiyerarşisi ve sayfa düzeni çizilir. Bu aşamada düzeni değiştirmek ucuzdur. | Sayfa iskeletleri |
| 4. Görsel tasarım ve prototip | Renk, tipografi, görsel dil ve bileşenler (düğme, form, kart) belirlenir; tıklanabilir bir örnek hazırlanır. | Tasarım dosyası, stil rehberi, prototip |
| 5. Geliştirme ve içerik girişi | Tasarım WordPress gibi bir altyapıda çalışan siteye dönüştürülür, gerçek içerik eklenir. | Test ortamındaki site |
| 6. Test | Farklı cihaz ve tarayıcılarda görünüm, hız, formlar, erişilebilirlik ve temel SEO ayarları kontrol edilir. | Hata listesi ve düzeltmeler |
| 7. Yayın ve ölçüm | Site yayına alınır; analiz araçları ve Search Console ile ziyaretçi davranışı izlenir, iyileştirmeler yapılır. | Canlı site, ölçüm raporu |
En sık atlanan adım ikincisidir. İçerik planı yapılmadan tasarlanan sayfalar, gerçek metin girildiğinde dağılır ve yeniden düzenlenmek zorunda kalır.
Bu adımları WordPress üzerinde uygulamalı görmek isterseniz WordPress ile 5 adımda web sitesi kurma rehberimize göz atabilirsiniz.
Web tasarımın süresini ve maliyetini ne belirler?
Süre ve fiyat, sayfa sayısından çok projenin karmaşıklığına bağlıdır. En çok etkileyen etkenler şunlardır:
- Farklı sayfa düzeni sayısı: Her farklı düzen ayrı tasarım ve test demektir. Aynı şablonu kullanan 20 hizmet sayfası, birbirinden tamamen farklı 5 sayfadan daha hızlı hazırlanabilir.
- Hazır tema mı, özel tasarım mı: Özel tasarım daha fazla emek ister ama markaya özgü bir sonuç verir.
- İçeriğin hazır olup olmadığı: Metin ve görseller hazırsa süre kısalır; içerik üretimi de kapsama giriyorsa uzar.
- Özel işlevler: Randevu, üyelik, çok dilli yapı, ödeme ve harici sistem entegrasyonları kapsamı büyütür.
- E-ticaret: Ürün sayısı, ürün varyasyonları, sanal POS ve kargo entegrasyonu ayrı iş kalemleridir.
- Revizyon turları: Kaç tur değişiklik yapılacağı baştan belirlenmezse süre uzar.
Paket bazlı fiyatlarımızı fiyatlandırma sayfamızda görebilirsiniz.
Web tasarımında kullanılan araçlar
| Amaç | Yaygın araçlar |
|---|---|
| Tasarım ve prototip | Figma, Sketch, Penpot |
| Kod yazmadan sayfa oluşturma | WordPress blok düzenleyicisi, Elementor |
| Görsel hazırlama | Photoshop, Affinity, Canva |
| Hız ve kalite ölçümü | PageSpeed Insights, Lighthouse |
| Erişilebilirlik kontrolü | WebAIM Contrast Checker, tarayıcıların erişilebilirlik denetimleri |
| Ziyaretçi davranışı | Google Analytics 4, Microsoft Clarity |
Araç seçimi sonucu tek başına belirlemez. Ama tasarım dosyasının ve geliştirme altyapısının baştan belli olması, sitenin ileride başka bir ekibe devredilmesini ve bakımını kolaylaştırır.
Hazır tema mı, özel tasarım mı?
| Hazır tema | Özel tasarım | |
|---|---|---|
| Süre | Kısa | Daha uzun |
| Esneklik | Temanın izin verdiği kadar | Tamamen ihtiyaca göre |
| Marka özgünlüğü | Başka sitelere benzeyebilir | Markaya özel |
| Performans | Temaya bağlı; ağır temalar yavaşlatır | Sadece gereken özellikler yüklenir |
| Ne zaman uygun? | Basit tanıtım sitesi, sınırlı bütçe, hızlı başlangıç | Rekabetli sektör, özel işlevler, güçlü marka hedefi |
Hazır tema kullanılacaksa hızlı ve güncel tutulan bir tema seçmek önemlidir. Ücretsiz temaların sınırlarını ayrı bir yazıda anlattık.
En sık yapılan web tasarım hataları
- Siteyi masaüstüne göre tasarlayıp mobili sonradan düşünmek.
- Sayfayı ağır görsel, video ve animasyonlarla yavaşlatmak.
- Açık gri gibi düşük kontrastlı metin renkleri kullanmak.
- Tek sayfada ziyaretçiye çok fazla seçenek sunmak.
- Tasarımı gerçek içerik yerine örnek metinlerle yapıp sonra içeriği sığdırmaya çalışmak.
- Renk ve düzen kararlarını yalnızca kişisel beğeniye göre vermek, ziyaretçi davranışını ölçmemek. Renk seçimi için web tasarımında renk psikolojisi yazımız yol gösterebilir.
Sitenizin tasarımını 10 dakikada kontrol edin
Bu liste profesyonel bir denetimin yerini tutmaz, ama büyük sorunları hızla gösterir:
- İlk ekran testi: Ana sayfanızı birine 5 saniye gösterin ve ne iş yaptığınızı sorun. Cevap veremiyorsa başlık yeterince net değildir.
- Mobil görünüm: Siteyi kendi telefonunuzda açın; menüyü, formu ve telefon numarasına dokunmayı deneyin.
- Hız: Ana sayfanızı ve en önemli hizmet sayfanızı PageSpeed Insights ile ölçün, “Mobil” sekmesindeki Core Web Vitals sonuçlarına bakın.
- Kontrast: Gövde metni ve arka plan renginizi WebAIM Contrast Checker ile ölçün. Normal metin için oran en az 4,5:1 olmalı.
- Eylem çağrısı: Her önemli sayfada “şimdi ne yapmalıyım?” sorusunun cevabı ilk bakışta görünüyor mu?
- Form: İletişim formunu kendiniz doldurup gönderin ve e-postanın gerçekten size ulaştığını doğrulayın.
- Güven bilgileri: İletişim bilgisi, referanslar ve gizlilik politikası en fazla iki tıklamada bulunuyor mu?
Bu maddelerin üçünden fazlasında sorun çıkıyorsa tasarımın gözden geçirilme zamanı gelmiştir.
Yapay zekâ web tasarımı nasıl etkiliyor?
Yapay zekâ araçları tasarım taslakları, görseller ve metin önerileri üreterek sürecin bazı adımlarını hızlandırıyor. Ancak marka konumu, hedef kitle ve sitenin hangi işi yapacağı gibi kararlar hâlâ insan muhakemesi gerektiriyor. Öte yandan ziyaretçilerin bir kısmı artık bilgiye yapay zekâ asistanları üzerinden ulaşıyor. Bu yüzden net başlıklar, açık tanımlar ve düzenli içerik yapısı tasarımın bir parçası hâline geldi. Bu konuyu GEO nedir yazımızda ayrıntılı anlattık.
Sık sorulan sorular
Web tasarım için kod bilmek gerekir mi?
Temel bir site için gerekmez; WordPress ve sayfa oluşturucularla kod yazmadan tasarım yapılabilir. Özel işlevler, hız optimizasyonu ve teknik SEO için ise HTML, CSS ve WordPress bilgisi avantaj sağlar.
Web tasarımcı ne yapar?
Sitenin yapısını, sayfa düzenini ve görsel dilini planlar; tasarımı farklı ekran boyutları için hazırlar ve geliştiriciyle birlikte çalışan siteye dönüştürür. Küçük projelerde geliştirme işini de üstlenebilir.
Bir web sitesinin tasarımı ne kadar sürer?
Kapsama göre değişir. Hazır içerikle basit bir tanıtım sitesi birkaç günde kurulabilir. Hizmet sayfaları, özgün tasarım ve SEO ayarlarıyla kurumsal bir site genellikle 2–4 hafta sürer; e-ticaret ve özel işlevler bu süreyi uzatır.
Web sitesinin tasarımı ne sıklıkla yenilenmeli?
Sabit bir süre yok. Site mobilde sorun çıkarıyorsa, yavaşsa, markanız değiştiyse ya da ziyaretçiler form doldurmadan ayrılıyorsa yenileme zamanı gelmiş demektir.
Hazır tema SEO’ya zarar verir mi?
Hazır tema kullanmak tek başına SEO’ya zarar vermez. Sorun genellikle ağır, gereksiz özelliklerle dolu temaların siteyi yavaşlatmasından kaynaklanır.
Sonuç
Web tasarım; görünüş, düzen ve kullanım deneyimini birlikte ele alan bir iştir. İyi bir tasarım, nasıl göründüğü kadar mobilde çalışması, hızlı açılması, herkes tarafından okunabilmesi ve ziyaretçiyi hedefe götürmesiyle de ölçülür. Mevcut sitenizin bu kriterleri ne kadar karşıladığını görmek isterseniz WordPress web tasarım hizmetimizi inceleyebilir ya da ücretsiz ön analiz talep edebilirsiniz.