Web Tasarım Nedir? Süreç, Ölçütler ve Tasarımcının İşi

Web tasarım, bir web sitesinin nasıl görüneceğini ve ziyaretçinin siteyi nasıl kullanacağını planlama işidir. Sayfa düzeni, renkler, yazı tipleri, görseller, menü yapısı ve butonların yeri bu planın parçasıdır. İyi bir web tasarımın amacı güzel görünmekten çok, ziyaretçinin aradığını hızla bulmasını ve sizinle iletişime geçmesini kolaylaştırmaktır.

Bu yazıda web tasarımın neleri kapsadığını, web yazılımdan farkını, bir web tasarımcının gerçekte ne iş yaptığını, keşiften yayına süreç adımlarını ve bir tasarımı değerlendirirken kullanabileceğiniz ölçütleri anlatıyoruz.

Web tasarım neleri kapsar?

"Tasarım" denince çoğu kişinin aklına renkler ve görseller gelir. Oysa bir site tasarımı birkaç katmandan oluşur:

• Bilgi mimarisi: Hangi sayfaların olacağı, menüde neyin nerede duracağı, ziyaretçinin bir bilgiye kaç tıklamada ulaşacağı.
• Sayfa düzeni (layout): Her sayfada başlığın, metnin, görselin ve butonun sırası. Ziyaretçinin gözü önce nereye gidecek?
• Görsel dil: Renk paleti, yazı tipleri, boşluklar, ikonlar ve fotoğraf seçimi. Markanızın karakterini bu katman taşır.
• Etkileşim: Butona basınca ne olacağı, formun hata mesajı, mobil menünün açılışı, galerinin kaydırılması.
• Duyarlı (responsive) yapı: Aynı içeriğin telefon, tablet ve masaüstünde düzgün görünmesi. Google da siteleri öncelikle mobil sürümlerine bakarak dizine ekliyor (mobile-first indexing).
• İçerik yerleşimi: Metinlerin okunabilir uzunlukta, başlıklarla bölünmüş ve taranabilir olması.

Bu katmanların ziyaretçi tarafındaki karşılığına kullanıcı deneyimi (UX), görünen yüzüne ise kullanıcı arayüzü (UI) denir. İkisinin farkını UI ve UX nedir yazımızda örneklerle anlattık.

Web tasarım ile web yazılım arasındaki fark

İki kavram çoğu zaman birbirinin yerine kullanılır ama farklı işlerdir. Tasarım "site nasıl görünecek ve nasıl kullanılacak?" sorusunu, yazılım ise "site nasıl çalışacak?" sorusunu cevaplar.

Ön yüz geliştirme (front-end) iki alanın kesiştiği yerdir: tasarım burada HTML ve CSS ile koda dönüşür. Arka yüz (back-end) ise ziyaretçinin görmediği tarafı, yani veritabanını, yönetim panelini ve formların işlenmesini kapsar.

Bu ayrım size neden önemli? Teklif alırken "tasarım" diye sunulan işin yalnızca görsel taslak mı, yoksa çalışan bir site mi olduğunu bilmeniz gerekir. Bazı firmalar hazır bir temaya logonuzu yerleştirip bunu "tasarım" olarak satar. Hazır tema ile özel kod arasındaki farkları hazır site mi özel kod mu yazısında ayrıntılı karşılaştırdık.

Web tasarımcı ne iş yapar?

Bir web tasarımcının işi, ekranları güzelleştirmekten önce işletmeyi anlamakla başlar. Tipik bir projede tasarımcı şunları yapar:

1. İşletmenin hedefini ve müşterisini dinler: Site telefon mu getirmeli, rezervasyon mu, teklif talebi mi?
2. Rakip siteleri ve sektördeki alışkanlıkları inceler.
3. Site haritasını ve her sayfanın içerik planını çıkarır.
4. Düşük detaylı taslaklar (wireframe) çizer; renk ve görsel olmadan sadece yerleşimi gösterir.
5. Onaylanan taslak üzerine görsel tasarımı yapar: palet, tipografi, fotoğraf dili, ikonlar.
6. Masaüstü ve mobil ekranları ayrı ayrı tasarlar.
7. Geliştiriciyle birlikte tasarımın koda doğru aktarılmasını kontrol eder.

