Web (İnternet) Tasarımı

Tasarım, içeriği oluşturan enformasyon öğelerinin görsel bir sunumu olup, enformasyonun sunum şekil ve sürecini ifade etmektedir. Web tasarımı; web sitelerinin planlama ve üretimine ilişkin disiplinler arası bir arayıştır. Teknik gelişme, enformasyon yapısı, görsel tasarım ve ağ dağıtımıyla sınırlı olmayıp bunları da içermektedir. Web tasarımı; web sitesinin görüntülenen grafik arayüzünün, menü ve erişim yapısının kullanımı kolay, bilgiye en kısa yolla ulaşabilecek, işlevsel ve hızlı bir yapıda oluşturulması amacıyla kullanılan teknik ve estetik yöntemlerdir. İyi web tasarımı, sitenin içeriğini kullanıcılara etkin, hoşa giden ve çoğu zaman da eğlenceli bir tarzda, sitenin kendi prensipleri ve değerlerinin aktarıldığı bir tarzda sunulmasıdır.

Web tasarımı, basılı materyallerin grafik tasarımından birçok yönden farklılıklar göstermektedir. Web tasarımda, mavi-yeşil-kırmızı (RGB) olarak 3 ana renk ve bunların karışımlarından oluşan bir tasarım yapılmaktadır. Basılı materyallerin tasarımında ise ana renklerden çıkartılmış 4 renk olan cyan-magenta-sarı-siyah (CMYK) renklerin kombinasyonundan oluşan bir tasarım gerçekleştirilmektedir. Web tasarımında renk ve görüntü kullanımı, basılı materyallere göre çok daha kolay ve basittir. Web tasarımı, görüntülerin ve yazıların yerlerinin daha kolay değiştirilmesine olanak sağlar. Ayrıca kullanıcılara, kendi beğenilerine göre sayfaların görünümünü belli oranda değiştirebilme imkânı verir.

Web sayfası; Explorer, Firefox, Google Chrome gibi tarayıcı bir programın bir defada ekranda görüntülediği veri miktarıdır. Bu kısa bir sayfa, birkaç satır uzunluğunda bir yazı sayfası olabileceği gibi yazı-resim-ses gibi birçok unsurun bir araya geldiği biçimde de olabilir.

Web sitesi; aynı amaçla üretilerek bir araya getirilmiş web sayfalarının toplandığı alandır ve sayfaların birbirine erişiminde bağlantılar kullanılır. Web sitesi birkaç sayfadan oluşabileceği gibi, binlerce sayfayı barındıran karmaşık bir yapıda da olabilir.

İçerik: Biçim ve site içeriğinin organizasyonu içeriği oluşturmaktadır. Yazılı metinden bunun nasıl organize edileceği, sunulacağı ve HTML gibi bir dil kullanarak nasıl yapılandırılacağı da ifade edilmektedir.

Amaç: Sitenin yayım amacı, kişisel, ticari, alışveriş, enformasyon, tanıtım gibi çeşitli amaçları anlatmaktadır. Sitenin genel olarak amacı, tasarımın da nasıl şekilleneceği konusunda bilgi vermektedir.

Görseller: Bu, sitede kullanılacak ekran unsurlarını ve tasarımını anlatır. Tasarım genellikle HTML, CSS, Şash gibi dillerle ve grafik elemanları ile dekorasyon ve gezinti (navigasyon) unsurlarını içeren bir yapıdadır. Görsel unsurlar, web tasarımının en önemli parçalarını oluşturmaktadır ve bunların bir içerik ve görsel disiplin içinde sunulması gereklidir.

Teknoloji: Web teknolojilerindeki, HTML veya CSS gibi görüntüleme dilleri ile sitede kullanılacak çeşitli etkileşim elemanları ve site inşasındaki programlama dili tekniklerini kapsayan teknolojik altyapıyı göstermektedir.

Yayın, dağıtım: İnternet’te sitenin yayım hızı ve gerçekleştirilebilirliği ya da kurum içi ağların hızı, sunucu donanım ve yazılımı, ağ mimarisi gibi alanların yapısını ifade etmektedir.

