Web Tasarım Nedir? Bileşenleri, Süreci ve Ölçütleri

Öne Çıkanlar

• İyi kabul edilen yükleme eşiği LCP için 2,5 saniye, etkileşim yanıtı için 200 milisaniyedir¹.
• Eşikler tek bir testten değil, sayfa yüklemelerinin 75. persentilinden okunur; mobil ve masaüstü ayrı ayrı ölçülür¹.
• INP, 2024'te FID'in yerini alarak stabil bir Core Web Vitals metriği oldu; bu tarihten eski rehberler eski metriği anlatıyor¹.
• Mobilde iyi Core Web Vitals oranı 2023'te %36, 2024'te %44, 2025'te %48 oldu; siteler hâlâ masaüstünün gerisinde⁸.
• Türkiye'de web trafiğinin %74,08'i mobil, %25,33'ü masaüstü, %0,58'i tablet cihazlardan geliyor (Temmuz 2026 ölçümü)⁶.
• Medyan Lighthouse erişilebilirlik puanı 2025'te %85'in üzerine çıktı; buna rağmen tam puan, tam erişilebilirlik garantisi değil⁹.
• Kullanılabilirlik beş bileşenle ölçülür: öğrenilebilirlik, verimlilik, akılda kalıcılık, hata ve memnuniyet⁷.

Web Tasarım Nedir?

Web tasarım nedir sorusunun kısa cevabı şudur: bir web sitesinin görsel düzeninin, gezinme yapısının ve teknik performansının kullanıcı için birlikte kurgulanması. Üç şey aynı anda kararlaştırılır; biri eksik kaldığında diğer ikisi de işe yaramaz. Nielsen Norman Group'un tanımına göre kullanılabilirlik, kullanıcı arayüzlerinin ne kadar kolay kullanıldığını değerlendiren bir kalite niteliğidir⁷. Yani tasarım bir beğeni tartışması değil, ölçülebilir bir kalite alanıdır.

Web tasarımı, bir sitenin arayüzünü ve kullanıcı akışını planlama işidir; ne yazılacağını değil, neyin nerede ve hangi sırayla görüneceğini belirler. Sunucu yapılandırması, veritabanı modeli ve iş mantığı bu işin kapsamında değildir, orası web geliştirmenin alanıdır. Tasarımın çıktısı tek bir ekran da değildir: MDN'nin tanımıyla responsive web tasarım, sayfaların tüm ekran boyut ve çözünürlüklerinde iyi görünmesini sağlarken kullanılabilirliği de korur⁴.

Web tasarım ne demek? Kısa tanım

Web tasarım ne demek diye soranlar aslında iki şeyi birden sorar: bu iş neyi üretir ve kimin işidir. Üretilen şey bir görsel katman değil, karar setidir. Hangi bilgi hangi sırayla görünecek, kullanıcı hedefine kaç adımda ulaşacak, hangi eylem öne çıkacak? MDN aynı yaklaşımı çok cihazlı web için tasarlamanın yolu olarak tarif eder⁴.

Web tasarımı neyi kapsar, neyi kapsamaz

Kapsam üç katmanda toplanır. Görsel katman düzeni, tipografiyi, renk sistemini ve beyaz alanı yönetir. İşlevsel katman gezinmeyi, hızı ve eylem noktalarını kurar. Erişilebilirlik katmanı ise içeriğin farklı yeteneklere sahip kullanıcılar tarafından da algılanabilir ve işletilebilir olmasını güvence altına alır. Bu üçü ayrı kişilerce yapılsa bile tek bir kararlar bütünüdür.

• Kapsam içinde: bilgi mimarisi, tel çerçeve, arayüz tasarımı, bileşen ve tasarım sistemi, erişilebilirlik kararları.
• Kapsam içinde: performans hedefleri ve ölçüm planı; tasarım kararlarının sonucu burada görünür.
• Kapsam dışında: sunucu yapılandırması, veritabanı modeli, ödeme ve entegrasyon altyapısı.
• Kapsam dışında: içerik üretimi ve reklam yönetimi; tasarım bunları taşır ama yerine geçmez.

Bu sınır pratikte işe yarar. Bir projede tasarım bitti denildiğinde ne bittiğini, hangi çıktının kimin onayına gittiğini ve bir sonraki adımın kime devredildiğini bu ayrım belirler. Sınır çizilmediğinde en sık görülen sonuç, arayüzün geliştirme sırasında sessizce yeniden tasarlanmasıdır.

Web Tasarım Ne İşe Yarar? Neden Önemlidir?

Web tasarımı üç somut iş yapar: ilk izlenimi yönetir, kullanıcıyı hedefine götürür ve sayfanın arama sonuçlarındaki deneyim tarafını taşır. Üçünün de ölçülebilir bir karşılığı vardır. Bu bölümdeki rakamlar sıfat değil, kaynağı belli bulgulardır; her biri yayımlanmış bir çalışmadan ya da birincil dokümandan geliyor.

İlk izlenim ne kadar hızlı oluşur?

2012 tarihli IJHCS makalesi iki ayrı deneyden oluşuyor. İlk deneyde 119 gerçek web sitesi ekran görüntüsü, görsel karmaşıklık ve prototipiklik açısından değerlendirildi¹⁰; gösterim süresi 50, 500 ve 1000 milisaniye olarak değiştirildi¹⁰ ve etki, maruz kalmanın ilk 50 milisaniyesi içinde görüldü¹⁰. Aynı makalenin ikinci deneyinde süreler 17, 33 ve 50 milisaniyeye indirildi¹⁰; bu koşulda etki 17 milisaniyede bile ölçüldü¹⁰.

