Web 2.0 Tasarım Araçları

Web 2.0 Tasarım Araçları ( Hazır-Ücretsiz Kaynaklar)
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ğimiz kaynakları sizlerle paylaşmak istiyoruz.


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
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üyoruz.Ş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ğimiz 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ğimiz 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 biz sizlere kalite olanlardan bahsetmek istiyoruz.
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üyoruz. 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.



Şimdiye kadar web 2.0 sitelerinde gözlemlediğimiz tasarım tekniklerinden bahsetmeye çalıştık. Ve bu teknikleri kolay yoldan kendi tasarımlarımızda kullanmamızı sağlayan ücretsiz araçlara değindik. Umarım bu araçların arasında, işinize yarayacak olanlar vardır..

Web 2.0 eğitimi (Videolu)



Web 2.0, "Kullanıcı merkezli ve kullanım kolaylığı sağlayan yeni nesil internet sistemi" Bu yeni kavram doğrultusunda hazırlanan kısa Web 2.0 eğitimiyle hayatımıza gelecek olan yenilikleri öğrenebilirsiniz. Sizler için oluşturulan Web 2.0 temel kavramları, Google, Web tasarımı ve yeni standartlarının anlatıldığı kısa bir eğitim videosudur. Bu eğitim sizlere internet trafiğinin temel kavramlarıyla ilgili bilgileri aktarmayı hedefliyor. Bu sayede var olan web sitenizin trafiğini artıracak yöntemleri, ziyaretçinizi tanımayı ve onun için neleri nasıl daha iyi yapabileceğinizi de öğrenmiş olacaksınız. Şimdi kısaca Web 2.0 ‘ın ne olduğuyla ilgili kavramları çok kısa gözden geçireceğiz..(kobiegitim.com katkılarıyla..) İzleyin


Videolardaki içerik :


Web 2.0 Nedir?
Web 2.0 Avantajları
Web 2.0 Kavramları
Web 2.0'ın Amacı
Tarihsel Gelişimi
Bireyselleşme
Gelecek Nesil
Time
Zengin İçerikli Yeni Çağ
İçerik Paylaşım Platformları
Web 2.0 Servisleri
Hayatımızın Bütün Verisi
İnsanlar Sosyaldir
Bilginin Sosyal Oluşumu
Etiketler (Tag)
Tag ve Web 2.0: Ortak Bilinç
Web 2.0'ın Temel Yapı Taşları

İzleyin

Web 2.0 ve Web 1.0 Farkları

Web 1.0 ve Web 2.0'ı nasıl ayırt edeceğimiz konusunda Tim O'Reilly farkları şöyle formüle ettiklerini söylüyor:

Web 1.0 --> Web 2.0
DoubleClick --> Google AdSense
Ofoto --> Flickr
Akamai --> BitTorrent
mp3.com --> Napster
Britannica Online --> Wikipedia
kişisel web siteleri --> bloglama
evite --> upcoming.org and EVDB
domain name kuramı --> arama motoru optimizasyonu
sayfa görüntüleme --> tıklama başına maliyet
sayfa çevirme --> web servisleri
yayınlama --> katılım
içerik yönetim sistemleri --> wiki'ler
dizinler (sınıflandırma) --> etiketleme ("folksonomy")
yapışkanlık --> yazı satışı (syndication)

Web 2.0 Ödülleri

Web 2.0'ı ödüllendirmeden olmaz! 2007'de ödül alan Web 2.0 sitelerini http://www.seomoz.org/web2.0 adresinde bulabilirsiniz. Bunun yanında 2006 yılında ödül alan siteleri de görebilirsiniz!

Web 2.0 Çalışma Grubu

İngilizce yayın yapan http://web20workgroup.com/ adresinde de Web 2.0 konusunda pek çok kaynağa erişebilirsiniz...

Web 2.0 Validator

Bir sitenin gerçekten Web 2.0 olup olmadığını nasıl anlarsınız? Sizin yerinize http://web2.0validator.com/ bunu yapıyor! Siz sadece adresi yazın ve saniyeler içinde sonucu görün!