Görsel mantık olarak tasarımda objelere odaklanmayı sağlamada şunlardan yararlanılmaktadır: Büyükten küçüğe: Web sayfasında kullanılacak yazılarda dikkat çekme ve bakışların odaklanması istenilen yere, büyük yazılar yerleştirilir. Bu odaklanma yakalandıktan sonra, bu yazıyı takip eden yazılar ise daha küçük puntolarla verilir. Üstten alta: Göz, bir sayfaya bakarken üstten başlayıp daha sonra aşağılara inmektedir. Tüm okuma materyalleri de buna göre tasarlanmaktadır. Web tasarımında da, sayfanın en önemli karakteristiğini oluşturan enformasyon sayfa üstüne yerleştirilmekte, daha sonraki materyaller de önem sırasına göre aşağılara konulmaktadır. Soldan sağa: Pek çok dilde okuma soldan sağa olduğundan göz, web sayfasına soldan başlayarak sağa doğru kayarak bakmaktadır. Koyudan açığa: Göz, sayfa üzerindeki koyu unsurları öncelikle algılamakta, daha sonra açık renklere doğru bunu sürdürmektedir. Bu nedenle web sayfalarında, koyu açık dengesini iyi kurmak, göz algısını istenilen noktaya toplamak gerekmektedir.

Organizasyonel siteler: Bunlar, bir örgütsel yapı tarafından oluşturulup yayımlanan siteler olup beş ana başlıkta ele alınmaktadır: Ticari siteler: Bu gruptaki bir site, bir kurum, örgüt ya da firma tarafından yayımlanabildiği gibi, ticari amaçlarla bireysel bir girişim olarak, bir kısım mal ve hizmet satışı ya da promosyonu gibi e-ticaret kapsamında da şekillenebilir. Devlet siteleri: Bunlar, devlet kurumları tarafından oluşturulan, bilgi verme, işlem gerçekleştirme, sosyal ve yasal ihtiyaçlara yanıt bulma amaçlarıyla yayımlanmaktadırlar. Eğitim siteleri: Eğitim kurumları tarafından çoğunlukla devlet kurumlarıyla da ilişkili olan, eğitim-öğretim ve araştırma amaçlarına hizmet eden sitelerdir. Yardım kuruluşları siteleri: Kâr amacı gütmeyen kuruluşlar tarafından, yardım amaçlı kurulan, bireysel veya örgütsel yardım girişimlerini anlatan sitelerdir. Kişisel siteler: Bazı kişi ya da grupların hoşgörü çerçevesinde oluşturdukları, yaratıcı içeriklerin kişisel ifadelerle sunulduğu sitelerdir. 

Web siteleri görünümlerine göre de gruplandırılmaktadır. Görsel gruplamalar şöyledir:

Yazı ağırlıklı siteler: Bu tür siteler, yazıya odaklanarak tasarlanır ve oldukça çabuk indirilen ve fazla tasarım amacı güdülmeyen sitelerdir.

Grafiksel arayüzlü siteler: Bu, programlama dillerinden de yararlanarak menü çubukları, ikonlar, üste açılır pencereler (pop-up) gibi unsurlardan oluşur. Grafiksel arayüz siteleri, yazı ağırlıklı sitelere basit şekilde eklenebilmektedir.

Metaforik (benzetmeli) siteler: Benzetmeli siteler, gerçek yaşamdan fikirler almaktadır. Örneğin; arabalar üzerine bir sitede, tasarımda ya da gezinti çubuklarında çamurluk ya da direksiyon unsurlarını kullanmak gibi.

Deneysel tasarım: Bu, kuralların biraz dışında farklılık yaratmayı amaçlar. Yaratıcılık, tahmin edilemeyen, yenilik ve nadirlik gibi unsurlarla site tasarlanmaktadır.

Statik (durağan) web sayfaları, yalnızca bilgi sunan, internet kullanıcısının herhangi bir aktif katılımının olmadığı sayfaları tanımlamaktadır. Statik web sayfaları, gazete, dergi, televizyon gibi geleneksel iletişim araçlarına benzer bir enformasyon sunumu gerçekleştirmektedir. Statik web sayfalarının özellikleri şunlardır:

Kullanıcılar arası etkileşim yoktur.

