Seodanismani.net

Geçtiğimiz ay 400 GB’lık Blu-ray disklerini tanıtan Pioneer durmak bilmiyor. Çalışmalarda yeni durak 500 GB. Peki, Pioneer hangi yöntemi kullanacak?

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.

kaynak:www.gelengeliyo.com

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.

Özellikle web 2.0 tarzındaki sitelerde parlak butonların sıkça kullanıldığını görüyoruz. Çünkü parlak butonlar insanın gözüne son derece hoş geliyorlar. Photoshop, GIMP veya Fireworks gibi yazılımları kullanarak bu butonları oluşturabilirsiniz ama ben size çok daha pratik bir yöntemden bahsetmek istiyorum. Solda duran parlak mavi butonu yalnızca 4 basit adımda siz de yapabilirsiniz.

Benim cool butonum (:

Kendi butonunuzu oluşturmak için My cool button isimli siteye girmeniz yeterli. Tüm işlemleri web üzerinde yapacaksınız. Hiçbir imaj işleme tekniğini bilmenize gerek yok.

• 1. adımda oluşturmak istediğiniz butonun genişlik değerini piksel cinsinden belirliyorsunuz.
• 2. adımda butonun kendi rengini ve arkaplan rengini belirliyorsunuz.
• 3. adımda buton üzerinde bir simge görüntülenmesini isteyip istemediğinizi belirtiyorsunuz. İster öntanımlı simgelerden birini kullanın, isterseniz kendi bilgisayarınızdan bir herhangi bir simge upload edin.
• 4. adımda ise buton üzerinde görüntülenecek yazıyı yazıyorsunuz. Bu yazının tipini, büyüklüğünü ve rengini istediğiniz gibi değiştirebilirsiniz.

Bu 4 adımdan sonra Apply changes butonuna tıklayarak butonun bir önizlemesini görebilirsiniz. Sonuçtan memnun kalırsanız Download butonuna tıklayarak butonu, PNG formatında bilgisayarınıza indirebilirsiniz.