Evet nedir, ne deÄŸildir, nasıldır, kime aittir derken hepimiz öyle ya da böyle bir Web 2.0 havası yaşıyoruz. (ve farkında olmadan baÅŸkalarına da yaÅŸatıyoruz) Web 2.0 nedir veya nasıl bir olgudur tartışmasına girmek deÄŸil amacım. Sadece kendi bakış açımdan bu oluÅŸuma yaklaÅŸmak. Web 2.0′ın bizlere tasarım alanında büyük bir yol katettirdiÄŸi aÅŸikar. Tabi bunda kesinlikle Css ve Xhtml’nin katkılarını unutmamak gerekir. Semantik kod yazımı ve bu yöndeki iÅŸleyiÅŸ Web 2.0′ın vazgeçilmezleri arasında. Ben bu yazımda Web 2.0 sitelerinin ortak özelliklerini ve böylelikle Web 2.0′ın genel karakteristik tasarım yapısını ortaya koymaya çalışacağım. Bir nevi Web 2.0 ne demek deÄŸil Web 2.0 neyi ortaya koyar yazısı olacak bizler için. Hemen baÅŸlayalım dilerseniz.

1) BÃœYÃœK ve KALIN FONTLAR

Evet Web 2.0′ın hayatımıza soktuÄŸu en büyük tasarım deÄŸiÅŸikliklerinden birisi de “Büyük Fontlar”. Büyük fontla yapılan baÅŸlık ve duyurular; nedense daha çok ilgi çektiÄŸinden midir yoksa diÄŸer web sitelerinin bunun bir kural olduÄŸunu düşünerek yaptığından mıdır bilinmez birçok sitede görmeye alıştığımız bir durum oldu. Büyük fontların kullanılması elbetteki hepimizin hoÅŸuna gidiyor ve bunu çokça yapıyoruz. Ä°ncelemede bulunacağınız sitelerin birçoÄŸunda vurgulanması istenen alanların büyük ve kalın fontlarla yazıldığını göreceksiniz. Açıkçası daha küçük metin boyutlarıyla yazılan yazılarımız kaybolup gidiyordu. Bunun yerine benimsenen büyük ve kalın fontla yazı örnekleri birçoÄŸumuzun daha çok hoÅŸuna gidiyor sanırım. Kalın fontları birçok sitenin logo tasarımında da kullandığını söylemeden geçmeyelim. Özellikle bir kuralmış gibi birçok büyük site logo ve grafik tasarımını hayata geçirirken elindeki fontun “bold” versiyonunu kullanmaya özen gösteriyor.

2) SADELÄ°K

Sadelik, sadelik, sadelik. Sadece bu kelime anlatıyor sanırım Web 2.0′ın bizlere neler sunduÄŸunu. Son dönem webinde gördüğünüz birçok site sade tasarım ve özellikleriyle dikkati çekiyor. Less is more, (az daha çoktur) felsefe olarak dalga dalga yayılıyor günümüz web uygulamalarında. Bu akımdan etkilenen birçok site anasayfalarını daha sade ve kullanışlı hale getirmek için kolları sıvıyor. Artık kanıtlandı ki kullanıcılar herÅŸeyin birbirine geçtiÄŸi, tüm navigasyonların site geneline yayıldığı siteler yerine daha sade herÅŸeyi bir çırpıda anlatabilen siteleri tercih ediyorlar. Bu özelliÄŸi bir ticari sitede düşünecek olursanız, günümüz bilinçli web kullanıcısı birçok menüde boÄŸuÅŸarak ürünü almak yerine daha sade ve sadece anlatılmak istenenin anlatıldığı siteyi tercih ediyor.

3) SADE MENÜ VE NAVİGASYONLAR

Sadelik akımının bulaştığı bir noktada web sitelerimizde kullandığımız navigasyon ve menüler. Birçok sitede menülerin ve navigasyonların olabildiğince sade tutulduğuna dikkat etmişsinizdir. Sade menü ve linklerin hem sayfanın açılış hızını etkilemesi hem de anlatılmak istenen şeyi daha kolay anlatması bakımından tercih edildiğini söyleyebiliriz. Ayrıca metin bazlı navigasyonlara da büyük bir rağbet var ve birçok site salt metin tabanlı linkler ile navigasyonlarını oluşturuyorlar. Navigasyonlar ile ilgili bir diğer önemli hususta artık vertikal (dikey) navigasyonlardan ziyade daha çok horizontal (yatay) navigasyonların tercih ediliyor olması. Bunun nedeni olarak yatay menülerin daha fazla alana sahip olduğunu ve birçok linkin gösterilebildiğini söyleyebiliriz.

