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:
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.
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.
A SZERZŐ
Viandt-Oláh Evelyn
2019-ben kezdtem el foglalkozni a webdesignnal. A tanulási folyamat alatt rájöttem, hogy ez a szakma tökéletesen ötvözni azt amire szükségem van: a kreativitást és a probléma megoldást. Így 2021-ben elindult a vállalkozásom és az inBalance Webdesign.
A minap ebben a Threads bejegyzésemben feltettek a kérdést, hogy mi a legfontosabb “összetevője” a sikeres weboldalaknak. Mi az, amin áll vagy bukik egy weboldal sikeressége? A 45 szavazat közül 51% szerint a tartalom és...
Ha te is vágytál már arra, hogy lekövethesd hogyan is használják a weboldaladat a felhasználók, akkor ezt a megoldást Neked találták ki! Most ugyanis videón nézheted vissza, hogy hogyan boldogulnak - vagy éppen nem...
Ingyenes UX tippek vállalkozásoknak?!
Vágysz arra, hogy vállalkozásod digitális termékei kiemelkedően sikeresek legyenek? Légy egy támogató közösség tagja és ismerd meg a UX/UI designban rejlő végtelen lehetőségeket!