Web Tasarım Nedir? Sitenizin Dijitaldeki Takım Elbisesi

Web tasarım nedir sorusunun kısa cevabı şu: bir sitenin nasıl görüneceğini, içeriğin hangi sırayla okunacağını ve ziyaretçinin hangi adımlarla iletişime ya da satın almaya ulaşacağını planlama işi. Daha derli toplu söylersek, web tasarım bir web sitesinin görsel düzenini, içerik akışını ve ziyaretçiyle etkileşimini işletmenin hedefine göre kurgulayan disiplindir. Yani mesele yalnızca renk ve yazı tipi seçmek değil. İyi tasarlanmış bir site, ziyaretçiye "doğru yerdesiniz, buradan ilerleyin" der.

Bambu Dijital olarak 10+ yıldır site tasarlıyoruz ve en sevdiğimiz benzetme hep aynı: siteniz dijitaldeki takım elbisenizdir. Üzerinize oturursa kimse dikişlere bakmaz, sizi dinler. Bol gelirse ya da yırtıksa konuşmanızın yarısı kaybolur. Bu yazıda iyi bir sitenin 7 temel unsurunu, kullanıcı deneyimi ile arayüz arasındaki farkı, tasarım sürecini ve en sık gördüğümüz hataları anlatıyoruz.

Web tasarım nedir ve hangi işleri kapsar?

Web tasarım, bir sitenin ziyaretçiye nasıl göründüğünü ve nasıl kullanıldığını belirleyen planlama ve çizim sürecidir. Sayfa düzeni, renkler, tipografi, görseller, menü yapısı, butonlar ve formlar bu sürecin parçasıdır. Ama işin görünmeyen kısmı da en az bu kadar büyüktür: hangi bilginin hangi sayfada duracağı, ziyaretçinin nereden nereye geçeceği ve sitenin telefonda nasıl davranacağı.

Türkçe Vikipedi'deki web grafik tasarımı maddesi de alanı grafik tasarımla yakın ama web'in kendine özgü ihtiyaçlarına cevap veren ayrı bir disiplin olarak tanımlıyor. Bu ayrım önemli. Basılı bir broşürü insanlar baştan sona okur; bir web sayfasında ise göz önce başlığa, sonra bir butona, sonra belki bir görsele atlar ve çoğu zaman sayfanın yarısında karar verir.

Kısacası web sitesi tasarımı, estetik ile işlevin aynı masada oturduğu bir iştir. Güzel ama kullanılmayan bir site, vitrini şık ama kapısı kilitli bir dükkâna benzer.

Takım elbise benzetmesi neden yerinde?

Takım elbise üç şeyi aynı anda yapar: sizi tanıtır, ortama uydurur ve rahat hareket etmenizi sağlar. Web sitesi de öyle. Markanızı tanıtır, sektörünüzün beklentisine uyar ve ziyaretçinin rahatça dolaşmasına izin verir.

Hazır bir takım bazen iş görür, ama omuzlar biraz düşük, kollar biraz uzun kalır. Ölçüyle dikilen takım ise sizin duruşunuza göre biçilir. Web tasarımda da hazır kalıplarla özel tasarım arasındaki fark çoğu zaman bu "oturma" meselesidir; bu karşılaştırmayı ayrı bir yazıda detaylıca ele alacağız.

Web tasarımı ve kodlama aynı şey mi?

Hayır, değil. Web tasarımı ve kodlama aynı projenin iki farklı aşamasıdır: tasarım sitenin neye benzeyeceğine ve nasıl kullanılacağına karar verir, kodlama ise bu kararı tarayıcıda çalışan HTML, CSS ve JavaScript'e çevirir. Biri mimarın çizdiği plan, öteki o planı inşa eden ustadır.

Pratikte tasarımcı bir sayfanın taslağını Figma gibi bir araçta hazırlar: başlık burada, form şurada, mobilde menü şöyle açılacak. Geliştirici bu taslağı alıp kodla canlandırır, sunucuya, veritabanına ve içerik yönetim sistemine bağlar. İki taraf birbirini anlamazsa ortaya "tasarımda çok güzeldi, sitede neden böyle oldu?" sorusu çıkar.

Yazılım tarafının kendi derinliği var; arka plandaki sistemler, veritabanları ve özel geliştirmeler başka bir yazının konusu. Burada bilmeniz gereken tek şey şu: iyi bir proje, tasarım ve kodlamayı birbirinden kopuk değil, aynı ekipte konuşan iki ses olarak yürütür.

İyi bir web sitesi tasarımı hangi 7 unsura dayanır?

Projelerimizde bir siteyi değerlendirirken hep aynı yedi başlığa bakıyoruz. Bunlardan biri eksik kaldığında, diğerleri ne kadar parlak olursa olsun site beklenen işi tam yapmıyor. Sırayla gidelim.

1. Amaç ve mesaj: Site ne için var?

Tasarımın ilk sorusu "nasıl görünsün?" değil, "bu site ne işe yarayacak?" olmalı. Randevu mu alacak, teklif mi toplayacak, ürün mü satacak, yoksa kurumsal güven mi verecek? Cevap, ana sayfanın ilk ekranından menü sırasına kadar her kararı etkiler.

Mesaj da aynı netlikte olmalı. Ziyaretçi sitenize girdiğinde birkaç saniye içinde ne yaptığınızı, kime hizmet verdiğinizi ve bir sonraki adımın ne olduğunu anlamalı. "Kaliteli hizmet, müşteri memnuniyeti" gibi her siteye uyan cümleler bu işi yapmaz; "Ankara'da kurumsal firmalar için şablonsuz web sitesi" gibi somut bir cümle yapar.

2. Bilgi mimarisi: İçerik nerede duracak?

Bilgi mimarisi, sitenin sayfalarının ve menülerinin mantıklı bir düzende kurulmasıdır. Bir kütüphanede kitaplar rastgele dizilmişse en iyi kitabı bile bulamazsınız. Sitede de hizmetler, ürünler, hakkımızda ve iletişim sayfaları ziyaretçinin zihnindeki sıraya göre yerleşmeli.

İyi bir yapının arama motorlarına da faydası var. Google, net hiyerarşisi olan ve sayfaları birbirine anlamlı biçimde bağlanan siteleri daha kolay tarar ve anlar. Arama görünürlüğünün temellerini merak ediyorsanız SEO nedir ve nasıl çalışır yazımız bu konunun devamı niteliğinde.

Pratik bir kural: önemli her sayfaya ana sayfadan en fazla iki üç tıkla ulaşılabilmeli. Menüde on iki başlık varsa, büyük ihtimalle bazılarını gruplamanın zamanı gelmiştir.

3. Görsel hiyerarşi: Göz önce nereye bakıyor?

Görsel hiyerarşi, sayfadaki öğelerin önem sırasını boyut, renk, boşluk ve konumla anlatmaktır. En önemli başlık en büyük, ana buton en belirgin, ikincil bilgiler daha sakin durur. Her şey aynı yüksek sesle bağırırsa ziyaretçi hiçbirini duymaz.

Boşluk burada sanıldığından daha değerlidir. Sayfayı doldurmak için eklenen her kutu, asıl mesajın biraz daha gölgede kalması demek. Biz tasarımda "az ama doğru öğe" ilkesini seviyoruz; ziyaretçinin gözünü yormayan bir sayfa, mesajı daha uzun süre taşır.

4. Mobil uyum: Telefonda da aynı özen

Mobil uyum (responsive tasarım), sitenin telefon, tablet ve masaüstü ekranlarında kendini otomatik olarak düzenlemesidir. Bugün pek çok sektörde ziyaretçilerin önemli bir kısmı siteye ilk kez telefondan geliyor. Masaüstünde kusursuz duran bir sayfa, telefonda küçücük yazılar ve iç içe geçen butonlarla açılıyorsa, o ziyaretçi için siteniz zaten o kötü versiyondur.

Bu yüzden tasarıma çoğu zaman mobil ekrandan başlıyoruz. Küçük ekran, neyin gerçekten gerekli olduğunu bize dürüstçe söyler. Parmakla rahat basılabilen butonlar, tek elle doldurulabilen formlar ve kısa paragraflar mobil uyumun gündelik karşılığıdır.

5. Hız: Ziyaretçi beklemeyi sevmez

Sayfa hızı tasarımın bir parçasıdır, sonradan eklenen bir süs değil. Ağır görseller, gereksiz animasyonlar ve onlarca eklenti, en güzel tasarımı bile yavaşlatır. Ziyaretçi ise beklerken sabır göstermez, geri tuşuna basar.

Google'ın geliştirici kaynağı web.dev'deki hızın neden önemli olduğunu anlatan yazıya göre BBC, sitesinin yüklenmesine eklenen her saniyede kullanıcılarının %10'unu daha kaybettiğini tespit etmiş. Aynı sayfada aktarılan Vodafone örneğinde ise en büyük içeriğin yüklenme süresini (LCP) %31 iyileştirmek satışları %8 artırmış. Rakamlar sektöre göre değişir ama yön hep aynı: hızlı site, daha fazla kalan ziyaretçi demek.

Google'ın bu hızı ölçmek için kullandığı Core Web Vitals metriklerini ayrı bir yazıda ele alacağız. Tasarım aşamasında yapabileceğiniz en iyi şey, görselleri baştan doğru boyutta ve modern formatta (örneğin WebP) planlamak ve her eklentiye "buna gerçekten ihtiyacımız var mı?" diye sormak.

6. Erişilebilirlik: Herkes kullanabiliyor mu?

Erişilebilirlik, sitenin görme, işitme ya da hareket kısıtı olan kişiler dahil herkes tarafından kullanılabilmesidir. Yeterli renk kontrastı, görsellerde açıklayıcı alternatif metin, klavyeyle gezilebilen menüler ve okunaklı yazı boyutu bunun temel taşlarıdır. Bu ayrıntılar yaşlı ziyaretçilere ya da güneş altında telefonuna bakan herkese de yarar.

Tablo maalesef iç açıcı değil. Web erişilebilirliği üzerine çalışan kâr amacı gütmeyen kuruluş WebAIM'in 2026 raporuna göre, incelenen bir milyon ana sayfanın %95,9'unda otomatik araçlarla tespit edilebilen erişilebilirlik hatası bulunuyor. Aynı rapora göre sayfaların %83,9'unda düşük kontrastlı metin, %53,1'inde alternatif metni eksik görsel var. İkisi de tasarım aşamasında birkaç dakikalık özenle önlenebilecek hatalar.

7. Dönüşüm noktaları: Ziyaretçi ne yapacak?

Dönüşüm noktası, ziyaretçinin sizinle iş yapma yönünde attığı adımdır: form doldurmak, aramak, WhatsApp'tan yazmak, sepete ürün eklemek. İyi bir tasarım bu adımları gizlemez, doğal bir sırayla öne çıkarır. Bir hizmet sayfasını okuyup ikna olan kişi, "peki şimdi ne yapacağım?" diye etrafına bakmamalı.

Formlar burada ayrı bir başlık. Her fazladan alan, formu yarıda bırakma ihtimalini artırır. Ad, iletişim bilgisi ve kısa bir not çoğu hizmet işletmesi için yeterlidir. Satış yapan sitelerde ise sepet ve ödeme adımlarının sadeliği belirleyicidir; mağaza kurmayı düşünüyorsanız e-ticaret nasıl yapılır rehberimiz bu adımları baştan sona anlatıyor.

Kullanıcı deneyimi (UX) ile arayüz (UI) arasındaki fark nedir?

Kullanıcı deneyimi (UX), ziyaretçinin sitede hedefine ne kadar kolay ve rahat ulaştığıyla ilgilidir. Arayüz tasarımı (UI) ise bu yolculukta gördüğü ekranların görsel tarafıdır: butonun rengi, yazı tipi, ikonlar, boşluklar. Biri yolun planı, öteki yol boyunca gördüğünüz tabelalar ve kaldırımlardır.

İkisi birbirinden ayrı düşünülemez ama karıştırılmamalı da. Çok şık bir arayüz, kötü kurgulanmış bir akışı kurtaramaz. Tersine, çok mantıklı bir akış da özensiz bir görünüşle güven vermekte zorlanır.

Karşılaştırma ölçütü	Kullanıcı deneyimi (UX)	Arayüz tasarımı (UI)
Cevapladığı soru	Ziyaretçi hedefine kolayca ulaşabiliyor mu?	Ekran nasıl görünüyor, ne hissettiriyor?
Odak noktası	Akış, sayfa sırası, form adımları, içerik yapısı	Renk, tipografi, ikon, buton, boşluk
Tipik çıktılar	Site haritası, kullanıcı akışı, tel çerçeve (wireframe)	Görsel taslak (mockup), stil rehberi, bileşen kütüphanesi
Başarı ölçüsü	Form tamamlama, sayfadan çıkma oranı, görev süresi	Okunabilirlik, marka tutarlılığı, görsel netlik
Benzetme	Evin kat planı	Evin boyası, mobilyası, ışıkları

