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

Ceybi

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 ek***siz ş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 [Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...] 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 [Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...] 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 [Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...] ve [Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...] adlı kaynakları kullanabilirsiniz.





* Font seçimi için bildiğim en iyi kaynak ve her zaman ilk seçimim [Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...],ek olarak [Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...].





* Tasarımda kullanılacak diğer görsellerin seçimi için fazla kaynağa sahip değilim ama bunun için [Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...]'ın tek başına yeterli olacağını düşünüyorum,bunun dışında [Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...] 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 [Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...] 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.[Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...] ve [Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...] 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 [Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...] 'ı kullanabilirsiniz.

* Bunun dışında daha rahat kodlama yapmak için [Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...] 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 [Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...] 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 [Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...] 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 [Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...] 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 "[Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...]" 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 "[Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...]" 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 "[Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...]" 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."[Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...]" adlı konuma göz atabilirsiniz.



Kaliteli footer tasarımı hakkında derlenen [Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...] 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ış.

Alıntı