Farve i webdesign: hvordan man fremkalder de rigtige følelser hos brugeren
Farve i webdesign: hvordan man fremkalder de rigtige følelser hos brugeren
Anonim

Farve bestemmer brugerens følelsesmæssige reaktion på siden, selvom personen ikke selv er klar over det. Hvilke farver der skal bruges til baggrunden og forskellige elementer på webstedet for at fremkalde visse fornemmelser, og hvordan man korrekt kombinerer farver i webdesign, læs nedenfor.

Farve i webdesign: hvordan man fremkalder de rigtige følelser hos brugeren
Farve i webdesign: hvordan man fremkalder de rigtige følelser hos brugeren

Gennem hele menneskehedens historie er malermestere blevet universelt anerkendt for deres evne til at arbejde med farver. I den moderne verden er specialister, der forstår at kombinere farver til kommercielle og forretningsmæssige formål - i reklamer og webdesign - lige så anerkendte.

Muligheden for at bruge farver kan pumpes i det uendelige. Dette er en sand afgrund af muligheder for at påvirke en person.

Vi vil dække det grundlæggende i farveteori og farveskema, og derefter vil vi tale om den følelsesmæssige påvirkning af visse farver.

Farve teori

En hel bog kan vies til emnet farve, så vi tager det ikke i sin helhed, men begrænser os kun til nyttige oplysninger, der kan bruges, når vi udvikler et interfacedesign.

Farveteori kan opdeles i tre dele:

Kontrast

Hver nuance har en modsat, så at sige, sin "nemesis", som udgør den største kontrast til denne farve. For at finde sådan en farve kan du bruge farvehjulet. Vælg blot en farve på den modsatte side af cirklen.

Farvehjul
Farvehjul

Tilføjelse

Disse farver er ikke altid i konflikt med hinanden. Komplementære farver understreger hinanden i modsætning til kontrastfarver. I farvehjulet følger disse farver hinanden, for eksempel komplementære farver af lilla - blå og pink.

Resonans

Hver farve fremkalder en bestemt stemning. Lyse varme farver (rød, orange, gul) fylder en person med energi, vækker ham, og kolde mørke nuancer (grøn, blå, lilla), tværtimod, slap af og berolig.

For eksempel bruger de den røde navigationslinje til at vække læseren og øge deres ophidselse. I betragtning af webstedets specificitet - sensationelle nyheder - ligner rødt en logisk beslutning.

BBC nyheder
BBC nyheder

Farveteori i webdesign er mere end blot dekoration. Farver kan ændre opfattelsen af dit websted og spille en afgørende rolle i din virksomhed.

Følelsesmæssig opfattelse af farve

Ingen vil benægte det tætte samspil mellem farver og følelser. Og selvfølgelig ønsker enhver webdesigner at bruge denne indflydelse til at skabe den rigtige stemning for hvert websted.

På baggrund af et par undersøgelser - analyse lagt på hjemmesiden og et indlæg om farver i - vil vi forklare, hvordan farver påvirker følelser og er med til at skabe UX-design.

Det er vigtigt at huske, at forskellige kulturer rundt om i verden opfatter farver forskelligt. Vi vil beskrive følelsesmæssige associationer, der er unikke for vestlig kultur.

Rød

Den mest stimulerende farve, så energisk ladet, at den endda kan øge blodtrykket. Rød repræsenterer passion og kraft og er den mest opmærksomhedskrævende farve, hvorfor den ofte bruges til vigtige advarsler og meddelelser.

For eksempel er farven rød meget velegnet til et websted, hvis formål er at advare om opfattede trusler.

Skærmbillede_2
Skærmbillede_2

At bruge meget rødt øverst på siden er fantastisk, da det henleder opmærksomheden på vigtig information i din besked. Samtidig har folk en tendens til hurtigt at forlade den røde "farezone" og scrolle ned. Og dette giver dig til gengæld mulighed for at vise brugeren mere indhold.

Men denne farve kan også virke imod dig, da den kan forårsage aggression eller overstimulering. Hvis du vil skabe en mere afslappende atmosfære, så prøv at bruge rød med måde og vælg lysere røde nuancer.

orange

Som den roligste af de varme toner er orange i stand til at fremkalde en række forskellige følelser. Som primærfarve kan den vække interesse og styrke, og som sekundærfarve kan den bevare disse egenskaber, men på en mere diskret måde.

Fanta hjemmeside
Fanta hjemmeside

