Web Tasarım İlkeleri

WEB TASARIM İLKELERİ

Tasarıma başlamadan önce ve tasarım sırasında, yapacağımız sitenin standartlarını yükseltmek adına uymamız gereken kriterleri "web tasarım ilkeleri" olarak tanımlayabiliriz. Bu prensiblere uyulmadığı takdirde ciddi bir prestij kaybı, olumsuz geribildirimler ve ziyaretçi sayısında düşüşlerle karşılaşabiliriz. Bu tür olumsuzlukları önlemek için web tasarım ilkelerinin iyi bir şekilde bilinmesi ve uygulanması tasarlayacağımız sitemizin geleceği açısından hayatî bir öneme sahiptir.

1. İçerik

Bir web sitesini oluşturan en temel unsur içeriktir. İçerikten kastımız sitedeki metinler ve konu ile alâkâlı görsellerdir. 90'lı yıllarda CERN'de çalışan internetin kurucusu Tim Berners-Lee'nin asıl amacı bilim insanlarının makalelerini tüm dünyaya duyurabilecek bir sistem geliştirmekti. O zamandan bu yana bir web sitesinin temel amacı içeriği tüm dünya ile paylaşmak olmuştur.

Bir siteyi tasarlamaya başlamadan önce daima içeriğe göre planlama yapmalısınız. İçeriği düşünmeden sadece tasarım görselliğini önplânda tuttuğunuz siteler size felaket getirebilir.

İçeriğin bir diğer önemi arama sonuçlarında bulunabilmektir. Arama motorları sitelerinin tasarımlarını değil, içeriklerini tararlar, web sitelerini indekslerler ve kullanıcılara sunarlar. Sizin bu siteyi nasıl bulduğunuz içeriğin önemine en açık kanıttır. Şunu da unutmayın ki, bir kullanıcı arattığı bir çift kelime ile bir sitenin senelerce müdavimi olabilir.

2. Tasarım

Bir web sitesinin içerikten sonra gelen en önemli kriteri tasarımdır. Tasarımdan kastımız sitenin logosunun, menüsünün, içerik alanının ve görsellerinin sayfanın neresinde duracağı, ayrıca sitenin renk ve tipografi düzeninin nasıl olacağıdır. Ziyaretçinin site hakkındaki ilk izlenimleri içerikten önce site tasarımı yönündedir. Örneğin; bir kullanıcı bir siteyi ziyaret ettiğinde gözü ilk olarak sitenin sol üst köşesindeki logoyu arar. Tasarım ve renk düzenine kısa bir bakış attıktan sonra içerik alanına yoğunlaşır. Bu işlem saniyeler içerisinde yaşanır. Bu yüzden tasarım bazı yönlerden içerikten daha önemlidir.

