Kaliteli Web Tasarımı İçin İpuçları

Merhaba arkadaşlar,

Bu paylaşımımda sizlere Web tasarımında kendinizi geliştirmeniz ve daha profesyonel tasarımlar oluşturabilmeniz için bazı ipuçları vereceğim.İlk olarak web tasarımının kolay bir iş olmadığını belirtmek isterim,Bu sizin %40 becerinize %50 yaratıcılığınıza %10’da diğer tasarımlardan etkilenmenizle alakalıdır.

Gerekli kodlama ve grafik bilgisine sahip olmanız size güzel tasarımlar için yeterli olmayacaktır,önemli olan kafanızda en iyi tasarımı canlandırıp bunu koda dökebilmektir.Benim bu yazımdaki amacım sizin yaratıcılık yüzdenizi bazı ipuçlarıyla yükseltmektir.

Bu konumda sizlere net bir kaynak oluşturmak için bu yazımı rehber niteliğinde paylaşıcağım,Aşşağıda başlık başlık güzel bir tasarıma ulaşmak için adımlar ve bilgilendirmeler belirtilmiştir.

1 – Tasarımın kafada canlandırılması

2 – Düşünülen tasarımın görsele dökülmesi

3 – Tasarımı bilgisayar ortamına aktarmak

4 – Tasarıma uygun renk ve gösellerin seçimi

5 – Tasarımın koda dökülmesi

6 – Kullanıcı dostu özellikler

7 – Tavsiyelerim

1 – Tasarımın Kafada Canlandırılması :

Başlıktanda anlaşıldığı gibi sitemiz tamamlandığında karşımızda nasıl birşey görmek istediğimize iyi karar vermemiz çok önemlidir.Sonradan yapılacak değişiklikler bize zorluk dışında birşey getirmeyecektir,Bundan dolayı sabırlı olup vakti bu aşamada genişçe kullanıp eksiksiz şekilde kafamızda tasarımı oluşturmalıyız.Buradaki amacımız herşeyi netleştirip ileride değişecek şeyler varsada bunların ufak tefek bizi yormayacak düzenlemeler olmasıdır.

2 – Düşünülen Tasarımın Görsele Dökülmesi :

Bu kısımda görsele dökme sıralaması ve seçimi tamamen sizin seçiminize kalmıştır.Ben nasıl bir yol izlediğimi söyleyeceğim,isteyen arkadaşlarda bu yolu deneyebilir.Kafamda tasarımı oluşturduktan sonra ilk işim elime defterimi,kalemimi alıp kafamdaki görseli taslak olarak kağıda dökerim ki düzenlemeleri silgi yardımıyla fazla uğraşmadan değiştirebileyim.Bence sizlerde bu yöntemi deneyebilirsiniz ve işinizi bu sayede baya kolaylaştırabilirsiniz.

Aşşağıda bu tür çalışmaların örneklerine göz atabilirsiniz.

3 – Tasarımı bilgisayar ortamına aktarmak : 

Tasarımın kağıt üzerindeki adımı tamamlandıktan ve kafanızda yapacağınız tasarım oluştuktan sonra bilgisayar ortamına tasarımımızı dökebiliriz.Ben bu aşamada kağıttaki tasarımımı Photoshop yardımıyla görsele döküyorum.Siz hangi grafik programını kullanıyorsanız,hangisinde daha rahat çalışıyorsanız onu tercih edebilirsiniz.Ama bu adım için kullanabilecek en uygun programlar Adobe Photoshop ve Adobe Fireworks ‘dür.

* Kağıttaki çiziminizi Photoshop veya Fireworks’de grafik programına dökerken 960 Grid sistemini kullanarak işinizi çok kolaylaştırabilirsiniz.(Bunu kullanmanız zorunlu değildir fakat grid sistemine alıştığınız taktirde vazgeçemeyeceğinizi söyleyebilirim.)

4 – Tasarıma uygun renk ve gösellerin seçimi :

