Bu yazımızda sizlere ikonlarla ilgili bir web servisini tanıtacağım. İconza isimli bu servis ile kendi ikonlarınızı özelleştirip siteden indirebiliyorsunuz. Site size anasayfada verilen ikonların renk, arkaplan rengi, boyutu gibi özellikleriyle dilediğiniz değişikliği yapıp bu ikonları indirme fırsatı sunuyor. Bu değişiklikler sonucunda birbirinden güzel 70 ikona sahip olabiliyorsunuz. Dilerseniz özelleştirdiğiniz bir ikonun üzerine tıklayıp sadece onu indirme şansınız da bulunuyor. İkonların hem tek tek hem de topluca indirilebilmesi güzel bir seçenek olmuş. Açıkçası Iconza’dan neden bu kadar geç haberim oldu kendime kızıyorum. Servisi görüp denediğimde oldukça hızlı olduğunu ve basit yapısı sayesinde tüm kullanıcılara hitap edebileceğini gördüm. İkon arayışı içindeyseniz ve ikonlarınızda kendi renklerinizi istiyorsanız Iconza tam size göre.

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.

Hasan Yalçın abimiz Webrazzi Forum‘dan duyduğum üzere bir yazı dizisine başlamış. Ne de güzel yapmış. Yazı dizisinde Web 2.0′ın ne olduğunu bize en iyi anlatan “tasarımların” nasıl ve ne şekilde oluşturulacağına dair bilgiler veriyor güzel blogunda. (Bu arada hemen söyleyeyim Hasan abi tema tasarımını yenilemiş ve çokta güzel olmuş bana kalırsa) Hasan abi ilgili yazısında “Nedir bu Web 2.0 tasarımının trendleri” diyor ve bir güzel anlatıyor. Dizi bittiğinde kesinlikle arşivlenecek ve yıllar yılı saklanılacak nitelikte olacağa benziyor. Hatta ve hatta ilk 2 yazısı yayınlandı bile. Geç kalmayın ve Hızlı Linklere Buyrun. (Kendisinden izin almadan yayınladım bu yazıyı umarım bana kızmaz)
Hızlı Linkler: Hasan Yalçın | Web 2.0 Tasarım Rehberi

Bunlardan ilki tabiki de Css Thesis. Sanırım bu yolda ilk karşılaştığım ve bende farklı bir yeri olan sitedir. Görünümü ve kullanımının sadeliğiyle size sadece “galeri gösterimi” yapar. Daha fazlasını istiyorsanız başka sitelere gideceksiniz, ancak Thesis bana göre css galeri siteleri içerisinde en iyisi diyebilirim.

İkinci favori sitem ise, Css Mania. İyi bir galeri sistemi var ve MovableType ile oluşturulmuş bir site. Siteyi kazıdıkça yeni birşeylere rastlamanız mümkün.

Üçüncü favorim, Css Vault. Css Vault sanırım saydığım siteler içinde en çok “Web2.0″ olanı. Görünümü ve kullanımı ile her yönden bir Css galeri sitesinde olduğunuzu hatırlatıyor.

Bunların dışında elbette birçok galeri sitesi mevcut ancak benim en çok ziyaret ettiğim ve “birbirinden farklı siteler” bulabildiğim galeriler bunlar. Sanırım ömrümün bundan sonraki kısmı o galeri sitelerinden birine girmeye çalışmakla geçecek. Web tasarımının her zaman bir sanat olduğuna inanmışımdır, bu örneklerde benim ne kadar haklı olduğumu gösteriyor, çünkü herbiri bir “Sanat Eseri!”