Teknoloji Haberleri
Aşağı Git
Tüm Forumlar
Web Tasarım - Programlama
Tasarım ve grafik
Web Tasarım ve Hazır Kodlar
Kaliteli Web Tasarımı İçin İpuçları (Rehber)
Bu konudaki kullanıcılar: 1 misafir
39
Cevap 2113
Tıklama 0
Öne Çıkarma
Cevap 2113
Tıklama 0
Öne Çıkarma
-
Kaliteli Web Tasarımı İçin İpuçları (Rehber)
|
Bu kadar görüntüleme ve 0 yorum, Hiç kimsenin işine yaramadı mı ? |
< Bu mesaj bu kişi tarafından değiştirildi shotufuk -- 8 Ocak 2012; 11:13:48 >
Bu mesaja 2 cevap geldi.
üstadım bu işin içinde olan bir kişi olarak anlatımını çok begendim süper olmuş. Bizim insalarımız genelde hep boş boş şeylere yorum yaparlar bu gibi güzel paylaşımlarıda okurlar ve bir teşekkür bile etmezler. Bu nedenle sen hiç takma kafana yüregine sağlık. |
Bu mesaja 3 cevap geldi.
|
Hocam yazıyı baştan sona okudum. Çok keyifli bir yazı olmuş. Bu tarz yazıları yazmaya devam edersen hem çok güzel geri dönüşler alırsın hem de yüksek tıklanma oranlarına ulaşırsın. Hem de piyasadaki nadir kaliteli paylaşımlara yenilerini eklemiş olursun. Tebrik ederim. ;) |
Bu mesaja 1 cevap geldi.
Yorumunuz için çok teşekkür ederim. |
Bir an beğenilmediğini düşünmeye başlamıştım ama sizlerin yorumu beni umutlandırdı :) çok sağol |
Yorumun için çok teşekkürler,hedefimi açıklamışsın :) işlerimin yoğun olmasından ötürü fazla paylaşım yapamıyorum ama yaptığımdada kaliteli olması için çok uğraşıyorum,Karşılığını alıncada mutlu oluyorum :) |
Bu mesaja 2 cevap geldi.
Emek verilen şeyler er ya da geç mutlaka hakettiği değeri görüyor. İnancını kaybetme derim. ;) |
Bu mesaja 1 cevap geldi.
Teşekkürler |
Yok kaybetmedim,kaybetmeyeceğim de :) |
DEvamını bekliyoruz ama :) |
Bu mesaja 1 cevap geldi.
Elimden geldiğince paylaşımlarımı sürdürmeye çalışıyorum,iş yoğunluğumdan dolayı az olsada paylaşımların öz olması için çaba harcıyorum. İlk olarak blogumda yayınladığım yazıları daha sonrasında takip ettiğim forumlarda paylaşıyorum,durum bu :) paylaşımlarımın devamı gelicektir,için rahat olsun :) |
Bu mesaja 1 cevap geldi.
| Bence süpersiniz. Şuan için düşünmüyorum ama ilerde sizi rahatsız ederim :D |
Bu mesaja 2 cevap geldi.
|
Son zamanlarda web tasarımı ile ilgilenme niyetindeyken, karşıma bir hazine çıktı. Çok emek verilmiş, güzel bir proje. Kelimenin tam anlamıyla bir rehber. Ben, yaratıcı olduğunu düşünen, garip garip fikirleri olan bir adamım (: Ancak bunları kodlara ve tasarıma dökmeyi ne derecede başarabilirim onu bilemiyorum. Şimdiye kadar ki projelerim hep kağıt üzerinde kaldı (: Kod bilmemem, en büyük eksikliğim elbette. Kod öğrenmek de, yaşı 25 olmuş, günde 13 saate yakın çalışan biri için zorlayıcı (: Fakat bir yerinden başlamak gerek. Uzun yıllardır aklımda olan kişisel bir projeyi, umarım bu rehberle gerçeğe (daha doğrusu sanala) aktarabilirim. Kod için, nereden başlamamı önerirsiniz? Emeğinize sağlık, çok teşekkürler. |
Bu mesaja 1 cevap geldi.
Merhaba Bende sizin gibi yoğun tempoda çalışan biriyim ve haftaiçleri bölüm bölüm hazırlayarak haftasonuna 2 paylaşım hazırlamak için çok uğraşıyorum :) şimdi gelelim sizin sorununuza,işin önemli kısmı projeyi kafada canlandırmaktır daha sonrasıda kodlarla bunu tasarıma dökmektir.Sana önerim bu saatten sonra oturup baştan kod öğrenmektense wordpress sistemini kullanarak öğrenmektir.Wordpress bu konuda çok kullanışlı ve bi o kadarda basit bir sistemdir,Wordpress'i local sunucuda çalıştırıp bilgisayarından kodları karıştırarak görsellerde değişiklik yaparak bu işe başlamanı öneririm,Zaten internet üzerinde wordpress üzerine çok sayıda paylaşım mevcut.Kaynak yönünden de sıkıntın olmaz,benim sana tavsiyem budur |
Sorunları çözmek için elimden geleni yaparım :) |
Bu mesaja 1 cevap geldi.
Verdiğin emeğe sonsuz teşekkürler. Eğer tsarımda faydalı olacak başka linkler varsa onları da bekliyoruz. |
Bu mesaja 1 cevap geldi.
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.
< Resime gitmek için tıklayın >
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.
< Resime gitmek için tıklayın >
< Resime gitmek için tıklayın >
< Resime gitmek için tıklayın >
< Resime gitmek için tıklayın >
< Resime gitmek için tıklayın >
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 http://960.gs 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.)
< Resime gitmek için tıklayın >
< Resime gitmek için tıklayın >
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 http://www.egemenozbeyli.com/egemenozbeyli-font-arsivi-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 http://www.iconfinder.com/ ve http://www.iconarchive.com/ adlı kaynakları kullanabilirsiniz.
< Resime gitmek için tıklayın >
< Resime gitmek için tıklayın >
* Font seçimi için bildiğim en iyi kaynak ve her zaman ilk seçimim http://www.dafont.com/,ek olarak http://fawnt.com/.
< Resime gitmek için tıklayın >
< Resime gitmek için tıklayın >
* Tasarımda kullanılacak diğer görsellerin seçimi için fazla kaynağa sahip değilim ama bunun için http://www.deviantart.com/'ın tek başına yeterli olacağını düşünüyorum,bunun dışında http://www.smashingbuzz.com/2010/05/40-free-professional-web-and-graphic-design-source-files/ göz atabilirsiniz.
< Resime gitmek için tıklayın >
* Ş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 http://www.colourlovers.com/ olabilir.Uygun renk seçimiyle ilgili örnek vermek gerekirse,aşşağıdaki sitelerin renk seçimlerine bakarak fikir edinebilir,Renk seçiminin önemini kavrayabilirsiniz.
< Resime gitmek için tıklayın >
< Resime gitmek için tıklayın >
< Resime gitmek için tıklayın >
< Resime gitmek için tıklayın >
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.http://jigsaw.w3.org/css-validator/ ve http://validator.w3.org/ 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 http://www.codebeautifier.com/ 'ı kullanabilirsiniz.
* Bunun dışında daha rahat kodlama yapmak için http://notepad-plus-plus.org/ programını tavsiye ediyorum.Bu program sayesinde kodlarınızı daha düzenli ve rahat şekilde yazabilirsiniz.
< Resime gitmek için tıklayın >
< Resime gitmek için tıklayın >
6 - Kullanıcı dostu özellikler :
Bu konu rehberde tamamen farklı bir kategoride bulunmakta.Bu konu hem http://www.egemenozbeyli.com/kategori/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 http://sharethis.com/ adlı Wordpress eklentisini kullanıyorum.Hem kullanım kolaylığı hemde görsel açıdan sade ve hoş görünmesinden dolayı tercihimdir.
< Resime gitmek için tıklayın >
* 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 http://wordpress.org/extend/plugins/wp-thumbie/ eklentisini tercih edebilirsiniz.
< Resime gitmek için tıklayın >
* 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 http://www.egemenozbeyli.com/blogunuzda-son-tweetinizi-gosterin/ göz atabilirsiniz.
< Resime gitmek için tıklayın >
* 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 http://www.egemenozbeyli.com/sitenizdeki-kod-obeklerini-renklendirelim/ adlı paylaşımıma göz atabilirsiniz.
< Resime gitmek için tıklayın >
* 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 http://www.egemenozbeyli.com/en-cok-okunan-konulari-listeleme/ 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. http://www.egemenozbeyli.com/wordpress-kullanisli-bir-footer-tasarimi-nasil-yapilir/ adlı konuma göz atabilirsiniz.
< Resime gitmek için tıklayın >
Kaliteli footer tasarımı hakkında derlenen http://www.hongkiat.com/blog/50-excellent-blog-footer-designs/ 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ış.
- - -
Kaynak : egemenozbeyli.COM