Sıra geldi tasarımımıza apayrı hava katan grafiklerin seçimine.Bu grafiklere örnek olarak iconları,yazı şekillerini,grafikleri verebiliriz.
Şimdilik bu bölüm için ilk seçimlerde faydalandığım siteleri belirteceğim fakat blogumda bu görsellerle ilgili belli paylaşımlarda bulunuyorum,bu kararıda yeni aldığım için şu anda sadece Font Arşivi – 1 adlı paylaşımım bulunmakta fakat sanal ortamda bu konuyla ilgili o kadar çok kaynak mevcut ki,en kısa zamanda bu paylaşımların sayısı tahmin edemeyeceğiniz derecede artacaktır.

* İconlarla ilgili aramalar için IconFinder ve IconArchive adlı kaynakları kullanabilirsiniz.

* Font seçimi için bildiğim en iyi kaynak ve her zaman ilk seçimim DAFONT,ek olarak Fawnt.

* Tasarımda kullanılacak diğer görsellerin seçimi için fazla kaynağa sahip değilim ama bunun için Deviantart‘ın tek başına yeterli olacağını düşünüyorum,bunun dışında şu derlemeye göz atabilirsiniz.

* Şimdi gelelim kullanıcının farketmeden en çok dikkatini çekebileceğimiz konulardan birine “Uygun Renk Seçimi” Bu konuyla ilgili sanal ortamda bir çok araç mevcut,Bunlara örnekler çok olsada kullanabileceğiniz kaynak ColourLovers olabilir.Uygun renk seçimiyle ilgili örnek vermek gerekirse,aşşağıdaki sitelerin renk seçimlerine bakarak fikir edinebilir,Renk seçiminin önemini kavrayabilirsiniz.

5 – Tasarımın koda dökülmesi : 

Tasarımımızı grafik programımız üzerinde oluşturduk,gerekli görselleri ekledik.Şimdi tasarımın web sitesine dönüşmesi için ilk somut adımı atıyoruz ve tasarımını grafik programında geliştirdiğimiz taslağı kodlayarak ve görsellerle birleştirerek bilgisayarımız üzerinde sanal ortama taşımadan önceki hazır haline getiriyoruz.Burada önemli olan doğru kodlamanın yapılması ve kod fazlalığının önüne geçilmesi.Bu durum zaman içinde gelişen kod bilginizle orantılı olacak değişicektir.Başlarda hatalı kodlamaların olması normaldir fakat bunları belirleyip,gerekli düzenlemeleri yaparak bir adım ileri gitmiş olabiliriz.

Kodlarımızdaki hataları ayıklamak ve düzenli bir kodlama yapmak için bir çok kaynak mevcut fakat W3C standartlarına uygun kodlama bizim için yeterli olacaktır.W3C kod ayıklayıcısını kullanmak için illa sitenizin bir hostingde bulunması gerekmemektedir,dosyanızı upload ederek de kontrol yapabilirsiniz.Css ve Xhtml kodlarınızı uygunluğu için W3C

* Ayrıca Css kodlarınızdaki karmaşayı engelleyip daha derli toplu ve kısaltılmış hale getirmek için Codebeautifier ‘ı kullanabilirsiniz.

* Bunun dışında daha rahat kodlama yapmak için Notepad++ programını tavsiye ediyorum.Bu program sayesinde kodlarınızı daha düzenli ve rahat şekilde yazabilirsiniz.

6 – Kullanıcı dostu özellikler :

Bu konu rehberde tamamen farklı bir kategoride bulunmakta.Bu konu hem Seo hemde Görsel açısından sitemize katabileceğimiz özelliklerin belirtildiği bölümdür.Kullanıcı dostu özelliklerden kastım kullanıcının site içinde kaybolmadan rahat rahat gezinebilmesi ve sitede daha uzun süre zaman geçirebilmesi için yapılan düzenlemelerdir.Bu özelliklerin bu rehber’de yer almasının sebebi ise görsel açıdan sitemize zenginlik katıp,tasarıma ayrı bir hava katabilmektir.( Tabi yerinde ve uygun şekilde kullanıldığında 🙂 )

Bu özelliklere örnek verecek olursak ;

* Konuyu sosyal platformda paylaş :

