Merhaba arkadaşlar, Bu paylaşımımda sizlere Web tasarımında kendinizi geliştirmeniz ve daha profesyonel tasarımlar oluşturabilmeniz icin bazı ipucları 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 guzel tasarımlar icin yeterli olmayacaktır,onemli olan kafanızda en iyi tasarımı canlandırıp bunu koda dokebilmektir.Benim bu yazımdaki amacım sizin yaratıcılık yuzdenizi bazı ipuclarıyla yukseltmektir. Bu konumda sizlere net bir kaynak oluşturmak icin bu yazımı rehber niteliğinde paylaşıcağım,Aşşağıda başlık başlık guzel bir tasarıma ulaşmak icin adımlar ve bilgilendirmeler belirtilmiştir. 1 - Tasarımın kafada canlandırılması 2 - Duşunulen tasarımın gorsele dokulmesi 3 - Tasarımı bilgisayar ortamına aktarmak 4 - Tasarıma uygun renk ve gosellerin secimi 5 - Tasarımın koda dokulmesi 6 - Kullanıcı dostu ozellikler 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 gormek istediğimize iyi karar vermemiz cok onemlidir.Sonradan yapılacak değişiklikler bize zorluk dışında birşey getirmeyecektir,Bundan dolayı sabırlı olup vakti bu aşamada genişce 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 duzenlemeler olmasıdır. 2 - Duşunulen Tasarımın Gorsele Dokulmesi : Bu kısımda gorsele dokme sıralaması ve secimi tamamen sizin seciminize kalmıştır.Ben nasıl bir yol izlediğimi soyleyeceğim,isteyen arkadaşlarda bu yolu deneyebilir.Kafamda tasarımı oluşturduktan sonra ilk işim elime defterimi,kalemimi alıp kafamdaki gorseli taslak olarak kağıda dokerim ki duzenlemeleri silgi yardımıyla fazla uğraşmadan değiştirebileyim.Bence sizlerde bu yontemi deneyebilirsiniz ve işinizi bu sayede baya kolaylaştırabilirsiniz. Aşşağıda bu tur calışmaların orneklerine goz atabilirsiniz. 3 - Tasarımı bilgisayar ortamına aktarmak : Tasarımın kağıt uzerindeki adımı tamamlandıktan ve kafanızda yapacağınız tasarım oluştuktan sonra bilgisayar ortamına tasarımımızı dokebiliriz.Ben bu aşamada kağıttaki tasarımımı Photoshop yardımıyla gorsele dokuyorum.Siz hangi grafik programını kullanıyorsanız,hangisinde daha rahat calışıyorsanız onu tercih edebilirsiniz.Ama bu adım icin kullanabilecek en uygun programlar Adobe Photoshop ve Adobe Fireworks 'dur. * Kağıttaki ciziminizi Photoshop veya Fireworks'de grafik programına dokerken 960 Grid sistemini kullanarak işinizi cok kolaylaştırabilirsiniz.(Bunu kullanmanız zorunlu değildir fakat grid sistemine alıştığınız taktirde vazgecemeyeceğinizi soyleyebilirim.) 4 - Tasarıma uygun renk ve gosellerin secimi : Sıra geldi tasarımımıza apayrı hava katan grafiklerin secimine.Bu grafiklere ornek olarak iconları,yazı şekillerini,grafikleri verebiliriz. Şimdilik bu bolum icin ilk secimlerde faydalandığım siteleri belirteceğim fakat blogumda bu gorsellerle ilgili belli paylaşımlarda bulunuyorum,bu kararıda yeni aldığım icin şu anda sadece Font Arşivi - 1 adlı paylaşımım bulunmakta fakat sanal ortamda bu konuyla ilgili o kadar cok kaynak mevcut ki,en kısa zamanda bu paylaşımların sayısı tahmin edemeyeceğiniz derecede artacaktır. * İconlarla ilgili aramalar icin IconFinder ve IconArchive adlı kaynakları kullanabilirsiniz. * Font secimi icin bildiğim en iyi kaynak ve her zaman ilk secimim DAFONT,ek olarak Fawnt. * Tasarımda kullanılacak diğer gorsellerin secimi icin fazla kaynağa sahip değilim ama bunun icin Deviantart'ın tek başına yeterli olacağını duşunuyorum,bunun dışında şu derlemeye goz atabilirsiniz. * Şimdi gelelim kullanıcının farketmeden en cok dikkatini cekebileceğimiz konulardan birine "Uygun Renk Secimi" Bu konuyla ilgili sanal ortamda bir cok arac mevcut,Bunlara ornekler cok olsada kullanabileceğiniz kaynak ColourLovers olabilir.Uygun renk secimiyle ilgili ornek vermek gerekirse,aşşağıdaki sitelerin renk secimlerine bakarak fikir edinebilir,Renk seciminin onemini kavrayabilirsiniz. 5 – Tasarımın koda dokulmesi : Tasarımımızı grafik programımız uzerinde oluşturduk,gerekli gorselleri ekledik.Şimdi tasarımın web sitesine donuşmesi icin ilk somut adımı atıyoruz ve tasarımını grafik programında geliştirdiğimiz taslağı kodlayarak ve gorsellerle birleştirerek bilgisayarımız uzerinde sanal ortama taşımadan onceki hazır haline getiriyoruz.Burada onemli olan doğru kodlamanın yapılması ve kod fazlalığının onune gecilmesi.Bu durum zaman icinde gelişen kod bilginizle orantılı olacak değişicektir.Başlarda hatalı kodlamaların olması normaldir fakat bunları belirleyip,gerekli duzenlemeleri yaparak bir adım ileri gitmiş olabiliriz. Kodlarımızdaki hataları ayıklamak ve duzenli bir kodlama yapmak icin bir cok kaynak mevcut fakat W3C standartlarına uygun kodlama bizim icin yeterli olacaktır.W3C kod ayıklayıcısını kullanmak icin illa sitenizin bir hostingde bulunması gerekmemektedir,dosyanızı upload ederek de kontrol yapabilirsiniz.Css ve Xhtml kodlarınızı uygunluğu icin W3C * Ayrıca Css kodlarınızdaki karmaşayı engelleyip daha derli toplu ve kısaltılmış hale getirmek icin Codebeautifier 'ı kullanabilirsiniz. * Bunun dışında daha rahat kodlama yapmak icin Notepad++ programını tavsiye ediyorum.Bu program sayesinde kodlarınızı daha duzenli ve rahat şekilde yazabilirsiniz. 6 - Kullanıcı dostu ozellikler : Bu konu rehberde tamamen farklı bir kategoride bulunmakta.Bu konu hem Seo hemde Gorsel acısından sitemize katabileceğimiz ozelliklerin belirtildiği bolumdur.Kullanıcı dostu ozelliklerden kastım kullanıcının site icinde kaybolmadan rahat rahat gezinebilmesi ve sitede daha uzun sure zaman gecirebilmesi icin yapılan duzenlemelerdir.Bu ozelliklerin bu rehber'de yer almasının sebebi ise gorsel acıdan sitemize zenginlik katıp,tasarıma ayrı bir hava katabilmektir.( Tabi yerinde ve uygun şekilde kullanıldığında ) Bu ozelliklere ornek 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 gorunmesi acısından onemli bir ozelliktir.Bu ozellik icin ben Sharethis adlı Wordpress eklentisini kullanıyorum.Hem kullanım kolaylığı hemde gorsel acıdan sade ve hoş gorunmesinden dolayı tercihimdir. * Benzer konularla okuyucuyu diğer konulara yonlendirme : Bu ozellik sayesinde konu sonunda hem gorsel acıdan hemde kullanıcıyı yonlendirme acısından guzel bir ozellik ekleyebilirsiniz.Bu ozellik icin benim kullandığım Wp-Thumbie eklentisini tercih edebilirsiniz. * Son Tweet'lerinizi sitenizde yayınlama Bu ozellikle sitenizde ister son tweetinizi isterseniz belirlediğiniz sayıdaki tweetleri gosterebilirsiniz ve son zamanlarda her sitede bu ozelliğe rastlayabilirsiniz.Her zaman blogunuza yazamadığınız konuları okuyucularınıza twitter'dan yazdığınız mesajla iletebilirsiniz.Bu konuyla ilgili onceden yaptığım paylaşımım "Blogunuzda Son Tweetinizi Gosterin" goz atabilirsiniz. * Kod paylaşımlarınızı renklendirin Eğer programlama uzerine paylaşımlar yapıyorsanız,kod kısımlarının normal gorunuşu cok sade ve goze hoş gelmeyen bir yapıda yayınlanacaktır.Bunun icinde kullanışlı ve guzel bir cozum mevcut.Bu konuyla ilgili de "Kod Obeklerinizi Renklendirin" adlı paylaşımıma goz atabilirsiniz. * En cok okunan paylaşımlarınızı listeleyin Bu ozellik sayesinde sitenizde yaptığınız paylaşımlardan en cok okunanları yeni okuyucularla paylaşabilirsiniz ve bunun dışında sitenizde goze hoş gelen bir kısımda yayınlayabilir,Gorsel acıdan zenginlik katabilirsiniz.Bu konuyla ilgilide yaptığım paylaşıma "En Cok Okunan Konuları Listeleyin" goz atabilirsiniz. * Kullanışlı bir footer tasarımının etkisi Bence sitenin en son gorunen bolumu olsada sayfaya apayrı katan bir bolumdur footer kısmı.Bazı siteler var ki oyle bir footer tasarımı ve ozellikler yapılmış ki ,footer uzerinden yapılan tum yenilikleri takip edebilirsiniz.Uygun ozelliklerle duzenlenmiş ve guzel bir tasarıma sahip olan footer sitenize gercekten cok buyuk bir etki katacaktır.Sıfırdan footer duzenlemek zor gelebilir,Ben bunun icin cok guzel bir paylaşımda bulunmuştum.Footer'a widget desteği ekleyerek guzel bir tasarımdan sonra kullanışlı bir footer'ı widget desteğiyle rahatca hazırlayabilirsiniz."Kullanışlı Bir Footer Tasarımı Nasıl Hazırlanır" adlı konuma goz atabilirsiniz. Kaliteli footer tasarımı hakkında derlenen bu yazıyada goz atabilir,ilham alabilirsiniz 7 - Tavsiyelerim : Bundan onceki adımlarda somut olarak ipucları vermeye calıştım,Bu bolumde ise ufak tefek birkac 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 gercekten 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 sozu web tasarımı icinde gecerlidir. Sabırsız davranıp en kısa surede başarıya ulaştığınızda ufak sarsıntılarda buyuk hasarlarla karşılaşacağınızı unutmayın,amacınız uzun surede sağlam bir proje oluşturmak olsun.Ben bunun icin elimden geldiğince yardımcı olduğumu duşunuyorum gerisi size kalmış. - - kaynak : EgemenOzbeyli.COM __________________