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.

Kategori:

Yorumlar

Facebook Yorumları
Tekno Dergi Yorumları

Fatih, öncelikle bu güzel araştırma için ellerine sağlık. Fakat bence yazının bir de değerlendirme kısmı olmalıydı. Yani farkettin mi bilemiyorum ama tüm cevap verenler hemen hemen aynı yolu takip ediyor. Bu konuyu bir derleyip güzelce özetleyebilirdin. Mesele Photoshop'ın ne kadar yaygın olarak kullandığına dikkat çekebilirdin.

Ayrıca keşke kendin de aynı sorulara cevap verseydin :)

Bu arada bir yanlış anlaşılma olmasından korkuyorum. Ben gönderdiğim cevabı doğrudan yayınlayacağını bilmiyordum. Bu nedenle bazı yazılarımı sana bağlantı olarak göndermiştim. Yazıya bakınca reklam yapıyormuşum gibi durmuş :(

Tekrar teşekkürler bu güzel çalışma için. Emeğine sağlık ;)I

Sevgili Erhan , haklısın aslında bir değerlendirme yapmalıydım ama her okuyucunun kendisinin bir çıkarım yapmasını düşündüm , bu nedenle sadece aracı konumunda olmayı tercih ettim :) 

Reklam konusuna gelince de , yok yok problem değil bence :)

Tamam ben de en kısa zamanda ekleyeceğim izlediğim yolları :)

Düzenleme : Evet ben de yazının sonuna kısaca ekledim neler yaptığımı.

Adı geçmeyen bir css editörü: TopStyle.
Photoshop kadar işlevsel web grafik geliştirici: Fireworks.

Bunlar pek rağbet görmemiş galiba. Bu soruları kendim için cevaplasam olur mu acaba?

1- Fireworks, Illustrator, Dreamweaver, Topstyle, ColorSchemer, ColorPix, ST ThumbnailsExplorer, MozillaFirefox
2- Tasarımı XHTML/CSS'ye kendim dönüştürüyorum. Tasarımı kafamda bölümlere ayırıyorum, ust-orta-ortaSol-ortaSaf-alt gibi genel divlerin içini özele doğru dolduruyorum. CSS genel çerçeveden içeriye detaylanarak yoğunlaşıyor. CSS yazımında resimleri keserek alıyorum.
3- Reset.css ilk adım. Site resimlerini PNG kullanmaya çalışıyorum. Sitede fotoğraf varsa kalitelerini yüksek tutuyorum. Font kullanımında herkesin görüntüleyebileceği fontlar seçiyorum ve bütünlük olmasına dikkat ediyorum.

Tabiki olur Ömer , çok da güzel olmuş cevaplaman :) Keşke her okuyan senin gibi kendi stilini de yazsa da daha da zenginleşse yazı...

Ne cevherler vardır, dediğiniz gibi herkes kendi yöntemini tanıtabilir. CSS düzenlemesi çok karmaşık bir konu mesela. Dosya kalabalıklaştıkça ne nerdeydi diye karışmıklıklar başlıyor. Belki bu konuda da bir başlık açabilirsiniz.

Portfolyomu incelediğiniz için teşekkürler, Türkiye'de "portfolyo" kelimesi yayılacak inşallah. Çoğu kişiye mail adresimi söylerken "türkçe" yazılış dediğimde bile anlaşılmıyor, portfolio yazmaya çalışıyorlar (;

Bu tarz yazıları okumayı seviyorum. Güzel bir çalışma olmuş. Bir çok kişinin fikrini almak, yayınlamak zaman ve çevre isteyen birşey :) elinize sağlık.

bende sazan misali atlayayım sorulara belki birilerinin işine yarar;

1) Aslında yapacağım işe göre karar veriyorum. Ne tür bir iş yapacaksam ona göre program seçiyorum. acele düzeltmem gereken ufak tefek işlerde ms'in not defterini kullanıyorum.

kod yazarken : Dreamweaver, Zend, notepad++, ms not defteri

Grafik yaparken : Fireworks, Photoshop

2) Kişisel işlerimde; Evet %100 bana ait gibi bir takıntım var o yüzden ben çeviriyorum. Ekip ile çalışırsam duruma göre değişiyor ama genelde bana kalır ihale.