Kullanıcı, web sitesi bünyesine herhangi bir bilgi, yorum ya da yazı ekleyemez.

Ziyaretçi herhangi bir soru soramaz ya da fikir alamaz.

Genellikle HTML ve javascript kodlarıyla şekillendirilmiştir.

Güncelleme sırasında tüm sayfanın yapısal özellikleri görünür ve tüm sayfa yapısı kodlar ile değiştirilebilir. Bu güncelleme zor ve zaman gerektiren bir yapıdır.

Dinamik web sitelerinin özellikleri şunlardır:

Kullanıcı ve kullanıcı grupları etkileşim içindedir (forum ve sohbet odaları gibi). Kullanıcılar konu hakkında fikir belirtmek isterse bunu rahatça formu kullanarak (site bünyesinde bulunan) düşüncelerini aktarabilir ve diğer kullanıcılar ile paylaşabilir. Üyelik gerektiren siteler bunlara birer örnektir. Foruma üyelik sırasında ziyaretçinin bilgilerini talep ederler. Statik web sayfalarının yanı sıra sunucu tabanlı kodlama dilleri kullanılır. Örnek olarak ASP ve PHP ilk sırada gösterilebilir. Güncelleme sırasında istenilen tek bir bölüm rahatlıkla güncellenebilir. Genellikle panel yapısına sahip sistemlerden oluşur. Kullanıcı paneli ya da yönetici paneli mantığı vardır. Gelişmiş bir yapıya sahiptir.

Radyal denge: Sayfadaki elemanlar, merkezî nokta etrafında yayılmış bir pozisyondadır. Burada, görsel odak noktasını ve etrafındaki dengeyi oluşturmak oldukça kolaydır.

Kontrast, sayfada içerik unsurları arasındaki farklılığı, karşıtlığı anlatmaktadır. Odak ise ziyaretçinin sayfada ilk baktığı noktayı ifade etmektedir. Sayfadaki bir unsur, etrafındaki unsurlardan farklı olmadığı takdirde, gözün o unsura odaklanması mümkün olmayacaktır. Bu nedenle, sayfada “beyazlık” denilen yeteri kadar boşluk bırakılması, kontrastlık açısından bir zorunluluk olmaktadır.

Web tasarımında tasarımcılar; yazı karakteri, illüstrasyon ve beyaz boşluk olarak üç araç kullanmaktadır.

İllüstrasyon, web sayfasında yazı ve negatif boşluklar ile zemin dışında kullanılan her şeyi ifade etmektedir. İllüstrasyon olarak; resim, fotoğraf, karikatür, çizim, tablo, grafik, harita, sembol, ikon, logo, çizgi ve diğer şekilli unsurlar anlatılmaktadır. İllüstrasyon, okuyucunun dikkatinin çekilmesinde önemli bir tasarım ögesidir. Bu, ayrı elemanlar olabileceği gibi birleşik elemanlardan da oluşabilir. Bunlar, sayfaya görsel çeşitlilik katmaktadır. Bu elemanların temel amacı, kullanıcıya sunulan enformasyonun anlaşılmasına yardımcı olmaktır. Bazen büyük kullanılan bir illüstrasyon (fotoğraf gibi), sayfada yazıdan daha fazla ağırlığını hissettirirken, bazen de yazının destekleyicisi bir rol üstlenebilmektedir. İllüstrasyon olarak kullanılacak görseller, çoğunlukla GIF ya da JPEG dosyalar şeklinde hazırlanmakta olup, bu dosyalar sıkıştırılmış ve indirilmesi kolay olan dosyalardır. Bununla birlikte, görsellerde ve özellikle de fotoğraflarda, büyük dosya boyutundan kaçınılması gerekmektedir. Genel olarak 500 KB’den büyük fotoğrafların indirilmesinde ve sayfada görüntülenmesinde sıkıntılar yaşandığından, görselleri hazırlarken daha küçük dosya boyutunu seçmek gerekmektedir.