Paylaşımlarımızı hem daha fazla kullanıcıya aktarmak hemde paylaşımlarımızın daha zengin görünmesi açısından önemli bir özelliktir.Bu özellik için ben Sharethis adlı WordPress eklentisini kullanıyorum.Hem kullanım kolaylığı hemde görsel açıdan sade ve hoş görünmesinden dolayı tercihimdir.

* Benzer konularla okuyucuyu diğer konulara yönlendirme :

Bu özellik sayesinde konu sonunda hem görsel açıdan hemde kullanıcıyı yönlendirme açısından güzel bir özellik ekleyebilirsiniz.Bu özellik için benim kullandığım Wp-Thumbie eklentisini tercih edebilirsiniz.

* Son Tweet’lerinizi sitenizde yayınlama 

Bu özellikle sitenizde ister son tweetinizi isterseniz belirlediğiniz sayıdaki tweetleri gösterebilirsiniz ve son zamanlarda her sitede bu özelliğe rastlayabilirsiniz.Her zaman blogunuza yazamadığınız konuları okuyucularınıza twitter’dan yazdığınız mesajla iletebilirsiniz.Bu konuyla ilgili önceden yaptığım paylaşımım “Blogunuzda Son Tweetinizi Gösterin” göz atabilirsiniz.

* Kod paylaşımlarınızı renklendirin

Eğer programlama üzerine paylaşımlar yapıyorsanız,kod kısımlarının normal görünüşü çok sade ve göze hoş gelmeyen bir yapıda yayınlanacaktır.Bunun içinde kullanışlı ve güzel bir çözüm mevcut.Bu konuyla ilgili de “Kod Öbeklerinizi Renklendirin” adlı paylaşımıma göz atabilirsiniz.

* En çok okunan paylaşımlarınızı listeleyin

Bu özellik sayesinde sitenizde yaptığınız paylaşımlardan en çok okunanları yeni okuyucularla paylaşabilirsiniz ve bunun dışında sitenizde göze hoş gelen bir kısımda yayınlayabilir,Görsel açıdan zenginlik katabilirsiniz.Bu konuyla ilgilide yaptığım paylaşıma “En Çok Okunan Konuları Listeleyin” göz atabilirsiniz.

* Kullanışlı bir footer tasarımının etkisi

Bence sitenin en son görünen bölümü olsada sayfaya apayrı katan bir bölümdür footer kısmı.Bazı siteler var ki öyle bir footer tasarımı ve özellikler yapılmış ki ,footer üzerinden yapılan tüm yenilikleri takip edebilirsiniz.Uygun özelliklerle düzenlenmiş ve güzel bir tasarıma sahip olan footer sitenize gerçekten çok büyük bir etki katacaktır.Sıfırdan footer düzenlemek zor gelebilir,Ben bunun için çok güzel bir paylaşımda bulunmuştum.Footer’a widget desteği ekleyerek güzel bir tasarımdan sonra kullanışlı bir footer’ı widget desteğiyle rahatça hazırlayabilirsiniz.”Kullanışlı Bir Footer Tasarımı Nasıl Hazırlanır” adlı konuma göz atabilirsiniz.

Kaliteli footer tasarımı hakkında derlenen bu yazıyada göz atabilir,ilham alabilirsiniz 🙂

7 – Tavsiyelerim :

Bundan önceki adımlarda somut olarak ipuçları vermeye çalıştım,Bu bölümde ise ufak tefek birkaç tavsiyede bulunarak bu paylaşımımı bitirmek istiyorum.Kaliteli bir Web Sitesi oluşturmanın nasıl bir emek ve zaman gerektirdiğini bu işi gerçekten yapanlar bilmektedir.Benim adım adım verdiğim bilgiler dışında bilinmelidir ki ,Kaliteli bir site tasarlarken sabır ve uğraş sizi başarıya ulaştıracaktır.Başarı ayrıntılarda gizlidir sözü web tasarımı içinde geçerlidir.

Sabırsız davranıp en kısa sürede başarıya ulaştığınızda ufak sarsıntılarda büyük hasarlarla karşılaşacağınızı unutmayın,amacınız uzun sürede sağlam bir proje oluşturmak olsun.Ben bunun için elimden geldiğince yardımcı olduğumu düşünüyorum gerisi size kalmış.