Web Tasarım Nedir? Parçaları ve Aşamaları

Web tasarım, bir web sitesinin ziyaretçiye görünen ve onun tarafından kullanılan yüzünü planlayıp kurma işidir. Sayfa düzeni, renkler, yazı tipleri ve görseller kadar sayfanın telefonda nasıl göründüğü, ne kadar hızlı açıldığı, herkes tarafından kullanılıp kullanılamadığı ve ziyaretçinin aradığını ne kadar kolay bulduğu da web tasarımın konusudur. Yani iyi bir web tasarım yalnız güzel görünen değil, rahat kullanılan ve sorunsuz çalışan bir sitedir.

Bu ayrımı baştan yapmak önemli, çünkü web tasarım çoğu zaman "sitenin görseli" sanılır. Oysa göze hoş gelen ama yavaş açılan, telefonda kayan, menüsü kafa karıştıran bir site hem ziyaretçiyi hem de arama motorlarını memnun etmez. Aşağıda web tasarımı oluşturan parçaları, bir sitenin tasarım sürecinden nasıl geçtiğini ve sık karıştırılan kavramları sırayla anlatıyorum.

Ekranda gördüğünüz ile arkada çalışan kod

Herhangi bir sayfayı tarayıcıda açtığınızda gördüğünüz düzen, aslında arka planda yazılmış kodun sonucudur. Tarayıcıda sağ tıklayıp "sayfa kaynağını görüntüle" dediğinizde karşınıza çıkan HTML, CSS ve JavaScript satırları, ekrandaki tasarımın tarifidir. Tasarımcı bu tarifin neyi anlatacağını belirler; kodlayan kişi de onu tarayıcının anlayacağı dile çevirir.

Bu yüzden web tasarım ile web yazılım birbirinden kopuk düşünülemez. Kâğıt üzerinde çok iyi duran bir tasarım, kodlanırken gereksiz ağırlaşırsa ya da mobilde dağılırsa işe yaramaz. Tersi de geçerli: Kodu temiz ama kullanıcıyı yoran bir arayüz de amacına ulaşmaz. Tasarım ile kodun nerede ayrıldığını, bu işi kimin yaptığını merak ediyorsanız web geliştiricinin ne iş yaptığını anlattığım yazıya göz atabilirsiniz.

Bir web tasarımını oluşturan parçalar

Web tasarım tek bir beceri değil, birbirine bağlı birkaç alanın toplamıdır. Bir sitenin iyi ya da kötü tasarlandığını söylerken genellikle şu parçalardan birine ya da birkaçına bakıyoruz.

Kullanıcı deneyimi (UX)

Kullanıcı deneyimi, ziyaretçinin siteye girdiği andan aradığını bulana ya da yapmak istediği işi bitirene kadar yaşadığı süreçtir. Menüde hangi başlıkların olacağı, bir ürüne kaç tıklamada ulaşılacağı, formun kaç alandan oluşacağı gibi kararlar bu başlığa girer. UX kararları görünmez ama hissedilir: Ziyaretçi bir şeyi bulamadığında nedenini bilmez, sadece siteden çıkar. Konunun arama motorlarıyla ilişkisini kullanıcı deneyiminin SEO tarafını ele aldığım yazıda ayrıca anlattım.

Arayüz (UI): düzen, renk, yazı tipi ve görseller

Arayüz, deneyimin görünen kısmıdır. Sayfadaki öğelerin yerleşimi, boşluklar, düğmelerin biçimi, renk paleti ve yazı tipleri burada belirlenir. Kurumsal bir firmanın sitesinde renkler genellikle logodan ve kurumsal kimlikten gelir. Yazı tipi seçimi de siteye karakter verir; resmi bir kurumun sitesinde eğlenceli, el yazısı gibi bir font ciddiyeti zedeler. Sade tasarımların çoğu zaman daha iyi sonuç verdiğini gördüm: Daha az süs, ziyaretçinin dikkatini asıl içeriğe yönlendirir ve sayfayı hafifletir.

Duyarlı (responsive) tasarım

Duyarlı tasarım, aynı sayfanın telefonda, tablette ve geniş ekranda düzgün görünmesini sağlar. Sütunlar küçük ekranda alt alta dizilir, görseller ekrana göre küçülür, menü bir düğmenin arkasına toplanır. Bugün birçok sitede ziyaretçilerin önemli bir kısmı telefondan geldiği için tasarıma çoğu zaman mobil ekrandan başlanıyor; geniş ekran düzeni sonra kuruluyor.

Erişilebilirlik

Erişilebilirlik, sitenin görme, işitme ya da hareket kısıtı olan kişiler tarafından da kullanılabilmesidir. Yeterli renk karşıtlığı, görsellere açıklayıcı alternatif metin, yalnız klavyeyle gezilebilen menüler, ekran okuyucuların anlayabileceği başlık yapısı bunun temel parçalarıdır. Erişilebilir bir site, herkes için daha rahat kullanılan bir site olur. Konuya daha derin girmek isteyenler için MDN'nin erişilebilirlik rehberi iyi bir başlangıç noktası.

Hız ve performans

Sayfanın ne kadar sürede açıldığı da bir tasarım kararıdır. Ana sayfaya konan büyük bir video, beş farklı yazı tipi ya da sıkıştırılmamış fotoğraflar sayfayı yavaşlatır. Grafikleri ve görselleri az ve doğru kullanmak, hem ziyaretçinin sabrını hem de mobil veri paketini korur. Hız, arama motorlarının da dikkate aldığı bir deneyim sinyalidir.

İçeriğin okunabilirliği

