En introduksjon til farge teori for webdesignere

I dag skal vi lære viktigheten av farge i webdesign og hvordan du velger et behagelig fargeskjema. Denne artikkelen er en del av vår Basix-serie, som tar sikte på å gi praktiske og koncise forklaringer på designprinsipper for de med liten designopplevelse.

Før vi begynner, ta en titt gjennom våre webmaler, hvis du trenger et pro tema for ditt neste prosjekt. Det finnes også en rekke gode eksempler på nettsidefarge temaer også. 

Nå, la oss starte denne opplæringen.

Hvem denne artikkelen er skrevet for:

Denne artikkelen er skrevet for folk som nettopp begynner å lære formelle designprinsipper. Det er ikke ment å være en omfattende studie av hvordan man bruker farge på et design (vi får nok av dem i fremtiden), men det er en oversikt for de som ser etter praktiske råd som vil hjelpe dem til å nærme seg fargeteori innenfor Konteksten til et webdesign prosjekt.

Jeg skriver dette fordi jeg alltid har funnet det vanskelig å bestemme seg for et fargevalg som fungerer bra for et prosjekt; Det er sannsynligvis en av de tøffeste beslutningene jeg må lage som designer. Men ved å lære det grunnleggende om Color Theory og noen gode verktøy som er tilgjengelige på nettet, har jeg vært i stand til å styrke designene mine og stå for denne svakheten.

Noen få kandidater for målgruppen:

• En programmerer som ser etter råd for å hjelpe dem med å skape en visuelt tiltalende prototype.
• En aspirerende designer som ønsker en kort oversikt over emnet
• Noen som ikke forstår forskjellen mellom webutvikling og webdesign.

I et nøtteskall, Hva er farge teori?

Color Theory dekker faktisk en rekke ting, men på det mest grunnleggende nivå er det samspillet mellom farger i et design gjennom komplementering, kontrast og livsstil.

Samspillet mellom farger i et design gjennom komplementering, kontrast og livsstil.

Mens den første delen av denne definisjonen er enkel (og ganske vist blid), er det de siste 3 begrepene som definerer grunnleggende fargeteorien:

complementation

Komplementering refererer til måten vi ser farger på når det gjelder deres forhold til andre farger. Når farger okkuperer motsatte ender av fargespektret, fører de folk til å vurdere et design som er visuelt tiltalende ved å etablere et godt medium som øyet kan ligge i. I stedet for å strekke seg for å imøtekomme et bestemt område av fargespektret, får øyet en balanse . Det er to vanlige bruksområder for komplementering: Triadic og Compound fargevalg som vi skal diskutere senere. Komplementering kan ta deg til nye høyder av designfleksibilitet når du kan begynne å mestre intricacies av fargekombinasjoner.

Kontrast

Kontrast reduserer øynene og fokuserer brukerens oppmerksomhet ved å dele deler på en side. Det mest synlige eksempelet på kontrast er et effektivt utvalg av bakgrunns- og tekstfarger, som vist nedenfor:

Hvis du noen gang er i tvil, er det best å velge en veldig lys farge for bakgrunnen, og en veldig mørk farge for selve teksten. Dette er et område hvor fargeteori er avgjørende for bruken av et webdesign; I de fleste prosjekter er store tekstområder ikke et sted å prøve å være veldig kreativ - så hold det enkelt og leselig.

Sammen med å etablere lesbar tekst, kan kontrast også trekke betrakterens oppmerksomhet mot bestemte elementer på en side. Tenk på å fremheve en lærebok: Når du vil henlede oppmerksomheten til en bestemt del av siden, ser du omkretsområdet ut som resten av teksten. Det samme prinsippet gjelder for webdesign: Bruke en rekke kontrastfarger kan bidra til å fokusere betrakterens oppmerksomhet på bestemte sideelementer.

Hvis nettstedet ditt har en mørk bakgrunn, fokuser på hovedinnholdet med en lysere farge.

Dette prinsippet gjelder også for analoge farger (som vi diskuterer senere):

livfullheten

