60-30-10 Kuralı Bozuldu: Gerçekten İşe Yarayan Modern Renk Sistemleri
60-30-10 kuralı, iç mekan tasarımcılarının ürün çalışmalarına zorla uyguladıkları bir kısayoldur. İşte modern renk sistemlerinin bunun yerine yaptığı şey.
Çoğu tasarımcıya renk konusunda öğretilen ilk şey 60-30-10 kuralı kuralıdır ve çoğu ciddi ürün ekibi, gerçek bir arayüz piyasaya sürdükleri anda sessizce terk ettikleri ilk şeydir. Yüzde altmış baskın, yüzde otuz ikincil, yüzde on vurgu rengi.
Temiz. Alıntı yapılabilir. Bir marka düğmelere, devre dışı bırakılmış durumlara, bildirimlere, grafiklere, karanlık moda ve bir dokümantasyon sitesine sahip olduğunda tamamen işe yaramaz.
Kural yanlış değil. Sadece farklı bir sorun için oluşturulmuş. En iyi tasarım sistemlerinin bunun yerine kullandığı şey bir oran değil, rol tabanlı bir belirteç sistemidir. Bu makale, 60-30-10 kuralının neden bozulduğunu, yerine neyin geçtiğini ve bu değişimi büyük ölçekte yapan beş gerçek tasarım sistemini ele almaktadır.
60-30-10 Kuralı Nereden Geliyor?
60-30-10 kuralı, yirminci yüzyılın ortalarından kalma, iç dekorasyonda kullanılan ve alıntı yapacak bir kurala ihtiyaç duyan kişiler tarafından dijital tasarıma uyarlanmış bir kısayoldur.
Kökeni konut tasarımına dayanıyor. Bir odanın baskın bir rengi (duvarlar), ikincil bir rengi (döşemeler, perdeler) ve bir vurgu rengi (yastıklar, sanat eserleri) vardır. Altmış, otuz, on. Odalar için işe yarıyor çünkü odalar tek bir statik yüzeydir ve aynı anda tek bir insan tarafından görülür ve biri yeniden boyayana kadar aynı renkte kalırlar.
Bu varsayımların hiçbiri ürün tasarımıyla temas ettiğinde geçerliliğini yitiriyor. Dijital bir ürün statik bir yüzey değildir. Her biri kendi durumlarına, temalarına ve bağlamlarına sahip yüzlerce yüzeyden oluşur. Kural asla bu dünya için tasarlanmamıştır ve bu da kendini gösteriyor.
Ürün Tasarımında Neden Başarısız Oluyor?
60-30-10 kuralı, tek bir statik yüzey ve tek bir izleyici varsayar ki bu, ürün tasarımının nasıl çalıştığıyla tam olarak örtüşmez.
Gerçek arayüzlerde devre dışı bırakılmış düğmeler, fareyle üzerine gelme durumları, odak halkaları, hata banner'ları, başarı bildirimleri, grafik veri serileri, boş durumlar, yükleme iskeletleri ve yıkıcı eylemler için anlamsal renkler bulunur. Bunların hiçbiri "tuvalin %60, %30 veya %10'u" ile tam olarak eşleşmiyor. Bunlar tuval değil, davranıştır.
Karanlık modu eklediğiniz anda kural da çöker. %60'lık açık nötr renginiz artık %60'lık koyu nötr renge dönüşmek zorunda, %30'luk ikincil renginiz hiyerarşiyi korumak için ton değiştirmek zorunda ve %10'luk vurgu renginiz erişilebilir kalmak için genellikle tamamen aydınlanmak veya ton değiştirmek zorunda kalır. Bu bir oran sorunu değil, bir sistem sorunudur.
Erişilebilirlik son noktadır. WCAG kontrast oranları sayfanızın yüzde kaçının mavi olduğuyla ilgilenmez. Belirli düğmedeki belirli mavinin, arkasındaki belirli arka plana karşı yeterli kontrastı olup olmadığıyla ilgilenir. Bu sorunu gayrimenkul oranlarıyla çözemezsiniz.
Modern Renk Sistemlerinin Bunun Yerine Kullandıkları
En iyi arayüzleri destekleyen sistemler, oran kurallarını, bir rengin ne yaptığını, ne kadarının var olduğunu değil, tanımlayan rol tabanlı belirteç katmanlarıyla değiştirir.
| Katman | Ne yapar | Belirteç örnekleri |
|------|--------------|---------------------|
| Yüzey | Arka plan katmanları ve yükseklikler | bg-default, bg-subtle, bg-raised, bg-overlay |
| İçerik | Yüzeylerdeki metin ve simgeler | text-default, text-muted, text-on-accent |
| Vurgu | Marka ve birincil eylem renkleri | accent-primary, accent-primary-hover, accent-secondary |
| Durum | Etkileşimli ve geri bildirim durumları | state-hover, state-focus, state-disabled |
| Semantik | Anlam yüklü sinyaller | success, warning, critical, info |
Her bir token bir rolü tanımlar. "Bu renk, kartın arkasındaki yüzeydir." "Bu renk, vurgunun üzerindeki metindir."
Tasarımcı asla "ikincil veya %30 vurgu" arasında seçim yapmaz. Sistem tarafından zaten tanımlanmış roller arasında seçim yaparlar.
Fayda katlanarak artar. Karanlık modu eklemek, arayüzü yeniden boyamak yerine aynı token'ları farklı ham değerlere eşlemek meselesi haline geliyor. Yeni bir marka teması eklemek, vurgu katmanında tek bir token değişimine dönüşüyor. Erişilebilirlik, sayfa sayfa kontrol edilmek yerine token düzeyinde uygulanıyor.
Doğru Yapan Beş Tasarım Sistemi
Bunlar, ışık modu, karanlık mod ve kullanıcının dokunduğu her yüzeyde geçerli olan rol tabanlı paletlerle büyük ölçekte kullanıma sunuluyor.
Material Design 3
m3.material.io adresinden canlı olarak izleyin.
Material 3, bu geçiş konusunda en açık olanıdır. Sistem, "birincil", "birincil üzerinde", "yüzey", "yüzey üzerinde", "ters birincil" gibi renk rollerini tanımlar ve her rol kontrast için önceden eşleştirilir. Tasarımcılar renkleri seçmezler. Rolleri seçerler ve token'lar aktif tema için doğru değerlere çözümlenir.
Çalınacak şey: "on-" adlandırma kuralı. Birincil yüzeyin üzerinde bulunan metin/ikonlar için on-primary, erişilebilirliği doğrudan belirteç adına kodlar.
Radix Colors
Radix-ui.com adresinden canlı olarak izleyin.
Radix Colors, her ton için 12 adımlı ölçekler sunar ve her adım önceden bir role atanmıştır (uygulama arka planı, ince arka plan, UI öğesi, üzerine gelme, odaklanma, aktif, düz, metin, yüksek kontrastlı metin). Oran mantığı yok. Her adım bir roldür.
Çalınacak şey: Rol açıklamalarıyla numaralandırılmış ölçek. Tasarımcılara "hangi griyi kullanmalıyım" tartışmasının %90'ını ortadan kaldıran ortak bir kelime dağarcığı sağlar.
Shopify Polaris
Polaris.shopify.com adresinden canlı olarak inceleyin.
Polaris, rengi bileşen rolüne göre düzenler: arka plan (yüzey), metin (içerik), simge, kenarlık ve etkileşimli. Her birinin fareyle üzerine gelme, basılı tutma, devre dışı bırakma ve seçme için alt rolleri vardır. Sistem, bir tasarımcının tanımlanmış belirteçlerin dışına çıkmasını yapısal olarak zorlaştırır.
Çalınacak şey: rol gruplaması. "Kenarlık" belirteçlerini "yüzey" belirteçlerinden ayırmak, bileşen düzeyinde kasıtlı renk kullanımını zorunlu kılar.
Üretimde Bunu Kullanan İki Marka
Yukarıdaki tasarım sistemi belgeleri referanstır. Bu iki marka ise kanıtıdır. Stripe ve Linear, ürün katmanında her gün rol tabanlı renk kullanıyor ve her ikisi de bu modelin gerçek kullanımda geçerli olduğunu kanıtlıyor.
Stripe
stripe.com adresinden canlı olarak izleyin.
Stripe, sadece bir tasarım sistemi belgesi değil, piyasaya sürülmüş bir markayı da sunuyor. Herkese açık site, rol tabanlı renk kullanımının üretimde nasıl göründüğünü gösteriyor.
Neredeyse her şey nötr yüzeyler ve nötr içerikten oluşuyor. Mor, vurgu katmanıdır ve tam olarak eylemlerin, bağlantıların ve marka sinyallerinin bulunduğu yerlerde görünür. Oran mantığı yok. Rol mantığı.
Çalınacak şey: vurgu katmanını ince tutma disiplini. Stripe'in vurgu rengi bağlantısı, rolü saklı olduğu için az kullanılıyor. Dekorasyon için vurgu renkleri kullanırsanız, onları eylem için kullanma yeteneğinizi kaybedersiniz.
Linear
linear.app üzerinden canlı izleyin.
Linear, büyük ölçekte ürün sunan neredeyse herkesten daha fazla nötr renklere ağırlık veriyor. Ürün tamamen koyu yüzey tonlarından oluşuyor ve tüm işlevi tek bir vurgu rengi (mor) üstleniyor. Hiçbir oran kuralı bunu üretemezdi. Bu, "vurgu" katmanının ölçülü kullanılan tek bir renk olduğu ve "yüzey" katmanının tam bir yükseklik yığını olduğu tamamen rol tabanlı bir sistemdir.
Çalınacak şey: vurgu katmanının tek bir renk olmasına izin verme özgüveni. Birçok yeni tasarım sistemi, vurgu renklerini aşırı derecede kullanıyor. Linear, tutarlı bir şekilde kullanılan iyi seçilmiş bir vurgunun, orantılı olarak üç vurgudan daha güçlü bir tanınırlık sağladığını kanıtlıyor.
Rol Tabanlı Bir Palet Nasıl Oluşturulur
Bu şekilde bir palet oluşturmak, üç renk seçip yüzdeler atamaktan daha uzun sürer ve bir tasarımcı ilk kez koyu modu eklediğinde kendini amorti eder.
Süreç, çoğu tasarımcının öğrendiğinin tersine işler. Önce renkleri seçip onlar için roller bulmak yerine, önce rolleri seçip onlar için renkler bulursunuz.
-
Rol katmanlarını tanımlayın. Yüzey, içerik, vurgu, durum, anlamsal ile başlayın. Çoğu ürün tam olarak bu beşine ihtiyaç duyar. Bazıları veri görselleştirme için altıncı bir katmana ihtiyaç duyar.
-
Hex değerlerini seçmeden önce belirteçleri yazın. Her belirteç bir rolü tanımlamalıdır (
surface-subtle,content-muted,accent-primary-hover). Bir belirteç adı bir rengi ("açık mavi") tanımlıyorsa, yeniden adlandırın. -
Önce nötr ölçeği doldurun. Gerçek bir arayüzün çoğu nötrdür. Marka rengine dokunmadan önce tam bir ölçek oluşturun (Radix'in 12 adım kullanmasının bir nedeni var).
-
Vurgu katmanını en son ekleyin. Vurgu rengi genellikle marka kimliği'un aktif olarak bulunduğu tek yerdir. Burada kısıtlama tüm oyunun temelidir.
-
Karanlık modu yeniden tasarlayarak değil, belirteçleri yeniden çözümleyerek eşleştirin. Sisteminiz rol tabanlıysa, karanlık mod renk revizyonu değil, belirteç değeri değişimidir.
-
Erişilebilirliği belirteç katmanında uygulayın. Her
on-surfacebelirteci, eşleştirilmiş yüzeyine karşı 4,5:1 oranında geçmelidir. Kontrolü entegre edin.
Cazip kısayol, üç rol (birincil, ikincil, vurgu) tanımlamak, zaferi ilan etmek ve göndermektir. Bu, belirteç kostümü giymiş 60-30-10 kuralıdır. Tam olarak aynı noktada çöker: ilk gerçek bileşen.
Renk kararlarının, bu belirteç çalışmalarının öneminden önce kullanıcılar tarafından nasıl algılandığına dair daha geniş bir çerçeve için, Tasarımda renk psikolojisi anlam katmanını ele alıyor. Renk sistemlerinin daha büyük sistem bağlamında nasıl yer aldığına dair ise tasarım sistemleri kılavuzu tam resmi sunuyor.
SSS
60-30-10 kuralı hiç işe yarar mı?
Evet. Tek yüzeyli tasarım hala bundan faydalanıyor. Posterler, sosyal medya gönderileri, pazarlama kahraman bölümleri, ambalajlar, editoryal sayfalar. Teslim edilebilir ürünün bir kez görülen tek bir tuval olduğu her yerde, kural hızlı bir oran kısayolu sağlıyor. Ürün tasarımı bu dünya değil.
Bir tasarım sisteminde kaç renk olmalı?
Düşündüğünüzden daha az ham onaltılık değer, düşündüğünüzden daha fazla belirteç halinde düzenlenmiş. Çoğu gönderim sistemi 8 ila 12 nötr adım, 8 ila 12 vurgu adımı ve 3 ila 5 anlamsal aileye sahiptir ve bunların tümü rol tabanlı belirteçlere çözümlenir. Ham renk sayısı azdır. Rol sayısı fazladır.
Renk paleti ile renk sistemi arasındaki fark nedir?
Bir renk paleti, bir renk kümesidir. Bir renk sistemi ise bir rol kümesi, bu rollerin nasıl etkileşimde bulunduğuna dair bir dizi kural ve temaya göre değişebilen rollerden renklere bir eşlemedir. Bir palet "markada hangi renkler var" sorusuna cevap verir. Bir sistem ise "bu öğe bu temada bu durumda hangi renktedir" sorusuna cevap verir.
Rengi Yüzde Olarak Ölçmeyi Bırakın
60-30-10 kuralı kötü değildir. Sadece kapsam dışıdır.
Ürün tasarımı bir oda değildir. Kullanıcının içinden geçerken değişen yüzeyler, durumlar ve rollerden oluşan bir sistemdir.
Rengi yüzde olarak ölçmek, tipografiyi sayfanın yüzdesiyle ölçmek kadar anlamsızdır. "Metnin %30'u başlıktır" demezsiniz. "Başlıklar, tanımlanmış bir stile sahip bir roldür" dersiniz. Renk de aynı şekilde çalışmalıdır.
En iyi ölçeklenebilir görsel kimlik çalışmalarını sunan markalar, Material, Radix, Polaris, Stripe, Linear, bunu anladılar ve bunun etrafında bir yapı oluşturdular. Yüzdelerini kopyalamak asıl noktayı kaçırmak demektir. Asıl nokta, rol yapılarını kopyalamaktır.
Eğer mevcut paletiniz üç renkten ve belirsiz bir tahsis kuralından oluşuyorsa, bir renk sisteminiz yok demektir. Bir renk tercihiniz var demektir. Katmanları oluşturun, rolleri adlandırın ve onaltılık değerler üzerinde tartışmaya girmeyin.
Need a color system built to scale, not just to swatch? Brainy builds palettes with token tiers, dark mode, and accessibility baked in.
Get Started
