Bir Olasılıklar Yelpazesi: Go-to UI Renk Kılavuzu

Bunun bir yolu yok: Renk, görsel tasarımdaki en etkili yaratıcı unsurdur. Set tasarımının büyüleyici manzara arka planından piksel sanatının karmaşık kompozisyonlarına kadar, güçlü bir renk anlayışı, zorlayıcı iletişimin ana anahtarıdır. Kanıta mı ihtiyacınız var?

Yakın zamanda marka odaklı bir araştırmaya katılanlardan 10 ikonik şirketin logolarını çizmeleri istendiğinde, sadece %16'sı doğru şekilleri ve tasarım özelliklerini hatırlayabildi. Ancak, bir markanın renk paletini belirlemesi istendiğinde, doğru yanıtların sayısı %80'e çıktı.

Renk, kullanıcı arayüzü tasarımı dünyasında da etkili bir rol oynar. Günlük olarak etkileşimde bulunduğumuz dijital ürünler, önemli bilgileri iletmek için rengin stratejik kullanımına dayanır, bu nedenle UX ve UI tasarımcılarının renkleri akıllıca nasıl kullanacaklarını anlamaları çok önemlidir.

Bu kılavuzda şunları yapacağız:

• Renk teorisinin temellerini aydınlatın,
• Dijital arayüzlerde renkle çalışmak için çok sağlam prensipler sağlayın,
• Renk farkındalığı oluşturmak için faydalı kaynakları paylaşın ve
• UI tasarımcılarına kendi dikkat çekici renk şemalarını yaratmalarını sağlayın.

Bu kılavuzun amacı, her gün karşılaştığımız kullanıcı arayüzlerinde şaşırtıcı renk uygulaması adına renk yetkinliği ve ardından renk güvenidir.

Hızlandırılmış Kurs: UI Tasarımcıları için Renk Teorisi

Renk teorisi, kendi terminolojisi, metodolojisi ve bilimsel temelleri ile geniş bir çalışma alanıdır. Karmaşık olabilir, ama istediğimiz bu değil. İstediğimiz, ışık hızında hassasiyetle uygulanabilen bir renk anlayışı. Renkleri şekilleri kullandığımız şekilde kullanmak istiyoruz; zahmetsizce, cesurca ve etkili bir şekilde.

Rengi bu şekilde kullanmak için UI tasarımcılarının şu temel renk teorisi kavramlarını sağlam bir şekilde anlamaları gerekir:

• Renk görecelidir.
• Doygunluk aşırı yüklenmesi renk canlılığını öldürür.
• Eşzamanlı kontrastın artıları ve eksileri vardır.
• Temel renk şemaları en iyisidir.
• Ton her zaman değeri etkiler.

Hadi kazalım.

Renk Görecelidir

Renk asla tek başına durmaz. İnsan gözü ve beyni bir rengi görmek için birlikte çalışırken, her zaman şunlardan etkilenirler:

• Renkte parlayan ışık
• Rengi çevreleyen diğer renkler

Doğadan şu örneğe bakın:

C: Beyin ve göz, çiçeğin bir bütün olarak aslında parlak kırmızı olduğunu anlamamıza yardımcı olmak için birlikte çalışır.

B & C: Çiçeğin gölgesinin (B) koyu kahverengisi, taç yaprağı sırtındaki (C) vurgunun gerçekte olduğundan çok daha parlak görünmesini sağlar. Esasen, taç yaprağı sırtında parlayan ışık ve gölgenin rengi, gözü kandırmak ve vurguyu yoğunlaştırmak için birlikte çalışır.

İşte rengin ne kadar aldatıcı olabileceğini gösteren başka bir örnek:

UI tasarımında, renk göreliliği her zaman o kadar açık değildir, bu nedenle bir şema içindeki renkler birbirine karşı test edilmelidir. Niye ya? Çünkü stil rehberinizdeki bu güzelce düzenlenmiş renk seçimi, bir arayüze uygulandığında sorunlu olabilir.

Büyük paket servis mi? Renk kavramlarınızı şımartmayın. Vurgulu sarı renk örneği Sketch'te boşlukla çevrelendiğinde gür görünüyor ancak kullanıcı arayüzünün baskın renk şemasıyla çatışıyorsa, farklı bir çözüm bulun.

Doygunluk Aşırı Yükü Renk Canlılığını Öldürür

Renk doygunluğu, renk canlılığının ayrılmaz bir parçasıdır. Bununla birlikte, son derece doygun renklerden başka bir şey etrafında toplanmış bir şema gözü bunaltır ve canlılık azalır. Renk ile, daha az, daha fazladır. Yüksek derecede doygun bir renk, daha az doygun renklerle birlikte kullanıldığında canlı hale gelir.

Eşzamanlı Kontrastın Artıları ve Eksileri Vardır

