Yıllar boyunca düz ve tamamen minimal stillerden sonra, gradient geri dönüş yaptı. Gördüğünüz her yerde, tasarımcılar görsel ilgi alanı yaratmak, kullanıcı etkileşimi oluşturmak ve yalnızca bakmaya değer bir şey tasarlamak için renk gradient’lerini kullanıyor.
Gradient’lerin bir hayranı değilseniz, belki de konuyla ilgili karşı duruşunuzu yeniden düşünmenin zamanı gelmiştir. Sizi ikna etmeye yardımcı olmak için, web sitenizin tasarım projelerinde 2018’de gradient sevmenin ve kullanmanın 10 sebebi var.
1. Arka Planlarda İlgi Yaratın
Bir gradient, görsel üzerinde çekici bir ilgi yaratır ve kullanıcıları tasarımda harekete geçirmede yardımcı olur. Gradient, aktif kullanıcıları istediğiniz tarafa yönlendirmenin basit ve kısa bir yoludur.
Gradient son derece kullanışlı ve çekici bir tasarım aracı olabilir ve çok sayıda projeye kıvılcım ve entrika ekleyebilir. Gradient kullanmanın birçok yolu varken, en popüler seçeneklerden biri, üzerine yerleştirilmiş görüntü, metin ve diğer öğelerle birlikte bir arka plandır.
Aşağıdaki örnek bu en yaygın tekniği kullanmaktadır. Gradient, ekranın üst kısmından “Discover More (Keşfet)” yönünün bulunduğu alt köşeye daha fazla odaklanmasına yardımcı olan yumuşak renkler ile göz için bir dinlenme yeri sağlar.
Gradient, sayfanın geri kalanı boyunca, ilerlemenin altında taşır, böylece kullanıcılar her zaman nerede olduklarını hatırlar. Ayrıca ana navigasyonu vurgulayan halo tipi (dairesel) bir alan sağlar.
2. Yazı Bir Odak Noktası Sağlayabilir
Arka planda bir gradient kullanılabileceği gibi, ön planda bulunan elemanlar içinde geçerli olabilir. Renk gradient, genel popülaritesine katkıda bulunabilecek oldukça çok yönlü bir tekniktir.
Kullanımı vurgulayan bir ön plan gradient’i, kelimeleri vurgulamak ve dikkat çekmek için daha düz bir arka plan üzerinde yazı için dolgu olarak kullanılabilir.
Renk seçimi kasıtlı olmalıdır, böylece her zaman bol miktarda kontrast ve okunabilirlik korunur.
3. Bindirmeler Bir Bland (Tatlı,Hafif) Görüntü Sağlayabilir
Bir renk yerleşimi, biraz mülayim olan bir görüntüye daha fazla ilgi ekleyebilir. Bir gradyan yerleşimi, düşük çözünürlüklü veya yetersiz şekilde oluşturulmuş bir görüntü için bir düzeltme değildir, ancak daha basit bir sahne verebilir.
Gradient bindirmeleri, sitenin sesinin, tonunun ve kişiliğinin yanı sıra marka oluşturmaya da yardımcı olabilir. Parlak renkler daha sessiz seçeneklerden oldukça farklı bir şey söylüyor. Bu renklerin size anlatacağı çok şey var.
Bu teknik, aşağıdaki portföy örneği gibi oldukça düzgün görünebilirken, biraz fazla kullanılmaya başlıyor. Tasarımınızı birbirinden ayırmak için tam bir görüntü, gradient kaplama ile biraz farklı bir şey yaptığınızdan emin olun. Aşağıdaki örnek, görüntüyü tamamen silerek, eğimin alt kısmının ekranın alt kısmında düz bir renk çubuğu oluşturması için bunu yapar.
4. Bilgiye Ulaştır (Gözleri Taşı)
Harika bir eğim, gözü bir tasarımda kullanıcılara yönelik bir niyet yaratmaya yardımcı olacak şekilde hareket ettirmeye yardımcı olabilir. Çoğu kullanıcı F şeklinde bir desende, sol üstte başlayıp ekran boyunca aşağı doğru hareket ederek okur.
Gözü, bir logo veya birincil mesajlaşma gibi bir başlangıç noktasından ana harekete geçirici mesaja taşımak için gradient renk şemasının açık ve koyu alanlarını kullanın. Göz ilk olarak en hafif renk alanlarına gidip daha karanlık alanlara geçecektir. Bu göz hareketini güçlendirmek için gradient rengini tasarlayın ve yerleştirin.
5. Unutulmaz bir şey oluşturun
Gradient’ler daha popüler hale gelirken, her renk kombinasyonunun biraz farklı olması, kullanıcılara için tasarımı unutulmaz kılar. Bir katil renk kombinasyonu, markanızı veya mesajlarınızı hatırlamalarına yardımcı olmak için bir kullanıcıyla takılabilir ve yapışabilir.
Bu bağlantıyı yaratmaya yardımcı olmak için gradient’leri tasarlayın. İyi bir eğim hakkında ne harika bir şey, neredeyse kendi başına bir renk haline gelmesidir. Çalışmak için harika bir gradient’iniz varsa, marka paletinizde görsel bir bağlantı kurmak için başka herhangi bir rengi olmasını istediğiniz gibi kullanın. (Veya renk paleti olarak çoklu gradient’ler kullanın.)
6. Marka Renklerini Vurgulamak
Alıntı yapılması muhtemel marka renkleriniz varsa önlemek için bir gradient kullanın. Kurulum aşamasındaki yeni markalar veya web siteleri için bu, markalama ve kullanıcılarla bağlantı kurmanın sağlam bir yolu olabilir.
Basılı ya da reklam kampanyalarında sosyal medya mesajlaşmaları için web sitesinde birden fazla kullanıma aynı gradient’i nasıl dahil edeceğinizi düşünün. Aynı tonlardaki renklerin aynı kullanımını görmek, bu renkleri sizinle ilişkilendirecek kullanıcıların aklında yer etmeye başlayacaktır.
Aşağıdaki örnekte, Toplum Sektörü Bankacılığı, tam olarak bunu yapıyor. Renk seçenekleri ilginçtir, gradient fotoğrafta ve alt gezinme çubuğunda renk paletini ve markayla olan ilişkisini güçlendirir.
7. Oluşturmaları Kolay (Veya Üretilebilir)
Bir görüntüye bir gradient eklemek veya sıfırdan bir tane oluşturmak, iki veya üç renk seçmek kadar basit olabilir ve ardından gradient için bir şekil seçebilir ve renklerin nerede başlaması, durması ve üst üste gelmesi gerektiği gibi olabilir.
Gradientler, şekil bakımından, soldan sağa veya yukarı veya aşağı yönlüdür veya renk değişimlerinin dairesel bir şekilde tek bir noktadan yayıldığı radyal da olabilir. Bir tasarım, bir veya daha fazla gradient’i içerebilir.
Gradyanın renklerini seçmek en zor adım olabilir. Renk tekerleğinde bulunan renklerin kullanılması, en tamamlayıcı ve doğal gradient’lerde sonuçlanacaktır. Ama bu her zaman net şekilde çalışmak zorunda değilsiniz. Bu durumda, renklerle oynamak isteyeceksiniz, böylece birincil renk seçeneklerinizle buluştuğunuz alanda kötü bir renk tonu elde edemezsiniz.
Bir gradient yapmak için yeteneklerine güvenmiyor musun? Bu araçlardan birini deneyin:
• WebGradients: CSS, PNG, Sketch ve Photoshop’ta 180’den fazla premade gradyan renk örneğinin ücretsiz toplanması.
• Gradientbuttons: Animasyonlu duraklama durumları olan degrade düğmeler için CSS
• Gradient Wave Generator: Kendi renkleri kullanarak serin bir degrade dalga yapmak için başlar ve durur.
8. Renk Doğal Hissettiriyor
İlk düşünceniz olmasa bile, gradient’in genellikle doğal olan renkleri ve kombinasyonları vardır. Bir düşünün, doğada her şey yeşil, tek bir gölge değil.
Bu nedenle gradient’ler doğal bir seçimdir, özellikle de doğal dünyada birbirine karışacak olan renkleri birleştirdiğinizde.
Aşağıdaki şekil, gün (turuncu) ile gece (mavi) arasında solmuş bir gökyü-zünün bulunduğu çok belirgin bir örnektir.
9. Dominant Görseliniz Olmadığında Sanat Yaratın
İyi bir gradient, çalışmak için çok fazla alanınız olmadığında görsel ilgi ve görsel bir görüntü oluşturabilir. Aşağıdaki örnekte olduğu gibi parlak bir renk kullanmak veya marka renkleri web sitenizin varlığını oluşturmanıza yardımcı olabilir.
Renk değişimleri, çoğu zaman bir tasarım öğesi olarak tek başına durabilecekleri kadar ilginçtir. Nasıl kullanıldığını düşünün ve renkleri seçin, böylece kullanıcılar için doğru duygusal bağı yaratırlar ve içerikle ilişkilendirilecek doğru duyguları bulmalarına yardımcı olurlar.
İnce bir eğim bile, bir tasarımın tonunu belirlemenin uzun bir yolunu bulabilir.
10. Trend Eğilimler
Gradient’ler, ezici hissetmeden modaya uygun bir dokunuş eklemek için kolay ve son derece kullanışlı bir unsurdur. Bir gradient kullanmanın bir yolu ile, bunun sizin go-to çözümünüz olabileceği çok mantıklı. Zaman zaman gradient’ler lehine düşerken, neredeyse evrensel bir çekicilikten dolayı oldukça hızlı bir şekilde geri dönme eğilimindedirler.
