İçeriğe atla

Web grafik tasarımı

Kontrol Edilmiş

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

Listelen tüm testler sırasında herhangi bir sorun bulunmadığı ya da tespit edilen sorunların düzeltildiği takdirde 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. 

İlgili Araştırma Makaleleri

<span class="mw-page-title-main">Web tarayıcısı</span> World Wide Webdeki bilgi kaynaklarını almak, sunmak ve dolaşmak için yazılım uygulaması

Web tarayıcısı veya ağ tarayıcısı, kullanıcıların World Wide Web (WWW) üzerinde bulunan bilgi kaynaklarını edinmeye ve görüntülemeye yarayan yazılımların genel adıdır. WWW üzerindeki bilgi kaynakları web sayfası, resim, video veya başka içerik türü olabilir. Bu kaynaklarda yer alan hiperlinkler aracılığıyla kullanıcılar, web tarayıcılarını kullanarak ilgili kaynaklar arasında dolaşabilir.

<span class="mw-page-title-main">Tarayıcı savaşları</span>

Tarayıcı Savaşları, elektronik cihazların İnternete bağlanırken kullandıkları yazılımlar olan ağ tarayıcısı üreticisi şirketler arasında yaşanan ve pazar payını elinde tutmak ya da artırmak için girişilen yarış dönemlerine verilen addır.

<span class="mw-page-title-main">Arama motoru</span>

Web arama motoru veya internet arama motoru, web'de sistematik bir şekilde internet kullanıcılarının istedikleri bilgilere anında erişebilmek için sıkça kullandıkları bir yazılım türüdür. Birincil işlevi internette veya internetin bir kısmında bulunmuş olan verileri bir araya getirmek ve raporlamaktır. Arama sonuçları genellikle satırlara ayrılmış sonuç sayfaları şeklinde sunulur. Bulunan bilgiler arasında web sayfası bağlantıları, görseller, videolar, infografikler, yazılar, akademik makaleler ve diğer dosya türleri yer alabilir. Arama motoru, çıktı olarak elde edilmiş kayıtlar ve bilgilerin hepsini birbiriyle karşılaştırarak sorgulayan, bir sorgunun kabul edilebilmesi için gerekli faaliyetleri gerçekleştiren, elde edilen verilerin performanslarının en yüksek olmasını amaçlayan bir sorgulama ve bulma mekanizmasıdır. Bazı arama motorları, veri tabanlarında ve kamuya açık dizinlerde bulunan bilgileri de indeksler. Bu noktada toplanan veriler, web sitesi URL’sini, web sitesinin içeriğini açıklayan bazı anahtar kelimeleri veya anahtar kelime gruplarını, web sayfasını oluşturan kod yapısını ve web sitesinde verilen bağlantıları içerir. Arama motorları, insanlar tarafından derlenen web dizinlerinin aksine, "örümcek" denilen botlar tarafından toplanan bilgileri belirli bir algoritma yardımıyla gerçek zamanlı olarak yansıtabilirler. Ve de günümüzde World Wide Web ile çok iyi bir hale gelen arama motorları, giderek profesyonelleşmeye devam etmektedir.

<span class="mw-page-title-main">WordPress</span>

WordPress, PHP dilinde yazılmış ve HTTPS ile desteklenen bir MySQL veya MariaDB veritabanıyla eşleştirilen bir ücretsiz ve açık kaynaklı içerik yönetim sistemi (CMS)‘dir. Özellikler, WordPress içinde "Temalar" olarak adlandırılan bir eklenti mimarisi ve bir şablon sistemi içerir. WordPress başlangıçta bir blog yayınlama sistemi olarak oluşturuldu ancak daha geleneksel posta listeleri ve İnternet forumları, medya galerileri, üyelik siteleri, öğrenim yönetim sistemleri (LMS) ve çevrimiçi mağazalar dahil olmak üzere diğer web içeriği türlerini desteklemek için gelişti.

<span class="mw-page-title-main">Web sayfası</span> World Wide Web ve web tarayıcıları aracılığıyla doğrudan görüntülenebilen tek belge

