Degrade Kullanımı ve Zengin Yüzeyler

w2tr.jpgWeb 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.

dipucu.jpg

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!

eurovision.jpg

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.

degradevebuton.jpg

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.

degradesite.jpg

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.
isiginyonu.jpg
yanlisdgoru.jpg

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.

Son Yazılar
Yorum ( 15 )
  1. YuSuPh
    8 Nisan 2007 at 12:43 pm

    Bugün bu tarz bir çalışma ile uğraşıyordun. Gördüm ve süper ilham kaynağı oldu. Ellerine kollarına sağlık, teşekkürler…

  2. Fatih Hayrioğlu’nun not defteri » 11 Nisan 2007 Web’den seçme haberler
    11 Nisan 2007 at 7:48 am

    […] Hasan Yalçın web2.0 makalelerine devam ediyor “Degrade Kullanımı ve Zengin Yüzeyler” Link […]

  3. evren
    21 Nisan 2007 at 12:15 pm

    Teşekkürler, faydalı bir yazı olmuş..

  4. CMP2.NET | Design,Multimedia,Internet,Security | » Arsiv » Degrade Kullanımı ve Zengin Yüzeyler
    10 Mayıs 2007 at 1:58 pm

    […] Kaynak;Hasan Yalçın RSS 2.0 […]

  5. Web 2.0 Tasarım Rehberi | Rasim Coşkun | Web Tasarım | Web Design
    23 Ekim 2007 at 2:19 am

    […] Degrade Kullanımı ve Zengin Yüzeyler […]

  6. nihat celiker
    25 Ekim 2007 at 4:16 am

    Gerçekten çok güzel seyler paylasmıssınız. tesekkürler

  7. barış
    28 Mart 2008 at 1:14 pm

    gerçekten çok faydalı bilgiler paylaşıyorsunuz,teşekkürler…

  8. AHMee4.com | Sanatsal ve Edebi bilgiler, müzik ve sinema deposu » web 2.0 tasarım ipuçları
    22 Eylül 2008 at 5:37 pm

    […] Degrade Kullanımı ve Zengin Yüzeyler […]

  9. Hayat-ı Web » Blog Archive » PNG ve IE6 Transparanlık Sorunu…
    20 Temmuz 2010 at 3:04 pm

    […] kullanmak istediğimizde ortaya çıkıyor. Örneklemek gerekirse günümüzün web uygulamaları degrade yapılardan oluşuyor. Bu anlamda geçişli bir zemin üzerinde şeffaf bir GIF imajı kullanmak […]

  10. detay halı yıkama
    2 Şubat 2012 at 4:15 pm

    gerçekten çok faydalı bilgiler paylaşıyorsunuz,teşekkürler…

  11. detay halı yıkama
    2 Şubat 2012 at 4:16 pm

    teşekkürler faydalı oldunuz

  12. Okan Albayrak
    15 Kasım 2012 at 5:37 am

    Detaylı ve çok yardımcı bir çalışma teşekkürler

  13. Mehmet Balcı
    15 Kasım 2012 at 5:38 am

    Teşekkürler

  14. Adem Özipek
    15 Kasım 2012 at 5:39 am

    Yardımlarınız için teşekkürler

  15. perde
    16 Mayıs 2015 at 5:31 pm

    değişti o işler

Bir cevap bırakın
Captcha Captcha güncellemek için resime tıkla