Web Grafik Tasarımı Dersi 2. Ünite Özet

Giriş

Bir web sitesinin başarısı kalitesiyle doğru orantılıdır. Bir web sitesi için başlıca kalite faktörleri zengin ve doğru bir içerik, güzel ve uyumlu bir biçimsel tasarım, hızlı ve kolay erişim, site içi ve site dışı hızlı ve sorunsuz navigasyon olanağı, kullanıcı dostu olma, mobil uyumluluk, sorunsuz kullanılabilirlik, optimizasyon özelliğidir. Bir web sitesi oluşturulurken web tasarım işlem ve süreçleri ile grafik tasarım ilkeleri ve organizasyonu iç içe geçmiştir. Web grafik tasarım, kendi içinde web teknolojisi, dijital teknoloji, grafik sanatı, kitle iletişimi, reklam sektörü, yeni medya gibi birçok alandan beslenen, disiplinler arası bir yapıya sahiptir. Web teknolojisi ve grafik tasarım estetiği, web grafik tasarımın iki temel bileşenidir.

Web grafik tasarım, web ortamı için belirli bir içeriğin ve buna ilişkin metin ile görsellerin, grafik sanatı ilkeleri doğrultusunda tipografi, grafik çizim ve form, renk gibi grafik elemanları kullanarak yorumlanması ve kurgulanmasıdır. Tasarım sürecinde ilgili donanım ve Adobe Dreamweaver, Indesign, Illustrator, Photoshop, CorelDRAW gibi yazılımlardan yararlanılır.

Hazırlanan görsel tasarım, web formatı kazanması için, HTML (Hypertext Markup Language/Hipermetin İşaretleme Dili) işaretleme dili ile kodlanır ve tipografi, renk, görsellerin boyutları, sayfadaki konumu ve yerleşimi konularında seçim ve düzenlemeler yapılmasını sağlayan CSS (Cascading Style Sheets/ Basamaklı Stil Şablonları) tanım dili ile stil şablonları biçimlendirilir.