Ikke å høres dumt, men livsstil dikterer følelsen av designet. Lysere farger fører til at brukeren føler seg mer energisk som et resultat av designet, noe som er spesielt effektivt når du prøver å annonsere et produkt eller påkalle en følelsesmessig respons. Mørkere nyanser slapper av brukeren, slik at deres sinn kan fokusere på andre ting. Et godt eksempel på dette er en sammenligning mellom CNN og Ars Technica:

CNNs nettside har et sterkt rødt banner over toppen, noe som fører til økte følelser fra brukere som de stimuleres av designets livskraft (og kontrasten mellom rød, hvit og svart - den primære fargeskjemaet til nettstedet).
Ars Technica utnytter en mørkere fargevalg for bakgrunnen og overskriften for å slappe av brukeren og fokusere sin oppmerksomhet mot innholdet. Ved å gjøre det, blir deres tekniske og detaljerte skriving ansett som forkant av nettstedet. Og enda viktigere, er brukeren lov til å overføre den mentale energien som er tradisjonelt reservert for å reagere på levende farger for å forstå artikkelens innhold.

Hvordan velger jeg en effektiv fargeskjema?

Her er 3 av de allment aksepterte strukturer for en god fargevalg: triadisk, sammensatt og analog:

Triadic Color Scheme

Består av 3 farger på separate ender av fargespektret. Det er en veldig enkel måte å lage et triadisk fargeskjema på:

1. Ta et fargehjul, og velg din basefarge.
2. Tegn en like-sidig trekant fra dette punktet.
3. De tre punktene i trekanten vil danne tri-fargeskjemaet.

Ved å bruke en like-sidig trekant, kan du sikre at fargene har samme levetid og komplimentere hverandre på riktig måte.

Sammensatt fargeskjema (aka Split Free)

Sammensetningsfargen er basert på å tilby en rekke kompletterende farger: To farger er valgt fra motsatte ender av fargespektret. Ved å gjøre det får designeren mer frihet i design, samtidig som den nyter godt av den visuelle appellen av komplementære farger.

analogt

En analog fargevalg er basert på et forsiktig utvalg av farger i samme område av fargespektret. Vanligvis er fargene differensiert av deres livsstil, og deres kontrast i forhold til hverandre.

To eksempler på et analogt fargeskjema er:

1. Nyanser Gul og Orange
2. Et monokromatisk utvalg (Nyanser av en basefarge)

Bare begynnelsen…

Skjønnheten der vi er i historien akkurat nå, er at vi kan dra nytte av århundrer vitenskapelig og kunstnerisk fargeteoretikere. Det er hele volumer som er skrevet om minutia av fargeteori, så jeg vil oppmuntre de av dere som virkelig ønsker å grave dypt inn i faget for å finne en av de mange faglige bøkene som er tilgjengelige for å utnytte noen av de dypere konseptene. Vi vil også slippe dypere artikler om "fargeteori for webdesignere" i fremtiden her på Webdesigntuts + :).

La oss nå se på noen gode verktøy som du kan bruke til å eksperimentere på egen hånd:

Måter å gjøre livet ditt lettere

Heldigvis er det noen få verktøy til disposisjon som gjør fargevalg ekstremt lett når det brukes riktig. Og best av alt, vil de fremme vår forståelse av Color Theory.

Ved å eksperimentere i et guidet miljø kan vi lære å anvende disse prinsippene uten å bli frustrert når ting ikke virker perfekt. Tenk på disse verktøyene som en slags "fargeteorinets sikkerhetsnett" for å hjelpe deg med å utforske din egen kreativitet uten å måtte gå langt unna de etablerte reglene for behagelig fargekombinasjoner.

Kuler

Et verktøy utviklet av Adobe, er Kuler rettet mot å gi en intuitiv måte å skape en fargepalett på. Hver farge på paletten kan endres individuelt, eller velges som basisfarge, med noen få enkle klikk. Paletter kan lagres og publiseres, og det finnes en rekke gode fellesskapsoppføringer tilgjengelig på deres nettsted. Under hver farge leveres eksportkoder (inkludert heksadesimale). Grensesnittet kan imidlertid være tungvint til tider, og justering av en bestemt farge kan endre hele paletten (jeg skulle ønske de hadde en "lås" -funksjon som forhindret andre farger i å skifte). Samlet sett vil jeg anbefale dette verktøyet for de med en anstendig forståelse av konseptene og tålmodigheten for når ting ikke løper så jevnt som de ville håpe.