İnternet gazeteciliğinin tasarımında şunları göz önünde bulundurmak gereklidir: Haber basit şekilde anlatılmalı ve küçük bölümlere ayrılmalıdır. Haberle ilgili arka plan bilgilere ve arşive erişebilirlik imkanı sağlanmalıdır. “4 Tık” kuralı uygulanmalıdır. 4 tıkla dikey kaydırma ile sayfa sonuna ya da bağlantılı haberlerin en son bölümüne ulaşabilmelidir. Uzun haberler, 2-3 sayfaya ayrılmalıdır. Haberler 4 sayfadan fazla olmamalıdır (4 tık kuralı). Her sayfada uygun, en az bir görsel veya grafik bulunması yararlıdır. Sayfayı indirme hızı farklı ortamlardaki makineler için göz önünde bulundurulmalı, büyük fotoğraf ve uzun yazı kullanılmamalıdır. Haber sayfalara bölünürken, gezinti çubukları ve bunların doğru çalıştıkları kontrol edilmelidir. Haber sunumunda ve tasarımında, estetik yaklaşımları, kullanım kolaylığı ve basitliği olarak düşünülerek gerçekleştirmelidir.

Tüm haber sitelerinde bulunması gereken tasarım yaklaşımları; okunurluk, basitlik, tutarlılık, çeşitlilik ve amaçtır. 

Web 1.0, kullanıcılar tarafından müdahale edilemeyen, durağan, sadece bilgi veren, okunan, dinlenen veya izlenen içeriklerin sunulduğu teknolojiyi tanımlamaktadır. Web 1.0’da kullanıcılar sadece okuyucu olup, yalnızca bilgiyi alabilen konumdadır. Web 1.0’da yalnızca içeriği almasına izin verilmekte olup, içeriğin yayımına ilişkin tüm kontroller web sitesi tarafından yapılmaktadır. Web 1.0, var olan bilgileri elde etmek ve çeşitli web sunucuları tarafından sağlanan içeriği okumak, program ve dosya indirmek için kullanılmaktadır. Burada kullanıcılar arası ve kullanıcı-site etkileşimi yoktur. Web 1.0 internette yayımlanmış olan bilgilerin, kullanıcılar tarafından pasif bir şekilde alınmasını ifade etmektedir.

Web 2.0, web 1.0 mantığı ile oluşturulan içeriklere okurların katkıda bulunduğu, içerikleri düzenleyebildiği bir teknolojidir. Web 1.0’ın yetersizliğinden dolayı web 2.0 doğmuştur. Web 2.0 teknolojisi, kullanıcılar ile web sitelerinin etkileşimini sağlamıştır. Web 2.0 ile site ziyaretçilerinin etkin ve istedikleri şekilde içeriğe katkıda bulundukları ve ilaveler yapabildikleri web siteleri ifade edilmektedir. Bunun en güzel örneği; Wikipedia, Facebook, Blogger, Blogcu gibi sitelerdir. Artık haber sitelerinde de Web 2.0 avantajlarından yararlanarak, isteyen okurların habere yorum yaparak içeriğe katkıda bulunmaları sağlanmaktadır. Günümüz web siteleri, durağan ve yalnızca bilgi veren siteler yerine dinamik ve etkileşimli bir şekil almıştır.

Hiç bir şekilde son kullanıcıların mühadele edemediği ve sanal robotlar tarafından sürekli geliştirildiği ve daha çok arama motorları için uygulanan web mimarisi Web 3.0 olarak tanımlanmaktadır. Web 3.0 dönemi; içeriğin bizzat yazılımlar tarafından kullanıcı için özel üretildiği, içeriklerin anlam olarak irdelendiği ve buna göre değerlendirildiği özelliklerdedir. Web 3.0, semantik web, yani “yapay zekalı web” demektir. Burada; veri tabanlarının birbiri ile iletişimi sayesinde, internet kullanıcısının ne istediğini ve neyi sevdiğini anlayan ve buna göre içerik üreten bir web dünyası oluşturulmaktadır. Diğer bir anlatımla Web 3.0, internet kullanıcısını anlayan robotik teknolojilerin bütünü olarak düşünülebilir. 

Web siteleri tasarım aşamasında ve tamamlandıktan sonra, şu unsurları gözden geçirmek, sitenin daha verimli yayın yapmasına katkıda bulunacaktır: Sayfa başlığı, Meta Tag’larını tanımlamak, içerik, site haritası, gezinme linkleri, sayfaların yüklenme hızı, web standartları.