PHP (Hypertext Preprocessor/Hipermetin Önişlemcisi ya da ASP:NET (Active Server Pages/Aktif Sunucu Sayfaları) gibi programlama dilleri ile dinamik yapı kazandırılır ve FTP (File Transfer Protocol/ Dosya Transfer Protokolü) yazılımı ile İnternet’e, IP (Internet Protocol Address/İnternet Protokol Adresi) adresine yüklenir.

Bir web sitesi kullanılmaya başladıktan sonra inovatif gelişmelere ve kullanıcı gereksinimlerine göre, web sitesi, işleyiş ve estetik olarak optimize edilmelidir. Bu konuda SEO (Search Engine Optimization/Arama Motoru Optimizasyonu) çalışmaları yapılır.

Kişisel, kurumsal ve ticari olan web sitelerinin bu özellikleri edu, gov, com v.b. gibi adres eklentilerinden anlaşılır.

Profesyonel ölçülerde web tasarımı ve web grafik tasarımı, çekirdek kadrosu grafik tasarımcı, web geliştirici ve web uzmanından oluşan bir ekip işidir.

Tarihsel olarak web grafik tasarımın iki net başlangıcı aşağıdaki gibidir:

• Grafik sanatçısı ve reklamcı William Addison Dwiggins, 1922 yılında ilk kez grafik tasarım ifadesini kullanmıştır.
• Bilgisayar mühendisi Tim Berners-Lee, 1989’de Web’i bulmuş, 1990’da Hipermetin İşaretleme Dili’ni geliştirerek Dünya Çapında Ağ Sistemi’ni kurmuştur. 1994’te Web’in geliştirilmesi ve web standartlarının oluşturulması amacıyla Dünya Çapında Ağ Birliği’ni (W3C) yapılandırmıştır

Web Grafik Tasarımının Tanımı

Web tasarım, genel anlamda bir web sitesinin içeriğinin inşasıdır. Web sitesinin web üzerindeki konumu ve kapasitesinin saptanması, web sitesinin grafik tasarımının kodlanması, İnternet’e yüklenmesi ve sitenin webdeki konumuna göre optimizasyon sağlanması işlem ve süreçlerini kapsar. Web tasarım ve web grafik tasarım interaktif ve eş zamanlı bir şekilde yürütülür. Web tasarım, web grafik tasarımı içerir.

Web grafik tasarım ise, genel anlamda bir web sitesinin içeriğinin grafik tanımı ve görsel tasarımıdır. Web grafik tasarım, fonksiyonel bir estetiği temsil eder. Web grafik tasarım, bir sitenin içeriği ve teknik özelliklerine göre grafik elemanları seçmek, grafik sanatı ilkeleri ve deneyimi, hayal gücü ve yaratıcı bir anlayışla bunları yorumlamak ve kurgulamaktır. Web grafik tasarımı, kullanıcı arayüz tasarımıdır.

Bir web projesi web tasarım ve web grafik tasarım olmak üzere iki başlıkta incelenebilir. Web tasarımın unsurları ve inşası aşağıdaki gibi özetlenebilir:

• Web konumu: Domain (İsim Hakkı), Hosting (Bulundurma Alanı), Bandwith (Bant Genişliği), Server (Sunucu)
• Kodlama (HTML – Hipermetin İşaretleme Dili)
• Metin ve görüntülerin ayrışması (CSS – stil şablonları)
• Dinamik yapı (PHP /ASP.NET – Hipermetin Önişlemesi)
• İnternete yükleme (IP – İnternet Protokol Adresi, FTP – Dosya Transfer Protokolü)

Web grafik tasarımın unsurları ve inşası aşağıdaki gibi özetlenebilir:

• İçerik
  • Görseller (Resim, grafik, fotoğraf, film, video, widget, sembol, ikon, logo, avatar, amblem ve illüstrasyon)
  • Metin
• Biçim, grafik elemanlar, zemin, tipografi (font, punto), grafik çizim (sayfa düzeni, sütun, çerçeve), 3D görüntü, animasyon, renk, espas

Genellikle kişisel, kurumsal ve ticari olmak üzere üç çeşit web sitesi vardır. Web siteleri, amaç ve işlevlerine uygun bir arayüz görünümüne sahiptir.

Web grafik tasarım konusunda kişisel beğeninin ilk planda olduğu kişisel web sitelerinde bireyle ilgi alanlarına göre, profesyonel ya da amatör, çalışmalarını, yazılarını, yapıtlarını, hobilerini, üretimlerini sergileyebilir; sosyal, sanatsal, kültürel, politik görüşlerini açıklayabilirler.

Kurumsal web siteleri, ilgili kurum ya da kuruluşların faaliyet ve amaçlarına göre sektörel olarak gruplanır ve özellikleri adres eklentilerinden anlaşılır. “gov” resmi kurumlar, “edu” üniversiteler, “ac” kimi ülkelerde akademik kurumlar, “org” ticari olmayan kuruluşlar, “com” ticari kuruluşlar, “mil” askeri kuruluşlar ve “int” uluslararası kuruluşlar tarafından kullanılan uzantılardır.

Kurumsal web sitelerinde grafik tasarım kurumsal işlev ve amaçları doğrudan yansıtacak bir stil üzerinden geliştirilir.

Ticari siteler, küçük işletmelerden uluslararası holdinglere, eğlence sektöründen akademik kurumlara çok geniş bir kapsama sahiptir.

Profesyonel olarak tasarım, bir proje ve ekip işidir. Web tasarım ekibinin çekirdek kadrosu grafik tasarımcı (graphic designer), web geliştirici (web developer) ve web uzmanından (web master) oluşur.

Grafik tasarımcı, web sitesinin arayüz estetiğinden sorumlu bir sanatçıdır. Web geliştirici, web sitesinin işlevselliği ve kullanılabilirliğinden sorumlu bir yazılımcıdır. Web uzmanı ise, müşteri ve müşteri temsilcisi ile ilişkilerden, genel olarak projenin koordinasyonundan, güncelleme ve optimizasyon çalışmalarından sorumlu bir işletmeci ve halkla ilişkiler uzmanıdır.

Çekirdek kadroya ek olarak profesyonel formasyonun yanı sıra interdisipliner bir vizyona, inovatif duyarlılığa ve ekip ruhuna sahip müşteri temsilcisi, proje yöneticisi, koordinatör, içerik editörü, multimedia tasarımcı, yazılım uzmanı, grafiker, fotoğrafçı, sosyal medya uzmanı, mobil strateji uzmanı, cloud mimarı, sanat yönetmeni, seo uzmanı gibi elemanlar da yer alır.

Web grafik tasarımı interdisipliner bir yaklaşımdır ve iki temel bileşeni web teknolojisi ile grafik tasarım estetiğidir.

Web Grafik Tasarımının Kısa Tarihçesi

Teknolojik buluşlara bakıldığında ve bunların tarihsel ve kültürel kökenlerini araştırıldığında, çoğu buluşun, önceden felsefi ve edebi tasarımlar şeklinde ifade edilmiş oldukları keşfedilir. Web ve hipermetin, edebi bir tasarım olarak, Jorge Luis Borges’in (1899-1986), Yolları Çatallanan Bahçe (1941) başlıklı öyküsünde betimlenmiştir.

Grafik Tasarım Endüstri, teknoloji, kitle iletişimi, ekonomik sistem ve gündelik yaşam ile iç içe işlevsel bir sanattır.

• Hipermetin, ilk kez 1963 yılında; hipermedya ise ilk kez 1965 yılında, web teknolojisinin öncülerinden filozof Ted Nelson (1937) tarafından tanımlanmıştır .
• 1989’da Web’in muciti olan Tim Berners-Lee, 1990’da Hipermetin İşaretleme Dili’ni (Hypertext Markup Language/ HTML) geliştirmiş, 1994’te Web’in geliştirilmesi ve web standartlarının oluşturulması amacıyla Dünya Çapında Ağ Birliği’ni (World Wide Consortium/W3C) kurmuştur.
• “Grafik tasarım” ilk kez 1922 yılında, grafik sanatçısı ve reklamcı William Addison Dwiggins tarafından adlandırılmıştır.
• 1960’da grafik tasarım ile bilgisayar buluşması gerçekleşmiştir.
• 1960’da William Fetter, bilgisayar grafikleri (computer graphics) terimini bulmuştur. Boeing Havacılık’ta sanat yönetmeni olan Fetter, kokpitlerin geliştirilmesi amacıyla ekransız bilgisayar kullanarak ilk kez 3D insan figürü çizimleri yapmıştır.
• 1963’te Ivan Sutherland, insan-bilgisayar etkileşimli ilk tasarım programını yazar ve uygulamıştır.
• 1984’te Bill Atkinson (1951), Apple için MacPaint programını yazmıştır.
• 1989’da CorelDRAW grafik tasarım projesi kullanılmaya başlanmıştır.
• 1990’da Photoshop programı kullanılmaya başlanmıştır.
• 1994’te Muriel Cooper, MIT (Massachusetts Institute of Technology) bünyesinde, gerçek zamanlı 3D bir ortamda, geniş tipografik tasarım olanakları sağlayan ve “enformasyon peyzajları’’ adını verdiği bir arayüz geliştirmiştir.
• 1994’te Hakon Wium Lie, W3C bünyesinde CSS’yi (Basamaklı Stil Şablonları) icat etmiştir.
• 2004’te Tim O’Reilly, O’Reilly Media bünyesinde Web 2.0’yi (İkinci Nesil İnternet Sistemi) tanımlamıştır.

Web 2.0, İnternet kullanıcılarının ortak ve interaktif bir şekilde oluşturdukları, bilgi, enformasyon, iletişim, tasarım siteleri, sosyal medya, blog, vlog, viki v.b. gibi faaliyetleri kapsayan ve doğal olarak kapsamlı web grafik tasarım potansiyeline sahip İnternet sistemi ve buna bağlı olarak, gittikçe daha fazla kullanıcının, gittikçe daha etkin bir biçimde İnternet’te var olabilmesi için gerekli teknoloji ve programları, herkes için geliştirmeyi öngören ve uygulayan İnternet ortamıdır.

Birbirlerinden farklı ve çok çeşitli profile sahip, birey, grup ya da topluluk olarak İnternet kullanıcıları, sanal dünyadaki varoluşlarıyla çağımızın ortak kültürü olan siber kültürü tanımlamaktadır. Gerçek dünyaya ait zaman ve mekân sınırlamaları, gündelik yaşamı düzenleyen etik ilkeler ve yasalar, sanal dünyada aynı şekilde etkin olmaması sebebiyle netiket (İnternet etiği) ve siber hukuk gibi yeni alanlar meydana gelmiştir.

Günümüzde siber kültür ve web teknolojilerinin gelişimi, İnternet kullanımında Web 2.0 aşamasına geçilmesini sağlamıştır. Wikipedia, Facebook, Instagram, Twitter, Flickr gibi ağ ortamları, Web 2.0’nin birer karşılığıdır.

Web Grafik Tasarım Kalite Faktörleri

Bir web projesi için grafik tasarım fonksiyonel kalite faktörleri aşağıdaki gibi sıralanabilir:

• Web grafik tasarım alanında sık sık geçen ve Bill Gates’e ait “İçerik kraldır!’’ ifadesi (1996) daima gündemde tutulmalıdır. Zayıf, hatalı ya da eksik bir içerik, sitenin güvenilirliğini zedeler.
• Bauhaus üyelerinden Ludwig Mies van der Rohe’nin ‘’Ne kadar az o kadar iyi’’ ifadesi (1947) daima gündemde tutulmalıdır.
• Grafik tasarımı, web sitesinin ait olduğu kişi, kurum ve kuruluşun gerçek imajını yansıtmalıdır.
• Web sitesinin grafik tasarımı ve stili, bireysel ya da kurumsal kimliğin ve stilin bir uzantısı olarak düşünülmelidir.
• Grafik tasarımı, web sitesinin işlev ve amacını anlaşılır ve yalın bir şekilde yansıtan bir estetik geliştirmeli ancak yalınlık ve sıradanlık arasındaki fark ayırt edilmelidir.
• Bir web sitesinin grafik tasarımı, “özgün’’ olmalıdır.
• Web grafik tasarımının enerji kaynağı, hayal gücüdür, bu yüzden taklit uygulamalardan kaçınılmalıdır.
• Bir web sitesinin başarısı, tıklanma sayısıyla doğru orantılıdır. Ziyaretçi, bilinçli bir kullanıcı ya da rastlantısal bir gezgin olabilir. Her koşulda grafik tasarımın özgünlüğü, empatinin garantisidir.
• Webde navigasyon hızı daima ön planda gelir. Bu nedenle site içi ve site dışı erişim ve kullanılabilirliği yavaşlatıcı tasarım unsuru ve sunumlarından kaçınılmalıdır. Sanatsal gösterişten uzak durulmalı, genel olarak yoğun ve çok yer kaplayan görsel, animasyon, müzik ve ses efektleri ile sıkıcı, karmaşık açıklama metinleri kullanılmamalıdır.
• Grafik tasarım, mobil uyumlu olmalıdır.
• Web sitesi, bütününde dengeli ve düzenli bir görünüm sergilemelidir.
• Kullanıcı arayüzü, ekstra bir reklam panosu ya da ekranına benzer. Bu nedenle kullanıcıya cazip gelecek şekilde düzenlenmelidir.
• Tasarımda her türlü yazı kolayca okunabilmelidir. Bu nedenle yazı fontu ve puntosu gibi tipografik seçimler yaparken, standart seçimlere önem verilmeli, öykünmeden kaçınılmalıdır.
• Grafik tasarım için kullanılan metinlerde, uzun cümlelerden, gereksiz ifadelerden, karmaşık terminolojiden, görece kelime oyunlarından, herkesin bildiği varsayılan anlaşılmaz kısaltmalardan (acronym) kaçınılmalıdır.
• Yazı ve zemin ilişkisi açısından ve sitenin bütününde renk kullanımı, algı ve tercih açısından çok önemlidir. Bu nedenle renk seçimi ve kombinasyonu, genel olarak hoşa gidecek şekilde düzenlenmeli, web sitesinin işlev ve amacı ile uyumlu olmalıdır.
• Genel olarak renk konusu, her bir proje için ayrı bir araştırma konusudur. Renk ikonografisi ve renk psikolojisi bize yardımcı olabilir. Yanı sıra klasik grafik tasarım örnekleri ile ilgili başarılı web tasarım örneklerini incelemek yararlıdır.
• Web kullanıcıları, birbirlerinden çok farklı yapı ve profillere sahiptir. Herkes aynı zekâ düzeyi, bilgi ve deneyime sahip değildir. Dolayısıyla web grafik tasarımı, ‘’kullanıcı dostu’’ bir anlayışla düzenlenmelidir. Menüde, yardım, arama, site haritası, sıkça sorulan sorular gibi bölümler bulunmalı, gerekli ve sorunsuz ulaşılan içsel ve dışsal linkler verilmelidir.
• Grafik tasarım planlamasında, engelli internet kullanıcılarının gereksinimleri gözetilmelidir.
• Web grafik tasarımı, ritmik bir şekilde günceli temsil eder. Bu nedenle web grafik tasarımcı, sanatsal trendleri, teknolojik gelişmeleri, reklâm sektöründeki yenilikleri yakından ve bilinçli olarak takip etmeli ve değerlendirmelidir. Kısacası demode donanım, yazılım ve tasarım, demode vizyon demektir.
• Kaliteli bir web grafik tasarımcısı olmak için dijital okur-yazarlık formasyonuna sahip olunmalıdır.

Web Grafik Tasarım Kalite Standartları

J.Cox ve B.G.Dale, kalite standartlarını, “Amacın netliği, tasarım, erişilebilirlik, hız, içerik, müşteri hizmeti” olarak sıralamıştır. Web grafik tasarımında “tasarım” başlığı altında incelenen unsurlar aşağıdaki gibi sıralanabilir:

• Linkler
• Tutarlılık, menü ve site haritaları
• Sayfalar, metin ve tıklamalar
• İletişim ve geri bildirim
• Arama
• Form doldurma

Bir web sitesinin web grafik tasarımı ve web tasarımı, arama motorları üzerinde hızlı ve kolay ulaşılır nitelikte oluşturulmalıdır. Dolayısıyla bir web sitesinin arama motorlarındaki konumu ve durumu, web grafik tasarımın sektörel kalite standartlarının göstergesidir.

W3C (World Wide Consortium/ Dünya Çapında Ağ Birliği) ve ISO’nun (International Organization for Standardization/Uluslararası Standartlar Organizasyonu) üzerinde çalıştığı web grafik tasarımı ile ilgili fonksiyonel ve sektörel kalite faktörleri uluslararası sistem standartlarına göre interaktif bir şekilde tanımlanır ve geliştirilir.

HTTP (iletişim), URL (kaynak) ve HTML’yi (dil) kapsayan W3C’nin çalışma alanları aşağıdaki gibi sıralanabilir:

• HTML ve CSS konusunda sürekli araştırma yapar.
• Yeni versiyonlarını geliştirir.
• Web standartlarını küresel olarak paylaşır.
• Web belgelerinin geçerliliğini saptamak üzere İşaretleme Onay Servisi verir.

Gündelik yaşamımızda sık sık karşımıza çıkan ISO kalite standartları, kullanılabilirlik bağlamında teknolojik ölçütler sunarken teknik ya da estetik olarak bir üretimin nasıl yapılacağına ilişkin rehberlik vermez. ISO 9241- 151: 2008, web tasarım ve web grafik tasarımı ile ilgili geliştirilen birçok ISO standartından biridir.

Amacı bir web sitesinin arama motorlarındaki konumunun araştırılması ve incelenmesi olan SEO (Search Engine Optimization / Arama Motoru Optimizasyonu), bir web sitesinin optimizasyon işlemleri anlamına gelir. SEO standartlarına göre web sitelerinin sahip olması gereken özellikler aşağıdaki gibi sıralanabilir:

Web sitesi, kullanıcı dostu olmalıdır.

• Web sitesi, periyodik olarak güncellenmelidir.
• Web sitesi, Facebook, Twitter, Instagram gibi sosyal medya ortamlarında da ulaşılabilir olmalıdır.
• Link ve backlink (bir sitenin diğer bir sitenin adresini vermesi) konusunda asla taviz verilmemelidir.
• Web sitesi için, içeriğe uygun ve dikkat çekici anahtar kavramlar seçilmelidir.
• Internet kullanıcıları, kimi zaman kelimeler yerine, birkaç kelimelik ifadelerle arama yapmaktadır. Anahtar kavramlar seçilirken bu durum da göz önünde bulundurulmalıdır.
• Bir web sitesi, ilgili ekonomik ve kültürel koşullara göre, iki ya da daha fazla, çok dilli olabilir.