Bir Rengi Eksiksiz Bir UI Paletine Dönüştürün

1. Renk Seçmeden Önce Arayüzü Tanımlayın

Renk tekerleğiyle değil, ürünle başlayın. Bir portföy, bankacılık panosu, tarif uygulaması ve çocukların öğrenme platformu tamamen farklı enerji, güven, kısıtlama ve görsel kontrast seviyeleri gerektirebilir. Ne tasarladığınızı, kimler tarafından kullanılacağını ve kullanıcıların neler başarması gerektiğini yazın.

Daha sonra, arayüzdeki ana bileşenleri listeleyin. Bunlar bir navigasyon çubuğu, kartlar, formlar, düğmeler, bildirimler, fiyatlandırma tabloları ve altbilgi içerebilir. Bu envanter, kaç fonksiyonel renk rolüne ihtiyaç duyduğunuzu ortaya çıkarır. Çoğu arayüz, tecrübesiz tasarımcıların beklediğinden daha az rol gerektirir.

Ürünün görsel karakteri için üç açıklayıcı hedef oluşturun. Örnekler arasında "sakin, güvenilir ve doğrudan" ya da "yaratıcı, enerjik ve dostça" sözcükleri yer alır. Bu sözcükler, oluşturulan paletleri değerlendirmek için bir filtre haline gelir. Bir renk kendi başına çekici olabilir, ancak oluşturduğunuz deneyim için yine de yanlış olabilir.

Bu aşamada, mavi her zaman güveni veya kırmızı her zaman aciliyet anlamına geldiğine karar vermeyin. Renk ilişkilendirmeleri bağlama, kültüre, çevredeki renklere ve önceki kullanıcı deneyimine bağlıdır. Ürünün pratik ihtiyaçlarını önce tanımlayın, sonra rengin bunları nasıl desteklediğini değerlendirin.

2. Sevdiğiniz Rengi Kararlı Bir Temele Dönüştürün

Başlangıç noktanız bir logodaki, fotoğraftaki, fiziksel üründeki veya kişisel tercih olan bir renk olabilir. Bu rengi HEX, RGB veya HSL gibi kesin bir dijital değere dönüştürün. "Derin mor" yoruma açıktır, ancak #4F46E5 gibi bir değer tutarlı bir şekilde yeniden üretilebilir.

Başlangıç renginiz yoksa, olasılıkları keşfetmek için Rastgele Renk Oluşturucuyu kullanın. Rastgele oluşturulan renkleri son kararlardan ziyade ipuçları olarak düşünün. Birkaç seçenek oluşturun, umut verici olanları kaydedin ve bunları birinci adımda tanımladığınız üç ürün kalitesine karşı karşılaştırın.

Esiniz bir logodan, fotoğraftan veya mood board'dan geliyorsa, görseli Görüntüden Palet Aracına yükleyin. Baskın renkleri tanımlamanıza ve kodlarını kopyalamanıza yardımcı olabilir. Projeyi temsil eden bir renk seçin, ancak orijinal görüntünün dışında da çalıştığını kontrol edin.

Sıcak fotoğrafla çevrelenen bir renk, düz beyaz arayüze yerleştirildiğinde farklı hissedebilir. Adayınızı hem açık hem de koyu arka planları üzerinde test edin. Çamurlu hale gelirse, aşırı parlaksa veya ayırt edilmesi zor hale gelirse, temel renginizi ilan etmeden önce açıklığını veya doygunluğunu ayarlayın.

3. Temel Renge Açık Bir Anlamsal Rol Verin

Temel bir rengin bir işi olması gerekir. Birçok üründe, birincil renk form gönderme, deneme başlatma veya değişiklik kaydetme gibi önemli eylemleri temsil eder. Diğer arayüzlerde, aynı renk esas olarak bağlantılar, seçili navigasyon öğeleri veya dekoratif marka için kullanılabilir.

Kullanıcıların rengi nerede görmeyi beklediğine karar verin. Eğer "etkileşimli" anlamına geliyorsa, onu sıradan başlıklara ve dekoratif şekillere uygulamamaktan kaçının. Kullanıcılar görsel desenleri hızlı bir şekilde öğrenirler. Aynı renk bazen "buraya tıkla" ve bazen hiçbir şey anlamına geldiğinde, arayüz daha az öngörülebilir hale gelir.

Marka tanınmasını arayüz davranışından ayırın. Güçlü bir marka rengi tüm ekranı kaplaması gerekmez. Birincil düğme, logo detayı, etkin sekme ve odak göstergesi üzerinde seçici bir şekilde kullanıldığında bellek kalabilir. Kısıtlılık genellikle rengi daha tanınabilir hale getirir çünkü her görünüş anlam taşır.

4. Faydalı Tonlar ve Gölgeler Oluşturun

Tek bir renk değeri nadiren yeterlidir. Düğmeler hover ve basılan durumlar gerektirir, seçilen alanlar açık bir arka plan gerektirebilir ve koyu mod aynı tonun daha hafif bir versiyonu gerektirebilir. Çok açık tonlardan derin gölgelere kadar uzanan bir ölçek oluşturun.

Monokromatik kombinasyonları keşfetmek ve parlaklık ve doygunluğu ayarlamak için Renk Paleti Oluşturucuyu kullanın. Temel rengi kilitleyin ve çevredeki renkler yeniden oluşturulurken sabit kalması için bunu yapın. Oluşturulan bir değeri yalnızca palette göründüğü için tutmayın. Yalnızca belirli bir rolü gerçekleştirirse tutun.

İki HEX rengi arasında ara değerler oluşturmak için Renk Karıştırıcısını da kullanabilirsiniz. Temel rengi hafif bir yüzey rengiyle karıştırarak ince seçili arka planları önerebilirsiniz. Onu daha koyu bir bitiş noktasıyla karıştırmak hover ve basılan durumları keşfetmenize yardımcı olabilir.

Komşu renklerin neredeyse ayırt edilemez olduğu ölçekleri önleyin. Tutulan her adım bağlam içinde görünür bir fark yaratmalıdır. Kompakt, faydalı bir ölçek, on renkli ölçeğin değerleri hiçbir farklı işlev gerçekleştirmesi daha iyidir.

5. Nötr Bir Temel İnşa Edin

İşlevsel bir arayüzün çoğu genellikle nötrdir. Sayfa arka planları, yüzeyler, kenarlıklar, gövde metni, susturulmuş etiketler ve devre dışı bırakılan denetimler, birincil eylemin rekabet etmediği renkler gerektirir. Bu nedenle UI paleti yalnızca parlak marka renklerinden oluşamaz.

Sayfa arka planı ve yüzey rengiyle başlayın. Yüzey, arka plandan ayırt edilebilir olmalıdır ancak bir yamalı efekt oluşturmamalıdır. Ardından, güçlü bir metin rengi, daha yumuşak bir ikincil metin rengi ve ince bir kenarlık rengi ekleyin.

Nötrler mükemmel gri olmak zorunda değildir. Marka tonunun küçük bir miktarı, sistemi daha birleştirilmiş hissettiren bir renk yapabilir. Örneğin, serin bir birincil renk, hafif ölçüde serin grilerde iyi çalışabilir. Tinti, içeriğin okunması rahat kalacak kadar ince tutun.

Azaltılmış opaklığı, susturulmuş metin veya kenarlıklar oluşturmanın tek yöntemi olarak kullanmayın. Şeffaf renkler, farklı arka planlara yerleştirildiğinde değişir. Tutarlılık önemli olduğunda, açık değerleri tanımlayın ve görünecekleri her yüzeyde test edin.

6. Kontrollü Bir İkincil Renk Seçin

İkincil bir renk, grafikler, illüstrasyonlar, promosyon alanları veya seçili kategorileri destekleyebilir. Birincil eylemin rekabetine girmeden görsel dili genişletmelidir. Hem birincil hem de ikincil renkler eşit derecede güçlü ve eşit sıklıkta görünüyorsa, kullanıcılar hangi öğenin dikkat hak ettiğini anlamakta zorluk çekebilir.

Sakin bir ilişki istediğiniz zaman analogous kombinasyonları keşfedin. Tamamlayıcı veya bölünmüş-tamamlayıcı kombinasyonlar daha güçlü ayrıştırma yaratabilir ancak daha fazla kısıtlama gerektirir. Adobe'nin renk teorisi kılavuzu renk tekerleği ve yaygın uyum modellerine yararlı bir genel bakış sağlar.