Büyük ajanslarda bu işler UX araştırmacısı, UI tasarımcısı ve ön yüz geliştiricisi arasında bölünür. Küçük stüdyolarda ise genellikle aynı ekip baştan sona işi yürütür; bunun avantajı, tasarımda verilen sözün kodda kaybolmamasıdır.

Web tasarım süreci adım adım

Süreç firmadan firmaya değişse de sağlam bir proje genelde şu adımlardan geçer. Biz kurumsal web sitesi projelerimizde de bu sırayı izliyoruz.

Projelerin en çok uzadığı yer tasarım değil, içerik aşamasıdır. Metinler ve fotoğraflar baştan hazırsa 5 sayfalık bir site birkaç haftada çıkar; içerik beklenirken aylar geçebilir. Bu yüzden keşif toplantısında içerik sorumluluğunu da konuşmanızı öneririz.

İyi bir web tasarımın ölçütleri

"Beğendim" ya da "beğenmedim" tasarımı değerlendirmek için yeterli değil. Daha somut ölçütler kullanın:

1. İlk ekranda net mesaj. Ziyaretçi sayfayı açtığı anda ne yaptığınızı, nerede olduğunuzu ve bir sonraki adımı anlamalı. "Kaliteli hizmet" gibi genel cümleler yerine "Antalya'da butik oteller için rezervasyonlu web sitesi" gibi somut bir söz verin.

2. Mobilde rahat kullanım. Butonlar parmakla kolayca basılabilecek büyüklükte olmalı, menü açılıp kapanmalı, sayfa yana kaymamalı. Telefon numarası tek dokunuşla aranabilmeli.

3. Hız. Google, sayfa deneyimini Core Web Vitals ölçümleriyle değerlendiriyor: en büyük içeriğin 2,5 saniye içinde görünmesi (LCP), etkileşime 200 milisaniye içinde tepki (INP) ve sayfa düzeninin yüklenirken kaymaması (CLS 0,1 altı). Ağır temalar, sıkıştırılmamış fotoğraflar ve gereksiz eklentiler bu değerleri bozar.

4. Okunabilirlik. Metin ile zemin arasında yeterli kontrast olmalı. W3C'nin erişilebilirlik rehberi WCAG 2.2, normal metin için en az 4,5:1 kontrast oranı öneriyor. Satırlar çok uzun olmamalı, paragraflar kısa tutulmalı.

5. Tutarlılık. Aynı türdeki butonlar her sayfada aynı görünmeli, başlık boyutları bir düzen izlemeli, boşluklar rastgele değil bir sisteme göre verilmeli.

6. Güven unsurları. Adres, telefon, referanslar, gerçek fotoğraflar ve gerekli yasal metinler (KVKK, çerez politikası) görünür olmalı.

7. Kolay iletişim. İletişim sayfası tek tıkta bulunmalı, form kısa olmalı, WhatsApp veya telefon seçeneği olmalı.

8. Arama motoru temeli. Her sayfada benzersiz başlık ve açıklama, mantıklı başlık hiyerarşisi, temiz adresler. Tasarım bunları bozmamalı, desteklemeli. Bu temelin geri kalanını SEO nedir rehberimizde anlattık.

Hızlı kontrol listesi

Mevcut sitenizi ya da size sunulan bir tasarımı şu sorularla 10 dakikada değerlendirebilirsiniz:

• [ ] Ana sayfanın ilk ekranında ne iş yaptığımız ve nerede olduğumuz yazıyor mu?
• [ ] Telefonda menü açılıyor, butonlara rahat basılıyor mu?
• [ ] Sayfa yana kaymadan okunuyor mu?
• [ ] Telefon numarasına dokununca arama başlıyor mu?
• [ ] Fotoğraflar gerçek mi, yoksa her sitede gördüğümüz stok görseller mi?
• [ ] Butonlar ve başlıklar her sayfada aynı stilde mi?
• [ ] İletişim formu 5 alanı geçmiyor mu?
• [ ] Yönetim panelinden metin ve fotoğrafı kendimiz değiştirebiliyor muyuz?
• [ ] Sayfalar telefonda 3 saniyeden kısa sürede açılıyor mu?
• [ ] KVKK aydınlatma metni ve çerez bilgisi var mı?