3) Tasarıma başlamadan önce eskiden kağıt kalem elime alır yazar - çizer bir storyboard oluştururdum ve bunu pratik yapan bir programı epey aradım. Sonuda MINDMAP 5 isminde programı buldum. Şimdi siteye başlamadan önce onunla site içeriğinde ne oalcak, tasarım kriterleri vs vs. aklınıza ne geliyorsa bunula kendime bir yol çiziyorum. Daha sonra tasarım aşamasına geçip grafiksel tasarımı bitiyorum. Grafik tasarımı biraz vakit alıyor çünkü kodlamaya geçmeden önce grafiğin benim açımdan kusursuz olmasını istiyorum. Son aşamada template oluşturup kodlamaya geçiyorum.

Grafikleri genelde jpg kullanıyorum fakat son zamanlarda png de epey kullanmaya başladım. sayfanın görselliği benim için ön plandadır fakat yine de açılan sayfanın boyutunu minimuma indirmek için elimden geleni yaparım.

kod bölümünde artık eskiden yazdığım kodları pratik olarak yeni yaptığım sistemlere entegre edebiliyorum. ya da yeni bir kod yazacaksam ileride kullanabileceğim şekilde yazmaya özen gösteriyoruum. yani sadece o projeye özel bir kodlama yapmıyorum [genelde]. Özellikle dikkat ettiğim husus kodlara açıklama yazmaktır.

Kolay gelsin
iyi çalışmalar

Mehmet Emin Korkmaz kullanıcısının resmi

Şimdi Web Tasarımcı olmak istiyorum; sırasıyla

> HTML (Tamam)
> CSS (Yarısındayım)
> PHP,Javscript,AJAX,Jquery mi öğrenmem gerekiyor?

Yeni yorum ekle

İlgili Yazılar

Öncelikle eğer bu konuya ilginiz var ise , daha önce web'in bilinen isimleri ile yaptığım web tasarımı ve kodlaması üzerine olan şuradaki araştırma yazısını okumalısınız.

O yazıdan çeşitli püf noktalarını kaptıktan sonra kendinize bir yol haritası belirlemeli ve ona göre çalışmaya başlamalısınız.İlk adım olarak Css ve Xhtml kodlamayı öğrenmelisiniz.Css için yeterince kapsamlı olan , Fatih Hayrioğlu'nun yazdığı şuradaki e-kitap 'ı indirebilir ve yine aynı yerden kitapta anlatılan çalışmaların kaynak kodlarına ulaşabilirsiniz.

Xhtml ve Css ile ilgili basılı bir kitap isterseniz de şuradaki kitap işinize yarayabilir.

Bu yazı tamamen kişisel :) Bazen , "yahu geçenlerde bir yerde görmüştüm ama neydi acaba?" diyerek yana yana aradığım web tasarım / programlama araçlarını,kütüphanelerini frameworkleri,hazır uygulamaları , kısaca ne kullanıyorsam onları bu yazıda birleştirmeye karar verdim.Her aradığımda elimin altında olmasını istediğim  şeylerin yanında , adresini ezbere bildiklerimi de yazayım ki başkaları da  faydalansın :)

Programlar:

Wamp(win) / Geany / gPhpEditDreamweaver(win) / PhotoShop(win) / Quanta Plus / FileZilla

Kütüphaneler:

 Jquery / Mootools / LightBox / FaceBox / Multibox

Photoshop kullanırken işlerimizi hızlandırmak için sık sık yaptığımız işlemleri action olarak kaydedebiliyor ve bunları daha sonra otomatik olarak istediğimiz resimlere uygulayabiliyoruz. Peki yandaki gibi kaliteli efektlerin hazır bir şekilde action listenizde yer almasını istemez miydiniz?

Eğer Linux kullanıyorsanız ve Firefox'u çok daha hızlı bir halde kullanmak istiyorsanız SwiftFox'u deneyebilirsiniz. SwiftFox Intel ve Amd işlemcilere göre farklı olarak paketlenmiş. Ayrıca deb paketleri de bulunuyor.

Sadece web tasarımında değil , aslında hayatın her alanında , ulaşılmak istenen noktaya en iyi ve en çabuk şekilde giden yollar tercih edilmelidir.Konu web tasarımı olunca da pek çok araç tasarımcıların hizmetine açık şekilde beklemekte.Ailemizin listeleme sitesi m