Web Tasarımı ve Kodlaması Üzerine Bir Araştırma

Uzun zamandır aklımdaydı ve merak ediyordum , acaba blog yazarları tasarımlarını nasıl yapıyorlar ? , xhtml-css çevrimini kendileri mi yapıyorlar ? Bu iÅŸleri yaparken izledikleri yollar neler? vs. Sonunda ufak bir araÅŸtırma yaptım ve bazı arkadaÅŸların görüÅŸlerini aldım.3 soru sordum kendilerine.Sorular ÅŸunlardı :

1- Web tasarımı yaparken hangi programları kullanıyorsunuz ?
2- Yaptığınız tasarımı xhtml/css kodlamasına siz mi dönüÅŸtürüyorsunuz? EÄŸer dönüÅŸtürüyorsanız izlediÄŸiniz yollar nelerdir?
3- Tasarım yaparken özellikle dikkat ettiÄŸiniz noktalar var mı? Varsa bunlar nelerdir?

Bakalım hepimizin blog dünyasından az çok tanıdığı kiÅŸiler tasarım aÅŸamasını nasıl hallediyorlar ?

Dmry'den Hakan'ın cevapları :

1- Web tasarımlarını yani grafik uygulamalarını ben yapmıyorum. Genelde eski kafa olarak Fireworks üzerinde grafikler ile oynayıp istediÄŸim grafikleri elde ediyorum.

2-XHTML/CSS dönüÅŸümlerini ben yapıyorum.  EÄŸer elimdeki komple bir site tasarımı ise ve resim formatındaysa, uygulayacağım katmanları hayal ediyor ya da kağıt üzerinde ÅŸekillendiriyorum ve tasarım resmini bu katmanlara uyacak ÅŸekilde parçalıyorum. Sitenin en üstünden baÅŸlayarak, en altına kadar kodlamaya devam ediyorum. Her aÅŸamada gerekli olan grafikleri, tasarım üzerinden keserek alıyorum.

3-Özellikle tarayıcı uyumuna dikkat ediyorum. Internet Explorer 6, Internet Explorer 7 ve Firefox 3 uyumuna dikkat ediyorum. Zaten bu üçünde de problemsiz ÅŸekilde çalışan bir tasarım ortaya çıkarırsanız, ne Opera ne de diÄŸer tarayıcılarda problem yaşıyorsunuz.

T'infection'dan Volkan'ın cevapları:

1) Tasarım yaparken öncelikle Photoshop, Dreamweaver, Notepad++ benim deÄŸiÅŸmez programlarım. Åžayet veritabanı uygulaması olan ve özellikle Php Mysql bir ortam üzerine kurulacak olan projelerde de EMS Mysql Manager programını kullanıyorum. Tabi tarayıcı olarak Mozilla Firefox ve IE7 (IE7'yi sadece görünüm testi amaçlı kullanıyorum)
 
2) Güzel bir soru :) Tabi ki Photoshop üzerinde yaptığım çalışmayı daha sonra Notepad++ programını kullanarak bizzat kendim Xhtml/Css'ye döküyorum. Bunu yaparken taslak olarak yaptığım sayfanın yerleÅŸimini ve kullanacağım öÄŸeleri göz önünnde bulunduruyorum.
 
Kaç adet div alanı kullanılacak, navigasyon nerede olacak, ne tür bir baÄŸlantı görünümü kullanılacak bunlar baÅŸlangıç olarak dikkat ettiÄŸim ÅŸeyler. Önce bir boÅŸ doküman açıp basit olarak Xhtml kodunu yazıyorum. Sonrasında Css yani style dosyamda tüm stilleri baÅŸtan itibaren kodluyorum. DüÅŸüncemdeki kod miktarı ne kadarsa bu kadar kodlama yapıyorum. HerÅŸeyi koda dökerken beynimin içinde kuruyorum. Oradaki iÅŸim bitene kadar taslak kaydı yapıp tarayıcıda bakmıyorum. Tüm bu iÅŸler bittikten sonra hemen tarayıcıda görüntüleme yapıyorum. Burada gördüÄŸüm aksaklıkları ve eksik kalan noktaları hem Xhtml hem de Css üzerinde ekstra kodlar yazarak düzeltiyorum.
 
Tabi son olarak uÄŸradığım mekan W3C Validation sayfaları. Xhtml ve Css bir tasarım yapıyorsanız mutlaka bu sayfalardan Valid yani geçerlilik almanız gerekiyor. Bu da sizin ne kadar basit ve temiz bir kod yazmanıza baÄŸlı. Çok karmaşık iÅŸlerde bile bazen tıkandığım noktalarda basit hatalar yaptığımı farkediyorum. Mozilla Firefox tarayıcı bana hatalarım konusunda çok yardımcı oluyor.
 