İkincil rengi, izole edilmiş taslakları karşılaştırmak yerine bir bileşenin içinde test ederek seçin. Küçük bir grafik, etiketi, illüstrasyon veya bilgi kartında yerleştirin. Ardından bunu birincil düğmenin yanında görüntüleyin. İkincil öğe ilk olarak dikkati çekerse, doygunluğunu azaltın, açık hale getirin veya görünme sıklığını sınırlayın.

7. Renkleri Arayüz Rollerine Atayın

Bu nokta, renk koleksiyonunun tasarım sistemine dönüştüğü noktadır. "Mavi", "mor" ve "gri iki" gibi renk temelli adları rol tabanlı adlarla değiştirin. Anlamsal adlar, değerlerin daha sonra değişmesine izin verir her bileşeni yeniden adlandırmaya zorlama.

Rol listesini başta kısa tutun. Başka bir sorun varolan bir role göre çözülemeyen yeni bir sorun ortaya çıktığında başka bir token ekleyin. Bu, arayüze neredeyse aynı değerlerden düzinelercesinin girmesini engeller.

8. Hover, Focus ve Disabled Durumları Oluşturun

Arayüzler insanlara yanıt verir. Bir düğme boşta, vurgulu, odaklanmış, basılmış, yükleniyor veya devre dışı olabilir. Bu durumların tümü aynı görünüyorsa, kullanıcılar arayüzün eylemlerini fark ettiğine dair çok az onay alırlar.

Durum renklerini bileşenin varsayılan renginin kontrollü varyasyonları olarak oluşturun. Bir hover durumu biraz daha koyu veya daha açık olabilirken, basılmış durum daha güçlü görsel değişim yaratabilir. Odak göstergesi, hem bileşen hem de çevredeki arka plana karşı görünür kalmalıdır.

Durumu yalnızca renk yoluyla iletişim kurmayın. Rengi bir simge, altçizgi, anahat, mesaj veya şekil değişikliği gibi başka bir ipucu ile birleştirin. Örneğin, geçersiz bir form alanı, hata rengine dayalı kenarlıkla birlikte bir hata simgesi ve açıklayıcı metin kullanabilir.

Devre dışı bırakılan denetimler özel ilgi gerektirir. Kullanılamaz görünmeleri gerekir ancak okunamaz hale gelmemelidir. Aşırı açık metin erişilebilirlik sorunu yaratabilirken, etkin gibi görünen devre dışı bırakılan bir düğme kafa karışıklığı yaratabilir. Yalnızca doldurma rengini değil, tüm bileşeni test edin.

9. Renk Kontrastını ve Erişilebilirliği Test Edin

Görsel uyum, okunabilir içeriği garanti etmez. Her önemli ön plan ve arka plan çifti kontrast açısından test edilmelidir. W3C Web İçeriği Erişilebilirlik Yönergeleri 2.2 normal metin için minimum 4,5:1 kontrast oranı ve Başarı Kriteri 1.4.3 altında büyük metin için 3:1 belirtir.

Erişilebilirlik testi, tüm arayüz oluşturulduktan sonra değil, palet oluşturması sırasında yapılmalıdır. Bir çift başarısız olursa, ton açısından açıklığı ayarlamasını yapın ve ton hakkında rastgele değişiklikler yapmadan önce test edin. Hover, basılan, seçili ve devre dışı bırakılan versiyonları ayrı ayrı test edin çünkü her durum farklı ön plan-arka plan ilişkisi yaratır.

10. Açık ve Koyu Mod Paletlerini Hazırlayın

Koyu mod, siyah beyazı tersine çevirilerek oluşturulmaz. Renkler koyu yüzeylerden farklı davranır, parlak doymuş renkler titreşebilir, gölgeler daha az faydalı hale gelir ve saf beyaz metin sert hissedebilir. Her anlamsal rolün anlamını korurken hiyerarşiyi yeniden inşa edin.

