Web 2.0 Uzerine

Herkez Web 2.0′dan Bahsediyor!!Bugünlerde sektörümüzde ki herkes Web 2.0’dan bahsediyor. Bundan birkaç ay önce bende bu konuyla ilgili yazı yazmıştım. O günden bu güne, milyonlarca kişi, kendilerince tanımlamaya başladı Web 2.0’i. Bazıları AJAX ve AJAX ürünleri Web 2.0 derken, bazıları ise Web 2.0’in İnternet ve Web içinde yeni bir dönem açtığından bahsediyor. Peki nedir bu Web 2.0? Ne değişti? Eskiden yaptıklarımızdan çok mu farklı?Web 2.0 için benim tanımım, kullanıcıların bir web uygulaması içindeki olumlu katılımcılığı ve yazılımcıların başkalarının uygulaması içindeki özgürlüğü. Yani kontrolün en az olduğu donem.

Aranızda İnternet’i 6-7 seneden fazla kullanan varsa hatırlayacaktır Infoseek, Excite ve diğer çok popüler portallari. O dönemde her şey kullanıcıyı kontrol etmekte yatıyordu. Yani, kullanıcıyı içine çekmek ve her isteklerine (!) cevap vermek ve kontrolü elde tutmak. Bunun ne kadar yanlış bir model olduğunu herkes çok kısa bir zamanda anladı. Google geldi ve işte size arama kutusu, yazın ve istediğinizi, istediğiniz şekilde bulun eğer memnun kalırsanız yeniden gelin dediler. “Kendimi Şanslı Hissediyorum” arama düğmesi bence Web 2.0’i başlatan ilk yenilikti. Bu düğme, kontrolün bizim elimizde olduğunu, Google’un ikinci sayfasını bile görmeden, başka yerlere gidebileceğimizi hatırlattı bize.

Web 2.0, kontrolün bittiği bir dönem. Web 2.0, AJAX, CSS, RSS ya da aklınıza gelebilecek herhangi bir teknoloji ile ilgili değil. Web 2.0, kullanıcı deneyimi ile ilgili. Bilginin nasıl, ne şekilde kullanıldığı, paylaşımın ve katılımcılığın ne şekilde dünyamızı şekillendirdiği ile ilgili.

Bunu size bir örnek ile açıklamak istiyorum. Yaklaşık bir hafta sonra, Boston’da düzenlenecek User Interface 10 Konferansına katılacağım. Kısa ismi ile UI10. Burada yazdığım link, Technorati tarafından birkaç saat sonra indekslenecek. Kullanılabilirlik konusunda araştırma yapan bir kişi bu ve diğer blog yazılarına ait linkleri Technorati’de bulup, okumaya başlayacak. UI10 sitesini daha sonra ziyaret etmek için del.icio.us sitesine ekleyip, UI10, konferans ve kullanılabilirlik diye etiket koyacak. Bir başkası del.icio.us’da bakınırken, bu linki bulup, siteyi ziyaret edecek. Eğer gördükleri hoşuna giderse, konferansa kendisi de katılacak. Katılamadan önce yapacaklarını ve bununla ilgili konuları BackPack’ine koyacak. Konferanstan sonra, yaşadıklarını, öğrendiklerini bloguna yazacak, Technorati bunu indeksleyecek. Çektiği resimleri Flickr’a koyup UI10 diye etiketleyecek. Diğer katılımcılar ya da katılmayıp neler olduğunu görmek isteyenler, yazılanları Technorati ve/veya del.icio.us’da bulup okuyacak, yorum yazacak, Flickr’da ki resimlere bakacaklar. Bütün bunlar olurken, UI10 konferansını düzenleyenler, konuşmacıların podcastlarını Odeo’ya koyacaklar. İşte bu aşamada eğer siz, bu konferans ile ilgilenen bir yazılımcı iseniz, hiçbir ekstra içerik yazmadan bütün bu sitelerin sunduğu API’lerden yararlanarak yepyeni bir site yaratabilirsiniz. Bu sitede konuşmacıların podcastları (Odeo), katılımcıların çektiği resimler (Flickr), bu konferans hakkında yazılan yazılar (Technorati), bu konferansın yapıldığı yerin haritası (Google Map), konuşmacıların çıkardığı kitaplar (Amazon) ve katılımcıların yaşadığı deneyimleri paylaşabileceği bir toplantı (Upcoming ya da TadaList) ve şu an nerede oldukları (Plazes) ve bir daha ki sene UI11’e katılmak isteyenlerin listesi (43things) yer alabilir. Hem de kendi kendini oluşturan, güncelleyen ve birçok kişinin katilimi ile oluşan bir site.

İşte bence Web 2.0 bu. Yani statik, bireysel ve kontrolcü bir donemden, dinamik, katılımcı ve özgür bir doneme.

