Web Tasarımı
Web tasarımı, web sitelerinin üretimi ve bakımında birçok farklı beceri ve disiplini kapsar. Web tasarımının farklı alanları arasında web grafik tasarımı; kullanıcı arayüzü tasarımı (UI tasarımı); standartlaştırılmış kod ve özel yazılım dahil olmak üzere yazma; kullanıcı deneyimi tasarımı (UX tasarımı); ve arama motoru optimizasyonu. Bazı tasarımcılar hepsini kapsayacak olsa da, çoğu zaman birçok kişi tasarım sürecinin farklı yönlerini kapsayan ekipler halinde çalışacaktır. “Web tasarımı” terimi normalde, bir web sitesinin ön uç (istemci tarafı) tasarımıyla ilgili tasarım sürecini, yazı işaretleme dahil olmak üzere tanımlamak için kullanılır. Web tasarımı, daha geniş web geliştirme kapsamında web mühendisliği ile kısmen örtüşmektedir. Web tasarımcılarının kullanılabilirlik konusunda bir farkındalığa sahip olmaları beklenir ve rolleri biçimlendirme oluşturmayı içeriyorsa, web erişilebilirlik yönergeleri konusunda da güncel olmaları beklenir.
Web Tasarımında Kullanılan Araçlar ve Teknolojiler
Web tasarımcıları, üretim sürecinin hangi bölümünde yer aldıklarına bağlı olarak çeşitli farklı araçlar kullanır. Bu araçlar zaman içinde daha yeni standartlar ve yazılımlarla güncellenir, ancak arkalarındaki ilkeler aynı kalır. Web tasarımcıları, web formatlı görüntüler veya tasarım prototipleri oluşturmak için hem vektör hem de raster grafik düzenleyicileri kullanır. Web siteleri oluşturmak için kullanılan teknolojiler, elle kodlanabilen veya WYSIWYG düzenleme yazılımı tarafından oluşturulabilen HTML ve CSS gibi W3C standartlarını içerir. Web tasarımcılarının kullanabileceği diğer araçlar, işaretleme doğrulayıcıları ve web sitelerinin web erişilebilirlik yönergelerini karşıladığından emin olmak için kullanılabilirlik ve erişilebilirlik için diğer test araçlarını içerir.
Beceriler ve teknikler
Web Tasarımında Pazarlama ve İletişim Tasarımı
Bir web sitesindeki pazarlama ve iletişim tasarımı, hedef pazarı için neyin işe yaradığını belirleyebilir. Bu, bir yaş grubu veya belirli bir kültür dizisi olabilir; böylece tasarımcı, hedef kitlesinin eğilimlerini anlayabilir. Tasarımcılar, tasarladıkları web sitesinin türünü de anlayabilirler; bu, örneğin (B2B) işletmeler arası web sitesi tasarımıyla ilgili hususların perakende veya eğlence web sitesi gibi tüketici hedefli bir web sitesinden büyük ölçüde farklı olabileceği anlamına gelebilir. Bir sitenin estetiğinin veya genel tasarımının, özellikle bir B2B web sitesinde, içeriğin netliği ve doğruluğu veya web’de gezinme kolaylığı ile çakışmamasını sağlamak için dikkatli bir değerlendirme yapılabilir. Tasarımcılar, olumlu bir şekilde tasvir edildiğinden emin olmak için sitenin temsil ettiği mal sahibinin veya işletmenin itibarını da göz önünde bulundurabilir.
Kullanıcı deneyimi tasarımı ve etkileşimli tasarım
Kullanıcının bir web sitesinin içeriğini anlaması, genellikle kullanıcının web sitesinin nasıl çalıştığını anlamasına bağlıdır. Bu, kullanıcı deneyimi tasarımının bir parçasıdır. Kullanıcı deneyimi, bir web sitesindeki düzen, net talimatlar ve etiketleme ile ilgilidir. Bir kullanıcının bir sitede nasıl etkileşimde bulunabileceğini ne kadar iyi anladığı, sitenin etkileşimli tasarımına da bağlı olabilir. Bir kullanıcı web sitesinin kullanışlılığını algılarsa, kullanmaya devam etmesi daha olasıdır. Web sitesi kullanımı konusunda yetenekli ve bilgili kullanıcılar, daha belirgin, ancak daha az sezgisel veya daha az kullanıcı dostu web sitesi arayüzünü yine de yararlı bulabilir. Bununla birlikte, daha az deneyime sahip kullanıcıların, daha az sezgisel bir web sitesi arayüzünün avantajlarını veya kullanışlılığını görme olasılıkları daha düşüktür. Bu, daha evrensel bir kullanıcı deneyimi ve kullanıcı becerisinden bağımsız olarak mümkün olduğunca çok sayıda kullanıcıyı barındırmak için erişim kolaylığı eğilimini yönlendirir. Kullanıcı deneyimi tasarımının ve etkileşimli tasarımın çoğu, kullanıcı arayüzü tasarımında dikkate alınır.
Gelişmiş etkileşimli işlevler, gelişmiş kodlama dili becerileri olmasa da eklentiler gerektirebilir. Eklentiler gerektiren etkileşimi kullanıp kullanmamayı seçmek, kullanıcı deneyimi tasarımında kritik bir karardır. Eklenti çoğu tarayıcıda önceden yüklenmiş olarak gelmezse, kullanıcının yalnızca içeriğe erişmek için bir eklentiyi nasıl kuracak bilgisine veya sabrına sahip olmama riski vardır. İşlev ileri düzeyde kodlama dili becerileri gerektiriyorsa, işlevin kullanıcı deneyimine katacağı geliştirme miktarıyla karşılaştırıldığında, kodlamak hem zaman hem de para açısından çok maliyetli olabilir. Gelişmiş etkileşimin daha eski tarayıcılar veya donanım yapılandırmalarıyla uyumsuz olma riski de vardır. Güvenilir şekilde çalışmayan bir işlevi yayınlamak, kullanıcı deneyimi açısından hiçbir girişimde bulunmamaktan potansiyel olarak daha kötüdür. İhtiyaç duyulup duyulmayacağı veya herhangi bir riske değip değmeyeceği hedef kitleye bağlıdır.
Sayfa Düzeni Nasıl Olmalıdır?
Kullanıcı arayüzü tasarımının bir kısmı, sayfa düzeninin kalitesinden etkilenir. Örneğin, bir tasarımcı, düzeni tasarlarken sitenin sayfa düzeninin farklı sayfalarda tutarlı kalması gerekip gerekmediğini değerlendirebilir. Sayfa piksel genişliği, düzen tasarımındaki nesneleri hizalamak için de hayati olarak kabul edilebilir. En popüler sabit genişlikli web siteleri genellikle mevcut en popüler tarayıcı penceresiyle, mevcut en popüler ekran çözünürlüğünde ve mevcut en popüler monitör boyutunda eşleşmek için aynı ayarlanmış genişliğe sahiptir. Çoğu sayfa, daha büyük ekranlarda estetik kaygılar için merkeze hizalanmıştır.
Değişken düzenlerin popülaritesi 2000 civarında arttı ve tarayıcının, okuyucu ekranının ayrıntılarına (pencere boyutu, pencereye göre yazı tipi boyutu vb.) dayalı olarak değişken düzenlerde kullanıcıya özel düzen ayarlamaları yapmasına izin verdi. Hem sayfa düzeni tasarım ilkesinde hem de kodlama tekniğinde HTML tabanlı düzenlere ve ızgara tabanlı tasarıma bir alternatif olarak büyüdüler, ancak benimsenmeleri çok yavaştı. Bunun nedeni, ekran okuma cihazlarının ve tasarımcıların üzerinde hiçbir kontrole sahip olmadığı değişen pencere boyutları. Buna göre, bir tasarım, tarayıcıya gönderilen ve mümkün olan en iyi şekilde tarayıcı tarafından görüntüleme penceresine yerleştirilecek birimlere (kenar çubukları, içerik blokları, gömülü reklam alanları, gezinme alanları) bölünebilir. Böyle bir görüntüleme, genellikle ana içerik birimlerinin göreli konumunu değiştirebilse de, kenar çubukları, gövde metninin yanına değil, altına kaydırılabilir. Bu, cihaz penceresine uymayan, sabit kodlanmış ızgara tabanlı bir düzenden daha esnek bir ekrandır. Özellikle, içerik bloklarının göreli konumu, blok içindeki içeriği etkilenmeden bırakırken değişebilir. Bu aynı zamanda kullanıcının sayfayı yatay olarak kaydırma ihtiyacını da en aza indirir.
Duyarlı web tasarımı, CSS3’e dayalı daha yeni bir yaklaşım ve CSS kuralının geliştirilmiş kullanımı yoluyla sayfanın stil sayfasında daha derin bir cihaz başına belirtim düzeyidir. Mart 2018’de Google, mobil öncelikli dizine eklemeyi kullanıma sunacağını duyurdu. Duyarlı tasarım kullanan siteler, bu yeni yaklaşımı karşılamalarını sağlamak için iyi bir konuma sahiptir.
Tipografi
Web tasarımcıları, çok çeşitli yazı biçimleri veya yazı stilleri kullanmak yerine, web sitesi yazı biçimlerinin çeşitliliğini yalnızca benzer stile sahip birkaçıyla sınırlamayı seçebilir. Çoğu tarayıcı, tasarımcıların çoğunlukla komplikasyonları önlemek için kullandıkları belirli sayıda güvenli yazı tipini tanır.
Yazı tipi indirme daha sonra CSS3 yazı tipi modülüne dahil edildi ve o zamandan beri Safari 3.1, Opera 10 ve Mozilla Firefox 3.5’te uygulandı. Bu, daha sonra web tipografisine olan ilgiyi ve yazı tipi indirme kullanımını artırdı.
Çoğu site düzeni, metni paragraflara bölmek için negatif boşluk içerir ve ayrıca ortaya hizalanmış metinden kaçınır.
Hareket grafikleri
Sayfa düzeni ve kullanıcı arayüzü de hareketli grafiklerin kullanımından etkilenebilir. Hareketli grafik kullanıp kullanmama seçimi, web sitesi için hedef pazara bağlı olabilir. Hareketli grafikler, eğlence odaklı bir web sitesinde beklenebilir veya en azından daha iyi alınabilir. Ancak, daha ciddi veya resmi bir ilgiye (iş dünyası, topluluk veya devlet gibi) sahip olan bir web sitesi hedef kitlesi, yalnızca eğlence veya dekorasyon amaçlı olsa bile animasyonları gereksiz ve dikkat dağıtıcı bulabilir. Bu, daha ciddi içeriğin, içerikle alakalı animasyon veya video sunumlarıyla geliştirilemeyeceği anlamına gelmez. Her iki durumda da hareketli grafik tasarım, daha etkili görseller veya dikkat dağıtıcı görseller arasında fark yaratabilir.
Site ziyaretçisi tarafından başlatılmayan hareketli grafikler, erişilebilirlik sorunlarına neden olabilir. World Wide Web konsorsiyumu erişilebilirlik standartları, site ziyaretçilerinin animasyonları devre dışı bırakabilmesini gerektirir.
Kod Kalitesi
Web sitesi tasarımcıları, standartlara uymanın iyi bir uygulama olduğunu düşünebilir. Bu genellikle öğenin ne yaptığını belirten bir açıklama yoluyla yapılır. Standartlara uyulmaması, bir web sitesini kullanılamaz veya hataya açık hale getirmeyebilir, ancak standartlar, okunabilirlik için sayfaların doğru düzeniyle ilgili olabilir ve ayrıca kodlanmış öğelerin uygun şekilde kapatıldığından emin olabilir. Bu, koddaki hataları, kod için daha organize düzeni ve kimliklerin ve sınıfların doğru şekilde tanımlandığından emin olmayı içerir. Kötü kodlanmış sayfalara bazen halk dilinde etiket çorbası denir. W3C aracılığıyla doğrulama, yalnızca koddaki hataları vurgulamak için kullanılan doğru bir bildirimi yapıldığında yapılabilir. Sistem, web tasarım standartlarına uymayan hataları ve alanları tespit eder. Bu bilgi daha sonra kullanıcı tarafından düzeltilebilir.