Sådan får du et professionelt udseende med farve
Hvad gør et design udseende koordineret, planlagt og professionelt? Svaret er: 'farve' .
Ikke alle projekter har brug for blid corporate blåt at se professionelt ud. Planlægningsfarve betyder at skabe en ramme, der beskriver hvilke farver der skal bruges og hvordan man bruger dem.
Farve er det tøffeste designelement. "God" farve er så tæt knyttet til undvigende ting som personlig smag og intuition, samt tekniske overvejelser som kontrast og monitorkalibrering.
Men farve er afgørende for indholdet . Hvis du overvejer en hjemmeside, der er vigtig nok til at bruge tidsraffinering, så vil læsere sandsynligvis overveje det vigtigt nok til at bruge tidslæsning. Gode farvevalg gør det til at ske.
I denne artikel gennemgår vi nogle teknikker til at opnå smukke farvepaller til dine webdesign.
Den bedste måde at få et websted til at se uplanlagt på er at vælge sine farver tilfældigt.
Selv når besøgende skimmer en hjemmesides hjemmeside for første gang, påvirker farverne deres holdning til indholdet . Er denne hjemmeside spændende? Beroligende? Daring? Bland? Politisk? Formel?
Farve påvirker, hvordan folk fortolker, hvad de ser så meget som typografi.
At finde de rigtige farver er ikke let, men processen kan være systematisk.
God designstrategi indebærer et farveskema (dvs. en række farver valgt til at kommunikere et humør eller en besked) og et arrangement af den pågældende ordning.
Lad os sige, at du er blevet bedt om at designe en professionel hjemmeside. (Og det kan meget vel blive et drikespil: Tag et skud hver gang klienten bruger ordet "professionelt", "rent" eller "moderne". To skud til "Jeg kan godt lide denne anden hjemmeside. Kopier den.").
Farveskemaet vil afhænge af webstedets særlige karakter. For eksempel kan både banker og blomsterhandlere have professionelt udseende hjemmesider.
Men folk kan være mindre tilbøjelige til at købe blomster fra et websted, der er corporate blue og ocean gray. Og forestil Bank of America's hjemmeside i lys og gulgrøn.
Et "professionelt" design fortæller besøgende, at de har fundet et websted, der tager sit emne seriøst, selvom det pågældende emne er lette. Uanset nuancer og værdier betyder "professionel" koordineret, planlagt og gennemtænkt .
Gå gråtoner
Den bedste måde at arbejde med farve på er at starte med ingen.
Fjernelse af farve fra et design afslører grundlæggende problemer, som bør løses, før du bekymrer dig om, hvilken skygge af chartreuse der bedst virker. Hvis designet ikke føles ret i sort / hvid, så er det tid til at foretage ændringer.
Har hver side et klart formål? Læser designguiden gennem indholdet? Er indholdet overbevisende, inspirerende eller informativt? Er overskrifterne klare? Er kontrasterne i modsætning til den anden tekst? Farve forbedrer disse effekter, men problemer i layout, type og organisation kan ikke løses alene efter farve .
For at lave et redesign skal du først sutte farven. Den enkle handling at vaske ud over mættede primaries viser virkelig hvor et websted står. (Faktisk skal du virkelig starte et redesign ved at revurdere dine mål og indhold, men det er en anden historie.)
Nogle gange er fjernelse af farve en løsning i sig selv .
Jeg har engang arbejdet med et webdesign firma til at designe deres eget websted. Ejerne var personlige om projektet og ivrig efter at få det rigtige. Men hvis du tror at designe for dig selv er svært, så prøv at gøre det af udvalg. I slutningen stirrede de tre af os på et screenshot af det niende udkast efter-timer over et par drikkevarer.
Jeg pladede pludselig Photoshop-lagene og ramte "Desaturate", der ændrede det levende kobber-og-navy-design i gråtoner. Til alles overraskelse fungerede det.
Ved udgangen af ugen havde vi et "varmt" grå design med røde accenter. Vi vidste, at vi havde en vinder, da tidligere kunder komplimenterede dem på det nye udseende, og flere opkald kom ind fra potentielle kunder.
Analyser dit farveskema med Photoshop "squint" testen :
- Tag screenshots på mindst tre sider fra dit websted. Åbn dem i Photoshop.
- Dupliker baggrundslaget i hvert skærmbillede ( Lag → Duplikatlag eller Kommando + J på Mac eller Control + J på Windows).
- Anvend en gaussisk slør på ca. 10 pixels til de nye lag.
- Gå til Billede → Justeringer → Posterize . Brug 8 til 12 niveauer eller gå til Filter → Pixellate → Mosaic . Brug 15 til 30 pixels.
Dette viser hvilke farver der virkelig er dominerende. Jo mere dominerende farverne er, des tyngre er ordningen trykt i gæsternes sind.
Når websitetets layout og organisation fungerer uden farve, er det tid til at vælge en palette. Men hvilken? Og hvor meget skal du bruge?
Juster dine nuancer
Farve har tre egenskaber: nuance, mætning og værdi (undertiden kaldet lyshed).
Mætning er, hvor rig en farve er: neonfarver er meget mættede, mens pasteller er mindre mættede.
Værdi angiver hvor lyst (dvs. hvor tæt på sort eller hvid) en farve er.
Farve henviser til hvilken del af regnbuen en farve tilhører, såsom rød eller grøn; det er den ejendom, som folk rejser op på.
Intet dræber et farveskema som sammenbrudte nuancer. Et design kan have hundrede nuancer af en nuance, fra pastel til neon, og stadig se planlagt. Men hvis nuancer blandes den forkerte måde, falder ordningen fra hinanden.
En måde at undgå sammenbrudte nuancer på er at adskille dem med en tredje farve. En buffer af sort, grå eller hvid er sikreste, fordi gråtoner er nuance-neutral: Du kan koordinere enhver del af regnbue med sort, hvid og grå.
En anden løsning er at bruge nuanserne i forskellige proportioner . Hvis et farveskema har sagt, violet og brun, så kan designet have mange nyanser af brunt med et par lyse violette højdepunkter.
En anden mulighed er at variere værdierne. Ren blå og lys cyan gør en så-så kombination, men mørkblå (marineblå) og lys cyan (himmelblå) kontrast nok til at sætte hinanden af. Rød og violet kan være forskellig nok til ikke at kollidere men tæt nok ikke at se forsætlig ud. Lysrød (lyserød) og en mørk violet giver forskel.
Desværre er det ikke det samme at undgå en dårlig farvekombination som at vælge en god. Et farveskema lykkes ikke, når du er tilfreds, men når dit publikum føles behageligt.
Oplev fantastiske ordninger
Hvor kommer flotte farveskemaer fra? Med hundredvis af farver og tusindvis af kombinationer, hvordan beslutter du?
Designere af små statiske websteder bør tegne farve fra indholdet . Det betyder normalt fotos.
Udformningen af en otte siders hjemmeside, som jeg for nylig bygget, blev toppet med et udførligt metalstillads sæt mod en indigo himmel. Indstilling af Photoshop's eyedropper værktøj til et gennemsnit på 5 × 5, jeg samplede de mørkeste og letteste dele af himlen og gav sidebaret, links, overskrifter og footer de få nuancer.
Da klienten spurgte, hvordan vi kunne udforme en hjemmeside så godt og så hurtigt, var vores svar "Dette er hvad vi gør." Men farven var allerede der. Jeg var nødt til at kigge efter det.
Mens lagerfotos arbejder for hurtige websteder, bør designere af større og mere dynamiske websites søge inspiration fra deres publikum .
En fremragende indikator for hvilke farver der er attraktive for dit publikum er deres daglige tøj. Find ud af, hvad dine besøgende bruger, og du ved, hvilke farver der gør dem komfortable. Hvis din hjemmeside handler om, siger liga sport, find ud af, hvad folk har på spil, i stedet for deres dag job.
Hvis du er heldig nok til at få billeder af din målgruppe, skal du se dem en masse; du vil have et gennemsnit af mængden. Men hvis billeder ikke er tilgængelige, skal du handle.
Tøjdesignere, der er i stand til at forblive i erhvervslivet, har fremragende farvesans for ethvert humør og livsstil. Det behøver ikke at være 5th Avenue haute couture. En Google-søgning efter "campingbutikker", "baby tøj", "ski og badetøj" og "afslappet ophold" vil afsløre mange gode farvekombinationer.
Folk bærer tøj efter deres smag. Hvis du bruger farver, som de kan lide, vil de føle sig mere komfortable på din hjemmeside.
Brug teksturer
Små variationer i nuance, mætning eller værdi skaber teksturer .
Monokromatiske teksturer (dvs. teksturer med kun en nuance) og mønstre giver en subtile dimension til de fleste websites uden sammenstød.
Enkelte teksturbakgrunde er især nemme at bygge:
- Tag et billede af en indvendig væg eller noget, der er bar, men føles groft.
- Åbn den i Photoshop.
- Dupliker baggrundslaget og kald det "tekstur 1."
- Fyld baggrundslaget med farver fra dit farveskema.
- Indstil "texture 1" lagets blandingstilstand til "" Soft Light "og dens opacitet til 30%.
- Prøv det på din hjemmeside. Hvis det ikke ser rigtigt ud, skal du spille med lagets opacitet.
Lagets navn er bevidst. Du kan lege med mere end et billede, men undgå at give lagene navne som "vægtekstur" eller "papirstruktur." Du vil fokusere på effekten på din hjemmeside, ikke hvor den kommer fra.
Oprettelse af en god ordning
Et godt farveskema har visse karakteristika. Tænk på det som en ramme eller et sæt retningslinjer for at holde et design konsistent. Ordningen bør:
- Angiv to til fem nuancer, der fungerer godt sammen,
- Beskriv hvor langt et design kan variere fra de nuancer,
- Redegør for nuancer af hver nuance,
- Arbejde godt mod sort og hvidt.
Her er et eksempel:
Designeren begyndte ved at vælge de fleste varme nuancer, der følte rigtigt. Der var ingen logik, bare det vage mål om "efterår" og hendes intuition.
I Photoshop leverede to lag nyheder i sort / hvid. Hvert lags blandingstilstand blev indstillet til "blødt lys". Ren sort var for mørk til den højeste farve, så det sorte lags opacitet blev justeret.
For at forene farverne blev der skabt et nyt lag og fyldt med rent rødt. Dens blandingstilstand blev indstillet til "Farve" og dens opacitet skæres til omkring 40%. (Bemærk: Lagenes rækkefølge er meget vigtig. Farverne vil ændre sig, hvis "farvet" -laget er sat under de sort / hvide lag.)
Dette gav designeren 15 farver at vælge imellem. Hun valgte fire der havde en række toner og nuancer. Her er farverne indstillet mod hvidt.
Variationer er vigtige, så designeren eksperimenterede. Hvad ville farverne se ud mod sort? Hvad sker der, hvis vi skygger dem lidt?
Hvad hvis vi helt ændrede dem? Brug af billede → Justeringer → Farve / Mætning på "farvetone" -laget skaber en tydelig fejring uden høst, men farverne koordineres stadig. Måske kan paletten bruges til påske.
Slutresultatet er et farveskema: en reference, der giver forskellige (men ikke for forskellige) nuancer og en række nuancer, der fungerer godt sammen. Download prøvefilen.
Brug rammen
Vil morgendagens grafik, billeder og ikoner arbejde med dagens farveskema? Hvilke billeder skal en hjemmeside få om seks dage, seks uger eller seks måneder? Det er svært at sige, men indhold er en del af dit farveskema .
Du kan løse dette problem ved enten at gøre dine billeder i overensstemmelse med farveskemaet eller gøre farveskemaet efter dine billeder.
Enforcing dit farveskema, selv med fotos, er en fantastisk måde at opnå et samlet udseende på tværs af alle sider .
Den nemmeste løsning er at finde billeder, der passer til din ordning. Husk, at et farveskema giver mulighed for wiggle room: så længe et billedets store nuancer passer, skal billedet fungere. Mange stock foto hjemmesider lader dig søge efter farve (hvilket betyder farvetone: normalt primaries som rød, grøn og blå).
Hvis et billede ikke passer til dit farveskema, skal du give det en farvetone:
- Åbn billedet i Photoshop.
- Opret et nyt lag. Indstil blandingstilstanden til "Farve".
- Fyld det lag med en af farverne fra din palette, helst den der passer bedst til billedet.
- Indstil farvelagets opacitet til 50%.
- Spil med opacitet, indtil du får en god balance mellem billedets originale farve og dit websites farvepalette.
- Denne teknik virker til billeder, illustrationer og ikoner, alt efter pixelbaseret. (Hvis du ikke ejer billedet, skal du sørge for at få tilladelse, før du ændrer det. Du kan muligvis forbedre sit udseende på dit websted, men du er stadig fri for en andens kunst.)
Ser Professional
Intet sæt farver ser "professionelle" ud i sig selv. I stedet skal du følge en proces for at nå en koordineret, planlagt følelse.
Uanset hvad hjemmesiden handler om, vil publikum vide, at det tager sig selv alvorligt.
Tips
- Når du tror, du har et godt farveskema, prøv det i mindst en uge. Evaluering af farve kræver intuition, der bygger over tid. Giv dig tid til fuldt ud at absorbere ordningens personlighed.
- Når du tror du har et godt farveskema, lad det ikke gå forældet. Dine besøgers smag, som din, ændres over tid. Lav en note for at gennemgå farverne efter fire måneder. Så spørg, er de stadig passende? Hvis ikke, hvad har ændret sig? Hvilke faktorer vil påvirke din tilpasning?
- Brug strålende farver sparsomt. Et stænk af noget iriserende vil trække besøgende der, men hvis de ser det overalt, vil de vandre målløst.
- Nogle mennesker tror, at farveskemaer har et snævert udvalg. Tillad noget leeway at give dine designs ekstra dybde.
- Undgå rene primaries som rød, grøn, blå og gul. Giv dem en tinge til ægte karakter: rød, men lidt violet, blå med et strejf af grøn, "varm" gul med en orange farvetone.
- Sørg for, at farverne fungerer, når de falmede. Hvis du vælger rød, vær opmærksom på, at lysrød kan være feminin og mørk rød kan se ud som rust eller blod. Gul løber fra falmet sollys til mørkebrunt. Mørkblå er mystisk, og lyseblå er rolig eller elektrisk, hvis du oversætter den.
- Mac-brugere, indstil din skærm. Gå til "Systemindstillinger" og klik på "Universaladgang." Indstil dit display til "Brug gråtoner". Dette kommer også til nytte, når du er i humør for film noir.
- Ligegyldigt hvor aktiv du vil have din hjemmeside til at føle, brug en neutral baggrund. Sort, hvid og grå fungerer godt med næsten alle nuancer.
- Hvis du vil have lille tekst (f.eks. 14 point eller mindre) for at matche et stort farvefelt, skal teksten få nogle få nuancer mørkere end normalt. Dette vil opveje lysetællerne inde i tegnene.
- Brug flere nuancer med færre nuancer.
- Hvad "ser godt ud" er intuitivt. Men intuition er en kamp mellem dit ego, dit publikums valg og autoriteten hos de mennesker, der finansierer projektet.
- Brug dæmpede baggrunde til at gøre indholdet skarpt ud:
Skrevet udelukkende til WDD af Ben Gremillion . Han er en freelance webdesigner, der har lært, at en deadlines ufleksibilitet er omvendt proportional med antallet af funktioner, der anmodes om i sidste øjeblik.
Hvordan opretter du succesfulde farveskemaer? Hvad virker og hvad virker ikke for dig?