Farge i webdesign: hvordan fremkalle de riktige følelsene hos brukeren
Farge i webdesign: hvordan fremkalle de riktige følelsene hos brukeren
Anonim

Farge bestemmer brukerens følelsesmessige reaksjon på nettstedet, selv om personen selv ikke er klar over det. Hvilke farger du skal bruke for bakgrunnen og forskjellige elementer på nettstedet for å fremkalle visse sensasjoner, og hvordan du kombinerer farger på riktig måte i webdesign, les nedenfor.

Farge i webdesign: hvordan fremkalle de riktige følelsene hos brukeren
Farge i webdesign: hvordan fremkalle de riktige følelsene hos brukeren

Gjennom menneskehetens historie har malere blitt universelt anerkjent for sin evne til å jobbe med farger. I den moderne verden er spesialister som vet hvordan man kombinerer farger for kommersielle og forretningsformål - innen reklame og webdesign - like anerkjent.

Muligheten til å bruke farger kan pumpes i det uendelige. Dette er en ekte avgrunn av muligheter for å påvirke en person.

Vi vil dekke det grunnleggende om fargeteori og fargeskjema, og deretter vil vi snakke om den følelsesmessige påvirkningen av visse farger.

Fargeteori

En hel bok kan vies til temaet farger, så vi tar den ikke i sin helhet, men begrenser oss bare til nyttig informasjon som kan brukes når vi utvikler et grensesnittdesign.

Fargeteori kan deles inn i tre deler:

Kontrast

Hver nyanse har en motsatt, så å si, sin "nemesis", som utgjør den største kontrasten til denne fargen. For å finne en slik farge kan du bruke fargehjulet. Bare velg en farge på motsatt side av sirkelen.

Fargehjul
Fargehjul

Addisjon

Disse fargene er ikke alltid i konflikt med hverandre. Komplementære farger understreker hverandre, i motsetning til kontrasterende. I fargehjulet følger disse fargene hverandre, for eksempel komplementære farger av lilla - blå og rosa.

Resonans

Hver farge fremkaller en viss stemning. Lyse varme farger (rød, oransje, gul) fyller en person med energi, vekker ham, og kalde mørke nyanser (grønn, blå, lilla), tvert imot, slapp av og berolig.

For eksempel bruker de den røde navigasjonslinjen for å vekke leseren og øke opphisselsen. Med tanke på spesifisiteten til nettstedet - oppsiktsvekkende nyheter - ser rødt ut som en logisk avgjørelse.

BBC nyheter
BBC nyheter

Fargeteori i webdesign er mer enn bare dekorasjon. Farger kan endre oppfatningen av nettstedet ditt og spille en avgjørende rolle i virksomheten din.

Emosjonell oppfatning av farger

Ingen vil benekte det nære samspillet mellom farger og følelser. Og selvfølgelig ønsker enhver webdesigner å bruke denne innflytelsen til å skape den rette stemningen for hvert nettsted.

Basert på noen få studier – analyse lagt ut på nettsiden og et innlegg om farger i – vil vi forklare hvordan farger påvirker følelser og bidra til å skape UX-design.

Det er viktig å huske at ulike kulturer rundt om i verden oppfatter farger forskjellig. Vi vil beskrive emosjonelle assosiasjoner som er unike for vestlig kultur.

rød

Den mest stimulerende fargen, så energisk ladet at den til og med kan øke blodtrykket. Rødt representerer lidenskap og kraft og er den mest oppmerksomhetsfengende fargen, og det er derfor den ofte brukes til viktige advarsler og kunngjøringer.

For eksempel er rødfargen veldig egnet for et nettsted som har som formål å varsle om oppfattede trusler.

Skjermbilde_2
Skjermbilde_2

Å bruke mye rødt øverst på siden er flott da det trekker oppmerksomhet til viktig informasjon i meldingen din. Samtidig har folk en tendens til å raskt forlate den røde «faresonen» og scrolle nedover. Og dette lar deg i sin tur vise brukeren mer innhold.

Men denne fargen kan også virke mot deg, da den kan forårsake aggresjon eller overstimulering. Hvis du vil skape en mer avslappende atmosfære, prøv å bruke rødt med måte og velg lysere røde nyanser.

oransje

Som den roligste av de varme tonene, er oransje i stand til å fremkalle en rekke forskjellige følelser. Som primærfarge kan den vekke interesse og styrke, og som sekundærfarge kan den beholde disse egenskapene, men på en mer diskret måte.

Fanta nettsted
Fanta nettsted

