Web grafik tasarımı

Web grafik tasarımı, grafik tasarım ile yakından ilişkili olmakla birlikte, web ortamına özgü gereksinimlere yanıt veren, bağımsız bir tasarım disiplinidir. Bu alan, kullanıcı deneyimini ön planda tutarak estetik, işlevsellik ve erişilebilirlik ilkelerine dayalı web sitelerinin görsel düzenini konu alır. Web grafik tasarımı yalnızca sanatsal bir uğraş değil, aynı zamanda kullanıcı dostu ve etkileşimli dijital arayüzlerin (UX) oluşturulmasına yönelik uygulamaları da kapsar.

Günümüzde yaygın olan web tasarımı anlayışı, sade ve anlaşılır kullanıcı arayüzleri tasarlamayı hedeflemektedir. Bu tasarımlar, ziyaretçilerin site içeriğine kolayca ulaşmalarını sağlamayı amaçlar. Web grafik tasarımı sürecinde kullanılan renk paletleri, yazı tipleri, ikonlar ve düzenlemeler, görsel hiyerarşi ve okunabilirlik açısından dikkatle seçilir.

Tarihçe

Web grafik tasarımı, 1990'lı yıllarda internetin yaygınlaşmasıyla ortaya çıkmıştır. İlk web siteleri temel HTML kullanılarak metin tabanlı hazırlanmıştır.[1] 1996'da CSS'in geliştirilmesiyle birlikte içerik ve sunum ayrılarak daha esnek görsel düzenlemeler yapılmaya başlanmıştır.[2] 1995'te tanıtılan JavaScript ile web sayfalarına etkileşim kazandırılmış, 2000'li yıllarda dinamik öğelerin kullanımı artmıştır.[3] 2010 yılında Ethan Marcotte'un “Responsive Web Design” makalesiyle duyarlı tasarım yaklaşımı ön plana çıkmış ve mobil cihazların yaygınlaşmasıyla web grafik tasarımının temel ilkelerinden biri haline gelmiştir.[4]

Günümüzde

Günümüzde yaygın olan web tasarımı anlayışı, sade, anlaşılır ve erişilebilir kullanıcı arayüzleri oluşturmayı hedeflemektedir. Tasarım sürecinde kullanılan renk paletleri, yazı tipleri, ikonlar ve düzenlemeler görsel hiyerarşi, okunabilirlik ve kullanıcı deneyimi açısından dikkatle seçilmektedir. Bu yaklaşım, ziyaretçilerin site içeriğine kolayca ulaşabilmesini ve etkileşimli bir deneyim yaşamasını amaçlamaktadır.

Web standartları

Web standartları, geliştiricilerin ve tasarımcıların uyumlu ve tutarlı web siteleri hazırlamalarını sağlamak amacıyla oluşturulan teknik ve yapısal kurallardır. Bu standartların uygulanması, farklı tarayıcılarda ve cihazlarda web sitelerinin tutarlı çalışmasını mümkün kılar. Ayrıca erişilebilirliği artırarak, kullanıcı deneyimini olumlu yönde etkiler.

Bu standartlar, web sayfalarının hızlı yüklenmesini ve işlevsel olmasını destekler. Teknik açıdan; optimize edilmiş görsel kullanımı, önbellekleme teknikleri ve veri sıkıştırma yöntemleri gibi uygulamaları içerir. Web standartları, hem geliştiricilere doğru kodlama yöntemlerini gösterir hem de tarayıcılara içerik sunumunda nasıl davranmaları gerektiğini belirtir.

World Wide Web Consortium (W3C)

World Wide Web Consortium (W3C), web teknolojilerinin gelişimini yönlendiren, dünya genelinde birçok akademik ve ticari kuruluşun iş birliğiyle çalışan bir standart belirleme kuruluşudur. HTML, CSS, XML gibi temel web teknolojilerinin gelişimini koordine eden W3C, web'in evrensel erişilebilirliğini sağlamaya yönelik standartlar yayımlar.

Web standartlarının temel unsurları

HTML ve XHTML

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'nin 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 ve performans gibi unsurlar da web standartları içerisinde yer almaktadır.

Diğer bir deyişle; HTML, bir web sayfasının iskeletini oluşturur, içeriği ve yapıyı belirlerken CSS, bu iskeleti görsel olarak şekillendirir ve tasarım ekler, JavaScript ise sayfaya etkileşim ve dinamiklik kazandırarak kullanıcı deneyimini geliştirir.

Ana kurallar

Erişilebilirlik

Web standartları bazı erişilebilirlik kurallarını içerdiğinden; web sitesi kodlama standartlarını uygulayan bir web sayfası, erişilebilirlik 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 ayrıldığı takdirde düzenlenen sayfa her cihazda sorunsuz bir şekilde görüntülenir. 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ı, tablo tabanlı sayfalara göre daha az yer kaplayabilir. Bu durum sayfa açılış hızını olumlu etkileyebilir. Bu fark; karbon emisyonlarını azaltma, sayfanın hızlı açılması, internet tasarrufu ve 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, ikon 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.