A 60/30/10 szabály a színek használatában Amitől egy felület rendezettnek hat.

1. Amit a szabály kimond

A 60/30/10 az egyik design-elméleti alapelv, amely a színek egymással való használatára vonatkozik. Eszerint a felület nagyjából 60 százalékát egy domináns szín tölti ki, 30 százalékát egy kísérő szín, a maradék 10 százalékon pedig egy kiemelő szín osztozik, és ezektől az arányoktól lesz kiegyensúlyozott a megjelenés.

Az elv a belsőépítészetből is ismerős, ahol egy szoba színeit osztják el így. A képernyőn ugyanez történik, a domináns szín jellemzően a háttér, a kísérő szín a kártyákon és a szövegblokkokon jelenik meg, a kiemelő szín pedig a gombokon és a fontos részleteken.

2. Amiért működik

Ha minden szín ugyanakkora felületet kap, a szem nem tudja, hová nézzen először, és a felület akkor is zajosnak hat, ha a színek külön-külön szépek. Az arányok sorrendet teremtenek, a nagy, nyugodt felületek pihentetik a szemet, a kisebb, kontrasztos foltok pedig jelzik, hol van a lényeg.

Ezért a domináns szín legtöbbször semleges alap, világos vagy sötét, a kísérő szín rendszerezi a tartalmat, a kiemelő szín pedig ritka marad, és éppen a ritkasága miatt tud figyelmet kérni.

3. A 10 százalék a gombé

UI design esetében a szabály egyik legfontosabb hozadéka, hogy a 10 százalékos szín kapja a CTA szerepét, vagyis azt a gombot vagy linket, amelyre a látogatótól a kattintást várod. Ha a kiemelő szín csak a fő lépéseken jelenik meg, a látogató tanulás nélkül is megérti, hogy ami ilyen színű, azzal tennivalója van.

A leggyakoribb hiba, amit átnézéseknél látok, hogy a márkaszín mindenhová kerül, a címekre, az ikonokra és a gombokra egyaránt. Ilyenkor a gomb ugyanolyan hangosan szól, mint minden más, és a látogatónak keresnie kell, mit kellene tennie. Ha a kiemelő színt visszafogod, a fő gomb magától előlép.

4. Nyomtatásban is ugyanígy

A szabály offline is működik. Egy plakáton vagy egy kiadványban ugyanúgy van egy alap, amely a felület nagyját adja, egy kísérő szín, amely csoportosítja az információt, és egy kiemelés, amely a legfontosabb részt, például az ajánlatot teszi szembetűnővé.

Nyomtatásnál annyit érdemes hozzátenni, hogy a képernyőn élénk kiemelő szín papíron fakóbb lehet, ezért a nyomdai színkódokat is érdemes előre megnézni, mielőtt a kiemelés egy fontos felületre kerül.

5. A saját felületeidre szabva

• Válaszd ki az alapszínt, amely a háttér nagyját adja, ez legtöbbször világos vagy sötét semleges szín.
• Jelölj ki egy kísérő színt a kártyáknak és a másodlagos elemeknek.
• A kiemelő szín legyen a márkád legerősebb színe, és csak a fő gombokra és a legfontosabb kiemelésekre kerüljön.
• A kész tervet nézd meg hunyorogva vagy kicsinyítve, és ellenőrizd, hogy a kiemelő szín tényleg a lényegre vezeti-e a tekinteted.

A számokat nem kell centire kimérni, az arányok iránytűként szolgálnak. Ha egy felület eltér tőlük, és mégis jól működik, az rendben van, ha viszont valami zsúfoltnak vagy fakónak tűnik, a 60/30/10 jó első kérdés arra, hol csúszott el az egyensúly.