UX Eğitimi: Vurgulu Renklerin Kullanımı Nasıl Optimize Edilir?

Merhabalar,

Ben Zuhal Kuyumcu.

Tasarım adına edindiğim bilgilerimi sizlerle paylaşmak adına ben de Medium’dayım.

Appcent ve Appcent Design ailesi bünyesinde UI/UX tasarımcı olarak yer almaktayım. Gerek ekipçe, gerek bireysel araştırmalarım ve deneyimlerim sonucunda öğrendiğim her şeyi sizlerle paylaşmaktan keyif duyacağım.

Keyifli okumalar dileğiyle.

Renk, bir tasarımcının en önemli araçlarından biridir. İyi düşünülmüş bir renk paleti doğru kullanıldığında, bir markanın değerini ve kişiliğini iletmeye yardımcı olur, ayrıca kullanıcılara rehberlik eder ve kullanılabilirliği artırır.

Tasarım sürecinde doğru renk setini bulmanın, analiz ve deneme yanılma payı gerektiren zor bir süreç olduğunun altını çizmek gerekir.

UX Tasarımında Renk Şemaları

Renk şeması, Newton’un 17. yüzyıla kadar uzanan renk tekerleği ile başlar. Yüzlerce yıl sonra bile, tekerlek içindeki geometrik ilişkileri kullanarak uyumlu renk kombinasyonlarını belirlemek için bu buluşu kullanıyoruz.

En yaygın renk şemalarından bazılarına daha yakından bakalım:

- Monokromatik — aynı rengin üç farklı versiyonu,

- Analog — birbirine bitişik üç renk,

- Tamamlayıcı — renk çarkının karşı tarafında bulunan renkler,

- Bölünmüş Tamamlayıcı (veya Bileşik Uyum) — benzer ve tamamlayıcı şemaların bir kombinasyonu,

• Üçlü — renk tekerleğinde birbirinden eşit uzaklıkta olan üç renk,
• Tetradik — iki çift tamamlayıcı renk olan dört renk.

Bir ürünün tasarımı için en uygun renk kombinasyonunu bulduktan sonra, bunları birincil, ikincil, vurgu, nötr ve anlamsal renkler olarak düzenlemek çok önemlidir.

Ana renkleriniz, bir ürünün kullanıcı arayüzünde (UI) en sık kullanacağınız renkler olacaktır — bir markanın kimliğini çevirmek ve marka bilinirliğini artırmak söz konusu olduğunda bunlar çok önemlidir.

Markalar genellikle bir ila beş ikincil renge sahiptir. Zorunlu olmamakla birlikte, markanın paletini daha tanınabilir hale getirmek için sayılarını sınırlamak her zaman iyi bir fikirdir. Bazı bağlamlarda “ikincil” ve “vurgulu” renklerin birbirinin yerine kullanıldığını belirtmekte fayda var. Genel bir kural olarak, vurgu renklerini ikincil renklerin bir parçası olarak düşünün, ancak bunun tersini düşünmeyin.

Vurgu paletiniz, birincil renk paletinizi tamamlamak içindir. Vurgu renkleri, yukarıdakiler kadar sık ​​kullanılmadığından, belirli UI öğelerinin daha görünür olmasını sağlar.

Nötr renkler genellikle siyah ve beyaz arasında herhangi bir yerdedir. Genellikle metin rengi, boşluk ve benzeri için kullanılırlar.

Anlamsal renkler, bir kullanıcı arabirimi boyunca bir kullanıcının rehberliği için gereklidir. İnsanların bir üründe sezgisel olarak gezinmesini sağlayan anlamı iletirler.

UX Tasarımında Vurgu Rengi Nedir?

Butonlar, ilerleme çubukları, kaydırıcılar, anahtarlayıcılar, bağlantılar, başlıklar vb. gibi çok çeşitli UI öğelerini vurgulamak söz konusu olduğunda vurgu renkleri hayati önem taşır. Ayrıca, kullanıcının dikkatini önemli bilgilere çekmenin harika bir yoludur. Tipik olarak, tasarımcılar daha doygun vurgu renkleri seçerek bu öğeleri daha görünür hale getirir. Sonuç olarak, bu, kullanıcıları onlarla etkileşime girmeye teşvik eder.

İkinci bir vurgu rengi, tasarımcıların kullanıcı arayüzünde sunulan öğe ve bilgi türlerini çeşitlendirmesine olanak tanır. Bununla birlikte, çok fazla vurgu rengine sahip olmanın, kullanıcının bir ürünle etkileşimini görsel olarak biraz zorlaştırabileceğini belirtmek gerekir.

Vurgulu Renkler Nasıl Kullanılır?

Diyelim ki bir ürünün renk paletini tanımladınız ve gördüğünüzü beğendiniz. Bu renk kombinasyonunu uyumlu bir kullanıcı arayüzüne nasıl çevirirsiniz? Vurgulu renkleri kullanmak için bazı yol gösterici ilkelere ve en iyi uygulamalara daha yakından bakalım.

Vurgu Renklerini Kullanmada En İyi Uygulamalar

Vurgulu renklerin kullanımına rehberlik eden en popüler ilkelerden biri muhtemelen “60–30–10 kuralı”dır. Bu kuralı görselleştirmenin harika bir yolu, onu bir takım elbise olarak düşünmektir — %60'ı pantolon ve ceket, %30'u gömlek ve %10'u kravattır. Renk kullanımınızın yaklaşık üçte ikisi ana renginize ayrılmalıdır; paletinizdeki itici güçtür. Baskın renkleri tamamlamayı amaçlayan ikincil renge bir üçüncüsü ayrılmalıdır. Vurgu renkleri, kullanıcı arayüzünüzün yalnızca bir kısmıdır, ancak arayüzünüzü daha canlı ve enerjik hale getirmek için oradadırlar.

Bu kural aynı zamanda adil bir esneklik payı sağlar. Örneğin, iki ikincil renk kullanmak istiyorsanız, %30'u ikiye bölerek her biri için %15'lik bir baskınlık elde edebilirsiniz.

Vurgulu Renkleri Kullanırken Kaçınılması Gerekenler

Vurgulu renklerle çalışırken aktif olarak kaçınmamız veya dikkat etmemiz gereken birkaç şey var.

- Vurgulu renklerin anlam için önemli bir araç olduğu göz önüne alındığında, “karışık mesajlar göndermediğinden” emin olmalısınız. Örneğin, tasarımcıların yaptığı yaygın bir hata, vurgular ve hatalar için aynı rengi kullanmaktır. Bu, gereksiz bir duygusal tepkiyi tetikleyerek kullanıcının kafasını karıştırabilir.

Vurgulu renkler genellikle önemli bilgileri vurgulamak için kullanıldığından, göz önünde bulundurmanız gereken birkaç ilke daha vardır:

• Kullanılabilirliği düşünün — metinleriniz vurgulu renkli bir arka planda göründüklerinde okunması kolay olmalıdır. İkisinin yeterli kontrasta sahip olması gerekir, böylece görme yetisi düşük veya bozulmuş kişiler metni rahatça okuyabilir. Metninizin erişilebilirliğini ve arka plan kontrastını değerlendirmenize yardımcı olabilecek çok çeşitli araçlar vardır.
• Bir kullanıcı arayüzünde bilgi iletirken renk psikolojisi son derece yararlı olsa da, yalnızca renge güvenmemeliyiz. Renk körlüğü olan kişiler için bir tasarımın kullanılabilirliğini geliştirmek için her zaman metni destekleyici bir araç olarak kullanmak gerekir.

Vurgulu Renk Paleti Oluştururken Sistematik Bir Plan Oluşturun

Peki, uyumlu vurgulu renk paletlerini sistematik olarak nasıl oluşturabilirsiniz? 60–30–10 kuralı burada yararlı bir yol gösterici ilke olabilir. Ana renginizin ne olduğunu belirledikten sonra, yukarıda bahsettiğimiz renk şemalarına geri dönerek vurgulu bir renk paleti oluşturmak için bunları referansınız olarak kullanabilirsiniz.

Özellikle web siteleri ve mobil uygulamalar gibi dijital arayüzler için tasarım yaparken, vurgu renkleri genellikle renk tekerleğinin “parlak tarafında” bulunur. Özellikle düğmeler gibi öğeler için vurgu renkleri seçmek söz konusu olduğunda, tekerleğin sağ üst köşesinde kalmanızı öneririz. Tipik olarak, daha enerjik ve zıt renk seçeneklerini burada bulacaksınız.

Vurgu Renklerinizi Genel Renk Paletinde Test Edin

Artık kendinize güvendiğiniz bir palet oluşturduğunuza göre, bazı testler yapmanın zamanı geldi. Bunu yapmanın en basit yolu Palettte, Material, Cloudflare ve diğerleri gibi hizmetleri kullanmaktır. Bu araçlarla, maketler veya prototipler oluşturabilecek ve vurgu renklerinizin harekete geçirildiğinde nasıl performans gösterdiğini görebileceksiniz.

Testinizi bir sonraki seviyeye taşımak için, bazı gerçek kullanıcıların tasarımlarınızı değerlendirmesini sağlamak harika olurdu. Bu senaryo, UX tasarım sürecine sadık kalan ve bu tür faaliyetlere ayrılan bir bütçesi olan kuruluşlarda daha yaygındır. Bununla birlikte, Gerilla testi ve benzeri gibi çok ucuz olan çok çeşitli kullanıcı test yöntemlerinin bulunduğunu belirtmek önemlidir.

Renklerin estetik açıdan önemli olmasının yanı sıra düğmelerin, bağlantıların ve diğer bileşenlerin kullanılabilirliği üzerinde de büyük bir etkisi olduğunu unutmayın. Örneğin, bir düğmeyi gri yapmak, devre dışı görünmesine neden olabilir.

Ekibinizden Geri Bildirim Alın

Artık bazı hızlı örnekler oluşturduğunuza ve hatta potansiyel kullanıcılardan bazı geri bildirimler aldığınıza göre, paletlerinizi ekibinize ve paydaşlarınıza sunmanın zamanı geldi. İnceleyenlerinizin önüne koyduğunuz maket ve paletlerin sayısını sınırlamak da çok önemlidir. Burada nitelik, niceliğin üzerindedir.

Paletinizi Sonlandırın

Paletiniz onaylandıktan sonra, ona bir yapı vermenin zamanı geldi. Coolors, Adobe Color ve yukarıda bahsettiğimiz, seçtiğiniz paleti düzgün bir dosyada dışa aktarmanıza yardımcı olabilecek çok çeşitli çevrimiçi araçlar vardır. Ekibinizin ihtiyaç duyacağı bir şeyse, onaltılık kodları eklemeyi de seçebilirsiniz.

Ayrıca diğer markaların renk yönergelerinden ve paletlerini nasıl sunmayı seçtiklerinden ilham alabilirsiniz. Atlassian, Mailchimp ve IBM’den birkaç örnek olabilir.

UX Tasarım Becerilerinizi Bir Sonraki Seviyeye Taşıyın

Bir renk paleti oluşturmak, bir dizi mutlu tesadüften çok daha fazlasıdır. Bir ürünün kimliğini iletecek, kullanıcılarına hitap edecek ve aynı zamanda kullanılabilirlik standartlarını karşılayacak bir palet oluşturmak için çok çalışmak ve yaratıcı düşünmek gerekir.