Derudover hjælper orange med at skabe en følelse af bevægelse og energi. For eksempel ser det godt ud på virksomhedens tegneseriehjemmeside, som antyder ungdom og bevægelse. Farve er forbundet med kreativitet, samtidig med at man bevarer en velkendt mærkefølelse.

Gul

Det er en af de mest alsidige farver, og de følelser den fremkalder er mere afhængige af nuancen.

Klar gul tilføjer energi, men uden den skarphed og skarphed, der er til stede i rødt. Mellemstore gule nuancer fremkalder en følelse af komfort, mens de stadig er forfriskende. Mørke nuancer (inklusive guld) giver en følelse af antikken og fylder rummet med tidløshed, visdom og nysgerrighed.

Flash Media
Flash Media

For eksempel på et webdesignbureaus hjemmeside udstråler mørkere toner af gul energi, nysgerrighed og autoritet. Denne farve er fantastisk til virksomheder, der tjener penge på rådgivning og gerne vil understrege deres professionalisme.

Grøn farve

Grøn er en bro mellem varme og kolde nuancer, selvom det har en tendens til at være mere koldt. Det betyder, at grøn har den afslappende effekt af blå, men også har en smule energi fra gul.

Ameritrade
Ameritrade

Som et resultat skaber det en meget afbalanceret og stabil atmosfære. Mørkere grønne nuancer giver indtryk af rigdom og overflod, ligesom hjemmesiden.

Blå farve

Som med gul er effekten af blå meget afhængig af nuancen. Alle nuancer af blå er universelle med hensyn til afslapning og sikkerhed, men lyse toner er forbundet med venlighed og mørke toner med tristhed.

Sociale netværk som Twitter og Facebook bruger lysere til mellemstore blå nuancer, mens virksomhedswebsteder foretrækker mørkere nuancer af styrke og pålidelighed.

Et eventdesignbureau er et godt eksempel. Ved at bruge blå blomster som baggrund antydede de visuelt deres viden og dygtighed inden for blomsterhandler og skabte også en følelse af pålidelighed og tillid.

Van vliet & trap
Van vliet & trap

Dette har stor betydning, da de arbejder med arrangementer, hvor det visuelle er meget vigtigt, såsom bryllupper.

Lilla

Farven lilla er historisk forbundet med kongelig storhed, hvilket antyder luksus. Nuancerne af lilla afspejler generøsitet og rigdom generelt, hvilket gør dem til et godt valg til mode og luksusvarer (selv chokolade som mærkets farvevalg).

Billede
Billede

Lysere nuancer som lavendel (lilla med et strejf af pink) vækker tanker om romantik, mens mørkere nuancer virker mere smarte og mystiske.

Sort

Den stærkeste af de neutrale farver, sort, vises på næsten enhver hjemmeside. Det kan fremkalde forskellige associationer afhængigt af farverne, der ledsager det eller dominere dem, hvis det bruges overdrevent.

Styrken og neutraliteten af sort gør den til et godt valg til store tekstblokke, men som primærfarve kan den skabe en følelse af nervøsitet eller endda være forbundet med ondskab.

For de fleste websteder bruges sort til at skabe en følelse af sofistikering. Kombinationen af sort og hvid i et minimalistisk design giver indtryk af elegance og stil, ligesom på BOSEs hjemmeside.

Drøm + rækkevidde
Drøm + rækkevidde

hvid

I den vestlige kultur er hvid forbundet med renhed, venlighed og uskyld. Denne farve bruges ofte til baggrunden for minimalistiske og enkle websteder.

Websted med værker af Kloin Toshev
Websted med værker af Kloin Toshev

Derudover vil ingen enkelt farve tillade dig at være så meget opmærksom på andre farver som hvid. For eksempel for vinderen af Awwwards, Kloin Toshev, er alle hans værker lagt på en hvid baggrund, hvilket kun får illustrationerne til at skille sig ud og giver indtryk af et elegant galleri.

Grå farve

På trods af det faktum, at grå i nogle situationer kan skabe en dyster og trist atmosfære, bruges den stadig ofte af professionelle designere.

Det handler om nuancerne: Ved at veksle dem kan du få alle de følelser, der er forårsaget af både sort og hvid. Alt i alt er grå et stærkt værktøj i de rigtige hænder.

Awwwards
Awwwards

Og i kombination med lysere farver i designet virker den grå baggrund moderne, og ikke dyster, for eksempel på.

Beige

Beige i sig selv er ret kedelig og uudtrykkelig, men den har en bemærkelsesværdig egenskab: beige får karakteren af de blomster, der omgiver den. Derfor, hvis det ikke er beregnet til at udtrykke tilbageholdenhed, tjener beige som baggrund eller anden farve.