Her iki deney de 2012 tarihlidir ve laboratuvar koşullarında yapılmıştır; güncel bir saha ölçümü gibi sunulamaz. Yine de söylediği şey temeldir: ilk izlenim, metin okunmadan önce oluşuyor. Bu yüzden düzenin dengesi, kontrast ve sayfanın tanıdık bir kalıba oturması içerikten önce iş yapmaya başlar. Tasarımın süsleme sayıldığı projelerde kaybedilen şey tam burasıdır: kullanıcı içeriğe hiç ulaşmadan karar verir.

Kötü arayüzün ticari bedeli

İkinci iş dönüşümdür. Baymard Institute'un e-ticaret için derlediği veride belgelenmiş ortalama sepet terk oranı %70,22'dir¹¹ ve bu değer 50 farklı çalışmanın ortalamasıdır¹¹. Rakam yalnızca e-ticaret sepetleri için geçerlidir; kurumsal sitelere ya da form dolduran ziyaretçilere genellenemez. Gösterdiği şey yine de nettir: satın alma niyeti taşıyan kullanıcı bile arayüz zorlaştığında vazgeçiyor.

Üçüncü iş görünürlüktür. Google'ın dokümantasyonu, çekirdek sıralama sistemlerinin iyi sayfa deneyimi sunan içeriği ödüllendirmeyi hedeflediğini söylüyor³. Bu cümle tasarımın SEO'nun yerine geçtiği anlamına gelmez; sayfa deneyimi tek başına bir sıralama vaadi değildir. Arama tarafındaki karşılık bu yazının son bölümünde ayrıca ele alınıyor.

Bu üç iş birbirini besler. İlk izlenimi kaybeden sayfa dönüşüm şansını hiç kullanamaz; dönüşmeyen sayfa arama tarafında da sinyal üretmez. Bu yüzden tasarım bütçesi bir görsel harcaması değil, üç kalemin ortak altyapısıdır. Tasarımın önemli olduğunu söylemek yerine hangi işi hangi ölçütle yaptığını yazmak, bütçeyi de savunulabilir kılar.

Ölçütü yazılmayan tasarım, ilk bütçe tartışmasında en kolay kesilen kalem olur. Oysa bu üç işin de karşılığı ölçülebilir: ilk izlenim kullanıcı testinde, dönüşüm form ve sepet verisinde, deneyim ise saha ölçümünde görünür.

Web Tasarım ile Web Geliştirme Arasındaki Fark Nedir?

Web tasarımı kullanıcının ne gördüğü ve ne hissettiği sorusunu, web geliştirme sistemin nasıl çalıştığı sorusunu çözer. İkisi aynı projenin iki yarısıdır: tasarım kararı geliştirme maliyetini belirler, geliştirme kısıtı da tasarım seçeneklerini daraltır. Ayrımı yazılı hâle getirmenin faydası şudur; hangi çıktının kimin onayına gideceği baştan bellidir.

Yukarıdaki ayrım katı bir duvar değil, sorumluluk sınırıdır. Pratikte aynı kişi iki tarafı da yapabilir; değişmeyen şey, iki soruya ayrı ayrı cevap verilmesi gerektiğidir. Bir projede site yavaş şikâyeti geldiğinde sorunun hangi tarafa ait olduğunu bu sınır gösterir: görsel varlıkların ağırlığı tasarımın, sunucu yanıt süresi geliştirmenin defterine yazılır.

UI ile UX arasındaki fark

Görünen katmanın adı kullanıcı arayüzüdür (UI): düğmeler, formlar, ikonlar, tipografi ve renk. Bunun karşısındaki kavram olan kullanıcı deneyimi (UX), kullanıcının hedefine giden yolun tamamını kapsar; arayüz o yolun yalnızca bir parçasıdır. Bir düğmenin rengi arayüz kararıdır, o düğmenin akışın hangi adımında görüneceği deneyim kararıdır. Nielsen Norman Group kullanılabilirliği beş kalite bileşeniyle tanımlar⁷; bunların ilki öğrenilebilirliktir, yani kullanıcıların tasarımla ilk karşılaştıklarında temel görevleri ne kadar kolay tamamladığıdır⁷.

İki disiplin projede nerede kesişir?

Kesişme üç noktada olur. Birincisi tel çerçevenin teknik uygulanabilirliği, ikincisi bileşen kütüphanesinin kod tarafındaki karşılığı, üçüncüsü performans bütçesi. Üçüncüsü en çok atlanandır: kahraman görselin çözünürlüğü, yazı tipi ailesinin ağırlığı ve bir animasyonun maliyeti tasarım masasında kararlaştırılır, faturası ise ölçüm aşamasında çıkar.

Ekip kurgusunda pratik ölçüt şudur: tasarımcı kullanıcının göreviyle, geliştirici sistemin durumuyla ilgilenir. Aynı ekranda ikisi de çalışır ama başarı ölçütleri farklıdır. Tasarım tarafında ölçüt görev tamamlama ve kullanılabilirliktir; geliştirme tarafında kararlılık, hız ve bakım maliyetidir.

Ayrımın pratik faydası teklif değerlendirmesinde de görülür. Teklifi okurken sorulacak soru basittir: bu iş bittiğinde elime ne geçiyor? Bir teklifte yalnızca ekran sayısı yazıyorsa orada tasarım vardır ama tasarım sistemi yoktur; yalnızca teknoloji adları sıralanmışsa geliştirme vardır ama kullanıcı görevi tanımlanmamıştır. İki eksik de aynı yere çıkar: iş bittiğinde kimin neyi teslim ettiği yazılı olmaz.

Bu sınır küçük ekiplerde de geçerlidir. Tek kişi iki rolü birden üstlendiğinde bile iki ayrı liste tutulur; aksi hâlde teknik kısıt sessizce tasarım kararına dönüşür ve bunu kimse yazılı olarak görmez.

Web Tasarımın Temel Bileşenleri ve Tasarım İlkeleri

Web tasarımının bileşenleri ikiye ayrılır: görülen ve işleyen. Görsel bileşenler sayfanın okunmasını, işlevsel bileşenler kullanılmasını sağlar. İyi tasarım tartışmasının sıfat listesinden çıkması için her bileşenin bir ölçütü olmalıdır; aşağıdaki üç başlık bunu kurar.

Görsel bileşenler: düzen, tipografi, renk, beyaz alan

Düzen, sayfadaki öğelerin ağırlık sırasını belirler; okuyucu hangi bloğu ilk göreceğine düzenle karar verir. Tipografi okunabilirliği taşır: satır uzunluğu, satır aralığı ve punto, metnin ne kadar sürede taranacağını değiştirir. Renk kontrastı bir estetik tercih değil, okunabilirlik koşuludur. Beyaz alan ise boşluk değil gruplama aracıdır; birbirine ait olan öğeler yakın, olmayanlar uzak durur.

İyi tasarımın konuşulan özellikleri de ancak ölçüte bağlandığında işe yarar. Aşağıdaki yedi başlık, bir tasarımın yayına hazır olup olmadığını sıfatlarla değil kontrol edilebilir koşullarla sorar. Yasal zorunluluklar ve yayın öncesi kontrol listesi dâhil, kurumsal bir web sitesinin nasıl olması gerektiği ayrı bir rehberde ele alınıyor.

• Amaç netliği: sayfanın kullanıcıya yaptırmak istediği tek bir ana eylem vardır.
• Görsel hiyerarşi: en önemli bilgi, ekranın kaydırmadan görünen bölümünde yer alır.
• Okunabilirlik: metin boyutu ve kontrast, küçük ekranda yakınlaştırma gerektirmez.
• Tutarlılık: aynı işi yapan bileşen her sayfada aynı görünür ve aynı davranır.
• Gezinilebilirlik: kullanıcı bulunduğu yeri ve geri dönüş yolunu her an bilir.
• Hız: sayfa, ölçülebilir performans eşiklerini saha verisinde tutturur.
• Erişilebilirlik: içerik klavyeyle kullanılabilir ve ekran okuyucuyla anlaşılabilir.

İşlevsel bileşenler: gezinme, hız, eylem çağrısı

Gezinme, kullanıcının zihnindeki haritayı sayfaya çevirir; menü etiketleri ürün adlarıyla değil kullanıcının kelimeleriyle yazılır. Hız bir altyapı meselesi gibi görünür ama kararların çoğu tasarım masasında verilir: görsel sayısı, yazı tipi ağırlığı ve ekran üstündeki bileşenler yüklenme süresi üzerinde doğrudan etkilidir. Sayfanın sonucu ise eylem çağrısı (CTA) ile alınır; kullanıcıdan ne istendiği tek cümlede ve tek düğmede görünmelidir.

Google'ın sayfa deneyimi öz-değerlendirme sorularından biri doğrudan buraya bakar: sayfalarınızın Core Web Vitals değerleri iyi mi³? Aynı listede içeriğin mobil cihazlarda iyi görünüp görünmediği de sorulur³. Yani işlevsel bileşenler yalnız kullanıcı için değil, sayfanın değerlendirilme biçimi için de ölçülür.

Kullanılabilirliğin beş bileşeni

Nielsen Norman Group'un çerçevesi, iyi tasarım tartışmasını beş ölçülebilir başlığa indirger⁷. Yazının girişinde verilen kullanılabilirlik (usability) tanımı da aynı çerçeveden gelir; buradaki iş, o çerçeveyi tasarım masasındaki kararlara bağlamaktır. Beş başlığın her biri bir kullanıcı testinde tek tek gözlenebilir.

• Öğrenilebilirlik: kullanıcılar tasarımla ilk karşılaştıklarında temel görevleri ne kadar kolay tamamlıyor⁷?
• Verimlilik: tasarımı öğrendikten sonra görevleri ne kadar hızlı yapabiliyorlar⁷?
• Akılda kalıcılık: bir süre kullanmadıktan sonra döndüklerinde yetkinliklerini ne kadar kolay geri kazanıyorlar⁷?
• Hata: kullanıcılar kaç hata yapıyor, bu hatalar ne kadar ciddi ve hatalardan ne kadar kolay dönülüyor⁷?
• Memnuniyet: tasarımı kullanmak ne kadar keyifli⁷?

Bu beş başlık bir kontrol listesi değil, ölçüm planıdır. Her biri için bir görev tanımlanır, birkaç kullanıcıya yaptırılır ve sonuç sayıya döner: tamamlama oranı, geçen süre, hata sayısı. Tasarım tartışması bu noktadan sonra zevk meselesi olmaktan çıkar.

Bileşen kararlarının çoğu bir kez verilir ve her sayfada tekrarlanır. Bu yüzden tipografi ölçeği, aralık sistemi ve düğme durumları tek tek sayfalarda değil, tasarım sisteminde çözülür. Sistemi olmayan sitede her yeni sayfa, tasarımı bir miktar daha dağıtır.

Web Tasarım Türleri Nelerdir?

Web tasarım türleri iki eksende sınıflandırılır: sayfanın teknik olarak nasıl üretildiği ve sitenin ne işe yaradığı. Birinci eksen statik ile dinamik ayrımıdır, ikincisi amaç ayrımı. İkisi birbirini dışlamaz; kurumsal bir site hem dinamik olabilir hem de içerik yönetim sistemine bağlanabilir.

Statik ve dinamik siteler

Statik sitede sayfalar önceden üretilir ve her ziyaretçiye aynı dosya sunulur; hızlıdır, saldırı yüzeyi dardır, ama içerik güncellemesi teknik bir adım ister. Dinamik sitede sayfa istek anında birleştirilir; içerik yönetim sistemi, kullanıcıya göre değişen bloklar ve site içi arama böyle çalışır. Seçim, içeriği kimin ne sıklıkla güncelleyeceğine göre yapılır.

Responsive tasarım bu ikisinin alternatifi değildir, ikisinin de üstünde bir gerekliliktir. Google'ın tarifiyle responsive yaklaşım, kullanıcının cihazından bağımsız olarak aynı URL'de aynı HTML'i sunar². Kırılma noktaları ve medya sorguları gibi responsive tasarımın teknik tarafı ise ayrı bir rehberin konusudur.

Amaca göre: kurumsal, e-ticaret, açılış sayfası

Amaç ekseninde dört tür öne çıkar. Kurumsal site kurumun bütününü anlatır ve çoğu ziyaretçi için ilk temas noktasıdır. E-ticaret sitesi ürün, sepet ve ödeme akışını taşır; tasarım kararları doğrudan gelirle ilişkilidir. Bir açılış sayfası tek kampanya için kurulur, blog ise okunabilirlik üzerine kurulur.

• Kurumsal site: hizmet ve referans yapısı nettir, ölçütü iletişim ve teklif talebidir.
• E-ticaret sitesi: ürün listeleme, filtreleme ve ödeme akışı tasarımın merkezindedir.
• Açılış sayfası: tek eylem, tek mesaj; gezinme bilerek sadeleştirilir.
• Blog ve içerik merkezi: okunabilirlik, içindekiler ve iç bağlantı yapısı öne çıkar.

Tür seçimi bir moda tercihi değil, ölçüt seçimidir. Aynı tasarım kararı bir kampanya sayfasında doğru, kurumsal ana sayfada yanlış olabilir; çünkü ikisinin başarı tanımı farklıdır. MDN'nin tanımı burada da geçerlidir: hangi tür olursa olsun sayfa, tüm ekran boyut ve çözünürlüklerinde kullanılabilir kalmak zorundadır⁴.

Türkiye'de Web Tasarımın Mobil Gerçeği

Türkiye'de tasarım kararları önce küçük ekranda sınanır, çünkü trafiğin büyük çoğunluğu oradan geliyor. Statcounter ölçümüne göre Temmuz 2026'da Türkiye'de web trafiğinin platform payı şöyle: mobil %74,08⁶, masaüstü %25,33⁶ ve tablet %0,58⁶. Ölçümün ülkesi Türkiye, dönemi Temmuz 2026'dır⁶.

Bu rakamlar tarayıcı izleme kodu üzerinden toplanan bir ölçümdür; nüfusu temsil eden resmî bir istatistik değildir. Yine de yönü tartışmasızdır: masaüstünde iyi görünen ama mobilde sıkışan bir tasarım, ziyaretçilerin dörtte üçüne yakınına kötü bir deneyim sunar⁶. Mobil sürüm bir uyarlama değil, tasarımın asıl hâlidir.

Google sıralamayı hangi sürümden yapıyor?

Google, dizinleme ve sıralama için sitenin mobil sürümünü kullanıyor; bu yaklaşımın adı mobile-first indexing. Google'ın dokümanı, mobil sürüme sahip olmanın zorunlu olmadığını ama çok güçlü biçimde tavsiye edildiğini yazıyor². Aynı doküman pratik bir kural daha veriyor: mobil sayfanın içerik kalitesi masaüstü sayfa kadar iyi olmalıdır². Mobilde kısaltılan metin, gizlenen tablo ve atlanan bölüm bu kuralın karşı tarafıdır.

Her sektörde mobil oranı aynı mı?

Hayır, ve bu fark tasarım kararını değiştirir. Ülke ortalaması her kitle için geçerli değildir: roicool'un B2B ağırlıklı kendi sitesinde, 6 Mayıs - 2 Haziran 2026 arasındaki 28 günlük Search Console penceresinde masaüstü payı ülke ortalamasının epeyce üzerinde çıkıyor¹². Bu tek bir sitenin gözlemidir, sektör kuralı değil: bizim kendi verimizdir, üçüncü taraf ölçümü değildir ve Statcounter ile aynı dönemi kapsamaz.

