GÖRSEL WEB TASARIMI

İnsanın çevresiyle ilgili verileri toplamadaki en
etkili duyusu görme duyusudur. Günümüz dijital
dünyasında da elektronik ortam ve uygulamalar
büyük ölçüde görsel tasarımlar üzerine inşa edilmiştir. Harvard Üniversitesi tarafından gerçekleştirilen bir araştırmada kullanıcıların web sitelerine
ilişkin ilk izlenimlerini belirlemek amacıyla kullanıcıların algılanan görsel karmaşıklık ve renkliliğe
ilişkin görüşleri belirlenmiştir. Araştırma sonucunda bir kullanıcının bir web sitesine ilişkin görüş
oluşturmasının yarım saniye (50 ile 500 milisaniye) bile sürmediği belirlenmiştir. Yine aynı araştırmada kullanıcıda oluşan ilk izlenimin %94’ünün
web sitesinin içeriğiyle değil görsel tasarımı ile ilgili
olduğu belirlenmiştir. Diğer bir ifadeyle ne kadar
önemli ve dikkat çekici olursa olsun bir web sitesi
kötü bir görsel tasarımla sunulduğunda kullanıcıların ilgisini çekmesi mümkün olmayacaktır. Bu
nedenle bir web tasarımı sürecinde görsel tasarım
unsurları hayati önem taşır. Günümüz profesyonel
web tasarım ekiplerinde grafik tasarımcı veya grafik
tasarım ekibi grafik tasarımı için yeri doldurulamaz görev ve sorumluluklar üstlenir

Kullanıcı arayüzü, insan-bilgisayar etkileşimi
için oldukça önemli bir role sahiptir. Web sitelerinin sayfa yapısının görsel tasarımı da kullanıcı
arayüz tasarımı kapsamında değerlendirilebilir.
Tasarlanan kullanıcı arayüzü bileşenleri; kullanışlı, hedef kitle özelliklerine ve içeriğe uygun, sade,
dikkat çekici ve basit olmalıdır. Bunun için de görsel tasarım elementlerinin her birinin dikkatli bir
biçimde tasarlanması veya seçilmesi gerekmektedir. Kullanıcı arayüzü, dokunmatik ekran,
klavye, fare, masaüstü, web sitesi arayüzü
gibi insanın etkileşime girebildiği her türlü
bilişim teknolojileri tasarımını ifade eder.

Tasarımı yapılan bir web sitesinin görsel dış
tasarımına karar verildikten ve gerekli görsel tasarım unsurları geliştirildikten sonra detaylı iç tasarım görselleri çalışılabilir. Bununla birlikte görsel
iç tasarım unsurları ile dış tasarım elementlerinin
bir arada planlanması tasarımı yapılan sitenin eşgüdüm içerisinde gelişmesini destekleyecektir. Örneğin, iç tasarım görseli olarak logo tüm diğer site
bileşenleriyle uyumlu bir şekilde geliştirilmelidir.
Bu durumda dış tasarım bileşenleri olarak şablon
ve arka planın da logo ile uyumlu olarak geliştirilmesi gerekir. Web için görsel iç-tasarım elementleri
burada dört başlık altında incelenmiştir.
• Web sitesi logo ve başlıklarının (banner)
görsel tasarımı,
• Web sitesi görsel gezinim bileşenlerinin tasarımı,
• Web sitesi görsel gövde tasarım bileşenleri ve
• Web sitesi altbilgi (footer) görsel tasarımı.

Logo tasarımıyla birlikte çoğunlukla web sayfalarının
en üst bölümünde sitenin kimliği ve tanımlayıcı bilgilerini temsil eden bir başlık/banner bölümü bulunur. Bazı
tasarımlarda kullanılmasa da web sitelerinde sitenin kimliği
niteliğindeki bu alandan yararlanılabilir. Web siteleri açısından bakıldığında çeşitli başlık/banner tasarımları bulunmaktadır. Bazı banner türleri aşağıda sıralanmıştır:

• Standart Banner: Sabit veya hareketli içerik içerir.Link verilerek yönlendirme yapılabilir.
• Rollover Banner: Mouse banner üzerine geldiğinde ölçüleri değişir. Bu tür banner’lar genellikle
hareketli menü veya içerik içerir.
• Floating Banner: Sayfa açıldığında banner sayfa ortasında belirli süre kalır ve sonra kaybolur.
• Genişletilebilir (Expandable) Banner: Sayfanın en üst kısmında yer alır. Banner üzerine gelindiğinde
sayfayı aşağı doğru iterek genişler.
• Akan Video Banner: Banner sürekli dönen video veya videolar olarak tasarlanmıştır.
• Z-tipi Banner: Sayfanın en alt kısmında yer alır. Sayfa hareketlerinde alttaki pozisyonunu korur.