Eşzamanlı kontrast, tam olarak aynı değerdeki renk tamamlayıcıları yan yana yerleştirildiğinde meydana gelir. Etki o kadar yoğun ki, iki rengin buluştuğu noktanın titreşmesine veya titreşmesine neden oluyor.

UI tasarımcıları için eşzamanlı kontrastın olumlu ve olumsuz sonuçları olabilir, bu nedenle bu görsel olgunun gücünü nasıl kontrol edeceğinizi anlamak önemlidir.

Örneğin, çeşitli maviler etrafında tasarlanmış bir arayüzde, mavi bağlantı rengiyle aynı değere sahip tamamlayıcı bir turuncu kullanmak, bildirim simgelerine dikkat çekmek için harika bir yol olabilir.

Ancak, aynı turuncu ve mavi kombinasyon, açılır menülerin metni ve arka planı için kullanıldığında migreni tetikleyebilir.

Temel Renk Şemaları En İyisidir

Gökkuşağı güzeldir - doğada. UI tasarımında renk daha seçici kullanılmalıdır, aksi takdirde deneyimi bunaltabilir. Markaların çok çeşitli seçeneklere sahip yüksek etkili paletleri olsa bile, kısıtlama göstermek ve basit renk şemaları etrafında kullanıcı arayüzleri oluşturmak en iyisidir.

Temel bir UI renk şeması oluşturmak için iki kusursuz plan:

1. Analog Kullanıcı Arayüzü Renk Şemaları

• Bu göze hoş gelen şemalar, renk çarkında yakından gruplandırılmış renklerden oluşur.
• Doğal ortamların, özellikle bitki yaşamının fotoğraflarında benzer renk şemalarını bulmak kolaydır ve görsel olarak sakinleştirici olma eğilimindedirler.
• Benzer şemalardaki çeşitlilik, büyük ton değişikliklerinden değil, doygunluk ve parlaklıktaki kaymalardan gelir.
• Benzer bir şema kullanırken, bir arayüz içinde vurgu oluşturmak için doğrudan renk tekerleğinden yüksek derecede doygun bir renk eklemeyi deneyin.

2. Tamamlayıcı Kullanıcı Arayüzü Renk Şemaları

• Tamamlayıcı renk şemaları, renk çarkında birbirini tamamlayan soğuk ve sıcak renklerin etkileşimine dayanır.
• Renk çeşitliliği, tamamlayıcı uç noktalar arasında doygunluk ve parlaklık değiştirilerek elde edilir.
• Çok fazla parlak, oldukça doygun renk kullanmak, tamamlayıcı şemaların etkisini azaltır.

Ton Her Zaman Değeri Etkiler

Bu garip gelebilir, ancak renklerin karşılık gelen gri değerleri vardır. İşte kanıt:

Yukarıdaki resimde %100 parlaklık ve doygunlukta bir dizi tonumuz var, ancak bu renkler gri tonlamaya dönüştürüldüğünde ne olduğuna bakın:

Boom! Bütün bir gri değerler aralığı ortaya çıkar. Bu, UI tasarımcıları için neden önemlidir? Tek kelime: Kontrast .

Bir an için zihninizi gri tonlamaya geçirin. Kontrast yaratmak isteseydiniz, %50'nin üstüne %40 gri değeri kullanır mıydınız? Tabii ki hayır, ancak renk kontrast denkleminin dışında ton bırakıldığında risk tam olarak budur.

Unutmayın, renk tonu her zaman değeri etkiler.

Dijital Arayüzler için 4 Temel Renk İlkesi

Renk teorisini basitleştirdiğimize ve temel kavramlarını kullanıcı arayüzü tasarımıyla ilişkilendirdiğimize göre, dijital arayüzlerde rengin oynadığı role daha odaklı bir şekilde bakmanın zamanı geldi. Bunlar, her UI tasarım projesinin ilk çabalarından itibaren göz önünde bulundurulması gereken dört renk ilkesidir.

1. Metin ve renk arasındaki ilişki çok önemlidir.
2. Renk erişilebilirliği göz ardı edilemez.
3. Kontrast önemlidir, ancak her derde deva bir tasarım değildir.
4. Renk, orantılı olarak uygulandığında en iyi sonucu verir.

Metin ve Renk Arasındaki İlişki Çok Önemlidir

Renk okunabilirliği etkiler. Çoğu UI tasarımcısı bunu prensipte anlıyor, bu yüzden kırmızı arka plan üzerinde yeşil gövde metnine sahip pek çok arayüz görmüyoruz. Bunun yerine, metin ve renk arasındaki gerilim, formlar, düğmeler, başlıklar ve simgeler gibi yaygın UI bileşenleri aracılığıyla gizlice ortaya çıkar.