Son zamanlardan bu konu ile ilgili okuduğum en güzel yazılardan birini Steven Johnson yazdı. Okumanızı tavsiye ederim.

Bir başka tavsiye ise, Doug Bowman’in Web Essential 2005 Konferansında verdiği inanılmaz güzellikteki sunumu. Mutlaka dinleyin.

REHBER

Bu rehberde, alt yapı çalışmalarından bağımsız olarak sadece tasarım kriterlerini ele alacak olsak da iyi bir web 2.0 sitesi ortaya çıkarmak için öncelikle CSS ile kodlama yapmanın temel taşlarını biliyor olmak gerekiyor.
CSS ile kodlama kutular mantığı üzerine oturtulduğu için bizde tasarımlarımızdaki sayfa düzeni ve kolon yapısını buna benzer kutular mantığına uygun halde tasarlamalıyız.
Web 2.0 trendinde amaç aslında hemen her web sitesinin ilk amacı olduğu gibi, bilgiye en kolay en sade ve çabuk şekilde ulaşmak.
Bunun için, kullanıcıların ulaşmak istedikleri bilgiye en çabuk ve kolay şekilde ulaşmasını sağlamak da Web Tasarımcısının birincil görevi haline geliyor.

Web 2.0 tasarımları CSS kodlaması içerdiğinden bu tablosuz yapı içerisinde oluşturulacak kolonlarında bu tip sayfa planlarına göre hazırlanması hem kodcuların işini kolaylaştıracak hem de ürettiğimiz sayfaların anlaşılabilirliğini artıracaktır.

Basit tasarımlar hem kullanıcıların sunmak ve dikkatini çekmek istediğiniz elementlere ilgisini yoğunlaştırır hem de karmaşık olmadığı için siteye odaklanmasında fayda sağlar.

Web 2.0 tasarımlarda kullanılabilecek bazı basit sayfa planları şu şekildedir.

Tasarımlardaki kolon sayısının azlığı ve kolay anlaşılabilir olması açısından oldukça önemli bir ayrıntı. 4 kolondan ve içerisine serpiştirilmiş bilgilerden oluşan bir yapı ile 2 kolondan oluşan ve içerisine doğru yerleştirilmiş bir içeriğin kullanıcı tarafında yaratacağı fark gerek zaman harcama gerekse anlaşılabilirlik açısından çok büyük fark yaratacaktır.

Basit Sayfa Yapısı Oluşturmanın Yolları

1. Öncelikle sayfa içerisinde kullanılan yada kullanılması düşünülen tüm gereksiz görsel öğelerden kurtulmak.
2. Sayfa içerisinde aynı amaca daha hızlı nasıl ulaşılabileceği konusunda alternatif çözümler üretmeye çalışmak.
3. Gözleri yormayacak, kullanıcıyı içine alan renkler kullanmak.
4. Basit cümle ve görsel elementler ile kullanıcı ile iletişim kurmak.
5. Yoğun bilgi ve dataları, sade ve seyrekleştirilmiş bilgiler halinde sunmak.

Web 2.0 Tasarımlarda içerik yine yukarda saydığımız amaçlara uygun olarak yerleştirilmeli. Navigasyon, alt navigasyon elementleri üst ve yan kolonlarda yer alırken, kullanıcının önce ilgisini çekmesi gereken bilgiye odaklanmasını sağladıktan sonra diğer içeriği gittikçe seyrekleşen ve basit şekilde sunulması işimizi kolaylaştıracaktır.

Eğer blog türü bir tasarım söz konusu ise bu yerleşim zaten hemen hemen standart olacaktır, ancak kurumsal bir çalışmada, hangi bilgilerin öne çekilerek sunulacağı, ve bu bilgilerin yoğunluğu konusunda mutlaka bir ön çalışma yapılmalıdır.

İyi bir tasarımcı olmanın en önemli ayrıntılarından biri, tasarımcının yaptığı tasarımlara kullanıcı gibi düşünerek, kendini onun yerine koyarak ve onun gözünden bakarak değelendirebilmesi ve eserinde kullanacağı elementleri bu yönde geliştirebilmesidir.

Yukarıda tıklayarak ulaşabileceğiniz örnek siteler, basit, az kolonlu ve içeriği yumuşatılarak kullanıcıya hizmet eden bazı web siteleri.

Web 2.0 bazlı tasarımlarda, sayfa planının en önemli elementlerinden biride navigasyon veya diğer daha bilindik tanımıyla menü yapısıdır.
Peki bu yeni trendde görsel öğeler nasıl şekil alıyor inceleyelim.

