eburhan.com

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

benzer yazılar: