Hazır Web 2.0 Tasarım Araçları
Web 2.0 ile birlikte içerikte köklü değişiklikler olmasının yanında tasarımda da büyük değişiklikler oldu. Artık daha basit, daha canlı, daha kullanışlı ve tamamen göze hoş gelen tasarımlar görüyoruz. Bu trendi yakalamak için bazı ortak teknikler kullanılıyor. Yuvarlak köşeli kutular, kalın yazı tipleri, yansımalı grafikler… gibi. Bu teknikleri tamamen kendi becerinizle yapabileceğiniz gibi hazır olarak kullanmanızı sağlayan web araçları da mevcut. İşte bu tip web araçlarından derlediğim kaynakları sizlerle de paylaşmak istiyorum.
1. Logolar
Web 2.0 ile birlikte birçok firma logosunu yeniden tasarladı. Logolara daha parlak bir görüntü verilirken, yansıma efekti de bolca kullanıldı. Ayrıca pekçok yeni açılan servis, logosuna bir BETA ibaresi yerleştirmeyi alışkanlık haline getirdi. Eğer siz de logonuzda değişiklikler yapmak istiyorsanız bu kriterleri yerine getirmelisiniz. Elbette logo tasarımı profesyonel kişilerin ellerine bırakılmalı ama basit işleriniz için Logo Creatr ve Web2.0 Logo Creator araçları da epey bir işe yarayabilir. Ayrıca Photoshop kullanıcıları şu sayfadan web 2.0 logoları için hazırlanmış stil dosyasını indirebilirler.
2. Butonlar
Web 2.0 ile o eski çirkin gri butonlar terk edilmeye başlandı. Web tarayıcılarının sunduğu klasik butonları kullanmaktansa herkes imaj işleme yazılımlarıyla kendi butonunu kendi tasarlamaya başladı. Resim olarak hazırlanan bu butonlarda özellikle cam efekti ve renk geçiş (gradient) efekti hakim. Ayrıca birçok butonda, anlamlı küçük simgeler de kullanıldığını görüyoruz. Kolay yoldan kendi web 2.0 butonunuzu hazırlamak içinse daha önce buradaki yazımda da bahsettiğim Web 2.0 free buttons maker aracını kullanabilirsiniz. Ek olarak Web 2.0 Layerstyles paketiyle de butonlar hazırlayabilirsiniz.
3. Arkaplanlar
Web 2.0 ile birlikte web sitelerinin önplanında bu kadar değişiklik yapılmışken arkaplan da unutulmadı tabi 
Web 2.0 sitelerinin arkaplanında çoğunlukla iki farklı teknik gözümüze çarpıyor. Bunlardan birincisi yatay şeritler iken ikincisi de düz renk geçişleri. Hazır olarak yatay şeritleri Stripe Generator veya Stripe Designer ile kolayca hazırlayabiliyorsunuz. Eğer ki yatay şeritlere göre gözü daha az yoran renk geçişli arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini indirebilirsiniz.
4. Yuvarlak köşeli kutular
Web 2.0 ile birlikte köşeleri yuvarlatılmış kutuların kullanımı çok yaygınlaştı. Köşeleri düz, kare veya dikdörtgen biçimde kutular kullanmak artık gerilerde kaldı. CSS‘nin 3.0 sürümüyle gelecek olan border-radius özelliğiyle de tamamen tarihe karışacağını düşünüyorum. Şimdilik, yuvarlak köşeli kutular için farklı tekniklerden faydalanmamız gerekiyor. Spiffy Corners, RoundedCornr ve CSS Rounded Box Generator araçları resim, css ve html tekniklerini kullanıyorken Nifty Corners Cube ve curvyCorners araçları da JavaScript tekniğini kullanıyorlar.
5. Renk geçişleri
Bir renkten farklı bir renge veya aynı rengin koyu tonundan daha açık tonuna geçiş yapmamızı sağlayan efekte gradient ismi veriliyor. Ve bu efekti web 2.0 tasarımlarında bolca görebiliyoruz. Butonlarda, arkaplanlarda veya menülerde… Tasarımlarınıza derinlik hissi katan bu efekti hazır olarak kullanabileceğiniz araçlar da mevcut. Özellikle Ultimate Web 2.0 Gradients renk geçişli nesneler oluştururken epey bir yardımcınız olacaktır. Bununla birlikte 3. maddede bahsettiğim Free Fading Background Images pakediyle de çeşitli nesnelere renk geçişleri uygulayabilirsiniz.
6. Rozetler
İlk maddede yeni açılan pekçok web 2.0 servisinin, logolarına bir BETA ibaresi yerleştirdiklerinden bahsetmiştim. Bu beta ibaresini güçlendirmek için tasarımcılar, rozet (badge) şeklinde imajlardan faydalanıyorlar. Bu rozetlerin asıl kullanım amacı, kullanıcının dikkatini belli bir konu üzerinde yoğunlaştırmak. Daha iyi bir örnek vermek gerekirse %50 indirime sahip bir ürünün duyurusunu rozet biçimindeki bu imajları kullarak yapabilir ve dikkatlerin o ürün üzerine çekilmesini kolayca sağlayabilirsiniz. Rozet imajlarını kendiniz de hazırlayabileceğiniz gibi internette hazır olarak da bulabilirsiniz. Web 2.0 Badges ve Free Vector Badges tavsiye edebileceğim kaynaklar.
7. Menüler ve Sekmeler
Navigasyon sistemi bir web sitesinde oldukça önemli bir yer tutar. Bu yüzden yeterince anlaşılır ve karmaşadan uzak bir navisyon sistemi tasarlamanız gerekiyor. Basitliğin ve kullanılabilirliğin önplanda tutulduğu Web 2.0 sitelerinde oldukça hoş menüler/sekmeler görüyoruz. Kendi web sitenizde bu menülerden/sekmelerden kullanmak için CSS Tab Designer isimli ücretsiz yazılımdan faydalanabilirsiniz. Bu yazılım ile yatay veya dikey olarak pratik bir şekilde menüler/sekmeler hazırlayabilmeniz mümkün. Dynamic Drive CSS Library ise bu konuda bir diğer güzel kaynak.
8. Simgeler
Web 2.0 sitelerindeki bir diğer trend ise simge kullanımıdır. Simgeleri kullanarak anlatmak istediğiniz veya dikkat çekmek istediğiniz bir konuya odaklanılmasını kolaylaştırabiliyorsunuz. Doğru yerde doğru simgeyi kullanırsanız son derece etkili görünümler elde edebilirsiniz. Eğer simge hazırlamak istemiyorsanız veya simge satın almak istemiyorsanız ücretsiz simge sunan siteleri kullanmanız gerekiyor. İnternette yeterince ücretsiz simge sunan site var ama ben size kalite olanlardan bahsetmek istiyorum. Pixelgirl Presents, Icon Archive, Icon library ve Free Icons Web bunlardan birkaçı… Ayrıca Icon Finder ve Iconlet isimli simge arama motorları da istediğiniz bir simgeyi ararken işinizi oldukça kolaylaştıracaktır.
9. Renkler
Renk kullanımı elbette yeni birşey değil ama web 2.0 ile birlikte üzerinde daha önemle durulan bir nokta. Artık birbiriyle maksimum düzeyde uyumlu renkler kullanılıyor. Renkler eskine oranla şimdi daha sıcak, daha canlı ve daha ferah. Kendi gözlemlerinde web 2.0 tasarımlarında ağırlıklı olarak mavi, yeşil, kırmızı, turuncu, pembe ve gri tonlarının kullandığını görüyorum. Bu tonları yakalamak için hazır renk paletlerinden faydalanabilirsiniz. Web 2.0 Colour Palette, Web 2.0 Secret Weapon ve Web 2.0 Color Scheme bu amaçla hazırlanmış renk paletlerinden…
10. Yazı tipleri
Web 2.0 ile birlikte özellikle yazı boyutlarındaki artış hemen göze çarpıyor. Eskisine oranda daha büyük ve daha kalın yazılar kullanılıyor. Yine basitlik adına eskisine oranla daha az yazı kullanıldığını görüyoruz. Böylece ferah bir görüntü elde etmek için web sayfasında yer yer boşluklar oluşturulmuş da oluyor. Yazı tipine gelince ise aslında bu konuda pek bir sınırlama yok. Yine de düzgün hatları olan, kolayca anlaşılabilir yazı tipleri kullanmaya özen göstermeliyiz. Web 2.0 sitelerinde ne tür yazı tipleri kullanıldığını görmek açısından Great Fonts for Web 2.0 sayfasına bakabilirsiniz. Ücretsiz olarak yazı tipi indirmek içinse Urbanfonts, Dafont ve Better fonts gibi kaynakları kullanabilirsiniz.
Bitirirken…
Şimdiye kadar web 2.0 sitelerinde gözlemlediğim tasarım tekniklerinden bahsetmeye çalıştım. Ve bu teknikleri kolay yoldan kendi tasarımlarımızda kullanmamızı sağlayan ücretsiz araçlara değindim. Umarım bu araçların arasında, işinize yarayacak olanlar vardır 
Yorum takibi
Geri izleme
Yazıyı Paylaş
1 Haziran 2007, 09:44
İnternet & Web
Bugün 3 kez, toplam 22,904 kez okundu.
buton, css, javascript, parlak, resim, tasarım, web, web 2.0, yuvarlak
1 Haziran 2007, 10:21
Gerçekten çok faydalı bir link topluluğu oluşturmuşsun. İçlerinde özellikle “Stripe Generator” gelecekte çok popüler olacak gibi görünüyor.
1 Haziran 2007, 19:27
Erhan abicim sağol.Yansıma efektli yazılar benim çok hoşuma gidiyor.
1 Haziran 2007, 20:02
Erhan ellerine sağlık abi görüyorumki yazılarında çok güzel linkler oluyor ve bana bunlar mutlaka bir gün lazım olacak.
Acaba ajax-trdeki gibi bir site indeksi oluştursan da
URL AÇIKLAMA
—– ————-
şeklinde yapsan da sonra yazıların içinde aranıp dururken kulaklarını çınlatmaksak
Ellerine sağlık. Yani şu güzellikleri görünce insanın desktop uygulaması yazası gelmiyor
Kolay gelsin
1 Haziran 2007, 20:14
Yazıyı beğendiğinize gerçekten sevindim. İlginiz için teşekkürler.
@ibrahim
Yalnız bir de şu var. Çok yakında bir site açıyorum. Derslerden vakit bulabilirsem son rötüşlarını bitirip yayına vereceğim. Bu site, güzel kaynakların kategoriler içerisinde linklendiği bir site olacak. Belki senin bahsettiğin linkleme olayını bu şekilde de çözüme kavuşturmuş olurum.
Dediğin linkleme olayını düşüneceğim abi
3 Haziran 2007, 19:59
çok güzel bir yazı olmuş dostum.Birçok yararlı link olmuş.Yalnız bunların arasında hiç yerli bir site olmaması beni düşündürdü.Yeterli bilgiye sahip insanımız mı yok yoksa paylaşmaktan zevk mi almıyoruz?
3 Haziran 2007, 20:57
@alialtugkoca
Kritik bir soru sormuşsun (: Eğer ki Türk yapımı uygulamalar olsaydı duyardık gibime geliyor ben de seve seve burada yer verirdim.
Bence web 2.0 biraz ülkemizde tam oturmadı. Dünya web 2.0′ı yavaş yavaş geride bırakıyorken biz ülkemizde yeni yeni web 2.0 girişimleri görüyoruz. Tahminimce toplum olarak alışkanlıklarımızdan vazgeçmeyi pek sevmiyoruz ya da yeniliklere pek açık değiliz.
5 Haziran 2007, 08:39
[…] web 2.0 teknolojileri kullanarak hazır tasarım araçlarını bizlere sunan siteleri şuradaki makalesinde yayınlamış. Mutlaka göz […]
5 Haziran 2007, 10:46
Bu bilgileri bizimle paylaştığın için teşekkürler
5 Haziran 2007, 10:50
İconlar özellikle harika…Güzel bir yazı yazmışsınız sağolun.
5 Haziran 2007, 11:14
Siz sağolun arkadaşlar
5 Haziran 2007, 11:19
Gerçekten güzel bir yazı olmuş elinize sağlık
5 Haziran 2007, 12:45
Çok faydalı linkler içeren iyi hazırlanmış bir yazı. Ellerine sağlık.
6 Haziran 2007, 12:15
en iyisi grafiklerini kendin yapacan. çalıntı şeylerle site yapılınca insan vicdan azabı çekiyor. ha bunlar çalıntı değil ama yinede kendi ürünün olmadığı için vicdan azabı kaçınılmaz
6 Haziran 2007, 13:06
@Miraç
Bu araçlar işlerinizi kolaylaştıran, size zaman kazandıran araçlar. Vicdani azap çekmenizi gerektirecek birşey yok ortada.
O kadar da değil artık
Senin dediğine bakarsak o zaman halâ 1 ve 0′lar ile programlama yapmamız gerekiyordu. Ne gerek var programlamayı kısaltan C, Java gibi dillere değil mi
6 Haziran 2007, 13:54
programlamayı bilmem ama grafik (ç)alıntı olmaması lazım. tamam bu araçlar işlerimizi kolaylaştırıyor ama özgün bişeyler çıkmasını da engelliyor. mesela logo üreten siteden 1000 kişi yararlansa tr’de 1000 kişinin sitesinde aynı logo olacak. bu da web 2′nin mantığına yatacak mı bilinmez. web 2′de herşey benzer ama farklı olmak zorunda diye düşünüyorum. (son cümlemi bende anlamadım
)
6 Haziran 2007, 13:59
Logo konusunda haklısın. Ona birşey diyemem
8 Haziran 2007, 12:21
[…] eburhan‘ın değindi hazır araçlar ‘a bir kaç ekleme’de ben yapmak istiyorum.Tabiki […]
14 Haziran 2007, 15:30
Çok güzel bir yazı olmuş. Tebrik ediyorum sizi.
21 Haziran 2007, 00:13
Teşekkürler Erhan kardeşim,
Logo kısmını beğendim tabi diğerleri de süper
örnek olarak en basitinden Forum sayfasına Logo u yerleştirdim
isteyen arkadaşlar burada
http://acilforumtr.ac.funpic.de/forum/index.php
bakabilir
26 Haziran 2007, 23:01
harika bir makale olmuş dostum. Bu camiada senin gibi adamlara çok ihtiyaç var
26 Haziran 2007, 23:07
Estağfurullah Orhan. Asıl sizin gibi kişilere ihtiyaç vardır.
İnanır mısın ben de senin dw.gen.tr‘de yazdığın ve bilgisayarıma kaydettiğim web standartları ve erişilebilirlik yazılarından birini okuyordum
28 Haziran 2007, 12:20
kardeşim güzel çalışmalar yapmışsın başarılarının devamını diliyorum ALLAH razı olsun selametle
selam ve dua ile,…
29 Haziran 2007, 11:01
aman yanlış olmasın ben yazmadım Roger Johanson (http://www.456bereastreet.com) abimizin makalelerinin Türkçe çevirileri o makaleler
Her web profesyonelinin okuması gereken bir kaynak tabi
29 Temmuz 2007, 14:50
oldukca işime yaradı cok tesekkurler.
3 Ağustos 2007, 23:36
bu yazıya teşekkür etmeden geçersem cehennemde yanarım gibime geliyor
çok güzel bir yazı olmuş teşekkür ederim
20 Ağustos 2007, 10:24
Çok güzel çok yararlı linkleri bir araya toplamışsın, teşekkürler…
23 Ağustos 2007, 22:50
[…] http://www.eburhan.com/hazir-web-20-tasarim-araclari/ […]
29 Ağustos 2007, 14:06
Yıllardır internetle uğraşıyorum bu kadar yararlı sayfa hatırlamıyorum. Bu herkes için çok yararlı olmuş ama benim için ayrı önemi var. Çünkü bişeyde emin olmamı sağladı. Bir anadoluteknik lise bilg. bölümü son sınıf öğrencisi olarak bana, uzmanlaşmamam gereken alanın web tasarım olduğunu gösterdi. Nedeni ise böyle yararlı sayfalar sayesinde bilg. bilgisi olan herkes web sitesi tasarlayabilir ve benim bir web tasarım uzmanı olmamın anlamı kalmaz. O yüzden ben programlama alanında uzmanlaşmayı düşünüyorum ve bu sayfa için tekrar tekrar teşekkür ediyorum…
17 Eylül 2007, 22:32
abi süpersin ya çok uzun zamandır merak edipte bir gün ben de bunları yapacağım dediğim tasarımları yapmama vesile oldun allah razı olsun
23 Eylül 2007, 21:58
kardes sen bir harikasın Allah senden Razı Olsun ESEN KAL!!
28 Eylül 2007, 11:20
mükemmel bir site. her aceminin ve isteklinin görmesi duyması gerekli. tüm arkadaşlarıma duyurucam.
28 Eylül 2007, 11:21
bu arada pek çok bölümü indirdim. bazılarına ulaşamadım veya ulaşsamda indirme bölümünü keşfedemedim (korkunç değil mi) eşime söyleyeceğim halletsin.
15 Ekim 2007, 05:56
[…] Hazır Web 2.0 Tasarım Araçları bu sitede ise; 1. Logolar 2. Butonlar 3. Arkaplanlar 4. Yuvarlak köşeli kutular 5. Renk geçişleri 6. Menüler ve Sekmeler 8. Simgeler 9. Renkler 10. Yazı tipleri başlıklarından oluşan web 2.0 kaynağı… […]
15 Ekim 2007, 12:00
çok faydalı,yararlı olmuş teşekkürler…
26 Ekim 2007, 13:42
merhabalar, ben birkac farklı konuda uyelik sistemli bir site yapmak istiyorum. Bu sekilde basitce yapabilecegim hazır paketler var mı acaba? veya CD falan . tesekkurler
26 Ekim 2007, 18:57
@serdar simsek
Bahsettiğin şey ile ilgili aşağıdaki linkler sana yardımcı olabilir.
http://www.hotscripts.com
http://www.sitescripts.com
http://www.mydesign.gen.tr
19 Kasım 2007, 07:04
teşekkürler. işime yarıyacak.
23 Kasım 2007, 21:56
çok işime yaradı teşekkürler
5 Aralık 2007, 13:44
harika bir yazı ve çok faydalı bilgiler olmuş eline sağlık, teşekkürler..
12 Aralık 2007, 11:16
çok teşekkürler
22 Aralık 2007, 23:30
[…] Ayrıca güzel bir blog adresinde türkçe içerikli Web 2.0 tasarım örneklemeleri ve anlatımlarını toparlamış güzel bir yazı var onu da okumanızı tavsiye ederim.Hazırlayanların ellerine sağlık.http://www.eburhan.com/hazir-web-20-tasarim-araclari […]
26 Aralık 2007, 09:05
ortaya karışık süper bir çalışma olmuş. klavyene sağlık…
10 Ocak 2008, 22:24
Çok güzel siteler. Derleyip sunanın ellerine sağlık, Yüreğine sağlık.
Üstelik sayfada reklam bile yok, hiç karşılık düşünülmeden yapılmış bir iş.
Teşekkürler
10 Ocak 2008, 23:51
@Diyet Uzmanı
Yazdığın yorum için çok teşekkür ederim. Sizin bir teşekkürünüz bile benim bir reklamdan alacağım ücretten daha kıymetlidir.
17 Ocak 2008, 18:51
Gerçekten güzel bilgiler
teşekkürler eburhan abi
23 Şubat 2008, 13:07
iyice coştu bu site çalışmalarında başarılar harika gidiyorsun ayrıca bu sayfanın çok yararı oldu bana sağolasın…
2 Mart 2008, 21:05
faydalı online araçlar. paylasım için tesekkürler.
http://www.joyoge.com/oku/142/Web-2.0-icin-hazir-tasarim-araclari.html
4 Mart 2008, 19:49
Eline sağlık.. Güzel bir arşiv olmuş..
14 Mart 2008, 02:23
Her gün yeni gelişmeler yeni bilgiler bu internetin hızına yetişmek zor gibi görünüyor en iyisi yetişenleri takip etmek galiba
30 Mart 2008, 16:55
Eline Sağlık, Güzel Döküman Olmuş …
30 Mart 2008, 23:52
Teşekkürler, ayrıntılı bir anlatım.
19 Nisan 2008, 22:47
tek kelime - süper
(:
19 Mayıs 2008, 04:27
Ellerinize sağlık, çok yararlı bir kaynak olmuş.