Token adlarını temalar arasında tutarlı tutun. background öğesine atanan değer değişebilir, ancak amacı aynı kalır. Aynı ilke yüzeyleri, metni, kenarlıkları ve birincil eylemleri için geçerlidir. Bu, bileşenlerin tema belirli mantık içermeden temalar arasında geçiş yapmasına izin verir.

Apple'ın Renk için İnsan Arayüzü Yönergeleri farklı görünümleri dikkate almayı ve iletişim için rengi tutarlı bir şekilde kullanmayı önerir. Her iki temayı bağlam içinde test edin ve önemli bilgilerin yalnızca renk tarafından ifade edilmediğinden emin olun.

Mümkün olduğunda ekranları parlak ve loş ortamlarda inceleyin. Koyu bir oda içinde zarif görünen koyu bir palet, gün ışığında ayrımı eksik bırakabilir. Ayrıca görüntüler, grafikler, illüstrasyonlar ve logoları inceleyin, bu varlıklar basit arka plan değişikliği yerine tema farkında sürümler gerektirebilir.

11. Paleti Gerçek Bileşenlerin İçinde Test Edin

Palet bir taslak satırı olarak onaylanmamalıdır. Başlık, paragraf, bağlantı, birincil düğme, ikincil düğme, form alanı, kart, navigasyon öğesi ve uyarı içeren küçük bir test sayfası oluşturun. Bu, palet önizlemesinde görünmez kalan sorunları ortaya çıkarır.

Farklı uzunluklardaki içeriği test edin. Kısa İngilizce etiket rahatça sığabilir while çevrilmiş versiyonu iki satıra sarabilir. Paleti mobil ve masaüstü boyutlarında, klavye odağı görünür ve gerçekçi hata mesajları görüntülü olarak kontrol edin.

İçerik ağır mizanpajlar kısıtlılık test etmek için özellikle faydalıdır. Örneğin, Ücretsiz Özgeçmiş Oluşturucusu hiyerarşi ve okunabilirliğin dekorasyon öğesinden daha önemli olan bir arayüz türünü temsil eder. Paletinizin kullanıcıların bölümleri taramasına yardımcı olup olmadığını yoksa bilgilerden dikkatini dağıtıp dağıtmadığını sorun.

Gerçek bir sorunu çöz olmayan renkleri çıkarın. İki değer görsel olarak ayırt edilemezse, bir tanesini tutun. İkincil renk tekrarlanan olarak birincil eylemin rekabeti yapıyorsa, bunu illüstrasyonlar için saklayın veya arayüz paletinden tamamen çıkarın.

12. Sistemi Belgelendirin, Dışa Aktarın ve Bakımını Yapın

Palet gerçek bileşenlerde çalıştığında, onu belgelendirin. Her rengin değerini, anlamsal adını, izin verilen kullanımları ve önemli kısıtlamaları kaydedin. Test edilen metin kombinasyonları ve renklerin nasıl kullanılmaması gerektiğine ilişkin örnekler ekleyin.

Renk Paleti Oluşturucusu CSS kopyalamanıza izin verir ve bu faydalı bir başlangıç noktası sağlar. Dışa aktarılan değişkenleri rollerine göre yeniden adlandırın, böylece geliştiriciler her HEX değerinin ne anlama geldiğini hatırlamak zorunda kalmazlar.

:root {
  --color-background: #ffffff;
  --color-surface: #f7f7fa;
  --color-text-primary: #17171c;
  --color-text-muted: #5f606b;
  --color-primary: #4f46e5;
  --color-on-primary: #ffffff;
  --color-border: #d9dae2;
  --color-success: #16794b;
  --color-warning: #9a6700;
  --color-error: #b42318;
}

PNG olarak görsel bir palet tahtası oluşturursanız, PNG'den PDF'ye Dönüştürücü bunu paylaşmak veya arşivlemek için uygun bir PDF'ye dönüştürebilir. Ancak yalnızca görsel bir belgeye güvenmeyin. Değerlerin tutarlı kalması için son tokenları projenin tasarım sistemine veya kod tabanında depolayın.

Paleti bakımlı bir sistem olarak değerlendirin. Bir değer değiştiğinde, onu kullanan her rolü ve durumu test edin. Değişikliğin neden yapıldığını kaydedin ve neredeyse aynı değerlerin birikmeye izin vermek yerine eski değerleri kaldırın.