Tasarım, içeriği taşıyan bir kaptır. Metinlerin okunabilir uzunlukta satırlarla, anlamlı başlıklarla ve özgün olarak yazılması tasarımın parçası sayılır. Kopya metinlerle doldurulmuş bir site, tasarımı ne kadar iyi olursa olsun güven vermez. Tasarım ile arama motoru uyumunun birlikte nasıl kurulduğunu SEO uyumlu web tasarım yazısında ayrıntılı anlattım.

Bir web sitesi tasarımı hangi aşamalardan geçer

Projeden projeye ayrıntılar değişse de bir sitenin tasarımı genellikle şu sırayı izler:

1. Amaç ve hedef kitle: Site kimin için yapılıyor, ziyaretçi siteye girince ne yapmalı? Bilgi mi alacak, ürün mü alacak, randevu mu isteyecek?
2. İçerik ve site haritası: Hangi sayfalar olacak, bu sayfalar menüde nasıl gruplanacak, hangi metinler ve görseller hazırlanacak?
3. Tel kafes (wireframe): Renk ve görsel olmadan, kutu ve çizgilerle sayfaların iskeleti çizilir. Bu aşamada düzen tartışılır, renk değil.
4. Görsel tasarım: İskelet; renk, yazı tipi, görsel ve ikonlarla giydirilir. Mobil ve masaüstü görünümleri ayrı ayrı hazırlanır.
5. Kodlama: Tasarım HTML, CSS ve gerekiyorsa JavaScript ile sayfaya dökülür, bir içerik yönetim sistemine ya da özel bir altyapıya bağlanır.
6. Test: Farklı tarayıcılarda ve cihazlarda denenir; formlar, bağlantılar, hız ve erişilebilirlik kontrol edilir.
7. Yayın ve bakım: Site yayına alındıktan sonra iş bitmez; güncellemeler, yeni içerikler ve ziyaretçi davranışından çıkan düzeltmeler devam eder.

Bu sıradaki en sık atlanan adım ikincisidir. İçerik hazır olmadan tasarıma başlanınca, sonradan metinler kutulara sığmaz, fotoğraflar tasarıma uymaz ve düzen baştan değişir.

Sitenin amacı tasarımı nasıl değiştirir

Her site için tek bir doğru tasarım yoktur. Bir haber sitesinde ziyaretçi çok sayıda başlığı hızla taramak ister; yoğun ama düzenli bir ana sayfa işe yarar. Bir e-ticaret sitesinde öncelik ürünü bulmak, karşılaştırmak ve sepete eklemektir; filtreler ve ürün sayfaları öne çıkar. Kişisel bir blogda ise okuma rahatlığı her şeyden önemlidir. Bir türün başarı ölçüsünü diğerinden beklemek yanlış sonuç verir. Tasarıma başlamadan önce "ziyaretçi bu sitede ne yapmaya geldi" sorusunu net cevaplamak, sonraki bütün kararları kolaylaştırır.

Domain, hosting ve altyapı soruları nereye oturur

Web tasarımı araştırmaya başlayan biri kısa sürede başka sorularla karşılaşır: Hangi alan adını almalı, hangi hostingi seçmeli, altyapı hazır bir sistem mi olmalı yoksa özel yazılım mı? Bunlar tasarımın kendisi değil ama tasarımı doğrudan etkileyen kararlardır. Örneğin WordPress gibi bir içerik yönetim sistemi seçmek, tasarımın bir tema üzerinden kurulacağı anlamına gelir; özel bir yazılımda ise her şey sıfırdan çizilir. Altyapı tarafındaki adımları WordPress ile site kurma rehberinde tek tek anlattım.

Web tasarıma yeni başlayanların aklına takılanlar

Web tasarım öğrenmek için kod bilmek gerekir mi?

Başlamak için gerekmez; tasarım araçlarıyla ve site kurucularla kod yazmadan sayfa tasarlanabilir. Ancak HTML ve CSS'in temelini bilmek, tasarladığınız şeyin gerçekte nasıl çalışacağını anlamanızı sağlar ve kodlayan kişiyle aynı dili konuşmanızı kolaylaştırır.

Hazır bir tema kullanmak web tasarım sayılır mı?

Sayılır, ama tasarımın büyük kısmını temayı hazırlayan kişi yapmış olur. Temayı kendi içeriğinize, renklerinize ve hedefinize göre uyarlamak da bir tasarım işidir. Önemli olan, temanın sitenin amacına uyması ve gereksiz ağırlık getirmemesidir.

Web tasarım ile grafik tasarım aynı şey mi?

Değil. Grafik tasarım daha çok logo, afiş, broşür gibi sabit görsellerle ilgilenir. Web tasarım ise etkileşimli bir ortamda çalışır: Ekran boyutu değişir, ziyaretçi tıklar, kaydırır, form doldurur. Grafik tasarım bilgisi web tasarımda işe yarar ama tek başına yetmez.

Bir sitenin tasarımı ne zaman yenilenmeli?

Belirli bir süre kuralı yok. Site mobilde sorun çıkarıyorsa, yavaşsa, ziyaretçiler aradığını bulamıyorsa ya da altyapı artık güncellenemiyorsa yenileme zamanı gelmiştir. Yalnız modası geçti diye tasarımı değiştirmek, iyi çalışan bir düzeni bozabilir.

Bir sonraki adım olarak tasarıma hangi araçlarla başlanabileceğini merak ediyorsanız web tasarım programlarını karşılaştırdığım yazıyı okuyabilirsiniz. Kendi siteniz için profesyonel destek düşünüyorsanız web tasarım hizmeti sayfasında nasıl çalıştığımı anlattım.