Öncelikle her zaman tekrarladığımız ve tekrarlayacağımız gibi, Web 2.0’da en önemli özellik olan, sadelik, basitlik, ve kolay anlaşılabilir olması, ortaya çıkaracağımız navigasyon yapısının temel taşlarını oluşturuyor olacak.

Bu trendde navigasyonun, genel tasarım kuralı geniş, kalın, temiz ve ayrıştırılabilir olması, aynı zamanda yazı içerisinde kullanılan linklerin normal yazıdan mutlaka farklı olması gerekmektedir. Konu ile ilgili 2 örnek tasarım aşağıda.

Navigasyonun Temel Taşları
Basit bir navigasyon uygulamasında dikkat edilmesi en önemli ayrıntılar

1. Kullanıcının nerede bulunduğunu ifade etmesi.
2. Bulunduğu yerden gidebileceği yerleri açıkça göstermesi.
3. Bunların haricinde mevcut farklı opsiyonları sunması.

Alışveriş merkezlerini bilirsiniz, alışveriş merkezleri planlanırken en önemli ayrıntı sizi içine alarak gezdirmesidir. Doğru yapılanmış bir alışveriş merkezinde gezmeye başladığınızda, sonunda fark etmeden hemen hemen tüm mağazaların vitrinlerine bakmış olduğunuzu farkedersiniz. Ya da sık ziyaret ettiğiniz bu tip mekanlarda zaman zaman yürüyen merdiven yada asansörlerin yönlerinin değiştirilmiş olduğunu hiç fark ettiniz mi ? Tabiki amaç tüketiciyi daha çok gezdirip ürün almasını sağlamak.

Şüphesiz web sitelerinde ana amaç kullanıcının her sayfaya girip çıkmasını sağlamak değil, ancak doğru yapılanmış bir site haritası ve menü planı uygulayarak istediğiniz tüm verileri yada içeriği sitenize uğramış bir kullanıcıya kolayca okutabilirsiniz.

Görsel Elementler
Menümüzün görsel uygulamasında dikkat edilmesi gereken ayrıntılar

1. Navigasyonun ana içerikten ayrı, kopuk bir şekilde sunulması.
2. Navigasyonda farklı renk ve ton kullanımı ile dikkat çekmek.
3. Geniş, kalın ve temiz yazı karakterleri kullanmak.

Navigasyona ait olan öğelerin ki bunlar ister link ister menü ister ikincil menü olsun mutlaka içerikten görsel olarak ayrıştırılması gerekmektedir.

Web 2.0 stilinde tasarımlarda korkmamanız gereken tek olgu tasarımlarınızdan gereksiz görsel öğeleri, gölgeleri, tamamlayıcı olduğunu düşündüğünüz bazı yardımcı grafik parçalarını, sadece görsel şenlik katmak için eklemiş olduğunuz elementleri tasarımdan söküp atmak olmalı.

Bunun için en iyi egzersiz eski stilde hazırlamış olduğunuz tasarımdan, sözünü ettiğimiz elementleri atarak, daha sade, anlaşılabilir ve kolay hale getirmeyi denemek olmalı. Bir kez deneyin ve aradaki farkı görün, o zaman yeni nesil tasarım trendlerine nekadar çabuk uyum sağladığınızı sizde farkedeceksiniz. Hemde sitenize güzellik kattığını düşündüğünüz bir sürü görsel öğeyi çöpe atarak!

Bu arada Web 2.0 trendlerinden söz ettiğimizi unutmadan, sitenin içeriğinde sunulan verilere göre, bir etiket bulutu (Tag Cloud) şeklinde de navigasyon yapısı oluşturarak tasarımınıza interaktivite katabilirsiniz. Bu yöntem ile sitenizde karmaşık içeriğe, kullanıcıların ilgi alanlarına göre yönlendirme yapabilirsiniz. Web 2.0’ın önemli ayrıştırıcılarından biri olan etiket bulutları yeni dönem tasarımlarda çok önemli bir açığı kapamakta.

Ajax yada benzeri teknolojiler kullanarak açılır kapanır içerik ve navigasyon alanlarıda oluşturmak bazen tasarımlaranızda yaşayabileceğiniz olası yer darlığı problemlerine çözüm getirecek bir alternatif olarak aklınızda kalmalı.

Bu arada genel tasarım kriterleri olarak birkaç bilgi eklemek gerekirse unutmayın ki sitenizde her link ve ulaşılabilir bölümü belli noktalara sıkıştırmak zorunda değilsiniz. Örneğin iyi düzenlenmiş bir header (Üst Kısım) footer (Alt Kısım) ve yan kolon (Side Bar) ile kullanıcılarınıza iyi bir gezinti sistemi oluşturabilirsiniz. Örneğin piyasaya yeni çıkmış bir ürünün detay bilgilerini üst menüde oluşturacağınız ana başlıklarda, içerikten alacağınız parçaları ana sayfanın içerik bölümünde, firma bilgileri iletişim ve telif hakları gibi bilgileride alt kısımda oluşturacağınız bir menü bar’da sunmanız çok daha işlevsel olacaktır. Oysa tüm bu bilgileri üst veya yan menüde sıkışık olarak sunmak, tek bir amaca, oda kullanıcının sitenizde hiç biryeri ziyaret etmeden kaçmasına sebep olacaktır.

