6 Beginner "Safety First" Farge Retningslinjer for Web
Dette innlegget er en del av en serie kalt Web Design Theory.Unity i Web Design
jeg fortsatt levende huske en av mine tidligste kunst klasser når, som en liten, ivrig barn, ble jeg presentert med et utvalg av lyse farget maling. Jeg husker den glede av å se primærfargene bland inn sekundære farger for første gang, og jeg tenkte at hvis to farger kunne lage en vakker ny farge, alt
fargene sammen må gjøre noe enda bedre! Det var helt skuffende å innse at uansett hvor jeg gikk på det, hvis jeg brukte alle fargene til min disposisjon jeg uunngåelig endte opp med en kacky farge som bare kan kalles "BLECH".
Mange år senere, som en fledgling webdesigner, opplevde jeg noe av den samme prosessen på nytt. Som jeg lærte jeg falt inn i den uunngåelige fellen med å bruke for mange farger, eller kombinere dem på feil måte, bare for å ende opp med noe litt "BLECH".
satt jeg om å prøve å lære å lage fargevalg for web, og jeg fant en masse spennende informasjon om fargelære. Jeg leste om nyanser, nyanser, nyanser, toner, fargemetning og lysstyrke, samt analog, monokromatisk, triaden, komplementære og sammensatte fargevalg.
enkel RGB-fargepalett
Men uten et praktisk rammeverk å spor at informasjonen inn, fant jeg at først ikke fikk meg så mye nærmere til å skape godt farget webdesign. Faktisk var det først etter at jeg begynte å lage solide farger gjennom ren prøving og feiling at all fargen teorien jeg hadde lest begynt å gi mening.
I prosessen, jeg plukket opp noen "retningslinjer for sikkerhet" for nettstedet fargevalg som jeg skulle ønske jeg hadde kjent i begynnelsen. Når du først kommer i gang, er full fargeteori ikke nødvendigvis det du trenger foran. Ofte må du få ballen til å rulle med noe litt mindre teoretisk, og litt mer "maling av tall".
I denne opplæringen jeg skal dele med deg fem sikker brann, "kan ikke gå galt" retningslinjer du kan følge for å få en grunnlegg grep om å jobbe med farger i webdesign. Disse er ikke regler, som du vil lage mange fargevalg i din karriere som vil gå i en helt annen retning. Snarere, de er et utgangspunkt, en sikkerhets guide for hvordan de skal overleve de første utflukter i webdesign verden uten noen gang å kjøre inn "BLECH".
1. Fargevalg er Canvas, Ikke Maleri
En av de mest grunnleggende prinsippene i webdesign er at uansett hvor mye tid du bruker på å lage en strålende design, er dens ultimate rolle å spille andrefiolin til den virkelige stjernen av showet; innholdet. Fargevalget bør aldri gjøre området Motivet "høyere" enn innholdet den presenterer. Din design skal være i bakgrunnen, bidrar til å presse nettstedets innhold i forgrunnen.
Subtle fargevalget gjør at bildene skal være poenget med focusLoud fargevalget distraherer fra bilder. Ikke le, egentlig skjer dette ut på den ville web.
En veldig vanlig prosess i webdesign er å lage design selv i relativ isolasjon, ofte i programvare som Photoshop eller Sketch. Hvis du ikke har noen eksempel innhold i stedet det kan være lett å ende opp med et design som kan se flott i seg selv, og at en klient kan godt elske i mockup form, men som er for distraherende for besøkende i praksis. Faktisk er webdesign prosessen så tett knyttet sammen med innhold som mange høykvalitets web design synes alle men tom uten innhold i stedet.
Det er en god idé å starte med å legge ut en prøve av hvilken type innhold du forventer å dukke opp i området, enten i design software eller rett inn i koden, og deretter utforme rundt det. Dette er særlig tilfelle hvis du bilder eller bilder av en bestemt stil er å være involvert, slik at du kan sørge for at design vil flyte harmonisk med dem. Tenk deg at innholdet på nettstedet er et unikt individ for hvem må du skreddersy en perfekt montering dress.
2. Starte med en enkel gråskala Base
Det er et uendelig antall fargekombinasjoner du kan velge for din viktigste bakgrunn og tekst basen. Men min anbefaling er å starte med å mestre den enkleste, og det er hvitt og /eller lys grå i bakgrunnen sammen med mørk grå tekst.
Hvis du ser på noen utvalg av populære nettsteder, maler eller temaer, det er en god innsats et flertall av dem vil ha dette nøyaktig samme base av mørk grå tekst på hvit eller lys grå, og det er med god grunn. Med denne kombinasjonen er du nesten garantert å gi lesbarhet for besøkende, og la tekst og bilde basert innhold å komme i forgrunnen
Med noen eksempel innhold i stedet utarbeide en enkel gråskala layout, for eksempel.
Generelt sett bør du unngå å bruke jet svart for tekst som mørk grå er litt lettere å lese. En komfortabel rekkevidde er alt fra # 333333 til # 666666.
For bakgrunnsfarger, er full hvit #FFFFFF den sikreste alternativet for bakgrunner umiddelbart bak noen hoveddelen av teksten. For andre bakgrunnselementer kan du gå hvor som helst fra #FFFFFF ned til rundt #CCCCCC.
Igjen, dette er ikke regler for farger du må
bruk, kun retningslinjer du vet at du trygt kan komme i gang med.
3. Velg bare én farge til Marker
Det vanligste stedet fargesammensetninger gå galt er når krangel flere forskjellige farger. Jo flere farger du bruker, jo vanskeligere blir det å holde dem alle under kontroll. Så til å begynne med, bare legge en ekstra farge på toppen av gråtoner base som vil bli brukt i den hensikt å fremheve ting som linker, noen overskrifter, menyer, knapper og så videre. Din høydepunkt farge kan være blå, grønn, rød eller hva du vil.
Velg ditt høydepunkt farge ved først å legge ut en boks over basen din, slik at du kan måle hvordan fargen ser ut i forhold til alle elementene. Deretter åpner opp fargevelgeren og klikk i sentrum av øvre høyre kvartal fargekartet.
Flytt glidebryteren opp og ned, og velg en farge du tror vil fungere godt for design. Anmeldelser
På dette punktet du arbeider nå med tre grunnleggende farger; din bakgrunn, tekst og et høydepunkt. Du kan, og bør, bruke mer enn ett høydepunkt farge i fremtiden, men for nå tenker på det som sjonglering. Du allerede arbeider med tre sjonglering pins, så får komfortabel med bare disse tre, og deretter legge mer inn i rotasjon når du er trygg
du nettopp har lært.
Du har akkurat lært hvordan du velger en " hue
". I et nøtteskall, er en nyanse en base farge. Når du flytter glidebryteren opp og ned vil du se " H
" verdi i din fargevelger endring.
"H" står for hue, og når du har valgt din høydepunkt farge, er antallet i den boksen sin fargetone.
4. Hvis du er i tvil, bruk blå
Hvis du er i tvil i det hele tatt over hvilke høydepunkt farge å bruke, velger blått. Alvor. Blå er ofte den mest fleksible fargen å jobbe med og vil passe flest språk typer. Farger som lilla og gult kan være veldig hyggelig, men kan også fort bli glorete hvis det brukes på feil måte.
På den annen side kan du gjøre omtrent alt med blå som et høydepunkt farge, og du kan ikke gå for langt galt. Hvis du ikke er sikker på hvor du skal begynne å lære eller hvilken farge som skal brukes i et prosjekt, bare falle tilbake på blått. Den spesielle blå du velger kan være alt fra en marineblå (hue 235) gjennom til en aqua (hue 190) og du er i ganske trygt territorium.
For mitt eksempel oppsettet jeg har valgt en nyanse av 205. Når du har avgjort på ditt høydepunkt farge gå videre og legge den til din design der du tror det er påkrevet. Hvis du bruker din høydepunkt farge på knapper eller et område med tekst på toppen av det, endre tekstfarge også. I dette tilfellet har jeg forandret tekst over uthevede områder til hvitt.
5. Legg Variasjoner på din Uthevingsfarge
Når du har valgt din høydepunkt farge forlate glidebryteren (hue) bar hvor det er fra det punktet på. Du kommer til å trenge ekstra farger for design, men de kommer alle til å være variasjoner i det ene høydepunktet fargen du allerede har valgt for å holde ting enkelt.
Hvis du vil lage fargevariasjoner dra rundt på områdekartet i fargevelgeren
Bruk disse typer fargevariasjoner for ting som:.
Hover Effects
Borders
< h3> subtil Tekst Over Uthevingsfarge
gradienter
lys og skygge effekter
6. Hold ut av øverst i høyre hjørne
Den øverste høyre hjørne av fargekartet er landet av høye oktan farger. Farger i øvre høyre hjørne er som Formel 1-biler; de kan utføre utrolig og er svært forlokkende, men vanligvis tar det mye erfaring å bruke dem godt. Uten den erfaringen kan de forårsake ulykker, så det er best å klippe tennene på farger som er mer tonet ned.
Det er derfor i den tredje delen av denne opplæringen spurte jeg deg til å klikke fargekartet i sentrum av øverst til høyre før du velger ditt høydepunkt farge, for å sikre at du sparket av med en relativt dempet farge.
For å illustrere, se hva som skjer hvis jeg bare endre nyansen i vårt design så langt, uten å berøre fargekartet.
Det ser fortsatt ganske fin, ikke sant? Men hvis jeg drar fargekartet opp til at øverst i høyre hjørne, er det plutselig ikke så fint.
Ouch mine øyne !! Hvis du vil være sikker på at du ikke svi netthinne av de besøkende, følger en generell retningslinje for toning ting ned ved å bo ut av øvre høyre hjørne av fargekartet
du nettopp har lært.
I de to siste delene du faktisk lært å bruke noen forskjellige aspekter av fargelære. Du lærte å jobbe med:
fargemetning og lysstyrke.
Når du drar rundt på kartet området av fargevelgeren området du vil se "S" og "B" verdier endres, som står for " Saturation
" og " Lysstyrke
"hhv. Du vil også se nyansen nummer forblir den samme. Så du lager fargevariasjoner ved å endre metning og lysstyrke i original hue.
Saturation og Nyanser
Saturation
er hvordan levende farge uttrykkes. For eksempel tror "My shirt ble mettet med sølt rødvin". På en typisk fargevelger metning bestemmes av hvor mye hvitt er blandet med base hue. Jo mindre hvit, jo mer mettet.
Når du drar til høyre på kartet fargen du redusere mengden av hvite og dermed øke fargemetningen slik at "S" verdien går opp. Når du drar til venstre mot at alle hvite hjørne du redusere metningen så "S" verdien går ned Saturation
. På en standard fargevelger kart
Denne blanding av hvitt på med den opprinnelige fargetone kalles også skape en " tint
". Begrepet kommer fra maling miksing, hvor en hvit maling er blandet med en farget lakk.
Lysstyrke og Shades
Lysstyrke
er hvor mye svart det er blandes inn i din farge. Jo mindre sort, desto mer lysstyrke.
Når du drar oppover på kartet du redusere mengden av svart, øke lysstyrken og "B" verdi på fargevelgeren går opp. Når du drar ned du øke den svarte og "B" verdien går opp.
Mixing svart på med den opprinnelige fargetone kalles også skape en " skygge
". Dette kommer også fra maling miksing, hvor en svart maling er blandet med en farget lakk.
Toner
Når du blander grå i fargen kalles dette å skape en " tone
". Når du flytter ut av øverst i høyre hjørne som vi gjorde ovenfor du senke både fargemetning og lysstyrke som legger både hvit og svart (grå), derav skape en tone. Så i utgangspunktet helst både fargemetning og lysstyrke er mindre enn 100%, som er en tone.
Igjen, kommer dette uttrykket fra maling miksing, hvor en grå maling er opprettet og deretter blandet med en farget lakk. Det er også her uttrykket å " tone ting ned
" kommer fra. Cool huh?
Monokromatiske Fargevalg
En " monokromatisk
" Fargevalget er der du tar en base hue og forlenge den med fargetoner
, < i> nyanser Hotell og toner
. Du bare lært hva alle disse begrepene betyr i en praktisk setting. Så ved å plukke én høydepunkt farge og skape variasjoner på det du faktisk opprettet en monokromatisk fargevalg.
Hva nå?
Fortsette å øve dine monokromatiske farger på en gråskala basen til du føler deg virkelig trygg . Prøv å lage dem med ulike fargetoner som din høydepunkt farge, eksperimentere for å se hvordan det endrer metning og lysstyrke du er i stand til å bruke.
Når du føler deg komfortabel, gå videre til å legge en ekstra høydepunkt farge. Jeg anbefaler å prøve oransje og blå i ditt første utflukt som de pleier å være den enkleste duo å jobbe med. Deretter prøver grønt og blått, som etter min erfaring er det nest enkleste. Begge disse combos en tendens til å bli en hit med klienter og kunder.
Den absolutt beste du kan gjøre for å drive din forståelse av fargevalg for web er å ta deg en farge sampler nettleserutvidelse som ColorZilla, og bruke den til å begynne å undersøke hvordan erfarne designere gjør det. Som du surfer rundt på internett, når du ser et fargevalg som ser god pause ut fargen sampler og ta en titt på fargene som brukes på siden. For hver nyanse du smake, ta en titt på hva metning og lysstyrke nivåer fungerer best med det. Også ta hensyn til hvilke farger fungerer i kombinasjon med andre.
Hvis du er i tvil, kan du alltids falle tilbake på "sikkerhet først" retningslinjer og du vil være trygg fra "BLECH" fra nå av.