Küçük ve orta ölçekli projelerde bu iki rolü çoğu zaman aynı ekip üstlenir. Önemli olan unvan değil, iki sorunun da sorulmasıdır: "Kolay mı?" ve "Doğru görünüyor mu?"

Web tasarım süreci nasıl ilerler?

Bambu Dijital'de her web tasarım projesi dört adımda ilerler: Bi' Düşünelim, Bi' Başlayalım, Bi' Yapalım ve son olarak birlikte gözden geçirme. Bu sıra, sonsuz revize döngüsünü baştan azaltmak için var. Bambu'nun acelesi yoktur; ama plan netse iş de kendiliğinden hızlanır.

Bi' Düşünelim: Önce dinliyoruz

İlk adımda işletmenizi, hedef kitlenizi ve sitenin ana görevini konuşuyoruz. Rakiplerin ne yaptığına, mevcut sitenizin (varsa) nerede zorlandığına ve hangi içeriklerin elinizde hazır olduğuna bakıyoruz. Bu aşamanın çıktısı, sayfa listesi ve önceliklerle birlikte yazılı bir yol haritasıdır.

Bi' Başlayalım: İskelet ve taslak

İkinci adımda site haritasını ve tel çerçeveleri (wireframe) çiziyoruz. Bunlar renksiz, süssüz kutulardan oluşan iskeletlerdir; amaç içeriğin yerini ve akışını netleştirmek. Ardından markanızın renkleri ve tipografisiyle görsel taslaklara geçiyoruz. Değişiklikler bu aşamada yapılırsa hem ucuz hem kolay olur.

Bi' Yapalım: Kodlama, içerik ve test

Onaylanan tasarım bu adımda çalışan bir siteye dönüşüyor. Çoğu projede altyapı olarak WordPress kullanıyoruz, çünkü site size ait kalıyor ve içerikleri kendiniz güncelleyebiliyorsunuz. Yayından önce siteyi farklı telefonlarda ve tarayıcılarda deniyor, formları test ediyor ve hızını ölçüyoruz.

Bi' Daha? Yayın sonrası birlikte bakıyoruz

Site yayına girdikten sonra iş bitmiyor. İlk haftalarda ziyaretçilerin nerede takıldığına, hangi sayfaların okunduğuna ve formların çalışıp çalışmadığına bakıyoruz. Gerekirse küçük ayarlar yapıyoruz. Şablonsuz ve markaya özel tasarım yaklaşımımızı web tasarım hizmetimiz sayfasında daha ayrıntılı anlattık.

Web tasarım uygulamaları: Hangi araçlar kullanılır?

Web tasarım uygulamaları, tasarımcının fikri ekrana dökmesine ve geliştiriciye aktarmasına yarayan programlardır. Araç tek başına iyi tasarım yapmaz, ama doğru araç ekip içindeki iletişimi epey kolaylaştırır. Web tasarım nedir sorusunun gündelik, elle tutulur tarafı da bu programlarda görünür. En sık karşılaşacağınız grupları kısaca özetleyelim.

Arayüz ve prototip araçları: Figma bugün sektörde en yaygın kullanılanlardan biri. Tarayıcıda çalışır, birden fazla kişi aynı dosya üzerinde eş zamanlı çalışabilir ve tıklanabilir prototip hazırlamaya izin verir. Mac kullanan ekiplerde Sketch de benzer amaçla tercih edilen bir alternatif.

Görsel düzenleme araçları: Fotoğraf ve grafik hazırlığı için Adobe Photoshop ve Illustrator hâlâ standart. Görsellerin web'e uygun boyut ve formatta dışa aktarılması, hız açısından burada başlar.

İçerik yönetim sistemleri: Tasarım kodlandıktan sonra sitenin yönetileceği altyapıdır. WordPress, dünyada en çok kullanılan içerik yönetim sistemlerinden biri ve bizim de en sık tercih ettiğimiz altyapı; nasıl çalıştığımızı WordPress hizmetimiz sayfasında görebilirsiniz.