Mobil öncelik yalnız ekran genişliğiyle ilgili değildir; bağlam da değişir, çünkü kullanıcı çoğu zaman ayaktadır, aceledir ve tek elle gezinir. Küçük ekranda parmak hedefi büyür, form alanı azalır, tablolar kaydırılabilir hâle gelir ve menü tek bir düğmenin arkasına iner. Aynı içeriği taşırken bu kararların hepsi yeniden verilir; masaüstü tasarımını küçültmek çözüm değildir. Google'ın responsive tarifinde de aynı URL ve aynı HTML korunur, değişen şey sunumdur².

Cihaz dağılımını okumanın en basit yolu, arama konsolu ile analitik raporlarını yan yana koymaktır. İkisi farklı şey sayar: biri arama sonucundaki gösterimi, diğeri sitedeki oturumu. Karar ikisi birlikte okunarak verilir.

Pratik sonuç şu: mobil öncelikli tasarlayın, ama kendi ölçümünüzü de okuyun. Ürününüz masaüstünde kullanılan bir iş aracıysa, çok sütunlu tabloların ve uzun formların masaüstü deneyimi ihmal edilemez. Karar ülke ortalamasına göre değil, kendi analitiğinizdeki cihaz dağılımına göre verilir. İki ölçüm çeliştiğinde ağırlık sizin kitlenizin verisindedir.

İyi Bir Web Tasarımı Nasıl Ölçülür?

İyi tasarımın ölçülebilir tarafı Core Web Vitals ile başlar. Bu metrikler sayfanın yüklenme, etkileşim ve görsel kararlılık deneyimini gerçek kullanıcı verisinde ölçer. Hiçbiri bir tasarımcının kanaatine bağlı değildir; hepsi eşikli, tekrarlanabilir ve dışarıdan denetlenebilir sayılardır.

Core Web Vitals eşikleri

Google'ın web.dev dokümantasyonuna göre iyi bir kullanıcı deneyimi için LCP, sayfa yüklenmeye başladıktan sonraki 2,5 saniye içinde gerçekleşmelidir¹. Etkileşim tarafında iyi kabul edilen eşik, INP'nin 200 milisaniye veya altında olmasıdır¹. Üçüncü metrik CLS ise görsel kararlılığı ölçer¹: sayfa yüklenirken kayan bir düğme, kullanıcıya yanlış tıklama yaptırır.

Tablodaki iki eşik bir hedef değil, alt sınırdır. Bir sayfa bu değerleri tutturduğunda hızlı olmaz; yalnızca kötü olmaktan çıkar. Tasarım tarafındaki karşılıkları da nettir: kahraman görselin boyutu yükleme süresini, ağır arayüz betikleri yanıt süresini, ölçüsü verilmemiş görsel alanları ise sayfa kaymasını üretir.

Eşikler kimin deneyimini ölçüyor?

Eşiklerin okunma biçimi çoğu rehberde atlanıyor. web.dev, kullanıcıların çoğu için hedefin tutturulduğundan emin olmak adına ölçülecek iyi eşiğin sayfa yüklemelerinin 75. persentili olduğunu ve mobil ile masaüstünün ayrı ayrı değerlendirildiğini söylüyor¹. Yani tek bir laboratuvar testi geçti demez; asıl soru, sayfa yüklemelerinin dörtte üçünün eşiği geçip geçmediğidir. En yavaş dörtte birlik dilim bu hesabın dışında kalır; ölçüt o kuyruğu bilerek tolere eder.

Metrik setinin kendisi de sabit değil. INP, 2024'te FID'in yerini alarak stabil bir Core Web Vitals metriği oldu¹. Bu tarihten önce yazılmış rehberler hâlâ eski metriği anlatıyor; bir teklifte ya da denetim raporunda FID görüyorsanız, o belge güncel eşik setine göre yazılmamış demektir.

Siteler bu eşiği tutturabiliyor mu? (dünya geneli)

Ölçülen tablo şöyle: HTTP Archive'in Web Almanac 2025 raporuna göre iyi Core Web Vitals oranı mobilde 2023'te %36 iken⁸, 2024'te %44'e⁸ ve 2025'te %48'e çıktı; aynı yıl masaüstünde oran %56 oldu⁸. Yani mobil siteler masaüstünün gerisinde: mobilde sitelerin yarıdan fazlası, masaüstünde ise yarıya yakını eşiği tutturamıyor. Türkiye kırılımı bu raporda yayımlanmıyor; ülke düzeyinde karşılaştırma için CrUX veri setine bakılmalıdır.

Bu, tasarım tarafında ayrışmak için düşük bir bariyer demek. Ölçümü kimin yaptığı da önemlidir: saha verisi gerçek kullanıcıların tarayıcılarından toplanır, laboratuvar aracı ise tek bir simülasyon koşar. İkisi çeliştiğinde karar saha verisine göre verilir, çünkü eşiği tanımlayan doküman da saha ölçümünü esas alıyor¹.