Bilgisayar bağlantıları çoğunlukla hiperlink
veya sadece link olarak adlandırılır. Kullanıcının
web siteleri içinde ve web siteleri arasında gezinimini sağlayan teknoloji linklerdir. Web siteleri içinde
link ve buton kullanımı hayati önem taşır. Çünkü
linkler olmadan www’dan yani web’den bahsetmek
de mümkün değildir. Diğer bir ifadeyle, web’i erişilebilir, dinamik kılan temel teknoloji linklerdir.

Link; buton, metin veya başka bir araç
yoluyla etkileşime girildiğinde kullanıcıyı
daha fazla içeriğe, yeni bir web sitesine
veya web sitesi içinde farklı bir bölüme
yönlendiren harf, rakam ve sembollerden
oluşan özel verilerdir.

Butonlar, web sitelerinin tasarımlarında önemli rollere sahip öğelerden biridir. Site içerisindeki
gezinimi, hareketi ve etkileşimi sağlamak amacıyla
çoğunlukla butonlardan yararlanırız. Butonlar site
içi bağlantıları sağlamak için kullanılan araçlardır;
ancak bağlantının kendisi değillerdir. Butonlar
bağlantı çeşidi gibi düşünülse de aslında bağlantılardan farklı yapılardır.

Buton, etkileşime geçildiğinde (tıklama,
sürükleme, üstüne gelme, dokunma vb.
yollarla) bir sürecin başlamasını, bitmesini
veya kontrolünü sağlayan basit bir web sitesi geçiş mekanizmasıdır.

Web tasarımında butonlarla birlikte ikonlardan da
sıklıkla yararlanılmaktadır. Butonlara göre daha basit
ve daha anlaşılır yapılar olduğundan dolayı ikonlar
çoğu zaman butonlar içerisinde veya butonlar yerine
de kullanılırlar. Bunun yanında ikonlar; menü tasarımlarında, video ve animasyonlar gibi çoklu ortam
bileşenlerinin kontrolü, kullanıcı arayüz hareketlerinin kontrolü ya da bir grafiğin kontrolünde de kullanılabilmektedir. Güncel web tasarımları incelendiğinde ikonların ne kadar yoğun kullanıldığı kolayca
anlaşılacaktır. İkonlar, web tasarımında sadece butonların görevlerini yerine getirmek için değil, sayfa içi
bir hareket veya özel bir alanı işaretlemek için de kullanılırlar.

İkonlar, bilgisayarlarda ve grafiksel arayüzlerde bir dosyayı, dizini veya uygulamayı temsil eden simge, resim, görüntüyü
ifade eden grafiksel imgelerdir.

Veri Şifreleme: Web formu ile alınan verilerin güvenliği için veri şifreleme teknikleri kullanılabilir. Aktarılan bilgiler elde edilebilir ve alfasayısal metin olarak okunabilir. Bu nedenle güvenli tutmak istediğiniz veriler için her zaman şifreleme sağlamanız gerekir.

Günümüz dijital dünyasında farklı çözünürlüklere ve ekran büyüklüklerine sahip kişisel bilgisayarlar, tablet bilgisayarlar, akıllı telefonlar ve akıllı saatler
gibi çok sayıda teknoloji bulunmaktadır. Tüm bu cihazların teknoloji yetenekleri oldukça gelişmiştir. Bu
cihazlarla web sitelerine erişilmektedir. Ancak kişisel bilgisayar arayüzlerine uygun web tasarımlarının
diğer cihazlardan okunması ve kullanılması önemli kullanıcı deneyimi problemleri yaratabilmektedir.
Bu nedenle web sitesi tasarımlarının da yaygın kullanılan ekran ölçeklerine uygun olarak otomatik bir
şekilde ayarlanmasına ihtiyaç duyulmuştur. Böylece,
piyasada bulunan her bir aygıt için ayrı ayrı tasarım
yapma veya ayrı uygulama geliştirmeye gerek kalmayacaktır. Web sayfasının duyarlı (responsive) bir
tasarıma sahip olması, farklı cihazlarda ve ekran boyutlarında orijinal haliyle, rahat okunabilir ve kolayca işlem yapılabilir olması anlamına gelir.

Görsel bileşenlerin başarılı bir şekilde tasarlanması için farklı disiplinlerden uyulması gereken çeşitli ilkeler ve kurallar bulunmaktadır. Bu kurallar ve ilkelerden bazıları aşağıda sıralanmıştır. Bunlar;
• hedef kitle özellikleri,
• hedef kitle ihtiyaç ve ilgileri,
• kullanılabilirlik,
• çokluortam ilkeleri,
• insan-bilgiyar etkileşimi prensipleri,
• görsel tasarım ilkeleri ve
• görsel algı kuralları şeklindedir.

Bir mesajı görselleştirip alıcıya iletmek için resim, metin, grafik ve çizimlerin algılanabilir bir biçimde iki boyutlu veya üç boyutlu olarak tasarlanmasına yönelik yaratıcı sürece grafik tasarımı denir.

Dokunmatik ekran, klavye, fare, masaüstü, web sitesi arayüzü gibi insanın etkileşime girebildiği her türlü bilişim teknolojileri tasarımına kullanıcı arayüzü denir.

Stanford Web Güvenilirlik Araştırmasına (Stanford Web Credibility Research) göre kullanıcıların 75'i şirket, kurum veya kuruluşun güvenirliğini web sitelerinin tasarımına dayalı olarak değerlendirdiklerini göstermektedir.

Site şablonlarının belirlenmesinde dikkat edilmesi gereken, göz önünde bulundurulması gereken çeşitli kriterler vardır. Buna göre web sitesi için şablon tasarımına karar verilirken;
• Sitenin amacı,
• Hedef kitle özellikleri,
• Hedef kitle tercihleri,
• Sitenin sahip olacağı içerikler,
• Önceden tasarlanmış logo vb. grafiklerin yapısı dikkate alınmalıdır.

Grafik tasarımı ile ilgilenmeyenler de dâhil hemen herkesin duyduğu en yaygın kullanılan görsel tasarım yazılımı Adobe Photoshop’tur.

Mizanpaj; kelime anlamı olarak gazete, dergi, kitap gibi yayınlarda sayfa düzeni anlamına gelmektedir.

Web siteleri açısından bakıldığında çeşitli başlık/banner tasarımları bulunmaktadır. Bazı banner türleri aşağıda sıralanmıştır:
• Standart Banner: Sabit veya hareketli içerik içerir. Link verilerek yönlendirme yapılabilir.
• Rollover Banner: Mouse banner üzerine geldiğinde ölçüleri değişir. Bu tür banner’lar genellikle hareketli menü veya içerik içerir.
• Floating Banner: Sayfa açıldığında banner sayfa ortasında belirli süre kalır ve sonra kaybolur.
• Genişletilebilir (Expandable) Banner: Sayfanın en üst kısmında yer alır. Banner üzerine gelindiğinde sayfayı aşağı doğru iterek genişler.
• Akan Video Banner: Banner sürekli dönen video veya videolar olarak tasarlanmıştır.
• Z-tipi Banner: Sayfanın en alt kısmında yer alır. Sayfa hareketlerinde alttaki pozisyonunu korur.

Buton, metin veya başka bir araç yoluyla etkileşime girildiğinde kullanıcıyı daha fazla içeriğe, yeni bir web sitesine veya web sitesi içinde farklı bir bölüme yönlendiren harf, rakam ve sembollerden oluşan özel verilere link adı verilmektedir.

Duyarlı web tasarımlarının bazı avantajları aşağıda sıralanmıştır:

Kalite: Web sitesi, ekranın büyüklüğüne göre içeriği kaydırıp görüntüleri yeniden boyutlandırarak kullanıcılara kaliteli deneyim sunar.
Erişilebilirlik: Güncel teknolojilerle tasarlanan duyarlı web tasarımı arama motoru optimizasyonunu da destekler. Responsive tasarımlarda URL yapısı aynı kalacağından dolayı, arama motoru sonuçlarında yer alma olasılığı artar.
Süreklilik: Duyarlı web tasarımı ile kullanıcı deneyimi süreklilik kazanır. Web sitenizi kullanan kişi bilgisayarından, cep telefonundan veya tablet bilgisayardan sorunsuzca kullanıma devam edebilir. Bu hem kullanıcı açısından hem de site için yararlıdır.
Düşük Maliyet: Her bir cihaz için ayrı ayrı web sitesi veya uygulama gerekmediğinden web tasarımı maliyeti düşer.
Bakım ve Güncelleme Kolaylığı: Farklı cihazlar için farklı sürümleri bulunan web sitelerinin güncellenmesi veya bakımı oldukça zordur. Ancak tüm cihazlarda çalışan tek bir tasarım üzerinde bakım ve güncelleme yapmak çok daha kolaydır. Böylece kullanıcılara kesintisiz hizmet vermek de mümkün hale gelir.

Grafik tasarımı, bir mesajı görselleştirip alıcıya iletmek için resim, metin, grafik ve çizimlerin algılanabilir bir biçimde iki boyutlu veya üç boyutlu olarak tasarlanmasına yönelik yaratıcı bir süreçtir.