En enkel regel som forbedrer fargene i designet ditt på no-time (60-30-10 regelen)

Thomas B. Westerheim Feb. 02, 2021 — 4 min å lese

2 Vanlige Fallgruver

Folk møter ofte på 1 av 2 problemer når det kommer til valg av farger og palett:

01. For Få Farger

Å finne gode farger er vanskelig til å begynne med. Et vanlig problem ofte er at man har valgt for få farger. Samtidig bruker man de fargene man har i ubalanse. Så ja, hva mener jeg med ubalanse? Jeg tror vi alle vet hva ubalanse er når vi ser det, men det er noe som kan være vanskelig å definere. Med for få farger så ender ofte designet opp med å være litt kjedelig.

Altså, det skal jo sies, hvis man har holdt på med design i årevis så kan du gjøre som du vil ofte. Eller som en vis mann sa:

"Learn the rules like a pro, so you can break them like an artist" - Pablo Picasso
Her har jeg fjernet alle fargene jeg hadde på forsiden til 7-Byen og fant en vilkårlig blå farge. Tar litt luft ut av designet for å si det sånn

Her har jeg fjernet alle fargene jeg hadde på forsiden til 7-Byen og fant en vilkårlig blå farge. Tar litt luft ut av designet for å si det sånn


Kontekst

Betyr det at man alltid skal ha alle slags mulige farger overalt? Det har mye å si i hvilken kontekst man er i. Sånn som på denne siden så er det ikke mye farger, fordi jeg vil ikke forstyrre teksten. Så ingenting er 100% av tiden. Men hvis man ser på forsiden til 7-byen vil fargefordelingen være annerledes.


02. For Mange Farger

Hvis man har for få farger blir det kjedelig, hvis man har for mange farger så blir det kaotisk. Mange farger har en tendens til å gjøre førsteinntrykket ganske intenst. Bare se på bildet under.


Et godt eksempel på altfor mye farger. Hjernen min spørr meg bare: hvor skal jeg begynne

Et godt eksempel på altfor mye farger. Hjernen min spørr meg bare: hvor skal jeg begynne

Ikke bare vil det gjøre designet kaotisk, det vil også bli vanskeligere å bruke det visuelle hierkiet effektivt. Men det er et tema for en annen gang.

· Du kan lese mer om visuelt hierki her

Boken A Project Guide to UX-Design har en kort analogi som beskriver hvorfor det ikke er bra med for mye støy på nettsiden:

La oss si at du og en kompis er på fest med 10 stykker. Litt musikk i bakgrunnen og du kan høre suset av mennesker som prater, men det er ikke for høyt. Da skal det ikke så mye til for å få oppmerksomhet. Litt hoy'ing så er man der.

Derimot hvis det er 100 stykker der, alle prater og musikken står på. Da ville det krevd vesentlig mer for å kutte igjennom støyet og få oppmerksomhet.

Det samme gjelder for design. Mye støy tar oppmerksomheten vekk ifra det som er viktig for brukeren. Det vi vil at brukeren skal fokusere på, ikke tilfeldige elementer.




Ja ok, så man kan ikke bruke for få eller for mange farger. Hva nå? Heldigvis finnes det en enkel regel som man kan falle tilbake på. Spesielt hvis man ikke har erfaring med design. Formelen er ganske enkel:

60% hovedfarge + 30% sekundærfarge + 10% akksentfarge = balanse

(også kjent som 60-30-10 regelen)

Her kan du se 60-30-10 regelen i effekt (hvit, mørk grå, grønn)

Her kan du se 60-30-10 regelen i effekt (hvit, mørk grå, grønn)


Noen triks som hjelper å forstå

01. Nøyaktighet

Betyr det at man skal ha nøyaktig 60%, 30% og 10%? Det ville vært utrolig slitsomt. Betyr det at vi bare kan ha 3 farger i designet, med bilder og alt? Det ville også vært mye mer arbeid enn nødvendig. Uansett så er det ikke det det handler om. Det er mer en kunst enn en vitenskap.

02. Filosofi

Altså man må se på det som filosofi mer enn et sett med regler. Så lenge man har dette i bakhodet så er man kommet ganske langt allerede.

Samtidig er det enklere å velge farger mens du designer. Skal du velge farge på bakgrunnen? Primærfarge. Skal du velge farge på en overskrift? Sekundær farge. Er det en liten strek der også? Den har akksentfargen.

I tillegg vil det begrense deg ifra å bruke for lite eller for mange farger i designet ditt. Kan være greit å ha noe som holder en tilbake innimellom.

03. Nyanser

OK, så man trenger ikke å være nøyaktig 60%, 30% og 10%. Regelen, eller filosofien om man vil, går mest på gefühlen. Er man nødt å låse seg til 3 farger? Nei, eller litt da, men ikke 100%. Å bruke mørkere eller lysere versjoner av samme fargen er helt innenfor. Den, vel hva skal jeg kalle det, den psykologiske effekten blir den samme. Hvis det gir mening. Vi mennesker differensierer ikke farger på den måten. Den paletten under er helt godkjent. Også er det ofte sykt kult å bruke forskjellige versjoner av samme fargen... spør du meg i hvert fall.


En UI palette som følger 60-30-10 regelen

En UI palette som følger 60-30-10 regelen

Ikke bare webdesign

For meg er det en trygghet at andre design-fag bruker samme regelen. Du kan være trygg på at den er markedstestet, og fungerer så godt at den kan krysse design-linjene. Googler du "60 30 10 rule" så finner du en haug med interiør blogger som forklarer forskjellige måter å bruke den på. Regelen stammer nemlig fra interiør-design miljøet, men har med tiden klart å få sterk innflytelse i webdesign miljøet også.




Så der har du det. En enkel regel som kan forbedre designet ditt på no-time.