A legendás 60-30-10 szabály

Az utóbbi időben nem csak weboldalakat és logókat, hanem a saját lakásunk nappaliját is tervezgetem, ezért egyre gyakrabban szembejön velem a 60-30-10 szabály. Azonban nem csak a lakberendezés, hanem a webdesign területén is emlegetik ezt a szabályt, ezért úgy döntöttem én is beleásom magam és utána járok, hogy mennyire alkalmazható jól egy weboldal megtervezésénél.

TISZTÁZZUK AZ ALAPOKAT

Ahhoz, hogy megértsük a szabályban foglaltakat érdemes az elején kezdeni. Az egész alapja pedig nem más, mint a színkör.

Isaac Newton 1666-ban felfedezte, hogy egy prizma segítségével a napsugarait színekre bonthatja, majd egy újabb prizmával ismét fehér fénnyé egyesítheti. Ekkor alkotta meg a mai napig használt színkört is és a hozzá tartozó színelméletet.

Az elmélet szerint a színeket 3 csoportba oszthatjuk:

• Elsődleges színek: vörös, kék, sárga
• Másodlagos színek: Az elsődleges színek közül bármelyik kettőt összekeverve kapjuk meg a másodlagos színeket.
• Harmadlagos színek: Az elsődleges és a másodlagos színek keverékei.

A színkör segítségével elkülöníthetők a hideg és meleg színek, valamint beszélhetünk komplementer színekről és színpárokról. Ez utóbbi az egymáshoz közel elhelyezkedő, hasonló színek.

A komplementer színek a színkörben egymással szemben elhelyezkedő színek (kék – sárga, piros- zöld). Ezek a színek kiválóan kiegészítik egymást és a webdesign esetében is általában úgy alkalmazzuk őket, hogy az egyik nagyobb arányban van jelen, míg a másik pedig kisebb arányban. A kisebb arányban jelenlévő szín ki fog emelkedni és vonzani fogja a tekintetet. Például CTA gombokat szoktunk így kiemelni.

AZ ALAPOK UTÁN LÁSSUK MIT JELENTENEK A SZÁMOK

Ahogy azt említettem, a 60-30-10 szabály alapvetően a lakberendezéshez kapcsolódik. A lényege, hogy három színt választunk ki, amikkel dolgozni fogunk.

Az egyik szín a domináns szín, amint a későbbi munka során 60%-ban fogunk alkalmazni. Lakberendezés esetében valamilyen semleges színt szoktak domináns színnek választani, mint a fehér vagy a bézs. Többségében ez adja a falak színét.

A 30%-ban alkalmazott szín a kiegészítő szín. Többségében ilyen színűek a bútorok, illetve a függöny.

A 10%-ban alkalmazott szín pedig a feltűnő szín. Ez a szín többségében a kiegészítő szín komplementere, ami megfelelően kiemelkedik a többi szín közül, valamint jól megválasztva plusz energiákat csempész az összképbe, miközben a harmónia megmarad a színek között.

MENNYIRE ALKALMAZHATÓ JÓL A 60-30-10 szabály WEBDESIGN TERÜLETÉN?

Több designer posztjait is végig lapoztam ezzel kapcsolatban és sokan támogatták az elmélet használatát. A UI design esetében az alábbi módon határozták meg, hogy melyik színt hol érdemes használnunk:

• domináns szín: háttér
• kiegészítő szín: címsorok, paragrafusok, képek
• feltűnő szín: linkek és gombok

Erre megfelelő példa az alábbi:

forrás: freepik.com

Engem viszont továbbra sem győzött meg arról, hogy ragaszkodnom kellene hozzá. Bár nagyon harmonikus a kialakítás és ha 3 színnel dolgozunk érdemes alapul vennünk.

Azonban ezek az arányok sincsenek kőbe vésve. Ezt az is megerősíti, hogy van, ahol 70-20-10 szabályt alkalmaznak, sőt ajánlják is azoknak, akik biztonsági játékot szeretnének játszani, mert nem bánnak igazán jól a színekkel.

A nagyobb probléma viszont az, hogy a webdesign és a UI területén több színt alkalmazunk, mint három, ezért ez a szabály egyébként sem ültethető át tökéletesen a webdesign területére. A lenti példában is már 5 különböző árnyalat jelenik meg, a harmónia mégis megvan és kellemes ránézni.

forrás: freepic.com

A webdesign esetében a harmónia mellett pedig arra is figyelnünk kell, hogy vezessük a felhasználó figyelmét, amiben a színek nagy segítségünkre vannak. Arról, hogy a színek mellett még mi van a segítségünkre ebben arról a vizuális hierarchiával kapcsolatos cikkemben olvashatsz többet.

HOGYAN ÉRDEMES MEGVÁLASZTANI A SZÍNEKET?

Bár általában több színt használunk, mint három, de érdemes maximalizálni is a színek mennyiségét. 5-6 színnél nem érdemes többet használni, mert nem lesz következetes a design.

Gondoljuk át, mi az üzenetünk és ehhez melyik színek illenek a legjobban.

Inspirálódjunk színpaletták segítségével. Ezek gyakran segítenek a fő színünk mellé megtalálni a megfelelő kiegészítő színeket.