Tasarıma başlanmadan önce mutlaka sitenin mizanpajı (layout'u) kâğıda dökülmelidir. Logo, menü gibi site bileşenlerinin, sayfadaki konumu belirlenmelidir. Bu şekilde hayal gücümüzü de kullanarak tasarlayacağımız siteyi zihnimizde canlandırabilir ve daha rahat koda dökebiliriz. Her şeyi önceden tasarlayıp kâğıda dökmeliyiz ki daha sonra bir ekleme yapmak zorunda kalmayalım. Bunu yapmadığımız takdir de büyük zaman kayıplarına katlanmak zorunda kalabiliriz.

3. İşlevsellik ve Kullanılabilirlik

İçerik ve tasarımdan sonra gelen en önemli kriterlerdir. İşlevsellik site sayfalarına "erişim kolaylığı", kullanılabilirlik ise sitenin "kullanıcı dostu" olması olarak özetlenebilir.

Kullanıcı siteyi ziyaret ettiği zaman aradığı içeriği bulmak için sayfa bağlantılarını kullanılır. Bunu çoğunlukla sitenin menüsünden yapar. Eğer aradığı sayfaya çok geç ulaşıyorsa ya da ulaşmakta bazı zorluklar yaşıyorsa sitede işlevsellik sorunundan söz edilebilir.

2000'li yılların ortalarında tüm dünyada Web 2.0 adlı bir olgu duyulur oldu. Web 2.0, internetin evrimleşmesinin açık bir göstergesidir ve dinamik sitelerin standartlarını belirlemiştir. Web 2.0 ile gelen temel standartlardan biri de işlevselliktir. Eğer bir kullanıcı sitenin herhangi bir sayfasında aradığı başka bir sayfaya üç tıklamadan fazla bir şekilde ulaşıyorsa o site işlevsellik yönünden zayıftır. Bu sorunu çözebilmek için birçok sitede tüm sayfaların bir liste halinde olduğu "site haritaları" kullanılmıştır.

Kullanılabilirlik bir sitede ziyaretçinin ne kadar rahat vakit geçirdiği ile ilgilidir. Ziyaretçi "Menüyü rahat kullanabiliyor mu?", "Yazılar okunaklı mı?", "Renk düzeni gözü yoruyor mu?" gibi soruların cevapları kullanılabilirlikle ilgilidir. Kullanılabilirlikle birlikte süregelen bazı kriterler vardır. Bunlardan en bilindikleri şöyledir:

• Site en geç 7 - 13 saniye arası bir sürede açılmalı. Bu süre içinde açılmayan siteler kullanıcılar tarafından kapatılmaya başlanmaktadır. Kullanıcının site ile ilgili bir zorunlu işlemi yoksa 30uncu saniyeden sonra tamamen terk edilmektedir. Bu yüzden açılış sayfası dosya boyutu mümkün olduğunca düşük tutulmalıdır.
• Çok fazla içerik varsa mutlaka site içi arama motoru olmalı.
• Sitenin her sayfasından mutlaka anasayfaya bağlantı verilmeli.
• Site yöneticisi ile irtibat kurulabilecek bir iletişim bağlantısı verilmeli.
• Uzun metinli, yüksekliği fazla sayfalarda "başa dön düğmesi" gibi sayfa başına kolay bir şekilde ulaşmamızı sağlayan özellikler bulunmalı.
• Menülerin kullanımı kolay olmalı ve kullanıcıyı yormamalı.
• Renk düzeni gözü yormamalı ve uygun seçimler yapılmalı.
• Tipografide yumuşak fontlar seçilmeli ve yazılar okunaklı olmalı.
• Tüm bu özellikler sitenin kullanılabilirlik derecesini belirlemektedir.

4. Biçim

Biçimi tasarım ve içeriğin bütünleşmesi olarak düşünebiliriz. Renk düzeni, okunabilirlik, içerik - tasarım ilişkisi biçimle ilgilidir.

Renk Düzeni: Tasarlananacak sitenin renk düzeni içerik ile uyumlu olmalıdır. Bununla birlikte eğer arkaplan (artalan) rengi koyu ise içerik alanında açık renkler seçilmelidir. Kırmızı, turuncu, sarı gibi sıcak renkler kullanıcının gözünü çok çabuk yorduklarından mümkün olduğunca az kullanılmalı, bunun yerine mavi, yeşil, mor, turkuaz gibi soğuk renkler tercih edilmelidir. Site siyah - beyaz gibi nötr renkler üzerine şekillendirilecekse sıcak ve soğuk renklerin kullanımı kullanıcı üzerinde daha etkili olmaktadır. Bu yüzden bu renklerin kullanımında daha dikkatli olunmalıdır.

Sayfalar arası geçişlerde arkaplan rengi gibi sabit bileşenler aynı renkte olmalı, her sayfada farklı renkler kullanılmamalıdır.

Okunabilirlik: Sitede kullanılacak içerik tipografi ile uyumlu olmalıdır. Font seçiminde Times New Roman gibi keskin hatlı ve eski bir site izlenimi uyandıran fontlar seçmek yerine Open-Sans gibi modern, yumuşak hatlı seçimler yapılmalıdır. Bu şekilde yazıların okunaklığı artmakta ve kullanıcının gözü yorulmamaktadır.

Font büyüklüğü ne çok büyük ne de çok küçük olmalıdır. 12px - 14px, bir site için ideal font büyüklükleridir. 11px, 13px gibi tek sayılı font büyüklükleri tercih edilmemelidir. Başlıkların büyüklüğü içerik ile uyumlu olmalıdır.

İçerik hizalamaları da bir sitenin genel görünümünü etkiler. Hizalamada sola ya da her iki yana yaslama kullanılabilir. Uzun içerik yazılarında ortalı hizalama kullanılmamalıdır.

İçerik ile tasarım arasında bir uyum bulunmalıdır. Yazılar içinde bulunduğu alanın sınırlarına çok yakın olmamalı, aralarında belirli bir boşluk bulunmalıdır. Satır yükseklikleri ise font büyüklüğüne göre uygun seçilmelidir.

Okunabilirliği etkileyen bir diğer önemli unsur ise uzun metinli yazılarda görsellerin kullanılmasıdır. Bu şekilde kullanıcının metni okumaktan sıkılması önlemiş olur. Görsellerin seçimi ise metin ile ilgili olmalı, içerikle uyumsuz resimler kullanılmamalıdır.

5. Güncellik

Hazırlanacak sitenin güncel platformda çalışabilmesi için eski teknolojiler kullanılmamalıdır.

Günümüzde hemen hemen her site HTML5, CSS3 gibi son nesil teknolojiler ile yapılmaktadır. Bu yüzden eski sürüm HTML ve CSS teknolojileri yerine yeni nesil sürümleri tercih edilmelidir.

Sitenin footer kısmındaki site güncellik yılını gösteren bildirim her sene düzenli olarak güncellenmeli, yapılamıyorsa "2007'den beri" gibi kullanımlar tercih edilmelidir.

6. Uygunluk ve Güvenilirlik

Web sitesinin internet için uygun olup olmadığı baştan belirlenmelidir. Alan adı çok uzun seçilmemeli ve akılda kalıcı olmalıdır.

Site ziyaretçide bir güven hissi uyandırmalı, mümkün olduğunca imlâ hatası yapılmamalı ve özgün içerik kullanılmalıdır. Kullanıcı gözünde saygınlığı düşen bir sitenin prestijini koruyabilmesi oldukça zordur.

7. Uyumluluk

Tasarlanacak site tüm platformlarda sorunsuz çalışabilmelidir. Tasarım sırasında tarayıcı uyumlulukları aşama aşama test edilmelidir. Eğer eski platformlarda çalışması istenen bir site hazırlanacaksa yeni nesil teknolojilerin bazı özelliklerinden feragat edilmelidir. Sadece yeni nesil platformlarda çalışması planlanan bir site hazırlanacaksa Internet Explorer 9 gibi eski nesil tarayıcılarda site test edilmemeli, bunun yerine IE10, IE11 tercih edilmelidir.

Site mobil cihazlar için de uyumlu olacaksa Samsung ve Apple telefonlarında birebir test edilmeli, bunun için hazırlanmış test sitelerine tam anlamıyla güvenilmemelidir. Responsive sitelerin hazırlanması standart sitelere göre daha zahmetli bir iştir ve her platform için uygun media query'ler seçilmelidir.

Web tasarım ilkeleri genel hatlarıyla bu şekildedir. Tasarlanacak sitenin bu prensiplere azami ölçüde uyması standartların sağlanabilmesi adına önemlidir.

TANIŞALIM

Web tasarım eğitimi almaya yeni başlayan, aldığı eğitimi yeterli görmeyen ya da bilgi düzeyini genişletmek isteyen web tasarımcıları için yazılmış bir konudur.

Neler Yapacağız?

Bu ders ile bir web sitesini nasıl tasarlayabileceğinizi en ince ayrıntısına kadar öğreneceksiniz. Tabi bir web sitesini tasarlamaya başlamadan önce bazı teknolojilerin ne anlama geldiğini ve bunları nasıl kullanabileceğinizi öğrenmelisiniz. Örneğin; basit bir web sitesi için temel düzeyde bilmeniz gerekenler:

• HTML4
• CSS3

Fakat kendinizi daha da geliştirmek istiyorsanız: 

• HTML5
• CSS3
• JavaScript
• jQuery
• Photoshop CS6 ya da Photoshop CC (grafik alanındaki en temel yardımcınız olacak)

Bunun yanında tüm bu teknoloji ve yazılımları kullanabileceğiniz bir platform olan Visual Studio 2013'ü ise etkili bir şekilde kullanabilmelisiniz.

Bugün birçok web tasarımcısı tasarım yaparken Adobe Dreamweaver CS6'yı kullanmaktadır. Fakat ne yazık ki bu yazılımın yetersiz "intellisense" özelliği, yani kod yazarken size yardımcı olan akıllı kod anımsatıcısı'nın istenilen düzeyde olmaması, kodları düzenli bir şekilde yazamamanız gibi bazı kritik eksikleri yüzünden ileri düzey web tasarımcıları Visual Studio 2013'ü tercih etmektedir. Bunun yanında Dreamweaver ile "masterpage" yapımı oldukça zordur; fakat Visual Studio ile bu işi size sadece 15 dakikada öğreteceğim. ASP.NET MVC 4 teknolojisi ile gelen "layout" tasarımı ile hızlı bir şekilde sitemizin şablonunu oluşturacağız ve sadece ilgilenmek istediğimiz alanlar olan içerik ile daha çok haşır neşir olacağız. Artı olarak sitelerimizin uzantıları .html ya da .htm şeklinde görünmeyecek; düzenli bir şekilde sadece sayfa adları adres çubuğunda görünecektir.

Visual Studio'yu ReSharper eklentisi ile birlikte kullanacağız. Bu eklentinin avantajlarını kod yazarken yeri geldikçe size anlatacağım. ReSharper'a alıştıktan sonra onun bağımlısı olacak ve Visual Studio'yu onsuz kullanmak istemeyeceksiniz.

HTML5

HTML5'in ne olduğunu açıklamadan önce size kısaca HTML'in ne olduğundan bahsedeyim: 

Hyper Text Markup Language kelimelerinin, Türkçe ifade ile "Zengin Metin İşaretleme Dili"nin baş harflerinin kısaltması olan HTML, CERN'de müteahhit olarak çalışan Tim Berners-Lee tarafından 80'li yıllarda geliştirilen, 90'lı yıllarda ise adının konduğu bir web standartıdır. Tim Berners-Lee aynı zamanda açılımı WorldWideWeb Consortium olan W3C'nin de kurucusudur. Bu kısım sizin için önemli çünkü W3C bugün tüm web tarayıcılarındaki standartı belirleyen uluslararası bir organizasyondur.

HTML web sitemizin internette yayınlanması gerekli kodları içeren standart bir dildir. Tüm web siteleri HTML ile yazılır ve tarayıcı ekranında görüntülenirler.

HTML5 bir işaretleme dilidir. HTML'in beşinci ve son sürümüdür. Programlama dili olmamasına rağmen programcılara oldukça kolaylık sağlar. Örneğin; görsellerde gördüğünüz karmaşık yazılar bazı sitelerin HTML kodlarıdır. <!DOCTYPE html> şeklinde başlayan kodlar görüyorsanız bu <!DOCTYPE html> bildirimi sayfanın HTML5 ile yazıldığını belirtir.

HTML ilk çıktığında yapılan sayfalar sadece metinlerden oluşuyordu ve görsel olarak çok da bir şey ifade etmiyordu. Etiketler küçük ya da büyük harfle yazılabiliyordu. Daha sonra XML ve HTML'in kompozit hale getirilmiş şekli eXtensible HTML, dilimizdeki karşılığıyla "Genişletilebilir HTML" olan XHTML, W3C tarafından bir standart olarak oluşturuldu. XHTML'de kurallar daha katıydı. Örneğin; bütün etiketler küçük harfle yazılmalıydı. DOCTYPE olarak bilinen ve tüm sitelerin kaynak kodlarında ilk sırayı alan "belge tipi bildirimi" ile birlikte hiyerarşik bir söz dizimi oluşturuldu. XHTML'deki standartların daha katı olmasına rağmen tarayıcılardaki uyum sorunu yavaş yavaş çözülmeye başlamıştı.

XHTML de tek başına görsel olarak bir şey ifade etmiyordu. '96 yılının sonunda CSS'in ilk sürümü yayınlandı ve artık siteler görsel olarak daha kullanışlı ve esnek bir hâle geldi.

HTML geliştikçe gelişti ve yıllar geçtikçe CSS'in yeni özellikleri ile birlikte dördüncü sürüme kadar geldi. HTML4 her ne kadar yeterli gibi gözükse de CSS ile yazılan fazladan kodlar hatalara sebep oluyordu ve bunu önlemek için HTML5 geliştirildi.

HTML5 ile gelen esnek yapı, kod hatalarını en aza indiriyor hatta görmezden geliyordu. XHTML'deki küçük – büyük harf duyarlılığı kalkmıştı. Bununla birlikte çok fazla kod sorunu kısmen çözüldü. CSS ile olan uyum sorunu düzeltildi ve beraberinde getirdiği yeni etiketler ile hem içerik ve görsele hem de arama motorlarına büyük kolaylıklar sağladı.

HTML5 hâlâ geliştirilme aşamasında olsa da bugün birçok web tasarımcısı artık bu yeni sürümü tercih etmektedir. Kısmen daha az kod yazma olanağı verse de HTML5 asıl gücünü PHP, ASP, ASP.net gibi web programlama dillerinden, JavaScript betik dilinden ve CSS'ten almaktadır.

CSS3

Açılımı Cascading Style Sheets (Basamaklı Stil Sayfaları) olan CSS, HTML'e yardımcı olmak amacıyla geliştirilen ve sitedeki tüm renk, görsel, metin hizalama gibi işlevleri yerine getiren bir dildir.

CSS ile birlikte sitenin birçok sayfasında kullanılan kodlar tek bir CSS kodu ile aynı anda şekillendirilebilir. Örneğin; sitede kullanılan başlıkların rengi CSS ile birlikte tümden değiştirilebilir. Sizin anlayacağınız her sayfada ayrı ayrı renk değişimi yapmak yerine tek bir CSS kodu ile tüm sayfalardaki alanlara etki edilebilir. İşte CSS gücünü buradan almaktadır. Tek bir dosyadan tüm sitedeki sayfaların kodlarını değiştirebilirsiniz.

CSS3 ise CSS'in son sürümüdür ve yeni sürümle birlikte gelen "border-radius", "box-shadow", "text-shadow", "transition" gibi birçok yenilik tasarımcıların işlerini kolaylaştırmış, görsel olarak daha çekici siteler yapmalarına olanak sağlamıştır.

jQuery

jQuery aslında bir dil değildir. JavaScript kütüphanesidir. JavaScript ise betik bir dildir. Etkileşimli ve dinamik web sayfaları oluşturmak için JavaScript kullanılır. Betik bir dil olmasına rağmen programatik olarak da kullanılabilir.

jQuery, JavaScript kodlarının sentezlenmesi ile oluşturulmuş ve tasarımcılar için gerekli bazı dinamik elementlerin çalıştırılması için oldukça sadeleştirilmiştir.

Visual Studio 2013

Microsoft tarafından geliştirilen .NET altında kırktan fazla programlama dilini destekleyen yazılım geliştirme platformudur. Son sürümü 2013'tür.

Aslına bakarsanız Visual Studio'un asıl amacı C# gibi programlama dilleri ile yazılım geliştirmektir. Buna rağmen biz web tasarımcıları da bu platformdan faydalanabilmektedir. Adobe Dreamweaver her ne kadar sadece tasarımcılar için geliştirilmiş olsa da Visual Studio 2013, Dreamweaver'a birçok yönden fark atmaktadır. Kullanımı daha kolaydır ve tek bir komutla sayfanızdaki tüm kodları düzenli bir şekilde hizalayabilirsiniz. Intellisense özelliği çok daha gelişmiştir. ASP.NET MVC 4 teknolojisi ile masterpage'e (layout'a) sahip siteler yapabilirsiniz. Sayfalarınızda .html ya da .htm uzantıları görülmez. İşte bu yüzden size Visual Studio ile web tasarımı yapmayı öğreteceğim.

Eğitimlere geçmenden önce size izlemeniz gereken yollu göstereyim:

• Web tasarımına başlamadan önce kararlı olun.
• Yeniliklere açık olun. Sürekli araştırma yapın.
• İlk olarak HTML5 öğrenin.
• Daha sonra CSS3 öğrenin.
• HTML5 ve CSS3 iyi bir şekilde öğrendikten sonra JavaScript öğrenmeye başlayın. Fakat JavaScript'i ileri düzeyde bilmenize gerek yok. Temel düzeyde öğrenmeniz yeterlidir.
• JavaScript'i öğrendikten sonra jQuery'e başlayın. jQuery'i ileri düzeyde öğrenmeye çalışın; çünkü ileride oldukça işinize yaracak.

Tüm bu teknolojileri öğrendikten sonra sizlerle web tasarımı yapmaya başlayacağız ve nasıl web sitesi yapılabileceğini öğreneceksiniz.

Başarılar dilerim.