Web 2.0 Stilinde kullanabileceğiniz veya ilham alabileceğiniz bazı kaynaklar ise Dynamic Dirve, Css ShowCase, Free Css Nav, Free Vertical Menus.

Bu kaynaklara göz atarak sitenize uygulayacağınız menü tasarımları ve CSS tabanlı menüler hakkında fikir edinebilirsiniz.

Web 2.0 tarzı tasarımlarda öncelikle dikkat çeken kalın yada kalınlaştırılmış, iri yada irileştirilmiş, mutlaka grafiksel bir görsel yanında metinlede desteklenmiş logolar.
Peki niçin bu iri yarı logolar moda oldu ve ne amaçla nerelerde kullanılmalı ?

Logo bir firma yada bir web sitesinin çoğunlukla ilk ilgi çeken nesnesidir. Logosu basit anlaşılır ve amacına uygun tasarlanmış firmalar genellikle önce ve kolayca hatırlanan, kendisini ifade edebilen ve bu anlamda öne çıkan kuruluşlar olmakta.

Web 2.0 sitelerinde ana amaçlardan biri anlaşılabilir olmak ise bu işe önce kendinizi ifade eden logodan başlamak gerek şüphesiz. İnce, cılız grafiksel olarak anlam taşımayan logolar artık hiç moda değil. Yeni nesil logoların ilk amacı, ilk bakışta kurumsal kimliği yansıtmak, biz kimiz yada biz buradayız ve buyuz imajının altını çizmek. Yeni nesil Web 2.0 tarzı logolara örnekler aşağıda.

Gördüğünüz gibi hepsi kalın fontlar ile rahat anlaşılır ve akılda kalıcı şekilde tasarlanmış. Daha önce görevli olduğum web ajansında Vakıfbank’ın yeni taslak tasarımları için biz tasarımcılardan logo üzerinde kurumsal kimliği zedelemeyecek ancak web üzerinde kullanımı şık olacak bir çalışma rica edilmişti. Aşağıdaki örnek Vakıfbank’ın yeni trendlere ne derece sıcak baktığının bir göstergesi, eski hali ve yeni web sitesinde kullanılması arzulanan hali arasındaki azımsanmayacak bir fark mevcut.

Yeni trendlere uygun tasarlanan bir sitede eski nesil bir logoya sahip olsa bile, kurumsal kimliği bozmayacak minör oynamalar, çeşitli parlaklık ve gölge efektleri kullanarak mevcut logoyu sadece web ara yüzünde kullanılacak tarzda geliştirmek mümkün. Hatta bu trendde bir çalışmanız var ise bunu denemekten çekinmeyin. Unutmayın kurumuzun kalitesi ve vizyonunu bir bakışta, başka hiçbir şey anlatmadan sunan tek element logonuzdur.

Bu arada bir tasarımcı olarak belirtmekte fayda varki logolarda zaman içinde günün trendlerine uyum sağlamak zorundadırlar. Günümüz dünyası modern teknolojik ve global. Bunun farkına varıp resmederek kurumsal kimliklerini geliştiren firma ve web siteleri ise kazançlı çıkıyor. Fuji Film, bu firmalar arasında çarpıcı bir örnek, geçmişten günümüze FujiFilm logosunun evrimi ve bugün geldiği nokta yukarıda yazılanların adeta bir özeti.

Web 2.0 tarzı logoların nasıl üretileceğine dair bir çok site mevcut, ancak bu sitelere çokda itibar etmeden, kendi tekniğinizi ve stilinizi geliştirmek için bol bol egzersiz yapın, kısa süre içinde ürettiklerinizden sizde memnun kalacaksınız. Tasarımcının el çantası’nda da tanıtılan bir çok logo ve grafik tasarım, aynı zamanda tutorial sitesini sadece ilham almak veya gelişmeleri takip etmek için kullanın ve her zaman kendi yaratıcılığınıza güvenin.

Web 2.0 sitelerde metin kullanımı

Bundan birkaç yıl öncesinin tarzı bol bol küçük arial ve verdana fontlar ile kullanıcılara, kimi zaman uzun sayılabilecek metinler ile içeriği sunmaktı. Artık Web 2.0 ile bu modada tarihe gömüldü. Artık moda daha kolay anlaşılabilir kısa açıklamalar, kullanıcıya ana kaynağa kolayca yönlendirecek iri fontlar ile hazırlanmış yönergeler sayesinde hızlı ve kolay bilgi akışı.

İstanblog, Serhanlı Arçelik ve Yarışma Takip siteleri yeni nesil metin kullanımına oldukça iyi örnek olacak yerli siteler.

Sunum

Bu iri fontları kullanmanın tek dezavantajı, siteyi ziyaret eden kullanıcılarda “Yinemi bir web 2.0 sitesi” hissi yaratarak antipati uyandırması. Bununda önüne geçmek için bazı teknikler geliştirmeniz gerekmekte. Örneğin yukarıdan aşağıya önem sırasına göre eriyen yazılar, yada kullanıcıya iletmek istediğiniz önemli mesajı kalın ve büyük bir fontla belirtip dikkatini çektikten sonra kalan açıklamaları, normal büyüklükte yerleştirmek gibi.

37 Signals

Bu anlamda CSS’in tasarımlardaki gücünü ve kendine has özelliklerini kullanarak farklı browser yada farklı çözünürlüklerde kullanıcıları sıkmadan içeriğinizi sunmak en doğru yol. 36px boy verdiğiniz bir fontun 800×600 çözünürlükte dev gibi görüneceğini unutmamak gerek.

Aynı zamanda web 2.0 sitenizde mutlaka content yani içerik ayrı, diğer elementler için ayrı bir kolon oluşturmayı unutmayın. Yoksa bilgiye aç internet gezginlerini, dağınık bir masada, daha sofraya oturmadan kaçırabilirsiniz!

Web sitelerinde ve özellikle Web 2.0 sitelerinde az sonra örneklerini göreceğimiz zengin yüzey ve degrade kullanımının amacı şüphesiz tasarladığınız siteye görsel bir değer katmak, ve sunduğunuz içeriği daha lezzetli bir hale getirmektir.

Özellikle yeniden belirtmek gerekki, rehberimizde sadece Web 2.0 temasına sahip sitelerdeki tasarım kriterlerini inceyeleyerek, yeni nesil web sitelerinin nasıl tasarlanabileceği üzerinde duruyoruz. Bu noktada unutulmaması gereken web 2.0 sadece görsel değil aynı zamanda altyapı ve kullanıcı tarafındada bir çok yenilik getiren bir teknoloji.

Zengin Yüzeylerin Kullanımı

Gezip gördüğünüz bir çok Web 2.0 sitesinde göreceğiniz üzere, bu tip sitelerin genelde ortak özelliği yumuşatılmış 3 boyutlu dizaynlara yer verilerek daha kaliteli bir görünüme sahip, plastik renkli ve parlak ikon veya butonlar kullanılarak daha zengin bir hale getirilmiş olması.

Bu zengin yüzeylerin kullanımında önce butonlardan başlayalım. Aşağıda eski dostlarımdan birinin yeni sitesi dipucu.com‘un menu tasarımı var. Eski usül metin linklerden oluşan bir navigasyon kullanıyor olsa görüntü bu şekilde gözüküyor olacaktı. Oysa kendisine önerdiğim yeni wordpress temasını kullanmaya karar verince bir anda navigasyon çok daha çekici ve kullanılabilir hale gelmiş oldu.

Eurovision Şarkı yarışması sitesinde kullanılan butonlarda oldukça çekici. Navigasyonda kullanılan 3 boyut efekti, parlak yğzeyler ve renkler dikkatinizi çekmiştir. Bu noktada önemli olan ayrıntı rehberimizin ileriki bölümlerinde değineceğimiz renk kullanımı konusuna dikkat etmek, ve bu tip efektleri uygularken, deyim yerinde ise abartmamak.
Eski bir atasözü “Herşeyin azı karar, Çoğu zarar!” der. Bunu unutmayın!

Sabit renkli yüzeyler üzerinde yeralan içerikler ile degrade yüzeyler üzerinde yeralan içerikler arasında ilgi çekmesi bakımından farklar mevcuttur. Ancak bunları site tasarımı üzerinde uygularken çok dikkatli davranmak gerekir. Örneğin sitenin login ekranı renk geçişli bir yüzey üzerinde kullanmak doğru bir uygulama olabilirken, benzer bir yüzey üzerinde sıkça sorulan sorular benzeri bir metin uygulamak yanlış sonuçlar doğurabilir.
Bu anlamda tasarımcının üzerine düşen görev, sadece elindeki verileri önündeki şablona sığdırmak değil, aynı zamanda bu veri ve malzemeyi site içerisinde doğru yerlere, doğru görsel öğeleri kullanarak tasarlamaktır.

