Bu maddedeki üslubun, ansiklopedik bir yazıdan beklenen resmî ve ciddi üsluba uygun olmadığı düşünülmektedir. Maddeyi geliştirerek ya da konuyla ilgili tartışmaya katılarak Vikipedi'ye katkıda bulunabilirsiniz.

Bu madde hiçbir kaynak içermemektedir. Lütfen güvenilir kaynaklar ekleyerek madde içeriğinin geliştirilmesine yardımcı olun. Kaynaksız içerik itiraz konusu olabilir ve kaldırılabilir. Kaynak ara: "Web grafik tasarımı" – haber · gazete · kitap · akademik · JSTOR (Mart 2020) (Bu şablonun nasıl ve ne zaman kaldırılması gerektiğini öğrenin)

Web grafik tasarımı, grafik tasarım alanı ile yakın ilişkili bir konu olarak ele alınabilir ama kendi içerisinde ayrı bir dal olarak çok geniş bir alanı ilgilendirmektedir.

Klasik bir grafik tasarımcısı web tasarım alanında çalışmaya başladığında klasik tasarım anlayışının ve alışkanlıklarının yeterli olmadığını kısa süre içerisinde fark edecek ve bu iş için ayrıca tecrübe edinmesi gerektiğinin farkına varması hiç de zor olmayacaktır.

Günümüzde sunulan ve üzerinde çalışılan web tasarımlar, bir sanatsal çalışma olmaktan tamamen sıyrılarak kullanıcıları yormadan daha minimalist tasarıma ve kullanıcı dostu olmakla beraber, web sitesinde gezinmeleri için sadeleşme yolunu seçmiştir.

Henüz standartlaşmamış olmakla birlikte kendi kurallarını içinde barındırır.

Web standartları[değiştir | kaynağı değiştir]

Web standartları, web geliştiricilerinin ve tasarımcılarının uygun 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 tarayıcılar arasındaki uyumluluğunu sağlar. Aynı zamanda web geliştirme süreçlerini daha verimli hale getirir.

Web Standartlarının Temel Unsurları[değiştir | kaynağı değiştir]

HTML ve XHMTL[değiştir | kaynağı değiştir]

Web sayfalarının yapısını tanımlayan dildir. HTML (Hypertext Markup Language), 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[değiştir | kaynağı değiştir]

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[değiştir | kaynağı değiştir]

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.

Bunları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.

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.

Web standartları, değişik web sayfası görüntüleme cihazlarının, web sitesi içinde sunulan bilgileri aynı şekilde kullanıcıya göstermesine yardım eden bir takım yazılım teknolojileri toplamına verilen isimdir.

Web standartları sayesinde, sunulan bilgi, elektronik ortamda web tarayıcıları tarafından görüntülenebilir hale geliyor.

Web dünyasının ana dilleri HTML (Hyper Text Markup Language) ve CSS (Cascading Style Sheets). Bu standartlar webmasterlara bir sayfanın nasıl kodlanması gerektiğini göstermenin yanı sıra İnternet 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ıyor.

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.

Ana kurallar[değiştir | kaynağı değiştir]

Erişebilirlik[değiştir | kaynağı değiştir]

Web standartları, bazı erişebilirlik 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ülenme[değiştir | kaynağı değiştir]

Eğer sunum ve bilgiyi, yeni geliştirilen CSS kuralları ile ayırırsanız, sunulan bilgi, herkese ve her cihaza ulaşabilecektir. Kullanıcı, ister bir bilgisayar isterse cep telefonu tarayıcısı ile aynı bilgiye sorunsuz bir şekilde ulaşabilecek ve bilgiyi dijital ortamda doğru olarak görüntüleyebilecektir.

Likit tasarım

Basit anlamda, tarayıcı ekranı genişleyip daraldıkça ona uygun olarak genişleyip ya da daralan tasarımlara verilen ad.

Hızlı yüklenme[değiştir | kaynağı değiştir]

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. Hızlı olduğunu düşündüğünüz bir web sayfasını bilgisayarınıza kayıt ederek ve boyutuna bakarak bunu daha iyi ayırt edeceksiniz.

Düşük bant genişliği kullanımı[değiştir | kaynağı değiştir]

Web sayfalarınızı barındıran yer sağlayıcı şirket, kullandığınız internet trafiğine orantılı olarak aylık para talep edebilir. Eğer web standartları ile hazırlamış olduğunuz sayfaların boyutu küçük ise, web siteniz daha düşük bir İnternet trafiği oluşturarak size ya da müşterinize para tasarrufu sağlayacaktır.

Arama motorlarında sıralama[değiştir | kaynağı değiştir]

Web sitenizin tasarım ve görünümünü değiştirmeden, daha fazla ve kaliteli ziyaretçiyi web sitenize çekebilmeyi; arama motoru optimizasyonu ile sağlayabilirsiniz.

Optimize edilerek oluşturulmuş web sayfaları ile arama motorlarında ilk sıralarda yer almanız mümkün olabilir.

Arama motorlarının mantığını bilmeniz önemlidir. Flash altyapısı ile yapılan web sitelerinin içeriğinde bulunan yazılar arama motoru robotları tarafından okunamadığından sayfalarınız Google vb. arama motorları tarafından listelenemeyebilir. Fakat flash altyapısı kullanılan bir web sitesinin html kodunun içindeki meta etiketi (meta tag) ve anahtar kelimelerini (keywords) girerseniz sadece bunlar göz önünde bulundurularak indekslenecektir.

Google flash altyapısı ile yapılmış web sitelerinde artık dinamik metin (dynamic text) okuyabilmektedir. Web sayfalarınızı statik metin (static text) yerine dinamik metin ile inşa ederseniz bulunabilirliğiniz artacak ve bu da sizin yararınıza olacaktır.

Bakım kolaylığı[değiştir | kaynağı değiştir]

Güncel kodlama sistemleri ile geliştirilen bir web sitesinde bilgi ve sunumun ayrılması sayesinde; eğer site içinde, sitenin tümünü etkileyecek bir tasarımsal değişlik yapılması gerekiyorsa, CSS dosyası üzerinde yapılacak bir düzenleme ile tüm siteyi etkileyecek bir değişim gerçekleştirilebilir. Bu şekilde her bir sayfayı tek tek düzenlemek yerine tek bir dokunuş ile sorunun üstesinden gelebilirsiniz.

Stratejik Aşamalar[değiştir | kaynağı değiştir]

İletişim[değiştir | kaynağı değiştir]

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

Araştırma[değiştir | kaynağı değiştir]

Ş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[değiştir | kaynağı değiştir]

Web sitesinin menü yapısı, kategori yapısı, galeriler, bilgiler, yazılımlar gibi maddeleri içeren site haritası çıkartı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[değiştir | kaynağı değiştir]

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

Tasarım[değiştir | kaynağı değiştir]

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[değiştir | kaynağı değiştir]

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[değiştir | kaynağı değiştir]

Görsel ve yazılımsal hatalar şirketin imajını olumsuz etkileyeceği için son kontroller titizlikle yapılmalıdır.

• 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. Web sitesi içeriğinde kullanılan modüller, görseller, eklentiler gibi yazılımların düzgün çalıştığının onayını almak için testlere yüksek oranda ihtiyaç vardır.

Lansman[değiştir | kaynağı değiştir]

Tüm aşamalardan geçtikten sonra web sitesini yayına açılması ve tanıtılmasıdır.

Teknik destek[değiştir | kaynağı değiştir]

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ımsal eklemeler gibi ihtiyaçlarla şekillenir.