Web 2.0 Expo

O'Reilly Media ve Techweb'in ortaklaşa kurduğu www.web2expo.com sitesinde Web 2.0 fuarlarının ve konferanslarının duyurularını bulabilirsiniz.

Web 2.0 Videosu - 2

Web 2.0 Siteleri

Pek çok Web 2.0 web sitesini tek bir resimde görmek mümkün:




Web 2.0 Videosu

Youtube'da gördüğüm bu video Web 2.0'dan bahsediyor...


Web 2.0 Zirvesi Başlıyor!

2008 yılında gerçekleştirilecek Web 2.0 konferansı ile ilgili bilgi vermek istiyorum. Bu haberi http://www.web2summit.com/ adresinden aldım. Web 2.0 zirvesi 5-7 Kasım 2008'de San Francisco, California'da yapılacak. Zirve davetiyeleri tükenmiş durumda. Sitedeki "Invitation Information" bölümünde bunu görebilirsiniz. Zirvenin sponsorları da bir hayli ilgi çekici:

Platinyum sponsor: Nokia!
Altın sponsorlar: Adobe, Aol, eBay, hp, Microsoft, dell gibi devler ve diğerleri.

Sponsorlara da bakınca zirvenin ve Web 2.0'ın ne kadar önemli olduğunu anlamak mümkün!

Web 2.0 Dünya Örnekleri

Aslına bakarsanız internet kullanımının yaygınlaşmasıyla birlikte Web 2.o'a verilen önem de bir hayli artmış durumda. Buna bağlı olarak yapılan yatırımlar ve hayata geçirilen projeler de ağızlarımızı açık bırakmış durumda! Son zamanlarda satılması ve bir anda patlamasıyla ünlü bazı siteleri örnek olarak gösterebilirim:
Youtube

Flickr

eBay

ve daha pek çok site... Facebook, Wikipedia, Blogger, last-fm...

Web 2.0'ı Dinleyelim!

İnternetin sunduğu güzelliklerden bir diğeri olan Podcast aracılığı ile Web 2.0 nedir, ne değildir bir de Mehmet Nuri Çankaya'dan dinleyelim!

Web 2.0 Türkiye Örnekleri

Vikipedi'de gördüğüm bu başlığa burada da değinmek istiyorum çünkü konunun anlaşılması açısından gayet güncel örnekler olacağı inancındayım.

Türkiye'de Web 2.0'a örnek verilebilecek siteler şöyledir:



Zurna


Fazla Mesai

Web 2.0 Nedir?

Pek çok kez Web 2.0 terimini duymuş ya da herhangi bir yerde görmüşsünüzdür. Web 2.0'ın ne olduğunu aslında siz de biliyorsunuz ama farkında değilsiniz :).




Web 2.0, internet kullanıcılarının ortaklaşa ve paylaşarak bir web sitesi oluşturması demektir. En temel tanımı budur. İkinci nesil internet hizmetlerini içerdiği için bu terime 2.0 eklenmiştir. Pek çok teknoloji uzmanı da bu terimin tam tanımını yapamamaktadır. Ancak zihinlerde oluşturduğu şey tam olarak budur!



Bu kelime 2004 yılından bu yana O'Reilly Media tarafından bu şekliyle kullanılmaya başladı.



Vikipedi'de yer alan Tim O'Reilly'e göre Web 2.0'ın kısmen tanımı şöyledir: "Web 2.0 bilgisayar endüstrisinde internetin bir düzlem olarak ilerlemesiyle bir işletme devrimi ve bu düzlemin kurallarını başarı için anlamaya çalışmaktır. Bu kurallar arasında başlıcası şudur: Ağ etkilerini daha çok insanın kullanabilmesi için programlar kurmak."


Tanımda da görüldüğü gibi amaç ağ etkilerini daha çok insanın kullanabilmesi için programlar kurmaktır.