Kimi buton ve yüzeylerde 3 boyut etkisi yaratmanın önemli bir avantajıda, sayfayı düz ve tek boyutlu bir görünümden çıkarak kullanıcıya daha yakın bir hale getirmektir.

Degrade kullanımı

Bildiğiniz gibi iki farklı renk arasında tonlama yaparak geçiş yapmaya grafik dilinde degrade veya gradient adı verilmekte.

Bu tip yüzeyleri kullanmanın avantajıda yine siteye derinlik katmak olarak göze çarpıyor.
Degrade uygulamarda dikkat edilmesi gereken bazı ayrıntılar ise şu şekilde:

1. Özel grafiksel bir alan (Bir ürünün tanıtımı için o üründen kesit, 3 boyutlu bir obje v.b) yaratmayacaksanız, oluşturacağınız degrade geçişi iki renkten fazlasını taşımasın.
2. Geçiş yapmayı planladığınız renkleri aynı skala’dan hatta mümkünse aynı rengin farklı yada yakın tonlarından seçin. (Sarı-Kavuniçi, Kırmızı-Koyu Kırmızı, Gri-Beyaz v.b)
3. Degrade kullanacağınız alanı iyi belirleyin, geniş ve yüksek alanlara koyu renk geçişleri uygulamayın. Sitenin üst kısmına uygulanacak yumuşak bir degrade, tüm web sayfasına uygulanacak ağır bir renk geçişinden çok daha etkili ve ferah bir görünüm yaratacaktır.
4. Denediğiniz degrade çalışmaları eğer istediğiniz derinliği sağlamıyorsa zorlamayın, düz renklere geçin.
5. Degrade geçişlerinde ve derinlik verdiğiniz grafiklerde ışığın geliş yönünü tek bir yön olarak belirleyiptasarımızın her bölgesinde onu kullanın. Farklı geçişler kullanıcıları rahatsız ederek algılamada sorun yaratacaktır.

Yüzeylere uygulayacağınız plastik, parlaklık renk geçişi ve 3 boyutlu efektlerin nasıl yapılacağı hakkında bazı tutorial sitelerinden faydalanabilirsiniz.

• Web 2.0 Logosu Tasarlamak
• Metinlere parlak yüzey uygulama
• Parlak Butonlar
• Sade Parlak Buton Yapımı
• Degrade Nasıl Yapılır ?
• Vista Tipi Parlak Yüzeyler

Kısa bir ara verdiğimiz rehberimizde, Web 2.0 tipindeki tasarımlarda genelde son zamanların favorisi olan yansıma efekti ikon kullanımı ve flaş ” ya da patlangaç diyebiliriz” kullanımı ne derece önemli ve nerelerde nasıl kullanmalıyız konusunu işliyoruz.

Yansıma efekti ile en çok karşılaştığımız site şüphesiz Apple.com olmalı. Yansıma efektide tıpkı diğer zengin yüzey kullanımlarında olduğu gibi tasarladığınız siteye derinlik ve hareket kazandırmak ve modern bir görünüm sağlamak amacıyla kullanılır.

Genelde Web 2.0 tarzı sitelerde özellikle logolara verilen yansıma efekti ile gündeme gelsede genel olarak site içerisinde dinamik olmayan tüm objelerde kullanılabilir. Ayrıca okadar fazla logosu yansımalı site ortaya çıktıktan sonra bunun bir trendden çok sıkıntı verici bir hal aldığınıda belirtmek mümkün.

Ayrıca yine benzer efektlerin kullanıldığı plastik, yada metal görünümlü imajlar kullanmakta site içi görsel zenginliği artıracaktır.
Bu uygulamaların dozu ise tasarımcı tarafından çok iyi ayarlanmalıdır. Her tarafı pırıl prıl parlayan, yansıyan bir site içerisinde bu zengin elementleri aşıp, kullanıcının içeriğe ulaşması zor olabilir.

Ayrıca bu tip efektleri kullanırken iki boyutlu ve üç boyutlu objelerdeki yansımanın perspektif farklarını unutmamak gerek. 3 boyutlu bir objeye yansıma verirken onu sadece ters cevirmek yetmeyecektir. Dikey doğrultuda bir yansıma efekti için objenin gerçekten ayna görüntüsü ve derinliği gerekmektedir.

Yansıma efektleri ile ilgili çeşitli kaynak ve tutorial’lara buradan, buradan, ve buradan ulaşabilirsiniz.

Yeni nesil sitelerde ikon kullanımı oldukça moda. Ancak ister hazır ikon setlerden kullanalım isterse kendi ürettiğimiz ikonları kullanalım en önemli nokta ikonun işaret ettiği konuyu net bir şekilde açıklıyor olmasıdır.