I tillegg hjelper oransje med å skape en følelse av bevegelse og energi. For eksempel ser det bra ut på selskapets tegneserienettsted, som antyder ungdom og bevegelse. Farger er assosiert med kreativitet, samtidig som de opprettholder en kjent merkefølelse.

Gul

Det er en av de mest allsidige fargene, og følelsene den vekker er mer avhengig av nyansen.

Lys gul tilfører energi, men uten skarpheten og skarpheten som er tilstede i rødt. Middels gule nyanser fremkaller en følelse av komfort mens de fortsatt er forfriskende. Mørke nyanser (inkludert gull) gir en følelse av antikken, og fyller rommet med tidløshet, visdom og nysgjerrighet.

Flash Media
Flash Media

For eksempel, på hjemmesiden til et webdesignbyrå, utstråler mørkere gultoner energi, nysgjerrighet og autoritet. Denne fargen er flott for bedrifter som tjener penger på rådgivning og ønsker å understreke sin profesjonalitet.

Grønn farge

Grønt er en bro mellom varme og kalde nyanser, selv om det har en tendens til å være mer kaldt. Dette betyr at grønt har den avslappende effekten av blått, men har også litt energi fra gult.

Ameritrade
Ameritrade

Som et resultat skaper det en veldig balansert og stabil atmosfære. Mørkere grønne nyanser gir inntrykk av rikdom og overflod, akkurat som nettsiden.

Blå farge

Som med gul, er effekten av blått svært avhengig av fargetonen. Alle nyanser av blått er universelle når det gjelder avslapning og sikkerhet, men lyse toner er forbundet med vennlighet, og mørke toner med tristhet.

Sosiale nettverk som Twitter og Facebook bruker lysere til middels blå nyanser, mens bedriftsnettsteder foretrekker mørkere nyanser av styrke og pålitelighet.

Et eventdesignbyrå er et godt eksempel. Ved å bruke blå blomster som bakgrunn, antydet de visuelt deres kunnskap og dyktighet innen blomsterbruk, og skapte også en følelse av pålitelighet og tillit.

Van vliet & trap
Van vliet & trap

Dette har stor betydning da de jobber med arrangementer hvor det visuelle er veldig viktig, som bryllup.

Lilla

Fargen lilla er historisk assosiert med kongelig storhet, og antyder luksus. Lilla nyanser gjenspeiler generøsitet og rikdom generelt, noe som gjør dem til et godt valg for mote og luksusvarer (selv sjokolade som merkets fargevalg).

Bilde
Bilde

Lysere nyanser som lavendel (lilla med et snev av rosa) vekker tanker om romantikk, mens mørkere nyanser virker mer elegante og mystiske.

Svart

Den sterkeste av de nøytrale fargene, svart, vises på nesten alle nettsider. Det kan fremkalle forskjellige assosiasjoner avhengig av fargene som følger med det eller dominere dem hvis det brukes overdrevent.

Styrken og nøytraliteten til svart gjør den til et godt valg for store tekstblokker, men som primærfarge kan den skape en følelse av nervøsitet eller til og med assosieres med ondskap.

For de fleste nettsteder brukes svart for å skape en følelse av raffinement. Kombinasjonen av svart og hvitt i et minimalistisk design gir inntrykk av eleganse og stil, akkurat som på BOSE-nettsiden.

Drøm + Rekkevidde
Drøm + Rekkevidde

Hvit

I vestlig kultur er hvit assosiert med renhet, vennlighet og uskyld. Denne fargen brukes ofte for bakgrunnen til minimalistiske og enkle nettsteder.

Nettsted med verkene til Kloin Toshev
Nettsted med verkene til Kloin Toshev

I tillegg vil ingen enkelt farge tillate deg å være så mye oppmerksomhet til andre farger som hvit. For eksempel, for vinneren av Awwwards, Kloin Toshev, er alle verkene hans lagt ut på en hvit bakgrunn, noe som bare får illustrasjonene til å skille seg ut og gir inntrykk av et elegant galleri.

Grå farge

Til tross for at grått i noen situasjoner kan skape en dyster og trist atmosfære, brukes den fortsatt ofte av profesjonelle designere.

Det handler om nyansene: ved å veksle dem, kan du få alle følelsene forårsaket av både svart og hvitt. Alt i alt er grått et kraftig verktøy i de rette hendene.

Awwwards
Awwwards

Og i kombinasjon med lysere farger i designet virker den grå bakgrunnen moderne, og ikke dyster, for eksempel på.

Beige

Beige i seg selv er ganske kjedelig og uuttrykkelig, men den har en bemerkelsesverdig egenskap: beige får karakteren til blomstene som omgir den. Derfor, hvis det ikke er ment å uttrykke tilbakeholdenhet, tjener beige som bakgrunn eller andre farge.

