Hvordan få et profesjonelt utseende med farge
Hva gjør et designutseende samordnet, planlagt og profesjonelt? Svaret er: 'farge' .
Ikke hvert prosjekt trenger bløt firma blå for å se profesjonelt. Planlegge farge betyr å lage et rammeverk som beskriver hvilke farger du skal bruke og hvordan du bruker dem.
Farge er det tøffeste designelementet. "God" farge er så nært knyttet til unnvikende ting som personlig smak og intuisjon, samt tekniske hensyn som kontrast og skjermkalibrering.
Men farge er viktig for innholdet . Hvis du vurderer et nettsted som er viktig nok til å bruke tidsraffinering, vil leserne trolig vurdere det viktig nok å bruke tid til å lese. Gode fargevalg gjør det skje.
I denne artikkelen vurderer vi noen teknikker for å oppnå vakre fargepaller for webdesign.
Den beste måten å lage et nettsted uten planlagt er å velge sine farger tilfeldig.
Selv når besøkende skimmer på nettsidenes hjemmeside for første gang, påvirker fargene deres holdning til innholdet . Er dette nettstedet spennende? Betryggende? Daring? Kjedelig? Politisk? Formell?
Farge påvirker hvordan folk tolker det de ser så mye som typografi.
Å finne de riktige fargene er ikke lett, men prosessen kan være systematisk.
God designstrategi innebærer et fargevalg (dvs. en rekke farger valgt for å kommunisere et humør eller en melding) og en ordning for den ordningen.
La oss si at du har blitt bedt om å designe et profesjonelt nettsted. (Og dette kan veldig godt bli til et drikkespill: Ta et skudd hver gang klienten bruker ordet "profesjonelt," "rent" eller "moderne". To skudd for "Jeg liker denne andre nettsiden. Kopier den.").
Fargevalget vil avhenge av nettstedets spesielle karakter. For eksempel kan både banker og blomsterbutikker ha profesjonelle nettsteder.
Men folk kan være mindre tilbøyelige til å kjøpe blomster fra et nettsted som er bedriftens blå og havgrå. Og forestill deg Bank of America nettsiden i lilla og gulgrønne.
En "profesjonell" design forteller besøkende at de har funnet et nettsted som tar sitt emne seriøst, selv om emnet er lette. Uansett nyanser og verdier betyr "profesjonell" koordinert, planlagt og gjennomtenkt .
Gå Gråskala
Den beste måten å jobbe med fargen på er å starte med ingen.
Fjerning av farge fra et design avslører grunnleggende problemer som bør tas opp før du bekymrer deg for hvilken nyanse av diagrammet som fungerer best. Hvis designen ikke føles riktig i svart og hvitt, er det på tide å gjøre endringer.
Har hver side et klart formål? Hører designguiden gjennom innholdet? Er innholdet overbevisende, inspirerende eller informativt? Er overskriftene klare? Er koblingene kontrast til den andre teksten? Farge forbedrer disse effektene, men problemer i layout, type og organisasjon kan ikke løses av farge alene .
For å gjøre et nytt design, suger du først fargene. Den enkle handlingen med å vaske ut overmette primater viser virkelig hvor et nettsted står. (Egentlig bør du virkelig starte et redesign ved å evaluere mål og innhold, men det er en annen historie.)
Noen ganger fjerning av farge er en løsning i seg selv .
Jeg jobbet en gang med et webdesign firma for å redesigne sin egen nettside. Eierne var personlig om prosjektet og opptatt av å få det riktig. Men hvis du synes å designe for deg selv er vanskelig, prøv å gjøre det av komiteen. Ved slutten stirret de tre av oss på et skjermbilde av det niende utkastet etter-timer over noen drinker.
Plutselig fladte jeg Photoshop-lagene og slo "Desaturate", og snu den levende kobber-og-navy-designen i gråtoner. Til alles overraskelse virket det.
Ved slutten av uken hadde vi en "varm" grå design med røde aksenter. Vi visste at vi hadde en vinner når tidligere kunder komplimenterte dem på det nye utseendet, og flere samtaler kom inn fra potensielle kunder.
Analyser fargeskjemaet med Photoshop "squint" testen :
- Ta skjermbilder av minst tre sider fra nettstedet ditt. Åpne dem i Photoshop.
- Dupliser bakgrunnslaget i hvert skjermbilde ( Lag → Dupliser Layer , eller Kommando + J på Mac eller Kontroll + J på Windows).
- Påfør en Gaussisk uskarphet på ca 10 piksler til de nye lagene.
- Gå til Bilde → Tilpasninger → Posterize . Bruk 8 til 12 nivåer eller gå til Filter → Pixellate → Mosaic . Bruk 15 til 30 piksler.
Dette viser hvilke farger som er virkelig dominerende. Jo mer dominerende fargene er, desto tyngre er ordningen påtrykt i besøkendes sinn.
Når nettsidens layout og organisasjon fungerer uten farge, er det på tide å velge en palett. Men hvilken? Og hvor mye å bruke?
Juster nyansene dine
Farge har tre egenskaper: fargetone, metning og verdi (noen ganger kalt lyshet).
Metning er hvor rik en nyanse er: neonfarger er svært mettede, mens pasteller er mindre mettede.
Verdi angir hvor lyst (dvs. hvor nær svart eller hvit) en farge er.
Fargetone refererer til hvilken del av regnbuen en farge tilhører, for eksempel rød eller grønn; Det er eiendommen som folk reiser seg på.
Ingenting dreper et fargevalg som sammenstøtende fargetoner. Et design kan ha hundre nyanser av en nyanse, fra pastell til neon, og fortsatt se planlagt. Men hvis nyanser blandes på feil måte, faller ordningen fra hverandre.
En måte å unngå sammenstøtende nyanser på er å skille dem med en tredje farge. En buffer av svart, grå eller hvit er sikreste, fordi gråtoner er nyanse-nøytral: Du kan koordinere enhver del av regnbuen med svart, hvitt og grått.
En annen løsning er å bruke nyansene i forskjellige proporsjoner . Hvis et fargevalg har sagt, fiolett og brunt, så kan designen ha mange nyanser av brun med noen få lyse fiolette høydepunkter.
Et annet alternativ er å variere verdiene. Ren blå og lys cyan gjør en ujevne kombinasjon, men mørkblå (marine) og lys cyan (himmelsblå) kontrast nok til å sette hverandre av. Rød og fiolett kan være forskjellig nok til ikke å kollidere, men nær nok til ikke å se på hensikt. Lysrødt (rosa) og en mørk fiolett gir skille.
Dessverre, å unngå en dårlig fargekombinasjon er ikke det samme som å velge en god en. Et fargeskjema lykkes ikke når du er fornøyd, men når publikum føler deg komfortabel.
Oppdag flotte ordninger
Hvor kommer flotte farger fra? Med hundrevis av farger og tusenvis av kombinasjoner, hvordan bestemmer du?
Designere av små statiske nettsteder bør tegne farge fra innholdet . Det betyr vanligvis bilder.
Utformingen av et åtte siders nettsted som jeg nylig bygget, ble toppet med et forseggjort metallstillasett mot en indigo himmel. Ved å sette Photoshop's eyedropper verktøyet til et 5 × 5 gjennomsnitt, samplet jeg de mørkeste og letteste delene av himmelen og ga sidebarene, linkene, overskriftene og bunnteksten de få nyanser.
Når klienten spurte hvordan vi kunne utforme et nettsted så godt og så raskt, var vårt svar "Dette er hva vi gjør." Men fargen var allerede der. Jeg måtte bare se etter det.
Mens lagerbilder fungerer for raske nettsteder, bør designere av større og mer dynamiske nettsteder søke inspirasjon fra publikum .
En utmerket indikator på hvilke farger som er attraktive for publikum er deres daglige klær. Finn ut hva dine besøkende har på deg, og du vil vite hvilke farger som gjør dem komfortable. Hvis nettstedet ditt handler om, si, ligasport, finn ut hva folk har på spill, i stedet for deres dagjobber.
Hvis du er heldig nok til å få bilder av målgruppen din, ser du dem masse; du vil ha et gjennomsnitt av mengden. Men hvis bilder ikke er tilgjengelige, kan du handle.
Klær designere som er i stand til å holde seg i virksomheten har utmerket fargefølelse for alle humør og livsstil. Det trenger ikke å være 5th Avenue haute couture. Et Google-søk etter "camping butikker", "baby klær," "ski og badetøy" og "uformell levende" vil avsløre mange gode fargekombinasjoner.
Folk bruker klær i henhold til deres smak. Hvis du bruker farger som de liker, vil de føle seg mer komfortable på nettstedet ditt.
Bruk teksturer
Små variasjoner i fargetone, metning eller verdi skaper teksturer .
Monokromatiske teksturer (dvs. teksturer med bare en nyanse) og mønstre gir subtile dimensjoner til de fleste nettsteder uten sammenstøt.
Enkel teksturbakgrunn, spesielt, er lett å bygge:
- Ta et bilde av en innervegg, eller noe som er bar, men føles grovt.
- Åpne den i Photoshop.
- Dupliser bakgrunnslaget og kaller det "tekstur 1."
- Fyll bakgrunnslaget med farger fra fargeskjemaet.
- Sett "Texture 1" -lagets blandingstilstand til "Soft Light" og dens opasitet til 30%.
- Prøv det på nettstedet ditt. Hvis det ikke ser riktig ut, spill med lagets opasitet.
Lagets navn er bevisst. Du kan leke med mer enn ett bilde, men unngå å gi lagene navn som "veggtekstur" eller "papirstruktur." Du vil fokusere på effekten på nettstedet ditt, ikke hvor det kommer fra.
Skape en god ordning
Et godt fargevalg har visse egenskaper. Tenk på det som et rammeverk eller sett med retningslinjer for å holde et design konsistent. Ordningen bør:
- Skriv to til fem nyanser som fungerer godt sammen,
- Beskriv hvor langt et design kan variere fra de nyansene,
- Redegjøre for nyanser av hver nyanse,
- Arbeid godt mot svart og hvitt.
Her er et eksempel:
Designeren begynte med å velge det meste varme fargetoner som følte seg riktig. Det var ingen logikk, bare det vage målet om "høst" og hennes intuisjon.
I Photoshop ga to lag nyanser av svart og hvitt. Hvert lag blandingsmodus ble satt til "mykt lys". Rent svart var for mørkt for den høyeste fargen, så det svarte lagets opasitet ble justert.
For å forene fargene ble et nytt lag opprettet og fylt med ren rød. Blandingsmodusen ble satt til "Color" og dens opasitet kuttet til ca. 40%. (Merk: rekkefølgen på lagene er svært viktig. Farger vil endres dersom "tint" -laget er satt under de svart-hvite lagene.)
Dette ga designeren 15 farger å velge mellom. Hun plukket fire som hadde en rekke toner og nyanser. Her er fargene satt mot hvitt.
Variasjoner er viktige, så designeren eksperimenterte. Hva ser fargene ut mot svart? Hva skjer hvis vi skygger dem litt?
Hva om vi forandret dem helt? Bruke Image → Justeringer → Hue / Metning på "tint" -laget skaper en tydelig høstfeil, men fargene er fortsatt koordinert. Kanskje den paletten kan brukes til påske.
Sluttresultatet er et fargeskjema: en referanse som gir forskjellige (men ikke så forskjellige) nyanser og en rekke nyanser som fungerer godt sammen. Last ned prøvefilen.
Bruk rammen
Vil morgendagens grafikk, bilder og ikoner fungere med dagens fargeskjema? Hvilke bilder vil et nettsted kreve om seks dager, seks uker eller seks måneder? Det er vanskelig å si, men innhold er en del av fargevalg .
Du kan løse dette problemet ved å enten gjøre bildene dine følge fargeskjemaet eller fargeskjemaet følger bildene dine.
Håndheve fargeskjemaet ditt, selv med bilder, er en fin måte å oppnå et enhetlig utseende på alle sider .
Den enkleste løsningen er å finne bilder som passer til ordningen din. Husk at et fargeskjema gir mulighet for wiggle-rom: så lenge bildens store fargetoner passer, bør bildet fungere. Mange lager foto nettsteder lar deg søke etter farge (som betyr fargetone: vanligvis primaries som rød, grønn og blå).
Hvis et bilde ikke passer ditt fargeskjema, gi det en fargetone:
- Åpne bildet i Photoshop.
- Lag et nytt lag. Sett blandemodus til "Farge".
- Fyll det laget med en av fargene fra paletten din, helst den som passer best til bildet.
- Still fargelagets opasitet til 50%.
- Spill med opasiteten til du får en god balanse mellom bildens originalfarge og nettstedets fargepalett.
- Denne teknikken fungerer for bilder, illustrasjoner og ikoner - alt pikselbasert. (Hvis du ikke eier bildet, må du få tillatelse før du endrer det. Du kan forbedre sitt utseende på nettstedet ditt, men du tar fortsatt frihet med andres kunst.)
Ser Professional
Ingen sett med farger ser ut som "profesjonelle" i seg selv. I stedet må du følge en prosess for å nå en koordinert, planlagt følelse.
Uansett hva nettstedet handler om, vil publikum vite at det tar seg selv alvorlig.
Tips
- Når du tror du har en god fargevalg, prøv den ut i minst en uke. Evaluering av farge krever intuisjon som bygger over tid. Gi deg tid til å fullt ut absorbere ordningens personlighet.
- Når du tror du har et godt fargevalg, ikke la det gå uaktivt. Dine besøkers smak, som din, endres over tid. Legg merke til å se gjennom fargene etter fire måneder. Spør da, er de fortsatt aktuelle? Hvis ikke, hva har endret seg? Hvilke faktorer vil påvirke justeringen din?
- Bruk strålende farger sparsomt. Et skvett av noe iriserende vil trekke besøkende der, men hvis de ser det overalt, vil de vandre målløst.
- Noen mener at fargevalg har et smalt utvalg. Tillat litt spillerom for å gi designene ekstra dybde.
- Unngå rene primaries som rød, grønn, blå og gul. Gi dem en tinge for ekte karakter: rød, men litt fiolett, blå med et snev av grønn, "varm" gul med en oransje fargetone.
- Pass på at fargene dine fungerer når bleknet. Hvis du velger rødt, vær oppmerksom på at lysrød kan være feminin og mørk rød kan se ut som rust eller blod. Gul løper fra falmet sollys til mørkbrunt. Mørkblå er mystisk, og lyseblå er rolig - eller elektrisk hvis du oversetter den.
- Mac-brukere, angi skjermen. Gå til "System Preferences" og klikk "Universal Access." Sett skjermen til "Bruk gråtoner". Dette kommer også til nytte når du er i humør for film noir.
- Uansett hvor aktiv du vil at nettstedet ditt skal føles, bruk en nøytral bakgrunn. Svart, hvitt og grått fungerer godt med nesten alle nyanser.
- Hvis du vil ha liten tekst (si 14 poeng eller mindre) for å matche et stort fargefelt, gjør teksten noen få nyanser mørkere enn normalt. Dette vil kompensere lystellerne inne i tegnene.
- Bruk flere nyanser med færre fargetoner.
- Det som ser bra ut er intuitivt. Men intuisjon er en kamp mellom egoet ditt, publikumets plikt og autoriteten til folket som finansierer prosjektet.
- Bruk dempet bakgrunn for å skille innhold ut:
Skrevet utelukkende for WDD av Ben Gremillion . Han er freelance webdesigner som har lært at en tidsfrist er ufleksibilitet er omvendt proporsjonal med antall funksjoner som er forespurt i siste øyeblikk.
Hvordan lager du vellykkede fargeskjemaer? Hva fungerer og hva virker ikke for deg?