3) Sanıyorum ikinci sorunun içinde bu soruya da cevap verdim ancak biraz daha detay vermek isterim. Tasarımı yaparken bu tasarımın kime gideceÄŸi, kimin kullanacağı önemli. Kurumsal bir site mi bir ticari site mi yoksa kiÅŸisel bir site mi? Photoshop taslağı ÅŸayet gözüme güzel görünmezse o tasarım hayatta tarafımdan kulllanılmaz ve iÅŸlenmez. O yüzden ben tasarım yaparken bilhassa PSD olarak yapılan çalışmaya çok dikkat ederim. Bazen 3-4 gün sadece bir .psd dosyayla uÄŸraÅŸtığım olur.
 
Kaldı ki artık eskisi kadar Web 1.0 tarzı dediÄŸimiz yani klasik tablo ızgaralı tasarım yapmıyorum. Daha çok gelen Xhtml, Css iÅŸleri kabul ediyorum. Sanıyorum müÅŸteri popülasyonu da bu yönde artıyor. Artık insanlar bilinçli bir ÅŸekilde istedikleri tasarımı söyleyebiliyor ve isteklerini bu anlayışa göre ÅŸekillendirebiliyorlar.
 
Son olarak taslak olarak çıkardığım çalışmayı demo olarak müÅŸteriye sunduÄŸumda onun istekleri doÄŸrultusunda bazı deÄŸiÅŸiklikler yapıyorum. Kaldı ki müÅŸterinin isteÄŸi çok önemli.
 
Kısaca özetlemem gerekirse, iyi bir taslak çalışma, temiz ve basit Xhtml, Css kodu, siteye fazla yük bindirmeyecek ve sunucuyu yormayacak biçimde yapılan bir Php, Mysql altyapı benim özellikle dikka:t ettiÄŸim ÅŸeyler.

 Ä°stanbulDijital'den Sinan'ın cevabı:

Öncelikle yapılacak web sitesini 100% hayal etmek gerekli. Yani ben ÅŸahsen projelerimde Fireworks kullanıyorum ve en küçük detaya kadar bir JPG de projeyi hayal etmeye çalışırım.

Sonrasında elbette XHTML ve CSS kodlarını bizzat kendim yazıyorum. Åžayet yoÄŸunsam ki genelde öyle olur. XHTMLize iÅŸlemini Ömer Balyalı, Hüseyin Mert gibi XTHML konusunda uzman kardeÅŸlerime paslayabiliyorum.

Tasarım her ÅŸeyden önce kullanılabilir olmalıdır. Standartlar arama motorları ve kullanılabilirlik için oldukça önemli. Yüzlerce makale okuduk ve çokça deney yapma ÅŸansımız oldu zaten bu hususta. Sürekli web giriÅŸimleri ve bunların arayüzlerini kodladığımız için sanırım biz biraz daha bu iÅŸin kullanılabilirlik tarafındayız diyebilirim. Sevimli görünsün. Kolay Kullanılsın ;)

Fatih Hayrioğlu'nun cevabı:

1- Genelde tasarım iÅŸine ben karışmıyorum, sadece kodlama kısmını yapıyorum. Kod yazartken Adobe Dreamweaver kullanıyorum. Resim iÅŸlemlerim için ise Adobe Photoshop kullanıyorum. Firefox ve FireBug ise en büyük yardımcılarım.

2- Evet aslında ben tasarımcı değilim. Kod yazarayımı bu nednele ben yapıyorum evet. İzlediğim yolları anlatmak istersem ki anlatıyorum zaten; http://www.fatihhayrioglu.com/?page_id=119 bu adresten takip edebilirsiniz.

3- DediÄŸim gibi tasarım iÅŸine hiç karışmıyorum çok özel durumlar oldukça

 Yakuter'den Erhan'ın cevabı:

1. Bu sorunun cevabını sitemdeki bir yazıda vermiştim. Oradan bakarsan sevinirim.
http://www.yakuter.com/programcinin-alet-cantasi/

2. xhtml/css kodlamayı ben yapıyorum standart metodu kullanıyorum diyebilirim. Önce Photoshop'ta çiziyorum. Ardından parça parça önce resimleri kesip ilgili klasöre yüklüyorum, ardından o resmi temaya yerleÅŸtirmek için gerekli xhtml/css kodlarını yazıyorum.

3. Dikkat ettiÄŸim noktalar öncelikle tasarımın her tarayıcıda aynı görünmesidir. Ardından hem aynı görünmesini saÄŸlayıp hem de standartlara uyumlu hale getiririm. Fakat bunlardan daha da önemlisi vardır ki tasarımın gerçekten güzel olmasıdır. Kimileri standart yapıyor fakat bu sırada görselliÄŸi unutuyorlar. Åžairin dediÄŸi gibi "teknoloji kimin umrunda" :)

Bununla birlikte tasarımda kodlarımın arasına yorum yazmaya ve kodları düzenli/temiz tutmaya dikkat ederim. Böylece hem aynı projeyi istediÄŸim zaman hemen güncelleyebiliyor hem de aynı kodları rahatlıkla baÅŸka projelerimde de kullanabiliyorum.