4) CENTRAL VE LIQUID TASARIMLAR

Central (yani orta hatta olan) siteler ve bu yöndeki tasarımlar artık daha çok tercih edilir oluyor. GeliÅŸen Css ve Xhtml düzeyiyle artık tasarımlarımızı ister belli bir piksel ölçüsünde istersek yüzde olarak belli bir alana sınırlayabiliyoruz. Bu sınırlamayı yaparken de klasik <div align=”center”> gibi ortalama etiketleri yerine artık #wrap {margin:0 auto;} türü css kodlamaları iÅŸimizi büyük oranda kolaylaÅŸtırıyor. 700-800 piksel arasında olan ve ortalanmış sayfa tasarımları genel görünüm itibariyle çok hoÅŸ duruyor net üzerinde. Buna mukabil Liquid (sayfa geneline yayılmış) tasarımlar da yine Css güzellikleri kullanılarak her çözünülürlükte aynı görüntüyü elde etmemizi saÄŸlayarak kullanıcılara büyük kolaylıklar sunuyor. Bana sorarsanız 700-800 piksel arası ve ortalanmış bir sayfada gezinti yapmayı tercih ederim.

5) Ä°KONLAR, BUTONLAR VE ETÄ°KETLER

Web 2.0 bir bakıma bilginin kolay ulaşılır olması ve kısa zamanda çok daha fazla bilgiye ulaşmak üzerine kurulu. Şüphesiz bunu bize sağlayan en büyük yardımcılarımızdan birisi de web ikonları ve etiketler. (stickers dediğimiz ve daha önce nasıl yapılacağına dair bir makale ile anlatmaya çalıştığımız uygulamalar) Birçok sitede (ve bu sitede de) etiketler, yıldızlar, faviconlar, mini ikonlar, piksel ikonlar kullanılıyor. Bu ikonlar kullanıldığı yer ve duruma göre kullancıya belki de okuyacağı bir paragraf yazıyı anlatabiliyor. Örnek vermek gerekirse Rss ikonuna yabancı bir insan belki farklı kullanılmış bir Rss butonunu tanımayıp sitenin Rss özelliğini es geçebilir, ancak kullanılan bir yemek yiyen adam ikonu bazen kullanıcının ilgisini daha çok çeker ve Rss özelliğini keşfetmesine yardımcı olur. (Bu özelliği kullanmak isterdim açıkçası çünkü birçok sitede bu tarz şeylere rastlıyorum ve çok hoş resimler yakalıyorum) Bununla birlikte günümüz Blog kasırgasında kullanılan yorum ve header ikonları, tarih ikonları, kategori ikonları birçok sitede görmeye alıştığımız özellikler. İkonları ve etiketleri küçük ama büyük işler başardığından dolayı seviyoruz sanırım. (Sevenler arasında bende varım, yüzlerce ikonum var ve bakıp bakıp hangisini kullansam diye düşünmeden edemiyorum :) Bunun dışında sitemizi simgeleyen ve bir bakıma bizi yansıtan Favicon kullanımı da web 2.0 ile birlikte hayli yaygınlaşmış durumda.

6) RENK GEÇİŞLERİ (GRADİENTS)

Gradient’i renk geçiÅŸleri olarak tanımlamayı uygun buldum. Çünkü gradient efekti bir renkten diÄŸer bir renge geçerken arada geçiÅŸ renklerinin kullanılarak hoÅŸ bir efekt oluÅŸturmaya dayanıyor. Söz gelimi webde en çok kullanılan gradient efektlerinden birisi yeÅŸilden beyaza doÄŸru tatlı geçiÅŸler. Gerek arkaplanda gerekse de sitemizin navigasyon ve içerik bölümlerinde gradientler göze hoÅŸ görünür bir sayfa yapısı yansıtmak adına bazen hayat kurtarabiliyor. Tabi gradient efektinin de kullanıldığı yer ve durumu önemli. Çünkü gradient efekti iki rengin geçiÅŸini saÄŸlıyor. Uyumlu renkleri yakalamanız gerekiyor aksi halde bu efekti uygulayacağım derken sitemizin genel renk bütünlüğünü bozabiliriz. Css galeri sitelerinde veya Web 2.0 kaynak listelerinde göreceÄŸiniz birçok site bu efekti ucundan kıyısından bir yerinden kullanmıştır. Çok baÅŸarılı örnekler de görmek mümkün.

7) RENKLER