Color Scheme Designer 3 (Paletton)

Dette verktøyet blir raskt mitt foretrukne valg for absolutte nybegynnere, de med liten tålmodighet, eller folk på en frist. Ved å gi en veldig enkel og kontrollert velger, gir Color Scheme Designer en svært lav inngangsbarriere, og valget av fargeprinsipper gir en rekke alternativer. Selv om det ikke lærer brukerne hvorfor fargene fungerer godt sammen (Kulers dynamiske fargehjul er mye mer effektivt i den forbindelse), er resultatene gode som utgangspunkt eller for å fullføre en prototype.

Dens mer avanserte alternativer er svært nyttige: funksjoner som evnen til å justere en hel palettets metning og kontrast, fargeblind overlegg og prøveforhåndsvisning av nettsteder er ting jeg håper Kuler implementerer veldig snart. Imidlertid mener jeg at dette verktøyet ikke bør være det primære verktøyet som brukes av de som ønsker å lære farge teori - som det gjør for mye av arbeidet for brukeren og tillater ikke at de intuitivt eksperimenterer samtidig som grunnleggende prinsipper for hvert fargeprinsipp opprettholdes.

Ja, det er mange andre steder der du kan finne flotte fargevalg ... og vi vil faktisk avrunde disse nettstedene og analysere dem i nær fremtid (søk på nettstedet for våre ressursrapporter når det kommer ut).

Case Study: Spillere med jobber

For å fullføre denne artikkelen, la oss undersøke et nettsted ved hjelp av noen av prinsippene som vi har diskutert. Gamers with Jobs er et nettsted dedikert til en høyere analyse av videospill, gjennom funksjoner, podcast og forum.

• Bakgrunnen for den grå siden med bakgrunnen for hvit innhold fokuserer brukerens oppmerksomhet mot midten av nettstedet.
• Den mørke linjen over siden (vanligvis reservert for annonsering) "rammer" brukerens syn på innholdet.
• Bruken av oransje i hodene trekker brukeren til kategoriene, funksjonstitlene og sidene på nettstedet.
• Det nøytrale fargeskjemaet gir nok visuell stimulering for å holde publikum interessert, samtidig som de gir dem nok mental frihet til å nyte innholdet på nettstedet.

Avsluttende merknader og oppsummering

En av de vanskeligste aspektene ved å jobbe med farger er at noen ganger når farger ikke har blitt arrangert i et design, ser de ikke ut til å fungere godt sammen. Men når de blir brukt, blir deres visuelle harmoni vanligvis tydelig. Jeg har forårsaket meg en del frustrasjon ved å justere fargene som er valgt i Kuler før du setter dem på et design, bare for å finne ut at fargeskjemaet ble endret akkurat nok til å være unappealing.

Stol på teorien! Bruk fargene som er valgt gjennom et fargeprinsipp, og deretter juster etter behov. Å gjøre det vil spare deg for mye tid og styrke designkvaliteten din, da du begynner å se fargen på mer raffinert, kunstnerisk og til og med vitenskapelige måter!

Sammendrag

• Å velge farger på motsatte ender av spekteret skaper en visuell harmoni for øynene.
• En høy kontrast mellom elementer gjør teksten lett lesbar og styrer leserens oppmerksomhet.
• Jo lysere farger, jo mer mental energi de vil forbruke.
• Ikke vær redd for å bruke verktøy som Kuler og Color Scheme Designer 3, de gjør bare livet ditt enklere og hindrer deg i å bli frustrert med læringsprosessen.

Takk for at du lest min første artikkel, jeg hadde massevis av moro å skrive det. Gi litt tilbakemelding i kommentarfeltet hvis du føler deg så tilbøyelig, jeg vil gjøre disse artiklene så nyttige som mulig.

Åh! Og hvis du er ivrig etter å lese mer, sjekk ut en annen stor teoribasert artikkel som relaterer til det vi bare snakket om: "Forstå visuell hierarki i webdesign".

Hvis du trenger et pro-tema for ditt neste prosjekt, kan du bla gjennom webmaler. Det er mange flotte nettsidefarge tema eksempler å dekonstruere på ThemeForest også. Eller ansett en designer på Envato Studio.