Renk ile UX İnce Ayar için 5 Teknik
Renk, herhangi bir tasarım sisteminde anahtar öğelerden biridir. Web sitelerinde veya uygulamalarda, renk çeşitli şekillerde kullanılabilir: bazen kontrast yoluyla veya seçilen noktaya rengi sınırlayarak bir odak noktası oluşturmak için renk kullanılabilir; Renk ayrıca hiyerarşinin kurulmasına yardımcı olabilir ve bu nedenle bir kullanıcının nerede göründüğünü etkiler.
Bu yazıda, rengi nasıl stratejik kullanacağımız hakkında konuşacağız.
1. Oranlar aracılığıyla bir odak noktası oluşturma
Renk oranlarının iyi bir örneği tasarımdır. Viporte . Ana sayfalarında aşağı doğru ilerledikçe, her bölüm merkezde büyük bir harfle dekore edilmiştir. Harfler, animasyonların tekmelenmesinden önce güzel bir renkle doludur. Animasyon yapan farklı görüntülerin rengi harflerin rengiyle ilgilidir. Odak noktası, renk odaklı çalışmanın bir parçası olarak, kesinlikle bölümlerin merkezindedir. Oranlar değişebilir - bazen biraz renk var ve bazen çok fazla var. Her iki şekilde de, orantılar bir odak noktasına dikkat çekmek için kullanılır. Her bölümün içindeki renk her yerde daha belirgin olsaydı, odak noktası net olmazdı.
2. Kontrast ile dikkat çekmek
Rengin manipüle edebileceği bir başka şey kontrasttır. Genel tasarımın renkleri sakin veya yumuşak olduğunda, zıt renkler eklemek görüntülere çok dikkat çeker.
Tam olarak tasarımın içinde neler oluyor Thinx . Ana sayfada, arayüzün genel renk düzeni aslında siyah ve beyazdır. Yine de, tasarım çok sayıda fotoğrafa dayanıyor. Özellikle ana sayfanın üst kısmında, iç çamaşırın fotoğrafları koyu kırmızı bir arka plana sahiptir. Sayfadaki diğer her şeyle karşılaştırıldığında, oldukça cesur. Şüphesiz, burada öne çıkan şey koyu kırmızıdır. Kırmızı, siyah ve beyaz renk şemasına karşı çok daha yüksek bir karşıtlığa sahiptir. Thinx'i örnek olarak kullanmayı seviyorum çünkü parlak ve neon renklerinin, birinin dikkatini kontrastla çizmeye uygun olan tek şey olmadığını göstermeye başlıyor. Bu gerçekten sadece bir tanesi gerçekten öne çıkacak olan iki renk dengeleme eylemidir.
3. UX desenleri oluşturmak için renk kullanma
Görsel örüntüler yaratmanın en iyi yolu tutarlılıktır. Desenler, bir kullanıcının sahip olabileceği ilişkileri yaratabilir. Bu, kullanıcıların belirli eylemlerle ilişkili olan certina simgeleri için kullanılanla aynı şekilde, yani bir çöp kutusunun silinmesi anlamına gelir. Renkler çok daha özneldir çünkü her web sitesi veya uygulama renkleri için kendi anlamlarını yaratabilir.
Hadi açık mavi ile ilişkiyi ele alalım Underbelly'nin portföy sitesi . Bu basit bir örnek ve benim amacım olduğu için mükemmel. Underbelly'nin web sitesinde tıklanabilir olan her şey mavidir. Web sitesini birkaç saniye kullandıktan sonra, bağlantılarının mavi olduğu çabuk anlaşılıyor. Ve bu sayede renklerle desenler yaratıyorsunuz. Desenler iyi çünkü kullanıcılar ve ziyaretçilerin kolayca bir şeyleri tanımasına izin veriyorlar. Daha kolay tanıma olur, daha az insan düşünür ve şimdi hepimiz ne kadar mutlu olduğunu biliriz. Steve Krug .
4. Renk aracılığıyla hiyerarşi oluşturma
Renk için bir başka şey iyi olabilir, bir hiyerarşi kurmaktır. üzerinde Skore ürün sayfası , hemen hemen her bölümün ona yeşil unsurları vardır. Sadece yeşil tekrarlı olan - tanınabilir bir model oluşturan - aynı zamanda belirli bir bölümün önemli kısımlarını ayırt etmeye yardımcı olur. Çoğu zaman hiyerarşiyi, yazı tipi boyutu gibi büyüklükte açıklamak kolaydır. Ancak, bir rengin yoğunluğu, kullanımda bir renk montajının yanı sıra bir hiyerarşi oluştururken de harika olabilir.
Skore örneğinde yeşil, gri metin ve beyaz arka plan ile iyi bir kontrasta sahiptir. Öne çıkıyor. Ayrıca, renk şeması yeşil birincil yapan diğer vurgu renklerine dayanmaz. Tüm bunlar, her bölümün hiyerarşiyi görüntülemesine katkıda bulunur. Bu nedenle, yeşil renk, kullanıcının her gözünde güzel bir hiyerarşi sağlayan önemli öğelere gözlerini yönlendirmeye yardımcı olur. Yeşil elemanlar, bir kullanıcıya ilk olarak nerede bakılacağını söyler.
5. Renklerin benzerliklerini kullanmak
Tasarımcılar olarak renklerle yaptığımız tüm farklı şeylerin dışında, çoğunlukla tasarımda tutarlılığı korumak için onu kullanıyoruz ve yeniden kullanıyoruz. Bir göz atalım InVision'ın Yılın Sonu Açılış sayfası. Sayfanın üstünde, arka plan görüntüsü olarak kullanılan pembe ve mor bir degrade var. Sayfada daha fazla pembe ve menekşe de düğme renkleri için kullanılır. Ayrıca, açılış sayfası pembe ve mor renkli arka planlar üzerinde beyazı yeniden kullanır. Ayrıca siyah ve gri metin rengini beyaz arka plan üzerinde yeniden kullanır. Renkler her seferinde farklı olsaydı, harika görünmezdi.
Başka bir örneğe, özellikle de bir bakalım Eş-motion . Ana sayfasında, yaratıcı stüdyo birkaç farklı renk kullanır. Fakat hepsi uyumlu bir akış sağlamak için tonlarında yeterince benzerler. Bu örnekte, özellikle iyi bir amaç da olabilen, göze çarpan hiçbir şey yoktur. Bu durumda, renkle vurgu, sayfanın iyi ve tutarlı bir akışı üzerinde yapılır, kullanıcının nişan almasına ve kaydırmaya devam etmesini sağlayın.
Sonuç
Renk, çeşitli tasarım hedeflerine ulaşmada yardımcı olan harika bir araç olabilir. Renk, bir hiyerarşi tanımlamak ve kurmak ve bir odak noktası sağlamak için yardımcı olabilir. Renk vurgusu çeşitli şekillerde gelir. Her iki durumda da, renk ile çalışmak çok eğlenceli olabilir. Bir ziyaretçi veya kullanıcının gözlerinin nereye gittiğini etkilemek, stratejik bir renk düzeni sayesinde daha kolay olabilir.