Renkler konusunda okuduğum birçok makalede farklı renk tonlarının Web2.0 ile ön plana çıkarıldığını görüyoruz. Örneğin yeşil günümüz webinde en çok kullanılan renk sıralamasında başı çekiyor. Birçok büyük site yeşili kullanmaktan çekinmiyor. Yeşil rengin gözü ve zihni dinlendirdiğine dair bilgiler mevcut ancak web 2.0 için sadece yeşili baz almak bana kalırsa çok yanlış. Tüm renklerin ve uyarlamaların web 2.0 da yeri olduğunu söylemek daha doğru olacaktır. Mavi, Turuncu, Siyah, (özellikle siyahta şu sıralar büyük bir furya var ve yeni açılan birçok site artık siyah alanlara daha çok öncelik veriyor) Pembe, Kırmızı (kırmızı rengi de es geçmemek gerekir, özellikle beyaz ve kombinasyonlarında hoş görüntüler yakalanabiliyor) ağırlıklı olan renk grupları içinde. Tabi ki unutmamak gerekir ki renk uyumu sitemizin bütünlüğünü korumak adına en büyük etkenlerden birisi. Günümüz webinde dominant (baskın) renk uygulamasıyla destekleyici renkleri de kullanarak iyi bir görünüm elde etme şansınız oldukça yüksek. Hatta bu uyumu sağlayabilmek için internette birçok web sitesi oluşturulmuş; yazılarımızın, içeriğimizin hangi renkte nasıl duracağından tutun, en iyi uyumu belirlemeye kadar birçok işi yapıyorlar. Kısacası web 2.0 ile birlikte donuk renklerden kurtulup daha tatlı ve göze iyi gelen renkleri tercih ediyoruz.

8) SÄ°TE LOGOLARI

Site logoları da Web 2.0 furyasında deÄŸiÅŸimden nasibini alıyor. Logolarımızı artık daha sade ve web 2.0′ın genel özellikerini yansıtarak tasarlamaya özen gösteriyoruz. Yukarıda bahsettiÄŸim kalın ve büyük fontlar, gradient efektleri, yıldız ve etiket efektleri logolarımıza uyguladığımız efektlerin birkaçı. Bununla birlikte bazı firma ve sitelerin web 2.0 tarzı logolara geçmek için kendi logolarını revise ettiÄŸini de söyleyebiliriz. Bunun en yakın ve önemli örneÄŸi Mynet olsa gerek. Mynet kısa zaman öncesinde logosunu deÄŸiÅŸtirdi ve bana kalırsa web 2.0′a biraz daha uygun bir logo tasarımı yakaladı. (YiÄŸidi öldür hakkını yeme) Web 2.0 dizin sitelerinde inceleyeceÄŸiniz üzere logolar çok sade ve klasik biçimde duruyor. Sanki tek elden çıkmışlar gibi, ancak tek elden çıkma deÄŸil tek anlayıştan çıkma oldukları aÅŸikar. Söz gelimi SmashingMagazine’nin kullanıcılarına bir yarışma aracılığıyla tasarlattığı yeni logosunu ve katılımcı logoları görmenizi salık veririm. Ne anlatılmak istendiÄŸi sanırım orada daha iyi görülecektir.

9) YANSIMALAR (REFLECTÄ°ONS)

Evet artık neredeyse her sitede görmekte olduÄŸumuz yansıma efektleri özellikle metinlerde uygulandığında hoÅŸ görünümler elde etmemizi saÄŸlıyor. Yansıma efektleri günümüz webinde birçok sitede kullanılıyor. Photoshop ve benzeri programlarda yazılan metnin kopyasının farklı yöntemlerle yansımaya alınması birçok web sitesinde anlatılıyor. Ãœstelik tek başına da deÄŸil. Sticker ve gradient efektleri ile kullanılarak daha iyi bir sonuç elde etmemiz saÄŸlanıyor. Sadece metin gösterilen resimlerde deÄŸil, ikonlar, site logoları, içerik alanları gibi bölümlerde de yansımalar kullanılarak web 2.0′a layık görünümler elde etmek mümkün. Yansımalarla ilgili birçok örnek bulabilirsiniz internette.

10) AJAX KULLANIMI