Ölçümü düzenli hâle getirmenin yolu basit: aynı sayfaya aynı araçla, aynı periyotta bakmak ve her değişikliği tarihiyle kaydetmek. Böylece bir iyileştirmenin eşiği hangi tarihten sonra taşıdığı görülür. Ölçüm düzeni kurulmadan yapılan iyileştirme, sonucu görünmeyen bir masraftır.

Erişilebilirlik: Web Tasarımın Atlanan Dördüncü Ayağı

Erişilebilirlik, tasarımın dördüncü ayağıdır ve Türkçe kaynaklarda en çok atlanan başlıktır. Kapsamı engelli kullanıcılarla sınırlı da değildir: güneş altında küçük ekrandan okuyan, kolu sakatlandığı için tek elle gezinen ya da videoyu sessiz izleyen herkes aynı çözümlerden yararlanır. Erişilebilir tasarım, herkes için daha dayanıklı tasarımdır.

WCAG'ın dört ilkesi

Web İçeriği Erişilebilirlik Kılavuzu (WCAG), erişilebilirliği dört ilkeye dayandırır. MDN'nin aktardığı biçimiyle bu ilkeler şunlardır:

• Algılanabilir: kullanıcılar içeriği bir ya da birden fazla duyusuyla algılayabilmelidir⁵.
• İşletilebilir: kullanıcılar arayüz öğelerini kontrol edebilmelidir; örneğin düğmeler fare, klavye ya da sesli komutla tıklanabilir olmalıdır⁵.
• Anlaşılabilir: içerik, kullanıcıları tarafından anlaşılabilir olmalıdır⁵.
• Sağlam: içerik, farklı tarayıcılarda bugün ve gelecekte çalışacak yaygın kabul görmüş web standartlarıyla geliştirilmelidir⁵.

Bu dört ilke tasarım masasında somut kararlara dönüşür: metin ile arka plan arasındaki kontrast, yalnızca renkle taşınmayan bilgi, klavyeyle gezilebilen sıralama, formdaki hatayı anlatan mesaj ve görsele yazılan alternatif metin. Hiçbiri sonradan eklenen bir modül değildir; hepsi tasarımın kendisidir.

Otomatik test neyi göremez?

Otomatik denetim yararlıdır ama sınırlıdır. Web Almanac 2025'in erişilebilirlik bölümüne göre medyan Lighthouse erişilebilirlik puanı 2024'e kıyasla %1 iyileşerek 2025'te %85'in üzerine çıktı⁹. Aynı bölüm iki uyarı koyuyor: otomatik testler WCAG başarı ölçütlerinin ancak bir bölümünü denetleyebilir⁹ ve tam puan, tam erişilebilirlik garantisi vermez⁹.

Erişilebilirliği tasarım aşamasında ele almak, sonradan düzeltmekten ucuzdur; kararların çoğu zaten ilk hafta veriliyor. Kontrast oranı renk paleti seçilirken belirlenir; odak göstergesi bileşen kütüphanesi kurulurken tanımlanır; başlık hiyerarşisi tel çerçevede ortaya çıkar. Yayından sonra eklenen erişilebilirlik katmanı ise çoğu zaman görünür tasarımı bozar ya da yalnızca aracın gördüğü hataları kapatır.

Erişilebilirliğin bir de içerik tarafı vardır: bağlantı metinleri, başlık sırası ve görsellerin alternatif metinleri. Bunlar çoğu zaman içerik ekibinin kalemidir ama aynı denetimde ölçülür ve aynı ilkelere bağlıdır.

Aynı raporun aktardığı GOV.UK/Alphagov karşılaştırmasına göre yaygın kullanılan otomatik denetim araçlarının tamamı, erişilebilirlik hatalarının %50'sinden azını yakalıyor⁹. Sonuç şudur: erişilebilirlik bir aracın verdiği puan değil, tasarım kararlarının toplamıdır. Puan bir başlangıç noktasıdır; bir formu klavyeyle baştan sona doldurmak, aracın yakalayamadığı sorunların çoğunu birkaç dakika içinde gösterir.

Web Tasarım Süreci Adım Adım Nasıl İlerler?

Web tasarım süreci beş aşamada ilerler. Her aşamanın bir çıktısı ve bir onay sahibi vardır; bunlar yazılmadığında süreç tasarımcı bir şeyler gösterir, müşteri beğenir ya da beğenmez döngüsüne düşer. Aşağıdaki akış yaygın uygulanan sıradır ve her adımda ne teslim edildiği tanımlıdır.

1. Keşif ve hedef tanımı: iş hedefi, hedef kitle ve başarı ölçütü yazılır. Çıktı, ölçütleri belirlenmiş kısa bir brief; onaylayan taraf müşteridir.
2. İçerik mimarisi ve tel çerçeve: sayfa envanteri, gezinme yapısı ve her şablonun tel çerçevesi hazırlanır. Çıktı, içerik haritası ve tel çerçevelerdir.
3. Arayüz tasarımı: tipografi ölçeği, renk sistemi ve bileşenler bir tasarım sistemine bağlanır. Çıktı, tüm kırılma noktalarında hazırlanmış ekran tasarımlarıdır.
4. Geliştirme ve test: tasarım koda çevrilir; tarayıcı, cihaz, klavye ve performans testleri yapılır. Çıktı, düzeltme listesi kapatılmış bir hazırlık ortamıdır.
5. Yayın, ölçüm ve bakım: yayın sonrasında saha performans verisi, form tamamlama ve ısı haritası okunur, düzeltmeler sıraya alınır.

Her adımda onayı kim verir?

Onayı kimin verdiği her adımda ayrıca yazılır; süreç şemasının asıl işlevi budur. Sıralama şöyledir: keşifte iş hedefini müşteri, içerik mimarisinde içerik sorumlusu, arayüz tasarımında marka tarafı, geliştirme ve testte teknik sorumlu, yayın sonrasında ise ölçümü kuran taraf onaylar. Bu roller baştan konmadığında proje sonunda herkesin fikri olan ama kimsenin kararı olmayan bir revizyon listesi oluşur.

Tel çerçeve ve tasarım

Adımların sırası kadar aralarındaki geri dönüşler de önemlidir. Tel çerçeve onaylanmadan görsel tasarıma geçilen projelerde en pahalı gecikme üçüncü adımda değil dördüncüde çıkar: kodlanmış bir ekranı yeniden düzenlemek, tel çerçeveyi düzeltmekten kat kat maliyetlidir. Bu yüzden her adımın çıktısı, bir sonraki adımın girdisi olarak yazılı devredilir.

Geliştirme, test ve yayın

Dördüncü adımdaki performans testinin geçme ölçütü de baştan tanımlıdır: LCP için 2,5 saniye¹, INP için 200 milisaniye¹. Ölçüt yazılmadığında test bir izlenim turuna dönüşür ve herkes kendi cihazındaki hızı ölçü sanır.

Süreç gerçekte nasıl görünüyor: iki örnek

Sürecin gerçek çıktısını görmek isteyenler için iki örnek var: MEP DMC vaka çalışması ve Milore web sitesi projesi. İkisi de farklı sektörlerden. Bu yazı o sayfalardaki sonuçları tekrarlamaz; örneklere tasarım kurgusu, sayfa yapısı ve içerik düzeni için bakın.

Süreyi ne belirler?

Süreye ilişkin bir rakam bu yazıda bilerek verilmiyor. Süreyi belirleyen şey aşama sayısı değil karar hızıdır: içerik ne zaman hazır olur, kaç onay turu yapılır, kaç şablon özel geliştirme ister. Ölçüt olarak takvim değil, çıktının onaylanması alınmalıdır; takvim de çıktıların onaylandığı tarihlerle birlikte güncellenir.

Web Tasarımda Kullanılan Programlar, Diller ve Araçlar

Web tasarımında araç seçimi, işin hangi aşamasında olduğunuza bağlıdır. Tasarım araçları arayüzü kurar, işaretleme ve stil dilleri onu tarayıcıya çevirir, platformlar ise içeriğin sonradan kim tarafından yönetileceğini belirler. Üçü ayrı kararlardır ve birbirinin yerine geçmez.

Tasarım araçları

Arayüz tasarımı bugün ağırlıklı olarak Figma gibi ortak çalışmaya açık vektör araçlarında yapılıyor; aynı dosyada tel çerçeve, bileşen kütüphanesi ve tıklanabilir prototip birlikte yaşıyor. Görsel üretimi ve fotoğraf işleme tarafında Adobe ailesi yerini koruyor. Araç seçiminde ölçüt en popüler olan değil, devir teslim yükünü azaltan olmalıdır: tasarım sistemi kurulabiliyor mu, geliştirici ölçüleri ve varlıkları doğrudan alabiliyor mu?

Kodun tarafı: HTML, CSS, JavaScript

Tarayıcıda çalışan üç dil vardır. HTML içeriğin yapısını ve anlamını taşır; başlık hiyerarşisi, liste, tablo ve form etiketleri erişilebilirliğin temelidir. CSS düzeni, tipografiyi ve kırılma noktalarını yönetir. JavaScript etkileşim ekler ama bedeli vardır: ağır betikler etkileşime verilen yanıtı geciktirir. Tasarımcının bu üç dili yazması gerekmez; ne yaptıklarını bilmesi, uygulanabilir kararlar vermesini sağlar.

Platformlar ve içerik yönetim sistemleri

Platform kararı, yayın sonrasının kararıdır. Webflow görsel bir geliştirme ortamı sunar ve tasarım sistemini doğrudan üretime bağlar; WordPress ise geniş eklenti ekosistemi ve yaygın uzmanlıkla öne çıkar. Başsız içerik yönetim sistemleri içeriği arayüzden ayırır ve aynı içeriği birden fazla kanala besler. Doğru seçim ekibinize bağlıdır: içeriği kim güncelleyecek, kaç şablon gerekecek, ne kadar özel geliştirme var?

Araç listesi hızla eskir, ölçüt eskimez. Bir aracı seçerken sorulacak soru şudur: bu araç tasarımın çıktısını üretime kayıpsız taşıyor mu ve ekip devraldığında bakımı kim yapacak? Lisans ve fiyat karşılaştırması bu yazının kapsamı dışındadır.

Araçların ötesinde bir de teslim biçimi vardır. Tasarım dosyası yalnızca ekran görüntüsü olarak devredilirse geliştirme tarafında her ölçü yeniden yorumlanır. Bileşen adları, aralık ölçeği ve durum çeşitleri yazılı olduğunda ise aynı dosya doğrudan üretim girdisine döner. Aracı değiştirmek kolaydır; devredilemeyen bir dosya bırakmak pahalıdır.