Mørkere nuancer af beige skaber en følelse af tradition og jordnærhed, giver en papiragtig følelse, mens lysere nuancer fremstår friskere og mere moderne.

Dishoom
Dishoom

For eksempel på en restaurantwebside giver en lys beige farve omkring navnet og mørkere kanter indtryk af, at restauranten er et frisk bud på det traditionelle køkken.

elfenben

Elfenben såvel som creme fremkalder næsten de samme følelser som hvid. Elfenben er dog varmere (eller mindre sterilt) end hvidt, hvilket skaber en større følelse af komfort, samtidig med at minimalismen bevares.

Du kan bruge elfenben i stedet for hvid for at blødgøre kontrasten mellem det og mørkere farver. For eksempel er brun-orange elementer på stedet placeret på en elfenben baggrund (som ser grålig ud) for at bevare en følelse af varme.

Kunst i min kaffe
Kunst i min kaffe

Farvespektrum

Hvert websted har et farveskema, der bruger primærfarver til at udfylde mere plads. Som vi sagde tidligere, påvirker brugen af disse farver en persons sind og humør hovedsageligt ubevidst. Så vælg dem med omhu.

Selvom der er mange måder at kombinere farver på, vil vi fokusere på tre af de mest vellykkede og mest brugte.

Triade (tredobbelt harmoni, trekant)

Triade
Triade

Triaden er det grundlæggende og mest afbalancerede system af tre farver. Den bruger resonans og farvekomplement, men har ikke kompleks kontrast, hvilket gør triaden til den mest pålidelige farveskala.

På et 12-farvehjul skal du vælge tre 120 graders mellemrum: en til forgrunden og to til indholds- og navigationslinjen.

Dobbelt komplementært system

Dobbelt komplementært system
Dobbelt komplementært system

Dette sortiment er vanskeligere at implementere, men det kan være en rentabel løsning. Der bruges fire farver: to kontrasterende og to komplementære.

Se, hvordan en fantastisk Florida Flourish-side ser ud baseret på dette layout. De røde og grønne farver kontrasterer i planterne og tekstblokkene, mens den blå baggrund og orange ørken komplementerer billedet effektivt.

Blomstre
Blomstre

Analoger (seriel system)

Analoger
Analoger

Udvalget af lignende farver bruger hovedsageligt komplementære nuancer. Dette giver dig mulighed for særligt tydeligt at understrege nogle kvaliteter og fremkalde visse følelser.

For eksempel understreger kombinationen af røde, orange og gule farver energi og vitalitet. Det er meget enkelt at bruge sådanne skalaer, men det er svært at vælge, hvilke farver der skal indgå i kombinationen. Effekten af dem vil være overdrevet, så du kan ikke tage fejl.

For eksempel skabte brugen af blå, turkise og grønne farver i hjemmesidedesignet en atmosfære af ro og sindsro. Læg mærke til, hvordan gul blev brugt til at fremhæve vigtige punkter.

Blinksalg
Blinksalg

Dette er blot det grundlæggende i farveteori, der kan hjælpe dig med at skabe imponerende brugerdefinerede designs, og der er ingen grænse for, hvor langt du kan gå med hensyn til farve på dit websted.

Farvevælgerassistentværktøjer

Heldigvis findes der adskillige værktøjer til at hjælpe dig med at omsætte farveteori i praksis. Prøv disse paletter, så du ikke behøver at starte fra bunden for at skabe din egen:

  1. tidligere kendt som Adobe Kuler. Det er et af de mest pålidelige farvevalgsværktøjer.
  2. … Hvis du vil have et simpelt værktøj til at vælge en farve så hurtigt som muligt, er Paletton fantastisk.
  3. … Et godt værktøj til at vælge farven på brugergrænsefladen.

Og hvis disse værktøjer ikke virker for dig, her er de forskellige farvevælgerværktøjer.

Direkte forhold mellem farve og følelser

Husk: brugere bemærker sjældent og værdsætter farven på baggrunden, navigationslinjen, individuelle detaljer, men det betyder ikke, at farven ikke påvirker dem. Det sker bare ubevidst.

Brugeren har nogle følelser, udvikler en holdning til webstedet eller brandet, han udfører visse handlinger: ruller ned, klikker på knapper, der fremkalder handling, eller omvendt bemærker han dem ikke. Og farve spiller en kæmpe rolle i alt dette.

Hvis du har nogle tips til at bruge farve i webdesign, så del gerne i kommentarerne.

Anbefalede: