Ünite 3: Web için Görsel Tasarım Elementleri

Giriş

Web için grafik tasarım elementleri yapılarına göre; görsel dış tasarım elementleri, görsel iç tasarım elementleri ve duyarlı (responsive) arayüzler için görsel tasarım elementleri olarak sınıflandırılmıştır. Bu görsel bileşenlerin başarılı bir şekilde tasarlanması için farklı disiplinlerden uyulması gereken çeşitli ilkeler ve kurallar şunlardır:

• hedef kitle özellikleri,
• hedef kitle ihtiyaç ve ilgileri,
• kullanılabilirlik,
• çokluortam ilkeleri,
• insan-bilgiyar etkileşimi prensipleri,
• görsel tasarım ilkeleri
• görsel algı kuralları

Bir web tasarımı sürecinde görsel tasarım unsurları hayati önem taşır. 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.

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. Bu özellikleriyle, insan-bilgisayar etkileşimi için oldukça önemli bir role sahiptir.

Web için Görsel Dış Tasarım Elementleri

Web tasarımlarında ziyaretçilerin ilk izlenimini en fazla etkileyen görsel web tasarımı elementleri web için görsel dış tasarım elementleridir. Olumlu bir ilk izlenim oluşturmak için kişi, kurum veya kuruluşun amacına uygun bir görsel web tasarımının oluşturulması gerekir.

Site şablonu web sitesinin sayfa düzenini ifade eder. Site şablonlarının belirlenmesinde dikkat edilmesi gereken başlıca kriterler şunlardır:

• Sitenin amacı,
• Hedef kitle özellikleri,
• Hedef kitle tercihleri,
• Sitenin sahip olacağı içerikler,
• Önceden tasarlanmış logo vb. grafiklerin yapısı

Profesyonel ve özgün bir web sitesi şablonu tasarlamak için günümüzde dünyanın grafik tasarım programları konusunda lider program geliştiricisi olan Adobe tarafından geliştirilen Illustrator ve Photoshop yazılımları ya da Google Web Designer, CorelDRAW veya Canva gibi grafik tasarım yazılımları etkili bir şekilde kullanılmalıdır.

Photoshop’ta kişisel bilgisayar ve mobil uygulama tasarımlarının yanında yeni nesil saatler için de uygun çalışma yüzeyi boyutları da sunulmaktadır. Böylece bir web sitesini farklı Masaüstü ve Dizüstü PC ekranları, Tablet Bilgisayar Ekranları, Akıllı Telefon Ekranları ve yeni nesil saat ekranları için düzenlemek mümkün hale gelmiştir. Web tasarımı ile broşür ve afiş tasarımlarında etkin olarak kullanılan Adobe Illustrator, Mac OS X ve Windows işletim sistemleri ile uyumlu çalıştırılabilmektedir.

Web için Görsel İç-Tasarım Elementleri

Web için görsel iç-tasarım elementleri dört başlık altında incelenebilir:

• 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,
• Web sitesi altbilgi (footer) görsel tasarımı.

Web için görsel iç tasarım elementlerinin oluşturulması, düzeltilmesi ve yayınlanmasında Adobe Photoshop ve Illustrator’un yanında en yaygın kullanılan yazılımlardan biri de Adobe şirketinin Adobe InDesign yazılımıdır. InDesign yazılımı, Adobe Creative Cloud ve diğer hizmetleriyle entegre çalışır.

Görsel iç-tasarım elementleriyle uyumlu olması beklenen ve diğer elementlerin nasıl olacağına karar vermede öncülük eden bileşen logodur. Logo tasarımı konusunda deneyimi olmayanlar için bazı öneriler şunlardır:

• Oluşturulması planlanan web sitesine benzer sitelerin logolarını incelemek.
• Elle çizim denemeleri yapmak.
• Logo tasarımı eğitim örneklerini izlemek.
• Logo örnekleri üzerinde çalışmak.

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. Web sitelerinde sitenin kimliği niteliğindeki bu alandan yararlanılabilir. Başlıca banner türleri şunlardı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.

Banner’lar, günümüzde çoğunlukla reklam amacıyla kullanılıyor ise de web sitesini tanıtan, çoğunlukla kullanıcı girişini, navigasyon bileşenlerini ve web sitesi logosunu da barındıran önemli görsel tasarım elementleridir.

Menüler, bir web sitesinde kullanılan linklerin bir arada düzenli bir şekilde bulunmasını sağlayan görsel web tasarımı bileşenleridir. 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.

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. Butonları görsel tasarımlarına göre; basit butonlar, görsel tasarımı zenginleştirilmiş butonlar ve CSS butonları olarak sınıflandırılabilir. Web sitelerinde buton tasarımında CSS butonları en yaygın kullanılan butonlardı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. CSS ile herhangi bir resim veya grafiğe ihtiyaç duymadan görsel olarak dikkat çekici butonlar tasarlamak mümkündür. CSS’in en büyük avantajı tekrar kullanımdır. Uygun renk ve düzende hazırlanan buton özellikleri aynı kodlar tekrarlanmadan yeniden kullanılabilir.

İkonlar, bilgisayarlarda ve grafiksel arayüzlerde bir dosyayı, dizini veya uygulamayı temsil eden simge, resim, görüntüyü ifade eden grafiksel imgelerdir. Butonlara göre daha basit ve daha anlaşılır yapılar oldukları için, ikonlar çoğu zaman butonlar içerisinde veya butonlar yerine de kullanılırlar.

Web formu; web sitelerinde ziyaretçiler ile iletişim kurmanın en temel kanalıdır. Web formları kullanıcı bilgilerini içerdiği için web sitelerinin en fazla saldırıya uğrayan bileşenleridir. Web formlarında kullanıcı bilgilerini korumak, web sitesi kullanıcı alanlarına erişimi engellemek için form tasarımlarında alınabilecek bazı güvenlik önlemleri bulunmaktadır.

256- bit SSL (Secure Sockets Layer-güvenli giriş katmanı), sunucu-istemci iletişimi sırasında verilerin şifrelenerek transfer edilmesi işlemidir. Web tarayıcılar üzerinden bu güvenlik standardı formlardan veri girişinin güvenli yapılmasını sağlar.

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 tutulması istenen veriler için her zaman şifreleme sağlanması gerekir.

Şifre alanı kullanarak web formuna girilen şifrelerin başkaları tarafından görülmesi engellenebilir. Ancak bu yöntem güvenlik için tek başına yeterli değildir.

CAPTCHA teknolojisi ile web formuna bilgi girişlerinin kötü niyetli kişilerin yazdığı programlar tarafından otomatik olarak yapılmasının önüne geçilir. Temel amaç bilgisayar ile insanların davranışlarının ayırt edilmesidir. Üyelik formlarında rastgele bir resim gösterilerek formu dolduran kişiden bu resmin üzerinde yazan sözcüğü girmesi istenir.

Web sitesi için görsel iç-tasarımı elementlerinin sonuncusu footer veya altbilgi olarak adlandırılan alandır. Genel olarak web sitesi altbilgi (footer) tasarımında bulundurulabilecek bileşenler şunlardır:

• iletişim adresi,
• haritalar,
• telif bilgileri,
• kurumsal bilgiler,
• hızlı erişim,
• menüler,
• sponsor bilgileri,
• mobil uygulama bağlantılarını,
• sosyal medya hesabı linkleri,
• arama çubuğu,
• site haritası,
• RSS beslemeleri.

Duyarlı Web Arayüzleri için Görsel Tasarım

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. Duyarlı web tasarımı yaklaşımına göre web tasarımları her ekranda kullanıcı etkileşimine sorunsuz cevap verebilmelidir. Bu da esnek sayfa düzenleri, ızgaralar (grids), resimler ve grafiklerin kullanımı ile birlikte temiz ve hatasız bir kodlama gerektirir. Temelde HTML5 ve CSS3 media 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. Duyarlı web tasarımlarının bazı avantajları şunlardır:

• Kalite
• Erişilebilirlik
• Süreklilik
• Düşük Maliyet
• Bakım ve Güncelleme Kolaylığı

Web sitesi özelliklerinin tüm cihazlarda sorunsuz çalıştırılabilmesi için CSS3 media sorguları en önemli rolü üstlenirler. Görüntü alanı boyutuna göre yaygın CSS media sorgulama öğeleri şunlardır:

• Min-width: Genişliği sorguda tanımlanan değerin üzerinde olan tarayıcılar için uygulanır.
• Max-width: Genişliği sorguda tanımlanan değerin altında olan tarayıcılar için uygulanır.
• Orientation=landscape: Genişliğin yükseklikten büyük olduğu tarayıcılar için uygulanır.
• Min-height: Yüksekliği sorguda tanımlanan değerin üzerinde olan tarayıcılar için uygulanır.
• Max-height: Yüksekliği sorguda tanımlanan değerin altında olan tarayıcılar için uygulanır.
• Orientation=portrait: Yüksekliğin genişlikten büyük veya genişliğe eşit olduğu tarayıcılar için uygulanır.

Duyarlı web tasarımı ekran ölçekleri için en sık kullanılan öğeler min-width, max-width, min-height ve max-height ögeleridir.