Test ve ölçüm araçları: Google'ın PageSpeed Insights aracı sayfa hızını, tarayıcıların geliştirici araçları ise mobil görünümü ve erişilebilirlik sorunlarını kontrol etmeye yarar. Tasarım bittiğinde bu araçlarla bir tur atmak, sürprizleri yayından önce yakalamanızı sağlar.

Projelerimizde en sık gördüğümüz web tasarım hataları

Yıllar içinde yeniden tasarım için gelen sitelerde aynı hataları tekrar tekrar görüyoruz. Çoğu kötü niyetten değil, "web tasarım nedir, bu site ne işe yarayacak?" sorusu sorulmadan işe girişilmesinden kaynaklanıyor. İşte listenin başındakiler.

• Tasarıma amaçtan önce başlamak: "Rakibin sitesi gibi olsun" diye başlayan projeler, çoğu zaman rakibin sorunlarını da kopyalar.
• Masaüstünü düşünüp mobili unutmak: Taslak büyük ekranda onaylanıyor, telefonda ise butonlar üst üste biniyor.
• Ana sayfaya her şeyi sığdırmaya çalışmak: Slider, beş ayrı kutu, üç farklı çağrı butonu derken ziyaretçi neye tıklayacağını bilemiyor.
• Ağır görseller ve gereksiz eklentiler: Fotoğraflar sıkıştırılmadan yükleniyor, her ihtiyaç için ayrı eklenti kuruluyor ve site yavaşlıyor.
• Okunmayan metin: Açık gri zemin üzerine açık gri yazı şık görünebilir, ama kimse okuyamaz.
• İletişim yolunu saklamak: Telefon numarası sadece alt bilgide, form ise üç tık derinlikte kalıyor.

Bu hataların ortak noktası, tasarımın ziyaretçi yerine sadece site sahibinin ekranında değerlendirilmesi. Kendi sitenize bir yabancı gözüyle, telefondan ve yavaş bir bağlantıyla bakmak, listenin yarısını tek başına ortaya çıkarır.

Kurumsal site ile e-ticaret sitesinde tasarım farkı var mı?

Var, çünkü ikisinin dönüşüm noktası farklı. Kurumsal bir sitede amaç çoğunlukla güven vermek ve iletişim toplamaktır; bu yüzden referanslar, hizmet açıklamaları ve kolay ulaşılabilen bir form öne çıkar. E-ticaret sitesinde ise ürün sayfası, filtreler, sepet ve ödeme akışı tasarımın merkezinde durur.

Yine de temel yedi unsur ikisinde de geçerli. Ölçüler değişse de takım elbisenin size oturması gerektiği gerçeği değişmez.

Kendi siteniz için şimdi ne yapmalısınız?

Web tasarım nedir ve iyi bir siteyi ne ayırır, artık biliyorsunuz. Yeni bir site planlıyor ya da mevcut sitenizi yenilemeyi düşünüyorsanız, önce kısa bir öz değerlendirme yapın. Aşağıdaki sorular, nereden başlamanız gerektiğini büyük ölçüde gösterir:

• Sitenizin tek bir ana görevi var mı ve bunu bir cümleyle söyleyebiliyor musunuz?
• Ana sayfanızı telefondan açtığınızda, ilk ekranda ne yaptığınız anlaşılıyor mu?
• PageSpeed Insights'ta mobil sonucunuz hangi renkte görünüyor?
• Ziyaretçi, ilgilendiği hizmet sayfasından iletişime en fazla bir tıkla ulaşabiliyor mu?
• Görsellerinizin alternatif metinleri ve yazılarınızın kontrastı yerinde mi?

Bu sorulardan ikisine "hayır" ya da "emin değilim" diyorsanız, sitenizin bir prova odasına ihtiyacı var demektir. İyi haber şu ki çoğu sorun, sıfırdan başlamadan planlı birkaç adımla çözülebilir.

Bambu Dijital'de her proje, kısa bir ön değerlendirme ve gerçekçi bir yol haritasıyla başlar. Web sitenizin tasarımı için nereden başlayacağınızı birlikte netleştirmek isterseniz, iletişim formundan projenizi kısaca anlatın.

Ölçüyü doğru alırsak, gerisi dikiş işi.

Bambu Dijital — Ankara merkezli dijital ajans; 10+ yıldır web tasarım, e-ticaret, SEO & GEO ve reklam yönetimi. Son güncelleme: 27.10.2026