Mørkere nyanser av beige skaper en følelse av tradisjon og jordighet, gir et papiraktig preg, mens lysere nyanser fremstår som friskere og mer moderne.

Dishoom
Dishoom

For eksempel, på en restaurantnettside, gir en lys beige farge rundt navnet og mørkere kanter inntrykk av at restauranten er en frisk variant av tradisjonell mat.

elfenbein

Elfenben så vel som krem fremkaller nesten de samme følelsene som hvit. Imidlertid er elfenben varmere (eller mindre sterilt) enn hvitt, noe som skaper en større følelse av komfort samtidig som minimalismen opprettholdes.

Du kan bruke elfenben i stedet for hvitt for å myke opp kontrasten mellom det og mørkere farger. For eksempel, på stedet er brunoransje elementer plassert mot en elfenbenbakgrunn (som ser gråaktig ut) for å opprettholde en følelse av varme.

Kunst i kaffen min
Kunst i kaffen min

Fargespekter

Hvert nettsted har et fargeskjema som bruker primærfarger for å fylle ut mer plass. Som vi sa tidligere, påvirker bruken av disse fargene sinnet og humøret til en person hovedsakelig ubevisst. Så velg dem med omhu.

Selv om det er mange måter å kombinere farger på, vil vi fokusere på tre av de mest vellykkede og mest brukte.

Triade (trippel harmoni, trekant)

Triade
Triade

Triaden er det grunnleggende og mest balanserte systemet med tre farger. Den bruker resonans og fargekomplement, men har ikke kompleks kontrast, noe som gjør triaden til den mest pålitelige gamuten.

På et hjul med 12 farger velger du tre 120 graders mellomrom: én for forgrunnen og to for innholds- og navigasjonslinjen.

Dobbelt komplementært system

Dobbelt komplementært system
Dobbelt komplementært system

Dette utvalget er vanskeligere å implementere, men det kan være en lønnsom løsning. Fire farger brukes: to kontrasterende og to komplementære.

Sjekk ut hvordan en flott Florida Flourish-side ser ut basert på denne layouten. De røde og grønne fargene kontrasterer i plantene og tekstblokkene, mens den blå bakgrunnen og den oransje ørkenen kompletterer bildet effektivt.

Blomstre
Blomstre

Analoger (seriell system)

Analoger
Analoger

Utvalget av lignende farger bruker hovedsakelig komplementære nyanser. Dette lar deg spesielt tydelig understreke noen kvaliteter og fremkalle visse følelser.

For eksempel understreker kombinasjonen av røde, oransje og gule farger energi og vitalitet. Det er veldig enkelt å bruke slike skalaer, men det er vanskelig å velge hvilke farger som skal inkluderes i kombinasjonen. Effekten av dem vil være overdrevet, så du kan ikke ta feil.

For eksempel skapte bruken av blå, turkise og grønne farger i nettsidedesignet en atmosfære av ro og stillhet. Legg merke til hvordan gul ble brukt for å fremheve viktige punkter.

Blinksalg
Blinksalg

Dette er bare det grunnleggende om fargeteori som kan hjelpe deg med å lage imponerende tilpassede design, og det er ingen grense for hvor langt du kan gå når det gjelder farger på nettstedet ditt.

Assistentverktøy for fargevelger

Heldigvis finnes det flere verktøy tilgjengelig for å hjelpe deg å sette fargeteori i praksis. Prøv disse palettene slik at du ikke trenger å starte fra bunnen av for å lage din egen:

  1. tidligere kjent som Adobe Kuler. Det er et av de mest pålitelige fargevalgsverktøyene.
  2. … Hvis du vil ha et enkelt verktøy for å velge en farge så raskt som mulig, er Paletton flott.
  3. … Et flott verktøy for å velge farge på brukergrensesnittet.

Og hvis disse verktøyene ikke fungerer for deg, her er de forskjellige fargevelgerverktøyene.

Direkte forhold mellom farge og følelser

Husk: brukere legger sjelden merke til og setter pris på fargen på bakgrunnen, navigasjonslinjen, individuelle detaljer, men dette betyr ikke at fargen ikke påvirker dem. Det skjer bare ubevisst.

Brukeren har noen følelser, utvikler en holdning til nettstedet eller merket, han utfører visse handlinger: ruller ned, klikker på knapper som induserer handling, eller omvendt legger han ikke merke til dem. Og farge spiller en stor rolle i alt dette.

Hvis du har noen tips for bruk av farger i webdesign, del gjerne i kommentarfeltet.

Anbefalt: