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 ele alır. Ayrıca, kullanıcı dostu ve etkileşimli dijital arayüzlerin 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üzlerine odaklanmaktadır. Bu tasarımlar, kullanıcıların site içeriğine erişimini kolaylaştıracak şekilde düzenlenir. Web grafik tasarımı sürecinde kullanılan renk paletleri, yazı tipleri, ikonlar ve yerleşim düzenleri, görsel hiyerarşi ve okunabilirlik ölçütleri doğrultusunda belirlenir.

### 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. 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. 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. 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üklenmesi ve işlevselliği ile ilişkilidir. Teknik açıdan optimize edilmiş görsel kullanımı, önbellekleme teknikleri ve veri sıkıştırma yöntemleri gibi uygulamaları kapsar. Web standartları, geliştiriciler için kodlama uygulamalarına ilişkin çerçeve sunarken, tarayıcıların içerik sunumuna yönelik davranışlarını da tanımlar.

### 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.
## Kaynakça