Örneğin bir kullanıcı girişi içeren alanın yanına dünya ikonu koyarsanız bu bir anlam taşımayacak, site ziyaretçisinin kafasının karışmasına sebep olacaktır.
Bu tip bir alanın yanına şüphesiz kullanıcıyı ifade eden bir ikon eklemek ziyaretçi açısındanda zaman kaybı yaratmadan içeriğe yönlenmeyi sağlayacak bir yöntem olacaktır.

Toparlamak gerekirse doğru anlamlandırılmış ve yerinde kullanılan ikonlar, kuıllanıcıları iste içinde hızlı ve doğru yönlendirirken, yanlış kullanıma maruz kalan elementler ise sitenin kullanılabilirliğini düşürmekte.

İkon tasarımlarınızı yaparken kendi özgün fikirlerinizi ekrana taşımanız çok daha çekici sonuçlar ortaya çıkaracaktır. Bir çok sitede hemen her yerde tasarlanan ikonlardan kullanılması sıkıcı bir hal alsada, ikon tasarlamanın da özel bir yetenek olduğunun altını çizmeden geçmeyelim.

Flaş yada patlangaçlar son dönemin en moda trendlerinden biri. Bir tasarımcı olarak göze çok hoş geldiğini, küçük ama önemli duyuru ve ibarelerin bu element kullanılarak kullanıcıya gösterilmesini çok doğru ve görsel olarak zengin buluyorum.

Bir fiyat bildirisi kampanya yada benzeri bir bildirinin bu şekilde gösterilmesi hem bir miktar retro duygusu yansıtmakta hemde farklı, canlı ve sıcak renk kullanımı ile ilgiyi yoğunlaştırmakta hayli etkili.

Bu tip patlangaçlar yapmak için kaynak ve tutorial’lara buradan, buradan ve buradan ulaşabilirsiniz.

Yukarıda söz ettiğimiz 3 öğeninde son günlerde moda olduğunu biliyoruz ve tasarımlarımızda bol bol kullanıyoruz. Burada önemli olan birkez daha hatırlatmakta fayda varki bu tip zenginlik katan elementleri ne gereğinden az nede fazla kullanmak. Aksi takdirde bir süre sonra fazla kullanım sonucu, kullanıcı artık bu objelerin dikkat çekici özelliğinden çok sıkıntı verici bir hal almasından şikayetçi olacaktır. Ancak aynı zamanda unutmamak lazımki moda değişken bir olgudr ve tasarım içerisinde yer alan bu tip objelerin modası geçtiğinde şüphesiz bunların yerini yeni bir trend alacaktır.

Bir web sitesi tasarlarken öncelikle ihtiyacımız olan doğru hazırlanmış, amacına uygun bir site haritasıdır Mevcut site haritası ve örnek içeriklerle sunulan bir proje üzerinde çalışmak tasarımcının tüm konstrasyonunu görsel yaratıcılık ve işlevselliğe yoğunlaştırmasını sağlayacağından, ortaya daha efektif işler çıkacağı şüphe götürmez bir gerçektir.

Tasarımlarınızda önem vermeniz gereken en önemli öğe şüphesiz sitenin navigasyonu olmalıdır. Kullanıcıyı doğru yönlendiren iyi bir navigasyon yaratacağınız sitenin en önemli parçası olmalı.

Projenin türüne göre içerik sunumuda yine kolay anlaşılır ve amacına uygun ve mümkün olduğunca sade bir şekilde sunulmalı.

Burada iki haber portalının cover alanları mevcut. Hangisinin daha anlaşılır ve sade olduğu açıkça ortada.

Unutmayın her zaman az daha fazladır. Sadelik her zaman kolaylığı sağlar.

Sitenizde kullanacağınız renkleri seçmek için bazı mevcut yada kendi yaratacağınız renk skalalarına bağlı kalmanız gerekecek. Sitenizi hazırlarken bir ana renk ve ona bağlı yardımcı renkler kullanmanız hem göze hoş gelen bir tasarım üretmenize yardımcı olacak, hemde sizin işinizi kolaylaştıracaktır. Ama sadece kişisel renk tercihleriniz yada projeyi yaptıran iş sahiplerinin zevkleri ile üreteceğimiz sitenin renklerini belirlemek tam anlamıyla bir faciaya sebep olacaktır.

Yukarıda ve aşağıda örneklerini gördüğünüz iki site arasında renk kullanımı açısından ciddi farklar bulunmakta. Aşağıdaki ne kadar doğru ise üstteki site gerek renk kullanımı gerekse yerleşim ve tasarım açısından okadar hatalı.

Web sitelerinde kullanılabilecek bazı renk skalalarıda örnekte görüldüğü gibidir.