Aşağıdaki basit yönergeleri izleyerek sağlıklı bir metin/renk ilişkisini sürdürün:

• Metin ve arka plan arasında her zaman düşük kontrasttan kaçının.
• Özellikle renkler benzer parlaklık ve doygunluğa sahip olduğunda (örneğin, mor bir arka plan üzerinde sarı metin) metin ve arka plan için tamamlayıcı renkler kullanmayın.
• Beyaz arka planda bile gövde metnini parlak renklerde ayarlamayın. Siyah ve koyu gri, okunması en kolay olanlardır.

Renk Erişilebilirliği Gözardı Edilemez

Renk iletişimseldir, ancak bir kullanıcı arayüzünde bilgi iletmek için kullanılan tek tasarım öğesi olamaz. Neden? Çünkü bazı web kullanıcıları, rengi nüfusun çoğunluğundan farklı algılar (veya hiç algılamaz).

Örneğin, renk körlüğü yaşayan bir kişi, bir ürün simgesinin "basılı" durumda olduğunu, simgedeki tek farkın bir renk değişikliği olup olmadığını anlayamayabilir.

Ek olarak, bazı kişiler, bir arabirimin arka planıyla renk kontrastı düşük olan önemli UI bileşenlerini görmekte zorluk çekerler. Colorable ve Contrast Ratio gibi siteler, tasarımcıların kontrast erişilebilirliği için bir dizi renk eşleştirmesini hızlı bir şekilde test etmesine olanak tanır.

Kontrast Esastır, Ama Tasarım Her Şeyin Tedavisi Değildir

Evet, UI tasarımında renk kontrastı önemlidir. Planlayın, uygulayın, yararlanın. Ancak onu sihirli bir değnek gibi sallamayı ve kötü tasarımı düzeltmeyi beklemeyin.

Şekil, boşluk, boyut ve diğer tasarım öğeleri göz ardı edilmemelidir. Renk kontrastı, korkunç bir kullanıcı arayüzünün çekici görünmesini sağlayabilir, ancak kötü bir kullanıcı deneyimini düzeltmez.

Renk Orantılı Uygulandığında En İyi Sonuç Vermektedir

Her metin örneğinin başlık olarak ayarlandığı bir haber uygulaması veya 9x9 görüntü ızgarasında tasarlanmış bir e-Ticaret web sitesi hayal edin. İkisi de korkunç olurdu!

Bilgili UI tasarımcıları, tasarım hiyerarşisini geliştirmek için tipografi ve tekrarlama gibi tasarım öğelerini orantılı olarak kullanır. Renk aynı düşünceli değerlendirmeyi hak ediyor. UI tasarımında çok fazla renk kullanmak bilginin algılanma şeklini karıştırır.

Devam Eden İlerleme için Renk Kaynakları

İşte tatsız bir gerçek: Renkle tasarım yapmak bir beceridir ve becerilerin geliştirilmesi gerekir. Çoğu UI tasarımcısı, hangi renklerin birlikte iyi göründüğüne (yani renk tadı) ilişkin doğuştan gelen bir anlayışa sahiptir, ancak bu her zaman uygulamaya yansımaz.

Renkte gerçekten ustalaşmak ve UI tasarımı üzerindeki tam etkisini görmek için tasarımcıların pratik yapması gerekir. Neyse ki, sürekli renk öğrenimi ve beceri geliştirmeye yardımcı olacak birçok kaynak var.

Ctrl+Boya

Anında renk güveni kazanmak isteyen bir UI tasarımcısıysanız, dijital boyama eğitimine adanmış bir web sitesi olan ctrlpaint.com ile başlayın. Dijital boyama? Yok canım?

Kesinlikle. Profesyonel konsept sanatçısı Matt Kohr, hızlı video eğitimleri ve uygulamalı alıştırmalar aracılığıyla dijital renk kullanımını öğretiyor. Müfredat son derece basittir ve hem fiziksel dünyada hem de hayal gücünde “gördüğünü resmetmeye” odaklanır.

Color Starter Kit'teki daha yoğun alıştırmalara geçmeden önce ücretsiz video kitaplığıyla (Bölüm 11) başlayın.

Josef Albers ve Renk Uygulamasının Etkileşimi

Çağdaş renk göreliliği anlayışı, sanatçı/eğitimci Josef Albers'in teori öncesi pratik yaklaşımı tarafından yoğun bir şekilde araştırıldı ve geliştirildi.

Albers, tek bir rengin “birçok yüze” sahip olabileceğini öne sürdü ve öğrencileri, gerçek dünyada (tasavvur ettiğimiz sembolik renklerin aksine) gerçekten davrandığı gibi görmek için “gözlerin açılacağını” umarak kapsamlı oyun ve deneyleri teşvik etti. zihnimizde).

1963'te Albers, dünya sanat ve tasarım eğitiminde son derece etkili olmaya devam eden bir ders kitabı olan Interaction of Color'ı yazdı. Yale Üniversitesi, kitabın yayınlanmasının 50. yıl dönümünü kutlamak için tam metni içeren ve aynı zamanda kullanıcıların Albers'in renkli plakalarıyla oynamalarına ve denemelerine olanak tanıyan etkileşimli bir iPad uygulaması yayınladı.

UI tasarımcıları için Interaction of Color uygulaması, dijital bir ortamda analog renk alıştırmalarını deneyimleme ve renk göreliliğinin kullanıcı arayüzlerini nasıl etkilediğini ilk elden görme fırsatı sunar.

Andrew Loomis

20. yüzyılın ilk yarısında Andrew Loomis, Chicago'daki Amerikan Sanat Akademisi'nde önde gelen bir illüstratör ve eğitmendi, ancak onun kalıcı mirası, yazarın mirasıdır. Loomis, ticari sanat ve tasarım üzerine altı kitap yazdı ve figür çiziminden ürün yerleştirmeye kadar bir dizi konuyu ele aldı.

Loomis, Creative Illustration ve Eye of the Painter (her ikisi de arşiv.org'da mevcut) adlı kitaplarında, günümüzün UI tasarımı alanıyla alakalı olan bir dizi kalıcı satır bırakıyor:

Renkte birlik ve uyum eksikliğine neden olan en büyük hata, palette çok fazla renk bulunmasıdır.

Herhangi iki renk, biri veya her ikisi de diğerinin bir kısmını içerdiğinde uyumlu olacaktır.

Renk, başka herhangi bir güzellik unsurundan daha fazla deney yapmaya kendini borçludur.

Diğer Tasarımcıların Arayüzleri

Temel düzeyde bir renk yetkinliği elde edildiğinde, renk şeması oluşturma büyüleyici bir arayışa dönüşür. Karşılaşılan her arayüz, öğrenme ve eleştiri için bir fırsat haline gelir ve gözlemler boldur.

Bu, diğer tasarımcıların çalışmalarına atıfta bulunulması güçlendirici hale geldiğinde, bir UI tasarımcısının geliştirme aşamasıdır. Nasıl yani? Çünkü referans, hedeften yolculuğa, son noktadan ilhama hareket eder.

Tüm beceri seviyelerindeki UI tasarımcıları, bulunan UI renk şemalarının devam eden bir kaydını tutmaktan faydalanır. Ekran görüntüleri alın, fiziksel bir renk günlüğü tutun, bir ruh hali panosu başlatın - gelecekteki uygulama için renkli aydınlatma anlarını yazdırmak için ne gerekiyorsa.

Renk Gözardı Edilemeyecek Kadar Önemlidir

Dijital arayüzlerin tasarımı söz konusu olduğunda, renk isteğe bağlı bir değerlendirme değildir. Minimal renk kullanan (veya tamamen siyah beyaz olan) UI'lerde bile, UI tasarımcılarının rengin neden kullanıldığını veya kullanılmadığını ve bunun kullanıcı deneyimini nasıl etkilediğini anlaması zorunludur.

UI tasarımcılarının orijinal renk şemaları oluşturma ve uygulama becerisine sahip olması da önemlidir. Diğer tasarımcıların ve dijital ürünlerin çalışmalarına atıfta bulunmak faydalı bir uygulamadır, ancak tasarım sürecinde gerçekleştirilen tek renk keşfi yöntemi olduğunda bu sınırlayıcı hale gelir. Gerçek dünyada veya zihin gözünde görülen renk eşleşmelerini yakalayabilmenin muazzam bir değeri vardır.

Renkleri ustaca kullanmakta zorlanan bir tasarımcıysanız veya “Renk konusunda gerçekten bir yeteneğim yok” diye düşündüyseniz, cesaretiniz kırılmasın. Renkle tasarım yapmak, bir tür yaratıcı sihirbazlık veya özel bir hediye değildir; tekrarlanabilen ve geliştirilebilen basit teknikler üzerine kurulu pratik bir disiplindir.

Unutmayın, renk net ve çekici tasarım iletişiminin ana anahtarıdır. İster özenle uygulansın, ister dikkatsizce terk edilsin, dönüşümü, marka bilinirliğini ve kullanıcı deneyimini etkiler. UI tasarımcısı için renk, göz ardı edilemeyecek güçlü bir araçtır.

• • •

Toptal Tasarım Blogunda daha fazla okuma:

1. UX'te Rengin Rolü
2. Daha İyi UX için UI Stil Kılavuzu Oluşturma
3. UX ve Web Erişilebilirliğinin Önemi
4. Sanata Karşı Tasarım – Zamansız Bir Tartışma
5. Etkileşimli Ortamlar ve Akıllı Mekanlar için Tasarım