Web sayfası, World Wide Web için hazırlanan ve web tarayıcısı kullanılarak görüntülenebilen dokümanlardır. Web sayfaları çoğunlukla HTML formatında kodlanır, CSS, betik, görsel ve diğer yardımcı kaynaklardan yararlanılarak son görünümüne sahip olur ve işlevsellik kazanır. Birden fazla web sayfasının bir araya gelmesi ile ortaya çıkan web sitesi ile karıştırılmamalıdır. Günlük konuşma dilinde internet sayfası terimi de çoğunlukla web sitesi anlamında kullanılmaktadır.

<span class="mw-page-title-main">İnternet sitesi</span> tek bir web alanından sunulan ilgili web sayfaları kümesi

Web sitesi, Ortak bir alan adı ile tanımlanan ve en az bir web sunucusunda yayınlanan web sayfaları ve ilgili içeriklerden oluşan bir koleksiyondur. Web üzerindeki sayfalar; metin, görsel ve animasyon şeklinde ziyaretçisine bilgi aktaran veya hizmet sunan sayfaların tümünü kapsayan bir doküman topluluğudur. Ziyaretçiler bir web sitesine, HTTP veya HTTPS protokollerinde aşağıdaki bileşenlerden oluşan benzersiz bir adresi kullanarak erişirler:

<span class="mw-page-title-main">Acid2</span>

Acid2, web tarayıcılarının mevcut standartlara uygunluğunu tespit eden bir testtir. Test bir url ile ulaşılan, standart ya da yakında standart olacak tüm web tarayıcısı özelliklerinin bir arada kullanıldığı bir html sayfası ile uygulanır. Eğer tarayıcının tüm özellikleri standartlara uygun üretilmiş ise "gülen bir adam yüzü"nün sayfada doğru şekilde belirmesiyle testten onay alınır. Yüz resmindeki kırmızı noktalar ve dağılmalar web tarayıcısında standart dışı ya da eksik özelliklerin bulunduğunu gösterir.

<span class="mw-page-title-main">World Wide Web</span> internet kullanarak ulaşılan, birbirine bağlı belgelerden oluşan küresel sistem

World Wide Web, Dünya Çapında Ağ (kısaca WWW veya Web), İnternet üzerinde yayınlanan birbirleriyle bağlantılı hiper-metin dokümanlarından oluşan bir bilgi sistemidir. Bu dokümanların her birine Web sayfası adı verilir ve Web sayfalarına İnternet kullanıcısının bilgisayarında çalışan Web tarayıcısı adı verilen bilgisayar programları aracılığıyla erişilir. Web sayfalarında metin, imaj, video ve diğer multimedya ögeleri bulunabilir ve diğer bağlantı ya da link adı verilen hiper-bağlantılar ile başka Web sayfalarına geçiş yapılabilir.

<span class="mw-page-title-main">HTML</span> işaretleme ve web programlama dili

Hiper Metin İşaretleme Dili web sayfalarını oluşturmak için kullanılan standart metin işaretleme dilidir. Dilin son sürümü HTML5'tir.

StumbleUpon, kullanıcılarına yeni siteler keşfetme ve bu siteleri oylama imkânı sunan bir web sitesi ve tarayıcı eklentisiydi. Web sayfaları kullanıcılar tarafından tarayıcıya kurulan araç çubuğu vasıtasıyla oylanır ve ilgi alanlarına göre sayfaları görebilir, bunları diğer kullanıcılarla paylaşabilir ya da oyladıkları içeriği sayfalarında yayımlayabilirlerdi. İnternette gezinmeyi sağlamasının yanında, bu özellikleriyle sosyal ağ ve blog servisi olarak da kullanılabilmekteydi. Haziran 2018'de kapandı.

<span class="mw-page-title-main">Maxthon</span> Çinde Microsoft Windows ve MacOSX için geliştirilmiş ücretsiz web tarayıcısı

Eski adı MyIE2 olan Maxthon web tarayıcı yazılımı, yüksek derecede özelleştirilebilir arabirime sahip, güçlü sekmeli bir tarayıcıdır. Kendi sayfa işleme motoruna sahiptir; özgün yapılandırılmış WebKit ve Trident çekirdeği kullanır. Kullanıcılar, istedikleri tarama motoru ile internette gezinebilir.

<span class="mw-page-title-main">HTML5</span> web programlama dili HTMLnin en güncel sürümü