Aslına bakılırsa Ajax hiçte yeni olmayan bir web teknolojisi fakat son dönem webinde sıkça kullanılmaya baÅŸlandı. Bu yüzden Ajax ile oluÅŸturulmuÅŸ birçok uygulama ve proje webde karşımıza çıkabiliyor. En basit örneÄŸiyle bloglarımızda kullandığımız yorumların ekleniÅŸi, yazılarımızın gösterimi sırasında bile Ajax destekli scriptlerden yararlanıyoruz. Ajax türevi sürükle bırak (drag-drop), navigasyon, uygulama artık birçok web sitesinde kullanılır oldu. Web 2.0′ın fonksiyonellik ve kullanışlılık ayağında Ajax’ın büyük bir payı olduÄŸunu söylersek sanırım hata etmiÅŸ olmayız. Söz gelimi bir alışveriÅŸ sitesinde ürünün alışveriÅŸ sepetine eklenmesi kullanıcıyı tıkla, ürünü gör, sepete ekle gibi zahmetlerden kurtarıp iÅŸini daha hızlı yapmasını saÄŸlıyor. Bununla birlikte birçok büyük site uygulama (API) bazlı tasarımlarda Ajax’ı tercih ediyor. (Ajax konusunda sanırım en iyi tavsiyem Ajax-TR.com olur size)

11) ETÄ°KET BULUTLARI (TAG CLOUDS)

Etiket bulutları çoğu sitede gördüğümüz ve kategorilerin, içeriklerin çok olandan az olana doğru sıralanarak bir bulut şeklinde gösterildiği uygulamalar. Çoğunlukla blog tarzı sitelerde kullanılmasına rağmen birçok forum sitesi de bu uygulamayı kullanıyor. Günümüzde kategori sıralamasından çok Etiket Bulutunun tercih edildiğini ve kullanıcılar tarafından daha fonksiyonel bulunduğunu söyleyebiliriz.

12) OVAL KÖŞELER

Artık keskin köşeli dikdörtgenler yerine Web 2.0 furyasıyla birlikte oval köşeli dörtgenleri tercih eder olduk. Oval köşeler gerçekten de sitemizde görünüm olarak büyük katkılar saÄŸlıyorlar. Gerek içerik gerekse de navigasyon alanlarında kullanılan oval köşeler web 2.0′ın kliÅŸe özellikleri arasına girmiÅŸ durumda. Webde inceleyeceÄŸiniz birçok sitede oval köşelerin kullanımını görebilirsiniz. (Oval köşeler hazırlamak için nacizane benim hazırlamış olduÄŸum Oval Köşeler yazısını da inceleyebilirsiniz)

13) KENARLIKLAR (BORDERS)

Kenarlıklar son dönemlerde çokça kullanılan özelliklerden birisi. Gerek içeriklerde gerekse de resimlerde kenarlıklar (border) kullanılıyor. Kalın kenarlıklar ve kenarlıklarda yapılan renklendirmeler sitede kullanıldığı alanda büyük bir vurgu yaratıyor. En çok kullanılan yerler ise sayfamızın saÄŸ, sol bölümünde görülen ve genellikle #wrap, body parametreleriyle kullanılan kenarlıklar ve resimlerde baÄŸlantılar olduÄŸunda kullanılan kenarlıklar. Açıkçası iki özellikte web 2.0′ı en iyi yansıtan özelliklerden. t’infection.com’da da saÄŸ bölümde yer alan Destek alanındaki resimlerdeki deÄŸiÅŸen resim kenarlıklarını görebilirsiniz.

14) ARKAPLANLAR

Arkaplanlar sitemizde çoğu zaman es geçtiğimiz özelliklerden birisidir. Ancak web 2.0 ile birlikte özellikle beyaz, gradient arkaplanlar tercih edilir olmuştur. Birçok sitede bu özelliği görebilirsiniz. Bunun dışında Texture (Doku) ve resim tarzı arkaplanları da görmemiz mümkün. Sitemizdeki genel renk bütünlüğünü korumak adına beyazın arkaplan rengi olarak tercih edilmesi ve beyaz alanın gerektiği yerde kullanılması web 2.0 havası veren birçok sitede görülen bir özellik.

15) ve STANDARTLARA TAM UYUM

Yukarıda sıraladığımız birçok özellik kullanılırken standartlara uyum gözardı edilmiyor. Belki de ençok dikkat edilen hususta bu olsa gerek. Bunca güzel web sitesinin tasarlanırken web standartlarına baÄŸlı kalınması aslında bu ÅŸekilde de çok iyi ve baÅŸarılı web sitelerinin tasarlanabileceÄŸine dair iyi bir örnek teÅŸkil ediyor. Web 2.0′ın vuku bulmasını saÄŸlayan W3C standartlarına baÄŸlı kalarakta iyi ve tam uyumlu bir web sitesi tasarımı yapmak hiçte zor deÄŸil. Bu yüzdendir ki yukarıda bahsettiÄŸimiz özellikleri kullanan web sitelerinin altında geçerli xhtml ve css linkleri göreceksiniz.

Rastgele Yazılar