GÖRSEL WEB TASARIMI - Deneme Sınavı - 7

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.

Temelde HTML5 ve CSS
medya sorguları (CSS media queries) gibi gelişmiş
web tabanlı kodlamaya dayanan duyarlı tasarımların hem kullanıcı hem de sunucu açısından önemli
faydaları bulunmaktadır. CSS media sorguları; cihazın ekran türü,
genişlik, yükseklik, yön, hatta çözünürlüğünü de içeren özelliklerine göre stilleri değiştirmeyi kolaylaştıran basit CSS filtreleridir.

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.

Infografik, bir bakışta verileri kolayca anlaşılabilir hale getirmek için tasarlanan grafik formatında bilgi gösterimleridir. Infografikler site şablonu olarak da kullanılabilir.

Brackets: Brackets, açık kaynak kodlu bir HTML, CSS ve JavaScript tabanlı kod düzenleyicisi.

Mizanpaj, kelime anlamı olarak gazete, dergi, kitap gibi yayınlarda sayfa düzeni anlamına gelmektedir. Mizanpaj, web tasarımında da sayfa düzeni yerine kullanılabilmektedir.

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.

Türkçe’de başlık ve manşet anlamlarına gelen Banner web sitelerinde çeşitli tasarımlarla sunulan tanıtıcı öğelerdir. Genelde logo ve navigasyon unsurları ile bütünleşik olarak kullanılır.

Cascading Style Sheets/Basamaklanmış Stil Katmanları’nın kısaltması olan CSS bir web sitesi içerisinde birbiriyle uyumlu renk, yazı tipi, boyut gibi öğelerin her sayfa için ayrı ayrı değil de tek bir yerden yönetilmesi anlamına gelen bir kodlama türüdür.

Arkaplan renk ve görseller