Renk üretmek konusunda destek alabileceğiniz, pratik yaparak kendinizi geliştirebileceğiniz bazı siteler ise
http://wellstyled.com/tools/colorscheme/index-en.html
http://www.colorschemer.com/online.html
http://www.colourlovers.com/

Web 2.0 tasarım rehberimizin son bölümüne gelmiş bulunuyoruz. Bu güne kadar öğrendiğimiz konuları teoriden pratiğe dökerek Web2.0 trendlerine uygun yepyeni ir site tasarlıyacağız. Bir kez daha altını çizmemiz gerekirse bu rehber de ele aldığımız konu Web 2.0 tasarım trendleri, altyapı, kullanım amacı kodlama ve css gibi konular değil.

Tasarımımızda öncelikle ilk dersimizde gördüğümüz sayfa yapısını oluşturmamız gerek. Tasarımını yapacağımız site son zamanlarda hayli moda olan, günde bir ürün satan sitelerden olacak. Tabiki bu tamamen mevcut siteleri inceleyerek oluşturduğumuz kriter ve içerikle gerçekleşecek.

Sayfa yapımızı bu içeriğe göre header, navigasyon, içerik ve footer bölümlerinden oluşturmaya karar vermiş olalım.

Öncelikle mevcut logomuzu daha önce gördüğümüz teknikleri kullanarak Web 2.0 trendine uygun hale getirelim.

Logomuzu zengin yüzey tekniğine göre arzu ettiğimiz hale getirdikten sonra yansıma kullanarak header içine yerleştiriyoruz.

Header yani sitemizin üst kısmının arka planına biraz atmosfer yaratabilmek için hoş bir görselde ekleyerek daha zengin bir görünüm elde etmiş oluyoruz.
Sitemizin sloganının “Satın alın kazanın” olduğunu varsayarsak, yine daha önce incelediğimiz yansıma ikon ve flaşlar tekniğine uygun olarak hazırladığımız bir patlangacıda yine header’ın sağ tarafına ekliyoruz.

Böylece sıra sitenin ana navigasyonunu hazırlamaya geliyor. Son dönemlerde oldukça moda olan hemde kullanıcının işini kolaylaştıran tab yada diğer adı ile sekme yöntemini kullanarak sitemizin navigasyonunuda oluşturuyoruz.
Bu noktada dikkat etmemiz gereken ayrıntının o an bulunduğumuz sayfada sekmenin nasıl şekilde görüneceğini ayarlamayı unutmamamız.

Artık sıra içeriğimizi nasıl göstereceğimize geldi. Sitemizde yayınlanacak ürünü beyaz bir alanda göstermemiz kullanıcıların kolay algılaması açısından en uygun seçim olacaktır.

Tasarımlarınızda beyaz renk kullanmaktan asla çekinmeyin. Sadeliği yakalamak için beyaz renk bir çok tasarımda bir numaralı yardımcınız olacak.

Gördüğünüz gibi ürünümüzün görselini hazırlarken de yine yansıma efekti kullanarak tasarımımıza derinlik kazandırdık.
Sitemizin renk skalasına ve yine Web 2.0 tasarım trendlerine uygun şekilde iri fontlar kullandık, kocaman ve degrade bir geçiş kullanarak satın al butonumuzuda, ürün ve fiyat bilgilerinin hemen altına yerleştirerek, bu ürünü satın almaya niyetli kullanıcılar için önemli bir kolaylık sağladık.
Bu bölümünde tasarımını tamamladığımıza göre sıra geldi sitemizin son ana bölümü olan footer kısmının yerleşimine.

Footer’ın sol tarafına sitenin kullanım şekli ile ilgili olabileceğiniz varsaydığımız yazılardan ekledik, alt bölüm içinse ayrı olarak tasarladığımız kurumsal bilgilerin bulunduğu yönlendirme linklerini eklemeyi uygun gördük. Footer’ın sağ tarafında ise sitemizin logosu ve RSS beslemesi ikonlarını yerleştiriyoruz.

Ve böylelikle gördüğümüz teknikleri uygulayarak Web 2.0 tasarımı trendine uygun olarak sitemizi tamamlamış oluyoruz.

Daha önceki konuları ve bu örneği inceleyerek yeni nesil tasarım trendleri hakkında bolca fikir sahibi olabilir, ve sizde pratik yapabilirsiniz.

Bu örnek sitenin tam görselini görmek için buraya tıklayabilirsiniz.

Hazırladığımız örnek tasarımı PSD dosyası olarak indirmek isterseniz buraya tıklayınız.

WEB 2.0 Tasarim Araçları

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

Kaynaklar ;

http://www.eburhan.com/hazir-web-20-tasarim-araclari/

http://www.hasanyalcin.com/?p=238

http://www.altiustutasarim.com/arsiv/2005/10/web_20.php