Son olarak da projelerimi daha hızlı ve saÄŸlıklı yazabilmek için hep kullandığım sınıflar vardır. Onlardan vazgeçmem. Bu sınıfları yine 1. maddedeki yazımda anlattım. Ayrıca ÅŸu baÄŸlantılar iÅŸine yarayabilir.

http://www.yakuter.com/kendi-gunlugunu-kendin-yaz-1/
http://www.yakuter.com/kendi-gunlugunu-kendin-yaz-2/
http://www.yakuter.com/ezsql-veritabani-sinifinin-kullanimi/
http://www.yakuter.com/ezsql-veritabani-sinifi/

Hasan Yalçın'ın cevabı:

1- Photoshop, çok ender olmak üzere Corel Draw
2- Kodlamasını yapmıyorum PSD olarak teslim ediyorum..
3- Tasarımda dikkat ettiÄŸim noktalar; fonksiyonel ve kullanıcı dostu olması, hızlı çabuk anlaşılır olması, amacına uygun iÅŸlevleri kolayca bir araya getirmesi ve yeni trendlere uygun bir görüntü arz etmesi.

SiberKültür'den Eren Emre'nin cevabı:

1- Tasarim icin oncelikle kagit, kalem ardindan uygulama kisminda photoshop kullaniyorum. cok nadir olmakla beraber fireworks u de tercih edebiliyorum. tasarimin uygulanmasi asamasinda tercihim intellicens  desteginden dolayi dreamweaver, o yoksa notepad++.

2- Kendi projem ise ben yapiyorum. eger kurumsal bir is ise anlasmamiza gore ben yapabiliyorum. izledigim adimlar ise, once reset.css uygulamak, genel yapiyi yaratmak, ardindan detaylari  uygulamak oluyor.

3- Mumkun oldugunca kagit uzerinde dusunmeye calisiyorum, kullanici deneyimlerini goz onunde bulundurarak olabildigince kullanisli arayuzler tasarlamaya calisiyorum. 

OceanGray'den Muhammet'in cevabı:

1- Web tasarımı yaparken kullandığım porgramlar, dreamweaver, photoshop, aptana ve elbette notpad...

2- Kendim bu iÅŸlemi yapıyorum.. photoshopta tasarladığım arayüzü dreamweaver yardımı ile hazırladığım siteye göre html veya php olarak kodluyorum.. php için kullandığım kendim hazırladığım bir takım ÅŸablonlar var bunlar bana zamandan tasarruf açısından çok yardımcı oluyor.. eÄŸer hazır bir cms için tema yapıyor isem burada bir adım daha ileri giderek ona entegre ediyorum.. Mesela ÅŸimdilerde wordpress için bir tema yapıyorum.. photoshopta hazırladığım arayüzü wordprese entegre etmeye baÅŸladım.. kısa süre sonra görücüye çıkacak :)

3- Tasarımda en çok dikkat ettiÄŸim sayfada bütünlük.. bu bütünlük olayını da alt baÅŸlıklar altında toplayabilirim.. mesela ilk olarak renk uyumu.. benim için çok önemli.. tasarımları genelde internetten elde etiÄŸim renk ÅŸablonları üzerine yapıyorum... ikinci olarak ise css geliyor... bu da atlanmaması gereken önemli bir konu...

*KiÅŸileri cevapları gönderiÅŸ tarihlerine göre listeledim.

Evet cevaplar böyle.2-3 arkadaÅŸ'a daha soruyu yönlendirmiÅŸtim ancak aradan belirli bir süre geçmesine raÄŸmen bir dönüÅŸte bulunmadılar ÅŸimdiye kadar.EÄŸer yeni cevaplar gelirse onları da ekleyeceÄŸim buraya.

Bu iÅŸe yeni baÅŸlayacaklar ya da kendini geliÅŸtirmek isteyenler , bu cevaplardan çok fazla çıkarımda bulunup kendi stillerini geliÅŸtirebilirler diye düÅŸünüyorum.Beni kırmayıp araÅŸtırmaya katılan tüm arkadaÅŸlara da çok teÅŸekkür ediyorum.

Düzenleme-1:

Soruları ben de cevaplayacak olursam ;

1- Tasarımı genellikle ben yapmıyorum ama düzenleme iÅŸlemlerim için photoshop'u tercih ediyorum.Kod'a dökme aÅŸamasında ise linux'da Geany , windows'da Dreamweaver'ı tercih ediyorum.

2- Evet xhtml-css dönüÅŸümünü ben yapıyorum.Öncelikle css'i yazarak baÅŸlıyorum.Tasarımda yukarıdan aÅŸağı doÄŸru katman katman ilerleyip , css ile ÅŸekillendiriyorum.Resimleri de adım adım keserek alıyorum.

3-Özellikle tekrarlı alanları aynı görseller ile ÅŸekillendirmeye çalışıyorum.Mesela sidebar için her bloÄŸun baÅŸlık kısmının arkaplan resminin aynı olması vs. Bu daha hızlı bir css süreci geçirmemi saÄŸlıyor.Yani daha tasarım aÅŸamasında iÅŸin css kısmını ÅŸekillendiriyorum kafamda.