Web Tasarım Terimleri ve Anlamları

Web tasarım terimleri, projelerde en çok yanlış anlaşılan alandır. Aynı toplantıda tel çerçeve ile prototip birbirinin yerine kullanıldığında, onaylanan şeyin ne olduğu belirsiz kalır. Aşağıdaki tablo bir web tasarım projesinde sık geçen terimleri kısa karşılıklarıyla veriyor; tanımlar sözlük düzeyinde tutuldu, jargon üstüne jargon konmadı.

Tasarım terimleri

Tasarım tarafındaki terimlerin çoğu sürecin çıktılarını adlandırır: tel çerçeve düzeni, prototip akışı, tasarım sistemi ise tekrar kullanılabilir bileşenleri tarif eder. Görsel hiyerarşi ve beyaz alan ise kararların gerekçesini anlatır; neyin önce görüleceğini ve hangi öğelerin birbirine ait olduğunu.

Teknik ve ölçüm terimleri

Teknik terimler ekranın davranışını, ölçüm terimleri sonucunu adlandırır. Viewport tarayıcının görünür alanıdır, kırılma noktası düzenin değiştiği ekran genişliğidir. Sekmede görünen küçük simgeye favicon denir. Ölçüm tarafında LCP ve INP, sayfanın yüklenme ve yanıt deneyimini temsil eder; ikisi de saha verisinden okunur, tarayıcı üzerinden gerçek kullanıcılarla toplanır.

Terimlerin bir kısmı Türkçeleşti, bir kısmı İngilizce kullanılmaya devam ediyor. Ölçüt şudur: müşterinin anladığı karşılık hangisiyse toplantıda o kullanılır, belgede ikisi birden yazılır. Aşağıdaki tabloda terimlerin İngilizce hâli ve Türkçe karşılığı birlikte veriliyor; böylece ajans belgesiyle kendi notlarınız arasında çeviri kaybı olmuyor.

Terimleri ortak bir dile bağlamak, tasarım sürecindeki geri dönüşlerin çoğunu baştan önler. Bir toplantıda ana sayfa tasarımını onayladık cümlesi, hangi çıktının onaylandığı yazılı değilse pratikte bir şey ifade etmez. Sözlük, tarafların aynı kelimeyi aynı anlamda kullanmasını sağlar.

Web Tasarımda Yaygın Hatalar ve Fiyatı Belirleyen Unsurlar

Bu bölüm iki soruyu birlikte ele alıyor: projelerde en sık nerede hata yapılıyor ve fiyat neye göre değişiyor? İkisinin ortak paydası aynı; hata da fiyat farkı da çoğu zaman ölçüt yazılmadığı için ortaya çıkıyor.

Sık görülen beş tasarım hatası

Aşağıdaki beş başlık, yayına giren projelerde en sık düzeltilenler; hepsi yayından önce, tek tek kontrol edilerek görülebilir.

• Mobilde ikinci sınıf deneyim: masaüstü için tasarlanıp mobile sıkıştırılan düzenler, trafiğin büyük bölümünü karşılamaz.
• Ölçüsü verilmemiş görsel ve geç yüklenen yazı tipi: sayfa açılırken içerik kayar, kullanıcı yanlış yere tıklar.
• Belirsiz eylem çağrısı: bir ekranda birbiriyle yarışan üç düğme, hiçbirinin tıklanmamasıyla sonuçlanır.
• Kontrast ve klavye ihmali: yalnızca renkle taşınan bilgi ve klavyeyle gezilemeyen menü, erişilebilirliği baştan kırar.
• Ölçümsüz yayın: analitik, form takibi ve saha performans verisi kurulmadan yayına çıkan site, neyin işe yaradığını öğrenemez.

Bu listeyi bir denetim formu gibi kullanmak da mümkün. Her başlık için tek bir soru sorulur: ölçüsü ne, kim bakıyor, hangi veriyle kapanıyor? Cevabı olmayan başlık, yayın sonrasında sorun olarak geri gelir.

Bu beş başlığın ortak yanı, hepsinin yayından önce kontrol edilebilir olmasıdır. Otomatik denetimin kapsadığı kısım sınırlıdır⁹; kalanı klavye, gerçek cihaz ve saha verisiyle görülür. Çekirdek sıralama sistemlerinin iyi sayfa deneyimini ödüllendirmeyi hedeflediği³ düşünüldüğünde, bu düzeltmeler yalnız kullanıcı için değil görünürlük için de yapılır.

Fiyatı ne belirler?

Web tasarımı fiyatını belirleyen değişkenler bellidir: kapsam, şablon ve sayfa sayısı, özel geliştirme ihtiyacı, içerik üretiminin kimde olduğu, çok dillilik ve yayın sonrası bakım. Bu yazıda bilerek tutar verilmiyor; kalem kalem karşılaştırma web sitesi fiyatları rehberi başlığında duruyor. Arama tarafındaki karşılık da ayrı bir konudur: tasarımın hangi kararlarının aramayı etkilediğini SEO uyumlu web tasarım yazısı ele alıyor.

Bu ölçütlerin kendi projenizde nasıl uygulandığını görmek isterseniz kurumsal web tasarım hizmeti sayfamızdaki çalışma biçimine bakabilirsiniz. Kapsam yazılı olmadığında karşılaştırılan şey fiyat değil, sadece rakamdır.