Üçten fazla "hayır" varsa tasarım, işletmenize iş getirmekten çok engel oluyor olabilir.

Web tasarım türleri: hangisi size uygun?

• Tanıtım sitesi: Birkaç sayfada işletmeyi, hizmetleri ve iletişim bilgisini anlatır. Yeni kurulan firmalar ve küçük işletmeler için yeterlidir.
• Kurumsal site: Daha fazla sayfa, birden çok dil, blog ve referanslar içerir.
• E-ticaret sitesi: Ürün kataloğu, sepet, ödeme ve kargo süreçlerini kapsar; tasarımda ürün sayfası ve ödeme adımları kritik hale gelir.
• Açılış sayfası (landing page): Tek bir kampanya veya reklam için hazırlanan, tek hedefi olan sayfadır. Reklam trafiği için ayrı bir sayfa kurmak çoğu zaman ana sayfaya yönlendirmekten daha iyi sonuç verir.
• Özel web uygulaması: Rezervasyon, ilan yönetimi veya müşteri portalı gibi işlevi ağır basan projeler.

Sektöre göre tasarım ihtiyacı da değişir. Örneğin bir otel sitesinde oda fotoğrafları, tarih seçimi ve rezervasyon butonu öne çıkar. Nasıl göründüğünü merak ediyorsanız otel web sitesi örneklerimize göz atabilirsiniz.

Web tasarım ne kadar tutar?

Fiyatı belirleyen sayfa sayısı, dil sayısı, özel modüller (rezervasyon, e-ticaret) ve tasarımın hazır tema mı yoksa size özel mi olduğudur. Grapyweb'de 5 sayfalık tanıtım sitesi 19.900 TL, iki dilli 10 sayfalık kurumsal site 39.900 TL'den başlıyor (KDV hariç, ilk yıl alan adı, hosting ve SSL dahil).

Projenize özel bir rakam görmek isterseniz teklif sihirbazı birkaç soruda kapsamı çıkarır.

Tasarım ekibi seçerken sorulacak sorular

Portföy güzel görünebilir, ama süreci anlamak için şu soruları sorun:

• Mobil tasarımı ayrıca gösterecek misiniz? Sadece masaüstü görseli sunan ekip, mobili kodlama sırasında "sığdırır".
• Hazır tema mı kullanıyorsunuz, yoksa tasarım bize özel mi? İkisi de meşru seçenek, ama ne aldığınızı bilmelisiniz.
• Kaç revizyon turu dahil? Sınırsız revizyon vaadi genellikle belirsiz bir kapsam demektir; iki ya da üç net tur daha sağlıklıdır.
• Metinleri kim yazacak, fotoğrafları kim sağlayacak? Bu sorunun cevabı süreyi doğrudan belirler.
• Siteyi yayından sonra kendimiz güncelleyebilecek miyiz? Yönetim paneli olmayan bir site, her küçük değişiklik için size ek maliyet çıkarır.
• Kaynak kod ve alan adı kimin adına olacak? Tasarım ve kod size ait değilse, ileride firmayı değiştirmek zorlaşır.

Bu soruların cevabını yazılı teklifte görmek, sonradan çıkacak anlaşmazlıkların çoğunu baştan önler.

Sık yapılan hatalar

• Tasarıma içerikten önce başlamak. Metni olmayan sayfanın düzeni, metin gelince bozulur.
• Masaüstünü tasarlayıp mobili sonraya bırakmak. Ziyaretçilerin önemli bir kısmı telefondan geliyor.
• Ana sayfaya her şeyi koymaya çalışmak. Her bölüm, bir sonrakinin dikkatini azaltır.
• Kayan büyük görsel (slider) ile açılış yapmak. Ağırdır ve çoğu ziyaretçi ikinci görsele ulaşmaz.
• Dört farklı renkte, dört farklı boyutta buton kullanmak.
• Yayın sonrası siteyi kendi haline bırakmak. Tasarım, ziyaretçi verisine göre iyileştirildikçe değer kazanır.

Antalya'da yüz yüze görüşerek çalışmak isterseniz Antalya web tasarım sayfamızda süreci ve referanslarımızı bulabilirsiniz.