Bir peyzaj işletmesinin sitesine gelen ziyaretçiyi düşünün. Bahçe fotoğraflarını beğenebilir; yine de işletmenin kendi ilçesine hizmet verip vermediğini ve keşif için kiminle görüşeceğini bilmek ister. Fotoğraflar, hizmet açıklaması, menü ve iletişim formu birlikte işe yaradığında ziyaretçi aradığı cevaba ulaşır. Ziyaretçinin sitede ilerleyişi, web tasarımın görünüm kadar kullanımla da ilgili olduğunu gösterir.
Web Tasarım Ne Anlama Gelir?
Web tasarım, bir internet sitesindeki içeriğin nasıl sunulacağını ve ziyaretçinin siteyi nasıl kullanacağını planlama işidir. Tasarımcı; sayfa düzeni, yazı ve görsel seçimi, gezinme, düğmeler ve farklı ekranlardaki davranış üzerinde çalışır. Amaç, sitenin kimliğini yansıtırken ziyaretçinin yapmak istediği işi anlaşılır hâle getirmektir.
Güzel bir ekran taslağı, sitenin nasıl görüneceğini anlatır. Menü açıldığında, bir bağlantıya basıldığında veya formda hata yapıldığında neler olacağı da tasarımın parçasıdır. MDN’nin site planlama anlatımı, kod yazmaya geçmeden içerik, görünüm ve işlev üzerinde düşünmeyi önerir.
UX, UI ve Web Geliştirme Nasıl Ayrılır?
UX, kullanıcı deneyiminin İngilizce kısaltmasıdır. Kişinin bir ürün veya hizmetle karşılaşmasından işini tamamlamasına kadar yaşadıklarını kapsar; web sitesindeki deneyim de bunun bir bölümüdür. UI ise kullanıcı arayüzüdür: ziyaretçinin gördüğü ve etkileşime girdiği menüler, alanlar, düğmeler ve bunların düzeni. Nielsen Norman Group’un ayrımında arayüz, daha geniş olan kullanıcı deneyiminin içinde yer alır.
| Alan | İlgilendiği soru | Peyzaj sitesi örneği |
|---|---|---|
| Kullanıcı Deneyimi — UX | Ziyaretçi ihtiyacını anlayıp işini tamamlayabiliyor mu? | Hizmet bölgesini öğrenip uygun bir keşif talebi gönderebilmesi. |
| Kullanıcı Arayüzü — UI | Bilgi ve kontroller ekranda nasıl sunuluyor? | İlçe bilgisinin yeri, form etiketleri ve gönder düğmesinin görünümü. |
| Web Geliştirme | Planlanan davranış nasıl çalışır hâle getiriliyor? | Formun bilgileri kontrol etmesi, talebi iletmesi ve sonucu göstermesi. |
Görevler projeye göre aynı kişide veya farklı uzmanlarda toplanabilir. Tasarım ile geliştirme arasında herkes için geçerli tek bir iş bölümü yoktur. Geliştirme, planlanan sayfa ve etkileşimleri çalışan bir siteye dönüştürür; gerektiğinde sunucu ve veri bağlantılarını da kapsar.
Logo, renk ve tipografi tercihleri arayüzün görsel dilini etkiler. Mesajın görsel olarak düzenlenmesini grafik tasarımın işletmedeki kullanım örnekleriyle inceleyebilirsiniz. Web sitesinde aynı görsel dilin gezinme ve işlem akışlarıyla birlikte çalışması gerekir.
Web Tasarımı Anlamak için 4 Soru
Varsayımsal peyzaj sitesini dört soruyla ele alalım. Sorular bir yazılım reçetesi değildir; tasarımın neye karar verdiğini somutlaştırır.
1. Ziyaretçi Sitede Ne Yapmak İstiyor?
Ev sahibi bahçesi için fikir arıyor olabilir. Apartman yöneticisi düzenli bakım hizmetini inceliyor olabilir. Aynı siteye gelseler de görmek istedikleri ilk bilgi farklıdır. Ana sayfada yalnız büyük bir bahçe fotoğrafı göstermek yerine hizmetleri anlaşılır biçimde ayırmak, ziyaretçinin kendisine uygun bölüme geçmesini sağlayabilir.
İşletmenin hedefi ile ziyaretçinin ihtiyacı birlikte düşünülür. İşletme keşif talebi almak istiyorsa ziyaretçinin karar vermek için hangi bilgilere ihtiyaç duyduğunu da açıklamalıdır. Hizmet verilen bölgeler ve işin kapsamı, form düğmesinden önce yanıt bekleyen sorular olabilir.
2. Aradığı Bilgiye Nasıl Ulaşacak?
“Projeler”, “Bahçe Bakımı” ve “İletişim” gibi menü adları, ziyaretçinin karşılaşacağı içeriği anlatır. Belirsiz bir sloganı menü etiketi olarak kullanmak aynı işi görmeyebilir. Sayfa içindeki başlıklar da uzun metni okunabilir bölümlere ayırır.
Örnek işletmede ziyaretçi tamamlanmış bahçeleri incelerken hangi hizmetin uygulandığını öğrenebilir. Ardından ilgili hizmet sayfasına veya keşif talebine geçebilir. Bağlantıların görevi yalnız sayfaları birbirine bağlamak değil, okuyucunun sıradaki sorusuna uygun bir yol sunmaktır. Soruların hangi sayfalarda yanıtlanacağını belirlemek için kurumsal web sitesi içerik ve sayfa planını ziyaretçi ihtiyaçlarından başlayarak kurabilirsiniz.
3. Ekranı Nasıl Görecek ve Kullanacak?
Masaüstünde yan yana duran hizmet kartları telefonda alt alta yerleşebilir. Duyarlı, yani responsive tasarım, düzenin ekran genişliğine uyum sağlamasıdır. Masaüstü sayfasını bütünüyle küçültmek, yazıyı okumayı ve düğmelere basmayı zorlaştırabilir. MDN’nin duyarlı tasarım açıklaması esnek yerleşimi temel alır.
Okunur yazılar, yeterli kontrast ve anlamı belli olan form etiketleri aynı değerlendirmenin parçalarıdır. Hatalı alanı yalnız kırmızıya boyamak yerine sorunu metinle de açıklamak gerekir. W3C’nin erişilebilir tasarım önerileri, gezinme ve kontrollerin farklı kullanım koşullarında anlaşılmasına yardımcı olur.
Ekrana sığmak tek başına yeterli değildir. Telefon görünümünde hizmet bölgesini bulmak, form alanına yazmak ve sonucu okumak da mümkün olmalıdır. Bir ekran görüntüsü, bütün etkileşimlerin çalıştığını göstermez.
4. Verdiği Komuttan Sonra Ne Olacak?
Ziyaretçi keşif formunu gönderdiğinde ekranda ne görecek? Eksik telefon numarası varsa nasıl düzeltecek? Talep alındıysa yeniden göndermesine gerek olmadığını nasıl anlayacak? Tasarım, işlemin farklı durumlarını tarif eder; geliştirme ise gerekli davranışı uygular.
W3C’nin form bildirimleri açıklamasına göre başarı ve hata mesajları anlaşılır geri bildirim sağlamalıdır. Örneğin “Telefon numaranızı kontrol edin” mesajı, yalnız “Hata” yazmaktan daha açıklayıcıdır. Gerçekte belirlenmemiş bir dönüş süresi de başarı mesajına söz olarak eklenmemelidir.
Sayfa metnini veya proje fotoğrafını kimin güncelleyeceği de planlanır. İçerik yönetim sistemi, yetkili kişinin içerikleri panelden düzenlemesini sağlar. WordPress’in blok editörü metin ve görsellerle çalışmaya bir örnektir; özel bir rezervasyon veya hesaplama işlevi için ayrı geliştirme gerekebilir. Hazır aracın sınırlarını ve yeni iş kurallarını değerlendirmek için özel yazılım ile hazır çözümlerin karşılaştırmasına bakabilirsiniz.
Site Türü Tasarım Kararlarını Nasıl Değiştirir?
Kurumsal web tasarımda ziyaretçinin işletmeyi, hizmet kapsamını ve iletişim yollarını anlaması öne çıkabilir. Bir portföy sitesi çalışmaları incelemeyi; e-ticaret sitesi ise ürün seçimi, sepet ve sipariş işlemlerini destekler. Tasarımın ağırlığı, sitede yapılacak işe göre değişir.
Site türleri kesin kutular değildir. Bir işletme aynı sitede hizmet tanıtabilir, proje arşivi sunabilir ve ürün satabilir. Hazır tema kullanmak da özel bir arayüz hazırlamak da mümkündür; seçilen yolun içerik ve işlev ihtiyaçlarını karşılaması gerekir. Ücretsiz başlangıç seçenekleri vardır: örneğin WordPress.com planlarında ücretsiz site açılabilir, fakat özel alan adı veya reklamsız kullanım gibi ihtiyaçlar ücretli plana bağlı olabilir.
Yayına Çıkmak Tasarım İşini Bitirir mi?
İşletmenin hizmetleri değiştiğinde sitedeki bilgi ve yönlendirmeler de gözden geçirilir. Kullanıcılar bir alanı sürekli yanlış anlıyorsa yalnız renk değiştirmek sorunu çözmeyebilir; etiketi veya açıklamayı yeniden ele almak gerekebilir. Yayındaki site, gerçek kullanım sırasında değerlendirilmesi gereken bir üründür. İçerik geç açılıyor veya menü yavaş tepki veriyorsa web performansı sorunlarını kullanıcı etkisine göre sıralayarak hangi işe önce bakılacağını belirleyebilirsiniz.
Arama görünürlüğü ayrı bir çalışma alanıdır. Google’ın SEO başlangıç kılavuzu içeriğin bulunması ve anlaşılması üzerinde durur; iyi görünen bir sayfa tek başına sıralama garantisi vermez. Konunun temelini SEO’nun ne olduğu ve nasıl çalıştığı üzerinden öğrenebilirsiniz.
Metazen’de web sitesi planlarken ziyaretçinin hangi işi tamamlamasını beklediğinizi konuşarak başlıyoruz. Hizmet inceleme, teklif isteme veya alışveriş yapma amacı; içerik, arayüz ve geliştirme kararlarını birlikte şekillendiriyor. Tasarım ve yazılım alanlarında çalışan ekibimizi tanıyabilir, projenizde hangi işleri birlikte ele alabileceğimizi web tasarım hizmetimizin kapsamında görebilirsiniz.
