Share
Velkommen til den tiende leksjonen i vår Web Design for Kids-serie, alt om Color.
I denne opplæringen hopper vi inn i fargeteori, forskjellige måter å bruke farger på i vårt CSS, betydningen av bestemte farger, og se hvordan du velger de perfekte fargene for våre sider. Vi avslutter med noen tips for bruk av farge på nettet.
Ikke glem å stille spørsmål i kommentarfeltet nederst på denne siden!
Farge teori innebærer mange ting, men hovedfokuset ser på hvordan fargene oppfører seg med hverandre i et design. Vi kaller en gruppe farger valgt for å bli brukt sammen a Farge palett. En godt designet fargepalett vil ha farger som komplement hverandre og ha det bra kontrast og livfullheten. Vi snakker om hva disse ordene betyr i et øyeblikk.
Velge de riktige farger og vite hvorfor bestemte farger fungerer og andre ikke kan avgjøre om designet vårt vil fungere. Dårlig fargevalg kan gjøre nettstedet vårt vanskelig å bruke, eller teksten er umulig å lese og brukeren vil forlate nettstedet vårt.
Før vi kommer for langt inn i vår veiledning, la oss snakke om noen grunnleggende farge-terminologi som vi vil nevne mye. Vi bruker disse betingelsene for å hjelpe oss bedre å forstå hva som gjør hver farge så unik.
EN hue er(mer eller mindre) et objekts farge. Når vi refererer til ting som "rød" eller "gul" snakker vi om deres fargetone.
Farge metning refererer til hvor levende, eller sterk, en farge er. En lav metning skaper en farge som vises vasket ut, mens en høy metning produserer og meget levende farge.
lysstyrke refererer til lys eller mørke i en farge. Dette går fra svart (ingen lysstyrke) til hvit (full lysstyrke).
Fargeskiven er basert på rød, gul og blå og er ganske kjent blant kunstnere. Som designere, forstår hvordan farger blir opprettet, hjelper oss å få en bedre ide om hvilke farger komplement hverandre og hvorfor.
Det venstre hjulet på bilen nedenfor viser de tre primære farger. Med disse tre fargene kan vi lage alle andre farger.
Hjulet til høyre på bilen ovenfor viser sekundære farger også: farger som ble opprettet ved å blande de primære farger. For eksempel blå og gul gjør grønt, mens blå og rød gjør lilla.
Det venstre fargeskiven på bilen nedenfor viser ett lag: tertiære farger. Disse er farger opprettet ved å blande a hoved~~POS=TRUNC og sekundær farge. For eksempel, blanding blå med lilla skaper en mørk blåaktig lilla.
Det finnes en rekke fargesystemer (måter å beskrive farger på), men bare visse systemer er egnet for nettet.
RGB står for "Red Green Blue" og beskriver hvordan vi ser på farger på elektroniske skjermer. Disse tre fargene kan kombineres for å produsere mange andre farger. De tre verdiene er listet i rekkefølge og hvert område fra 0 til 255.
kropp bakgrunn: rgb (138.138.226);
Ovenstående CSS produserer en gul-oransje bakgrunn på en side. Innen parentesene kan du se forskjellige røde, grønne og blå verdier.
Vi har bare brukt en farge heksadesimale verdi så langt i denne serien, men vi kan bruke en farge i vårt CSS på mange forskjellige måter.
Besøk dette nettstedet for en rask liste over Hex- og RGB-verdier for 500 spesifikke farger.
HSL står for "Hue Saturation Lightness" og verdien består av tre tall i den rekkefølgen.
Vi kan deklarere den samme gul-oransje på en side av en side ved hjelp av en HSL-verdi i stedet for fargenes Hex- eller RGB-verdier:
kropp bakgrunn: hsl (43,100%, 57%);
Den første verdien her, 43, representerer en vinkel på en fargesirkel. Dette er det som gir oss hue. Rød er 0 eller 360 grader, mens grønn er 120 grader og blå er 240 grader.
Den andre verdien gir oss en prosentandel av metning for fargen, med 100% her fullstendig metning.
Den endelige verdien, letthet, bestemmer hvor lett eller mørkt fargen er. 100% er hvit, 0% er svart, og alt i mellom vil sette en kombinasjon av de to.
Hvilken verdi vi bruker i vårt CSS, er helt opp til oss, men HSL-verdier er enklere å gjette ved å velge en vinkelverdi som beveger seg mot urviseren fra rødt (0) og deretter legger til prosentandelen av metning og lyshet vi vil ha.
Det er et begrenset antall farger som har navn som vi kan bruke i vårt CSS, ingen nummer nødvendig.
kropp bakgrunn: grønn;
En fullstendig liste over disse fargene finner du her.
Hvis vi noen gang har en Hex-verdi og trenger den fargenes RGB- eller HSL-verdi (eller omvendt!), Er det noen fine verktøy som vil gjøre dette arbeidet for oss, som rgb.to og Colorrrs.
Farger har mye mening. Avhengig av hvilket land du bor i, kan en bestemt farge brukes til å bety fare, kjærlighet, lykke eller ondskap. Farger kan få brukere til å reagere med bestemte følelser, så forståelse av dette er viktig for å kunne formidle vår melding til brukeren.
Ta en titt på dette diagrammet som viser hvordan forskjellige farger betyr forskjellige ting i ulike kulturer.
La oss kort diskutere noen betydninger bak de tre primære fargene: gul, rød og blå.
Gul tiltrekker brukerens oppmerksomhet mer enn noen annen farge og som oftest representerer lykke og solskinn. På den annen side kan gul også bety "forsiktighet", som vist med mange trafikkskilt.
Å bruke gult på nettet kan være veldig iøynefallende, så det er best å ikke bruke det for mye og sørg for at vi bare markerer viktig informasjon.
Avhengig av hvilket land du bor i, kan rødt bety alt fra fare, til sinne, til energi, til kjærlighet og lykke. Uansett hva det kan bety, er rød alltid brukt til å representere en ekstrem følelse eller handling.
I webdesign brukes rødt ofte til å kommunisere sletting eller feil. Det er en dristig farge som tar tak i brukerens oppmerksomhet, slik at den kan fungere som en aksentfarge. For mye rødt på et nettsted kan være overveldende, og det kan være vanskelig å fortelle hva som er spesielt viktig.
Blå representerer både ro og tristhet for det meste og er en veldig populær farge på nettet.
Følelsen som er opprettet ved å bruke blå i design, vil i stor grad avhenge av hvilken nyanse og nyanse vi velger. Mens en mørk blå vil formidle styrke og pålitelighet, vil en lysere blå bli mer morsom og vennlig.
De fleste nettsteder vil ha en rekke farger som arbeider for å gi hierarkiet og sette følelse av et design. Vår fargevalg kan være like viktig som alle de andre designbeslutningene vi har hatt til å gjøre så langt, så vi må ha et godt øye for hvilke farger som fungerer sammen, om vi har oppnådd en god kontrast over hele siden, og hvis fargene har samme følelse eller mening som innholdet vårt.
Her er et annet blikk på hovedfargepaletten som brukes i Tuts + Town-opplæringsserien:
Lysere farger brukes som bakgrunner mens mørkere farger brukes til tekst eller for å markere bestemte seksjoner.
Generelt sett eksisterer farger på tvers fra hverandre på fargeskiven anses å være behagelige for øyet. Disse er utfyllende farger - når de kombineres, produserer de en gråton. Det er mulig for farger som ligger ved siden av hverandre på fargeskiven, for å fungere godt sammen, men det kan ta litt metning og lysstyrke justering for å få riktig parring.
Vi rørte også litt på kontrast i den forrige opplæringen om grunnleggende design, men la oss kort ta en ny titt.
Riktig kontrast reduserer øyestrening og gjør det klart for det visuelle hierarkiet. Det beste eksempelet på god kontra dårlig kontrakt kan ses ved å sammenligne visse bakgrunns- og tekstfargekombinasjoner.
Bildet over viser dårlig kontrast til venstre med bedre kontrast til høyre. Teksten med dårlig kontrast er vanskelig å lese og gjør vondt i øynene, noe som skaper en sløret effekt.
Det finnes verktøy som gir oss lister over flotte fargepaletter å velge mellom, noe som kan være en sanntidspakke og tjene som stor inspirasjon.
Coolors.co er en av de enkleste å bruke fargevalgere som er tilgjengelige for øyeblikket.
Den forsyner oss med vakre fargepaletter som vi kan tilpasse og endre ved å trykke på mellomromstasten.
Adobe Color er et annet fargevalgverktøy som gjør stor nytte av det fantastiske fargeskjulet vi snakket om tidligere.
Vi kan gjøre endringer i fargeskiven, bestemme paletten vår, og deretter foreta ytterligere tilpasninger til hver enkelt farge.
Adobe Color lar oss også lagre favorittpalettene våre og bla gjennom populære, forhåndsvalgte.
Når du velger farger på nettet, og bruker dem til elementer på siden, er det viktig å holde noen ting i bakhodet for å sikre at disse fargene forbedrer brukerens opplevelse.
Kontrast er så viktig at når du er i tvil, gå med det sikreste alternativet; selv om det virker litt "kjedelig"! Noen av de viktigste oppgavene vi har som designere, sørger for at ting er funksjonelle, enkle å bruke og lett å lese. Dårlig kontrast hindrer at brukerne våre kan lese vårt fantastiske innhold.
Så mens det er ok å være eventyrlystne med dine fargevalg, bør disse valgene aldri ta bort fra den generelle driften av nettstedet eller avlede fra innholdet.
Fargepalettvalgverktøy, som Coolors, gir oss ofte fem farger. Fem farger tillater oss å ha en eller to dominerende farger og noen få mindre dominerende farger for ting som knapper og lenker.
Å ha mye mer enn fem forskjellige farger setter våre design i fare for å være inkonsekvent og vanskelig å følge; Selv om det er hvitt, svart og grå, bør ikke regnes her.
Det er veldig viktig å ikke gå bort fra fargebruk som generelt er akseptabelt av mange mennesker. For eksempel bruker de fleste til grønn betydning "add" og rød betydning "delete". Omvendt dette på vår nettside ville være en dårlig designavgjørelse fordi det ikke er det som forventes og vil sannsynligvis forvirre brukere.
I denne opplæringen diskuterte vi teorier og fargeregler og hvordan du skal velge og bruke dem på nettet. Hver farge bærer sin egen melding. Vi må sørge for at denne meldingen samsvarer med innholdet i vårt innhold gjennom nøye gjennomtenkte palettvalg.
Neste blir vi ferdig med serien vår med noen endelige tanker og forskjellige måter vi kan dele vårt harde arbeid med venner og familie på nettet.
Se deg rundt i byen!
Accentsconagua