İçeriğe geç →

60-30-10 Kuralı Nedir?

Malum UX hevesim sağ olsun, yeni yeni şeyler öğreniyorum. Bunlardan biri de renk paletini seçerken kullanabileceğimiz 60-30-10 kuralı!

En baştan başlayalım, 60-30-10 kuralı nedir? Görsel bütünlüğün ve ahengin sağlanabilmesi için bir matematik olduğu düşünülüyor. Böyle renk cümbüşü mekanlar sizi de yoruyordur büyük ihtimalle, ya da bazı uygulamalar sizi yoruyormuş gibi hissettirir, oysa sadece ufak bir parmak hareketi yapıyorsunuzdur.

Bu işin bilenleri diyor ki, bir bütünlüğün, ahengin ve dengenin yakalanabilmesi ve göze hoş gelebilmesi için 60-30-10 kuralı uygulanmalı. Yani ana renginiz bütünün %60’ında olmalı. %30’unda ikincil renk olarak seçtiğiniz renk. Son olarak da kalan %10’da patlatmak istediğiniz farklı bir renk ya da “diğer renkler” olmalı.

Bir oda tasarladığınızı düşünün. Ana renk olarak soft bir gri seçtiniz mesela. Odanın %60’ında bu rengi kullanmanız gerekiyor. Duvarlar ve yerler bu renk olabilir mesela. Sonra da yan renk olarak siyahı seçtiğinizi düşünelim, mobilyaların bir kısmında, perde ya da halı gibi tekstil ürünlerinde siyah kullanımınız da odanın %30’unu oluşturur. En sonda da koltuğun üzerine attığınız bir kırmızı pike ya da mobilya detaylarında kullanacağınız bronz rengiyle kalan %10’luk bölümü doldurursanız göze hoş gözükeceğini söylüyorlar.

Oda dizaynı olarak birkaç örnek göstereyim.

İlk örnekte sizin de gördüğünüz gibi odanın %60’ında beyaz kullanılmış. İkincil renk olarak da siyah/kömür rengi kullanılmış. Son olarak da az biraz yeşil serpiştirilerek düzgün gözüken bir oda tasarlanmış. İkinci örnekte de ana renk olarak beyaz kullanılmış. Duvarlardan yere, hatta yatak takımının bir kısmı da beyaz olarak kullanılmış. İkincil renk olarak da gri ile mobilyalar ve nevresim takımı kullanılmış olarak. Son olarak da pembe bir battaniye ile odanın bütünlüğü tamamlanmış.

Dijitalde nasıl kullanılıyor peki?

Özünde iç tasarımda kullanılan bu kural son dönemlerde dijital dünyada da kullanılmaya başlanmış (neyse ki!). Eskiden hatırlarsınız ki renk cümbüşü internet sitelerinin her tarafından parlayan, zıplayan bannerlar çıkıp gözünüzü acıtırdı. Zaman içinde sosyal ağlarda da rahatlıkla görebileceğimiz bir minimalizm, bir sadeleşme başladı. Hatta son yıllarda çıkan siteleri düşündüğünüzde çoğunlukla bir ana renk ve bolca beyaz boş alandan oluşuyor artık. Instagram için logosu ve poloraid görüntüsü dışında herhangi bir tasarım ögesi ya da rengi belirtebilir misiniz?

Bu kuralı kullanmanın bir adım ötesine geçen tasarımcı Dan Romero, bunu farklı bir matematikle doğrudan renk çemberi üzerinde göstermiş.

İlk adım olarak ana renginizi seçmenizi istiyor. Özellikle canlı renklerden birini seçmenizin daha iyi olacağını öneriyor hatta!

İkincil renginizi belirlemek için öncelikle bu rengi kopyalayın diyor. Sonrasında S (Saturation) (Doygunluk) değerini 5-10 arasına, B (Brightness) (Parlaklık) değerini de 95-100 arasına getirmenizi istiyor. Bu sayede ikincil renginizi de uyumlu bir şekilde seçeceğinizi belirtiyor.

Ve sıra geldi %10’luk son rengi seçmeye. Bunun için de ana rengi tekrar kopyalamanızı istiyor. Bu sefer de H (Hue) (Ton) değerini 30-40 arasına bir değerde artırmanızı ya da azaltmanızı, B (Brightness) (Parlaklık) değerini de 5-10 değer arasında artırmanızı istiyor.

Bu sayede 60-30-10 kuralına göre en uygun renkleri srahatlıkla belirleyebileceğinizi söylüyor. Elbette ki gerçek dünyada bir tasarım yaparken bu kadar katı kurallarınız olamaz. Bir renk siyahken diğeri kırmızı olmak durumunda olabilir kurumsal kimliğe göre. Ama yine de bu metodun nasıl çalıştığını da onun bir örneği üzerinde göstermeye çalışayım.

Öncelikle önümüze temiz bir wireframe ekranı koymuş ki renkleri daha iyi görebilelim. Sonrasında da seçtiği renkleri güzelce yerleştirmiş.

Hatta bununla da kalmamış, bu yöntemi kullanarak oluşturduğu renk paletini her değer için kullanabileceğiniz göstermek için renkleri karıştırarak tekrar uygulamış ve sonuç : Yine güzel!

Renk paleti 60-30-10 kuralı dışında başka nasıl oluşturulabilir?

Şimdi öncelikle şunla başlayayım. “Ama benim renk oranım %55’te kaldı!” demenize gerek yok, buradaki değerler elbette ki yaklaşık değerler. Zaten nasıl bu kadar net ölçebilirsiniz ki her sayfayı? :). Elinizden geldiği kadar yaklaşsanız yeter. Ayrıca illa tek renk kullanmanıza da gerek yok. Oda örneklerine geri bakarsanız gri yan renginin farklı tonlarının kullanıldığını görebilirsiniz. Yani renklerinizi yakın tonlarla da biraz çeşitlendirebilirsiniz gerekli olursa.

İşin doğrusu, bunu ancak tecrübe söyleyebilir. Bir yerden sonra, göz alışkanlığını ve dinamikleri daha derinlemesine öğrenince, içselleştirince, daha çok deneyimleyince otomatik olarak geliyor diye düşünüyorum (umut ediyorum! 😀 ). Ama başlangıç olarak ben bu 60-30-10 kuralını kullanarak olabildiğince temiz ve sade çalışmayı planlıyorum.

Özellikle bir marka ile çalışıyorsanız ilk yapmanız gerekenlerden biri de “Moodboard” dedikleri görsel kolajı. Siz bir palet oluşturup onunla uğraşırken markanız bambaşka bir dünyada olabilir! Ana renginizi belirleyip ona göre bir moodboard hazırlayıp markaya sunarsanız en azından daha başlamadan size “Bir tık daha koyu olabilir mi?” diyebilirler!

Kategori: Genel UI/UX

Yorumlar

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir