PDA

Orijinalini görmek için tıklayınız : Web 2.0 Tasarım Araçları



donanma44
17-08-2008, 03:22
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.

[Only Registered Users Can See Links]

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.

[Only Registered Users Can See Links]

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.

[Only Registered Users Can See Links]

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 ([Only Registered Users Can See Links]-border-radius) özelliğiyle de tamamen tarihe karışacağını düşünüyorum.

[Only Registered Users Can See Links]

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…

[Only Registered Users Can See Links]

6. Rozetler

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.

[Only Registered Users Can See Links]

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.

[Only Registered Users Can See Links]

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.



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.

[Only Registered Users Can See Links]



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.

[Only Registered Users Can See Links]


İyi Çalışmalar...