Degrade Kullanımı ve Zengin Yüzeyler

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