Farver i webdesign

Hvorfor er farver vigtig for webdesign?

Der er flere gode grunde til, at farver er vigtige særligt, når du arbejder med webdesign.

1. Farver er med til at skabe følelser, og farverne fremkalder forskellige følelser hos brugeren - eksempelvis så repræsenterer den blå farve troværdighed, stabilitet, sikkerhed.
2. Farver repræsenterer dit brands visuel identitet og genkendelighed overfor bruger, og kunder.
3. God kontrast hjælper brugerne med at navigere rundt på dit website og guider dem til at foretage de ønskede handlinger på sitet gennem lidt nudging.
4. Det er et must, at vide hvilke farver du skal bruge for at skabe en god balance, ro, overblik og en god brugeroplevelse på dit website. Hvis alle elementer skriger efter brugerens opmærksomhed, er der intet, der får den ønskede opmærksomhed

‍

Godt nu er vi lige kommet igennem en kort introduktion til hvorfor, farver er vigtige og vi vil nu gå lidt mere i dybden omkring, gode regler, mine anbefalinger, og se på nogle eksempler

‍

60-30-10 reglen

60-30-10 reglen er en regel, der har været kendt fra interiørdesign i mange år, og som sikrer, at rum har en god farve, balance og et roligt udtryk.

Ideen bag er som følgende eksempel for en stue:

• 60% af farverne i rummet er væggen (også kaldet dominant-farve)
• 30% kunne være møbler, stole, lamper (også kaldet secondary‐farve)
• 10% kunne være puder, tilbehør, vaser (også kaldet accent‐farve)

Et visuelt hierarki i de farver, der anvendes på websitet, er ikke kun en klar fordel. Det sikrer også, at dine CTA‐knapper kun har en farve, og procentdelen af farven på sitet er så lille, at dine CTA-knapper med garanti vil skille sig ud fra alt andet på dit site, dermed kan du nudge brugerne hen imod dem.

‍

‍

Hvordan finder jeg frem til mine farver?

For virksomheder kan det ofte være svært at finde de rigtige farver til sin farvepallette. Farvernes psykologiske betydning kan du se her på billedet:

Som der ses på billedet, er rød associeret med følelser og passion. Den blå farve med loyalitet og troværdighed. Derfor gælder det både om at finde frem til, hvilket budskab farven skal kommunikere, og der skal tages en aktiv beslutning om:

• Vil jeg ligne de andre virksomheder branchen? Er der en bestemt farve, som repræsenterer branchen?
• Vil jeg skille mig ud og tage et mere modigt farvevalg?

En anden fejl er også at se farve som statiske og at de aldrig kan skiftes, flere større virksomheder, ændrer og justere på farver i deres palette og udtryk løbende for skabe fornyelse.

En måde hvor på du kan finde dine farver, er med hjælp fra en farvegenerator, her er min yndlings coolors.co på nedenstående link, her indsættes en farvekode, den låses, og tryk “space”, på dit keyboard nu vil generator give dig en række forslag, sådan forsættes processen, indtil du har fundet din palette.

Det dårlige eksempel

‍

Et eksempel på dårligt farvevalg i webdesign fra en af mine kunder, før jeg startede samarbejde med dem. Det, der virkelig springer i øjne på mig, er:

• Dårlig kontrast mellem navigation og farver, den karrygule, og sort navigation‐link har dårlig kontrast, derfor gør det svært at læse dem. Den hvide på den karrygule giver, hellere ikke et rolig visuelt blik.
• Der er brugt hvid, grøn, gul, sort, alle farverne er til stede i den øverste sektion, og farvernes procentfordeling gør, at alle farverne kæmper om opmærksomheden.
• Jeg kan have svært ved at vurdere, hvilken farve der CTA‐farven for siden.

‍

Det gode eksempel

Så kommer vi til mit oplæg for dem, hvor farvefordelingen og hierarkiet er anderledes. Elementer, og farver skaber et roligt overblik, det er nemt at se call-to-action, og navigationen er også blevet forbedret. - Visuelt fremstår denne version af websitet mere professionel.

Saturation på dine knapper

Her ser man to knapper, den ene har en god saturation, den øverste, det betyder, at den har en god mætning, og derfor skiller den sig mere ud.
Nedenunder ser vi en knap, hvor saturation (farvemætningen) er dårlig, den er ikke specielt iøjnefaldende, og den skiller sig ikke ligeså meget ud i forhold til den grønne farve.
Det rødt-markerede farve-felt er, hvor der mere saturation i de farver, du vælger.

5 tips til farver i webdesign

1. Brug #60-30-10 reglen

Hav altid 60-30-10 reglen i baghovedet, når du designer de forskellige sektioner, det sikrer at du har en god farve‐balance og at farvehierarkiet bliver overskueligt.

2. Brug en farve generator

Det kan være svært at finde en god farvekombination, det kræver noget, erfaring og viden om hvilke farver, farvemætning og hvilken farvebalance der passer sammen. Derfor er mit forslag, at du bruger en farve-generator, som udregner, farvekombinationer for dig.

3. Vælg neutral baggrund

Ved at vælge neutrale baggrundsfarver som #fff → hvid eller #f4f4f4 grå. Dermed sikrer du, at dit indhold, billeder, videoer osv. skiller sig ud på siden. Hvis du har stærke farver som baggrundsfarver, kan de tage meget af brugerens opmærksomhed, hvilket gør, at dine elementer ikke bliver set på samme måde.

4. Hav saturation på din knapper

Husk at have en god saturation(mætnings)værdi på dine knappers baggrunde. Dette er med til at sikre, at de skiller sig ud fra alle andre farver på din side. → vælg også en knapfarve, der skiller sig ud, og undgå grå farver.

5. Farver kommunikerer budskaber

Sørg for, at dit brands budskaber bliver kommunikeret gennem de farver, du vælger. Det er en af de ting, der kan gøre dit site unikt, så du skiller dig ud fra mængden - her er eksempel på webflows signatur‐farve, som var meget anderledes end det man havde set før → en blanding af blå og lilla.

‍