HTML5, İnternet'in çekirdek teknolojilerinden HTML işaretleme standardının beşinci sürümüdür. Internet Explorer, Mozilla Firefox ve Opera tarayıcılarının güncel sürümleri tarafından kısmen desteklenmektedir. Kısaca H5 Google Chrome ve Safari tarayıcılarının güncel sürümleri üzerinde deneme aşamasında da olsa çok daha iyi bir şekilde çalışmaktadır. Günümüzde kullanılan HTML 4.1 sürümü, CSS desteğiyle ne kadar düzenli ve sağlam bir yapıda kodlanırsa kodlansın, yine de fazladan yazılan kodların fonksiyonelliğini bozduğu bilinmektedir. Bu yüzden HTML5, bu ihtiyaçları karşılamak adına geliştirilmeye başlanmıştır. Video paylaşım sitesi YouTube, deneme aşamasında HTML5'i kullanıcılarına sunmaktadır.

<span class="mw-page-title-main">Mobil internet</span>

Mobil internet mobil haldeki taşınabilir elektronik cihazlar ve sensörler vasıtasıyla veri oluşturabilen tüm alet ve cihazlar arasındaki iletişime verilen genel addır.

Web tarayıcı motoru, bir web sayfasının yapısını belirleyen HTML, XML ve görsel dosyalarıyla, o sayfaya biçem kazandıran CSS, XSL gibi dillerde yazılmış betikleri bir arada derleyen programdır. Arayüz motoru olarak da bilinir.

<span class="mw-page-title-main">Google Sites</span> Web sayfası oluşturma aracı

Google Siteler, Google tarafından sunulan Google Apps üretkenlik paketinin bir parçası olarak, yapılandırılmış bir viki ve Web sayfası oluşturma aracıdır. Google Sitelerin amacı herkesin bir ekip odaklı bir site oluşturmak mümkün olabilmesi ve birden fazla kişinin iş birliği ve dosyalarınızı paylaşabilmesidir.

İleri web uygulaması, yeni bir yazılım geliştirme metodolojisini ifade etmek için kullanılır. Geleneksel uygulamalar dışında, İleri Web Uygulaması bilinen web sitelerinin ve mobil uygulamaların hibrit halde geliştirilmesi olarak değerlendirilebilir. Bu yeni uygulama yaşam-döngüsü çeşitli özellikleri bir araya getirir ve en modern tarayıcılar tarafından desteklenerek mobil tecrübenin faydalarını kullanıcılara sunabilmektedir.

Bir web geliştiricisi, istemci-sunucu modeli kullanarak World Wide Web uygulamalarının geliştirilmesinde uzmanlaşmış veya özel olarak ilgilenen bir programcıdır. Uygulamalar genellikle istemcide, PHP, ASP'de HTML, CSS ve JavaScript kullanır. NET (C#), Python, Node.js, sunucuda Go veya Java ve istemci ile sunucu arasındaki iletişim için http bağlantılarını kullanmaktadır. Bir web içerik yönetim sistemi genellikle web uygulamalarını geliştirmek ve sürdürmek için kullanılır.

Web'de kullanıcı aracısı, kullanıcı adına hareket eden ve "Web içeriğini alan, işleyen ve son kullanıcı etkileşimini kolaylaştıran" herhangi bir yazılımdır. Bu nedenle kullanıcı aracısı özel bir yazılım aracısı türüdür.

Erişilebilirlik, engellilerin fiziksel, zihinsel veya duygusal engelleri aşarak toplumun çeşitli alanlarına ve kaynaklarına kolayca erişebilme ve bu alanlardan yararlanabilme hakkıdır. Erişilebilirlik, engel durumlarına bakılmaksızın her bireye eşit fırsatlar ve katılım sağlama amacını taşır.

Web erişilebilirliği, internet üzerindeki içeriklere, uygulamalara ve hizmetlere kolaylıkla erişilebilme durumunu ifade eder. Bu kavram, web sitelerinin, mobil uygulamaların veya diğer dijital platformların, engelli bireyler dahil olmak üzere, kullanılabilir olmasını sağlama amacını taşır. Engelli bireylerin, çeşitli fiziksel veya zihinsel engelleri olabilir, bu nedenle web erişilebilirliği, bu bireylerin internet üzerindeki içeriklere sorunsuz bir şekilde ulaşabilmesini ve bu içerikleri etkileşim kurarak kullanabilmesini hedefler.