Web 2.0 Tasarım Araçları

Konu: Web 2.0 Tasarım Araçları Paz Eyl. 13, 2009 10:04 am

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 [Linkleri görebilmek için üye olun veya giriş yapın.] ve [Linkleri görebilmek için üye olun veya giriş yapın.] araçları da epey bir işe yarayabilir. Ayrıca Photoshop kullanıcıları [Linkleri görebilmek için üye olun veya giriş yapın.] 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 [Linkleri görebilmek için üye olun veya giriş yapın.] aracını kullanabilirsiniz. Ek olarak [Linkleri görebilmek için üye olun veya giriş yapın.] paketiyle de butonlar hazırlayabilirsiniz.

[Resimleri görebilmek için üye olun veya giriş yapın.]

yazımda da bahsettiğim 3. Arkaplanlar

Web 2.0 ile birlikte web sitelerinin önplanında bu kadar değişiklik yapılmışken arkaplan da unutulmadı tabi [Resimleri görebilmek için üye olun veya giriş yapın.]
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 [Linkleri görebilmek için üye olun veya giriş yapın.] veya [Linkleri görebilmek için üye olun veya giriş yapın.]
ile kolayca hazırlayabiliyorsunuz. Eğer ki yatay şeritlere göre gözü
daha az yoran renk geçişli arkaplanlardan kullanmak isterseniz [Linkleri görebilmek için üye olun veya giriş yapın.] pakedini indirebilirsiniz.

[Resimleri görebilmek için üye olun veya giriş yapın.]

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 [Linkleri görebilmek için üye olun veya giriş yapın.]
özelliğiyle de tamamen tarihe karışacağını düşünüyorum. Şimdilik,
yuvarlak köşeli kutular için farklı tekniklerden faydalanmamız
gerekiyor. [Linkleri görebilmek için üye olun veya giriş yapın.], [Linkleri görebilmek için üye olun veya giriş yapın.] ve [Linkleri görebilmek için üye olun veya giriş yapın.] araçları resim, css ve html tekniklerini kullanıyorken [Linkleri görebilmek için üye olun veya giriş yapın.] ve [Linkleri görebilmek için üye olun veya giriş yapın.] araçları da Javascript tekniğini kullanıyorlar.

[Resimleri görebilmek için üye olun veya giriş yapın.]

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 [Linkleri görebilmek için üye olun veya giriş yapın.] renk geçişli nesneler oluştururken epey bir yardımcınız olacaktır. Bununla birlikte 3. maddede bahsettiğim [Linkleri görebilmek için üye olun veya giriş yapın.] pakediyle de çeşitli nesnelere renk geçişleri uygulayabilirsiniz.

[Resimleri görebilmek için üye olun veya giriş yapın.]

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. [Linkleri görebilmek için üye olun veya giriş yapın.] ve [Linkleri görebilmek için üye olun veya giriş yapın.] tavsiye edebileceğim kaynaklar.

[Resimleri görebilmek için üye olun veya giriş yapın.]

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 [Linkleri görebilmek için üye olun veya giriş yapın.]
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. [Linkleri görebilmek için üye olun veya giriş yapın.]

[Resimleri görebilmek için üye olun veya giriş yapın.]

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. [Linkleri görebilmek için üye olun veya giriş yapın.], [Linkleri görebilmek için üye olun veya giriş yapın.], [Linkleri görebilmek için üye olun veya giriş yapın.] bunlardan birkaçı… Ayrıca [Linkleri görebilmek için üye olun veya giriş yapın.] ve [Linkleri görebilmek için üye olun veya giriş yapın.] isimli simge arama motorları da istediğiniz bir simgeyi ararken işinizi oldukça kolaylaştıracaktır.

[Resimleri görebilmek için üye olun veya giriş yapın.]

ve 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. [Linkleri görebilmek için üye olun veya giriş yapın.], [Linkleri görebilmek için üye olun veya giriş yapın.] ve [Linkleri görebilmek için üye olun veya giriş yapın.] bu amaçla hazırlanmış renk paletlerinden…

[Resimleri görebilmek için üye olun veya giriş yapın.]

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 [Linkleri görebilmek için üye olun veya giriş yapın.] sayfasına bakabilirsiniz. Ücretsiz olarak yazı tipi indirmek içinse [Linkleri görebilmek için üye olun veya giriş yapın.], [Linkleri görebilmek için üye olun veya giriş yapın.] ve [Linkleri görebilmek için üye olun veya giriş yapın.] gibi kaynakları kullanabilirsiniz.

[Resimleri görebilmek için üye olun veya giriş yapın.]

Kaynak: [Linkleri görebilmek için üye olun veya giriş yapın.]

Konu: Geri: Web 2.0 Tasarım Araçları Çarş. Ocak 13, 2010 8:52 pm

Güzel

Konu: Geri: Web 2.0 Tasarım Araçları Salı Ekim 12, 2010 10:53 am

saoLL

» http://king-tasarim.forum.st/ Tasarım Sitesi
» ►Css Tasarım : Mavi Tasarım (hayırlı uğurlu olsun)
» Beklenen V2 Tasarım Çıktı Websteam v2 Tasarım
» AkesintiErkan V3 Tasarım (Süper Bir Tasarım)
» website gri tasarım