Web grafik tasarımı

Web grafik tasarımı, grafik tasarım alanı ile yakın ilişkili bir konu olmakla birlikte kendi içinde ayrı bir dal olarak da geniş bir alanı kapsayan bir kavramdır.^[1]

Günümüzde, üzerinde çalışılan ve sunulan web tasarımları, sanatsal bir çalışma olmaktan ziyade, kullanıcıları yormadan daha sade ve kullanıcı dostu bir tasarım anlayışını benimsemiştir. Bu tasarımlar, web sitelerinde gezinmeyi kolaylaştırmak amacıyla sadeleşme yoluna gitmiştir.

Web standartları

Web standartları, web geliştiricilerinin ve tasarımcılarının uyumlu ve tutarlı web siteleri oluşturmalarını sağlamak için belirlenen kılavuzlardır. Bu standartları uygulamak, web sayfalarının erişilebilirliğini ve farklı tarayıcılar arasında uyumluluğunu sağlar. Aynı zamanda web geliştirme süreçlerini daha verimli hale getirir. Web standartları, web sitelerinin hızlı yüklenmesini ve düzgün çalışmasını sağlamak için tasarlanmıştır. Bu, optimize edilmiş görseller, önbellekleme ve veri sıkıştırma gibi teknikler içerebilir. Farklı görüntüleme yazılımlarının site içinde sunulan bilgileri aynı şekilde kullanıcıya göstermesi için kritik öneme sahiptir. Bu standartlar webmasterlara bir sayfanın nasıl kodlanması gerektiğini göstermenin yanı sıra internet tarayıcılarına bir sayfanın kullanıcıya nasıl görünmesi gerektiğini söyleyen bir takım kuralları içinde barındırır.

World Wide Web Consortium (W3C), Web ile ilgili tüm alanlarda araştırmaları yöneten ve standartları geliştiren ticari kurumlar ve eğitim kurumlarının konsorsiyumudur.

Web standartlarının temel unsurları

HTML ve XHMTL

HTML (HyperText Markup Language, Türkçe: Hiper Metin İşaretleme Dili), web sayfalarının yapısını tanımlayan dildir. Web sayfalarının metin, resimler ve diğer içeriklerle nasıl düzenleneceğini belirtir. XHTML ise HTML in daha katı ve XML tabanlı bir sürümüdür.

CSS

Cascading Style Sheets, web sayfalarının görünümünü tanımlayan dildir. Renkler, yazı tipleri, arka planlar ve düzen gibi görsel özellikler CSS kullanılarak kontrol edilir.

JavaScript

JavaScript, web sayfalarına etkileşim eklemek için kullanılır. Kullanıcıların düğmelere tıklamasına, formları doldurmasına ve sayfalar arasında gezinmesine yardımcı olur.

Bu üçünün dışında; erişilebilirlik, tarayıcı uyumluluğu, mobil kullanım özelliği, güvenlik, performans gibi seçenekler de web standartları içerisinde yer almaktadır.

Ana kurallar

Erişilebilirlik

Web standartları bazı erişilebilirlik kurallarını içerdiğinden; web sitesi kodlama standartlarını uygulayan bir web sayfası, erişebilirlik ve web sitesinin düzgün görüntülenmesi yolunda doğru bir adım atmış olacaktır.

Doğru görüntüleme

Sunum ve bilgi, CSS kuralları çerçevesinde ayırıldığı takdirde düzenlenen sayfa her cihazda sorunsuz bir şekilde görüntülenecektir. Cihazların ekran çözünürlük oranlarıyla doğrudan bağlantılı olan bu konu; bilgisayar, tablet ve telefonlar üzerinden sitenin sorunsuz bir şekilde görüntülenmesini sağlar.

Likit tasarım

Tarayıcı ekranı genişletilip daraltıldığında sayfanın uygun bir şekilde yeniden düzenlenmesi anlamına gelir.

Hızlı yüklenme

CSS ile geliştirilen bir web sayfası ile tablo kullanılarak yapılmış bir web sayfası arasındaki boyut farkı %25 ile %50 arasında değişmektedir. Bu fark; karbon emisyonlarını azaltma, sayfanın hızlı açılması, İnternet tasarrufu, sayfa oluşturma kolaylığı gibi pek çok konuda kolaylık sağlar.

Düşük bant genişliği kullanımı

Web sayfalarının barındığı internet sitesi sağlayıcıları, kullanılan internet trafiğine orantılı olarak ücret talep eder. Bu noktada web standartlarına uymak; hedef kitleye hitap eden ve işlevsel ancak bir o kadar da düşük boyutlu sayfalar oluşturmak internet trafiğini düşürür.

Arama motorlarında sıralama

İnternet sitesinin arama motorlarında sıralanması için kullanıcının amacını kolaylaştıracak şekilde tasarlanmalıdır. Hızlı, işlevsel ve tutarlı çalışmalıdır. Ayrıca hız bakımından optimize edilmiş sayfalar kullanıcıda olumlu bir deneyim bırakacağından dolayı arama motorlarında daha tutarlı sonuçlar alabilir.

Bakım kolaylığı

Güncel kodlama sistemleri ile geliştirilen bir web sitesinde bilgi ve sunumun ayrılması sayesinde; site içinde tümünü etkileyecek bir tasarımsal değişiklik yapılması gerekiyorsa, CSS dosyası üzerinde yapılacak bir düzenleme ile tüm siteyi etkileyen bir değişim gerçekleştirilebilir. Bu şekilde barındırılan her sayfayı düzenlemek yerine tek bir düzenleme ile sorun tamamen çözülür.

Web sitesi geliştirilirken stratejik aşamalar

İletişim

Reklam ajansı ve şirket arasındaki iletişimdir. Bu süreçte işletme nereye ulaşmak istemektedir, beklentileri nelerdir, kurum renkleri, yazılım destekleri eklemeler, kurum kimliğine uygun tasarım yapısı, iletişim kanalları vs. sorgulanır.

Araştırma

Şirketin beklentileri ile sektördeki rakipler karşılaştırılır. Araştırma içeriği; web sitesinin global veya yerel pazarda işletmeyi rakipleri karşısında birçok anlamda güçlendirecek iletişim altyapısının hazırlanması olacaktır.

Planlama

Web sitesinin menü yapısı, kategori yapısı, galeriler, bilgiler, yazılımlar gibi maddeleri içeren site haritası çıkarılır. Web sitesinde kullanılacak tüm içerikler, ziyaretçi eğilimleri ve gezinme hareketleri baz alınarak oluşturulmalıdır.

Geliştirme süreci

Planlama aşamasındaki site haritasında belirlenen maddelerin detaylandırılması, ziyaretçiler için geliştirilmesidir.

Tasarım

Grafik tasarım kural ve uygulama metotlarının, yazılım tekniklerine ve şirketin kurum kimliğine uygun olarak hazırlanmasıdır.

Panel yönetimi

Tasarımı ve yazılımı tamamlanan web sitesinin veri girişleri kontrol paneliyle sağlanır. Bütün veriler eksiksiz yüklenerek bir sonraki test aşamasına hazırlanır.

Testler

Görsel ve yazılım hataları kullanıcıda kötü bir izlenim bırakacağından dolayı tasarlanan ve geliştirilen sitenin fonksiyonları sitenin yayınlanmasından önce test edilmelidir.

• Tasarım ve kodlama entegrasyonu kontrolü
• İçerik/kod oranı testi
• UX (kullanıcı deneyimi) testi
• Sayfa açılış hızı
• İçeriğinde kullanılan materyal yapısı
• İnternet tarayıcıları (browser) uyumu
• Cihaz (akıllı telefon, tablet vb.) uyumu
• Kodlama hata testleri
• Retina ayarları (Yüksek çözünürlüklü cihaz uyumluluğu)
• Arama Motoru Optimizasyonu (SEO) uygunluğu
• Font, İcon Kullanımı veya CSS Sprite
• W3C Testi (HTML5 Doğruluk Testleri)
• Sitemap XML Ayarları
• Güvenlik testleri.

Yayın süreci

Listelenen tüm testler sonrasında herhangi bir sorun bulunmadığı ya da tespit edilen sorunların düzeltilmesi halinde yayınlanma aşamasına geçilmesidir.

Teknik destek

Web sitesinin yayına açıldıktan sonra kullanılan yeni görsellerin (boyut, ölçeklendirme, renk/ışık yeterliliği, doğru görsel seçimi) uygunluğunun kontrolü, arama motoru optimizasyonu (SEO) geliştirmeleri, internet reklamları stratejilerinin belirlenerek hayata geçirilmesi, kullanıcı eğilimlerine göre olası yazılım desteği eklemeler gibi ihtiyaçlarla şekillenir.

Kaynakça

1. "World Wide Web Consortium (W3C) Web Standartları". 14 Mayıs 2023 tarihinde kaynağından arşivlendi. Erişim tarihi: 20 Haziran 2024.