Hur man får ett professionellt utseende med färg
Vad gör ett designutseende samordnat, planerat och professionellt? Svaret är: "färg" .
Inte varje projekt behöver blunt företagsblått att se professionellt ut. Planeringsfärg innebär att skapa en ram som beskriver vilka färger som ska användas och hur man använder dem.
Färg är det tuffaste designelementet. "God" färg är så nära kopplad till oroväckande saker som personlig smak och intuition, liksom tekniska överväganden som kontrast och bildkalibrering.
Men färg är avgörande för innehållet . Om du anser en webbplats som är tillräckligt viktig för att spendera tidsförfining, kommer läsare troligen att anse det tillräckligt viktigt för att spendera tidsläsning. Goda färgval gör att det händer.
I den här artikeln granskar vi några tekniker för att uppnå vackra färgpallar för dina webbdesigner.
Det bästa sättet att göra en webbplats ser oplanned är att välja sina färger slumpmässigt.
Även när besökare skimrar en hemsida för första gången påverkar färgerna sin inställning till innehållet . Är den här hemsidan spännande? Betryggande? Vågad? Mild? Politisk? Formell?
Färg påverkar hur folk tolkar vad de ser så mycket som typografi.
Att hitta rätt färger är inte lätt, men processen kan vara systematisk.
Bra designstrategi innebär ett färgschema (dvs. en rad färger som valts för att kommunicera ett humör eller meddelande) och ett arrangemang av det schemat.
Låt oss säga att du har blivit ombedd att utforma en professionell webbplats. (Och det kan mycket väl bli ett dricksspel: ta ett skott varje gång kunden använder ordet "professionellt", "rent" eller "modernt". Två skott till "Jag gillar den här andra webbplatsen. Kopiera den.").
Färgschemat beror på webbplatsens speciella karaktär. Till exempel kan både banker och florister ha professionella webbplatser.
Men människor kan vara mindre benägna att köpa blommor från en webbplats som är företagsblå och havsgrå. Och tänk på Bank of America-webbplatsen i lila och gulgröna.
En "professionell" design berättar besökare att de har hittat en webbplats som tar sitt ämne seriöst, även om ämnet är ljust. Oavsett nyanser och värden betyder "professionell" samordnad, planerad och genomtänkt .
Gå gråskala
Det bästa sättet att arbeta med färg är att börja med ingen.
Att ta bort färg från en design avslöjar grundläggande problem som bör åtgärdas innan man oroar sig för vilken skugga av chartreuse som bäst fungerar. Om designen inte känns rätt i svartvitt, är det dags att göra ändringar.
Har varje sida ett tydligt syfte? Läs designguiden igenom innehållet? Är innehållet övertygande, inspirerande eller informativt? Är rubrikerna tydliga? Är länkarna kontrasterade med den andra texten? Färg förbättrar dessa effekter, men problem i layout, typ och organisation kan inte lösas med färg ensam .
För att göra en omdesign, suga först ut färgen. Den enkla handlingen att tvätta över mättade primarier visar verkligen var en webbplats står. (Egentligen bör du verkligen starta en ny design genom att utvärdera dina mål och innehåll, men det är en annan historia.)
Ibland är borttagning av färg en lösning i sig .
Jag arbetade en gång med ett webbdesignföretag för att omorganisera sin egen hemsida. Ägarna var personliga om projektet och angelägna om att få det rätt. Men om du tycker att det är svårt att designa själv, försök att göra det av utskottet. Vid slutet stirrade de tre av oss på en skärmdump av det nionde utkastet efter timmar över några drycker.
Plötsligt flatade jag Photoshop-skikten och slog "Desaturate" förvandla den livfulla koppar-och-navy-designen till gråtoner. Till allas överraskning fungerade det.
Vid slutet av veckan hade vi en "varm" grå design med röda accenter. Vi visste att vi fick en vinnare när tidigare kunder komplimangerade dem på det nya utseendet och fler samtal kom in från potentiella kunder.
Analysera ditt färgschema med Photoshop "squint" -testet :
- Ta skärmdumpar på minst tre sidor från din webbplats. Öppna dem i Photoshop.
- Duplicera bakgrundslagret i varje skärmdump ( Lag → Duplikatlager , Kommando + J på Mac eller Kontroll + J på Windows).
- Applicera en Gaussisk suddighet på cirka 10 pixlar till de nya skikten.
- Gå till Bild → Justeringar → Posterize . Använd 8 till 12 nivåer eller gå till Filter → Pixellate → Mosaic . Använd 15 till 30 pixlar.
Detta visar vilka färger som verkligen dominerar. Ju mer dominerande färgerna desto hårdare är ordningen påtryckta i besökarens sinne.
När webbplatsens layout och organisation fungerar utan färg, är det dags att välja en palett. Men vilken? Och hur mycket att använda?
Justera dina nyanser
Färgen har tre egenskaper: nyans, mättnad och värde (ibland kallad ljushet).
Mättnad är hur rik en nyans är: neonfärger är mycket mättade, medan pasteller är mindre mättade.
Värdet anger hur ljus (dvs hur nära svart eller vitt) en färg är.
Färg hänvisar till vilken del av regnbågen en färg tillhör, till exempel röd eller grön; Det är den egendom som människor går upp på.
Inget dödar ett färgschema som kollar nyanser. En design kan ha hundra nyanser av en nyans, från pastell till neon, och ser fortfarande planerat ut. Men om nyanser blandas på fel sätt faller systemet ifrån varandra.
Ett sätt att undvika att bryta nyanser är att skilja dem med en tredje färg. En buffert av svart, grå eller vit är säkrast, eftersom gråskalan är nyansneutral: du kan samordna någon del av regnbågen med svart, vitt och grått.
En andra lösning är att använda nyanserna i olika proportioner . Om ett färgschema har sagt, violett och brun, så kan designen ha många nyanser av brunt med några ljusa violetta höjdpunkter.
Ett annat alternativ är att ändra värdena. Renblå och ljus cyan gör en så-så-kombination, men mörkblå (marinblå) och ljuscyan (himmelsblå) kontrast nog att ställa in varandra. Röd och violett kan vara annorlunda än att inte kollidera men nära nog att inte se avsiktligt. Ljusröd (rosa) och en mörk violett medför skillnad.
Tyvärr är det inte samma sak att undvika en dålig färgkombination som att välja en bra. Ett färgschema lyckas inte när du är nöjd, men när din publik trivs bekvämt.
Upptäck stora system
Var kommer stora färgscheman från? Med hundratals färger och tusentals kombinationer, hur bestämmer du?
Konstruktörer av små statiska webbplatser ska rita färg från innehållet . Det betyder vanligtvis foton.
Utformningen av en åtta sidors hemsida som jag nyligen byggde toppades med en utarbetad metallställ som satte sig mot en indigo-himmel. Genom att ställa in Photoshops eyedropper-verktyg till ett 5 × 5-genomsnitt, samplade jag de mörkaste och ljusaste delarna av himlen och gav sidofältet, länkarna, rubrikerna och sidfoten de få nyanser.
När kunden frågade hur vi kunde utforma en webbplats så bra och så snabbt, var vårt svar "Det här gör vi." Men färgen var redan där. Jag var tvungen att leta efter det.
Medan lagerbilder fungerar för snabba webbplatser, bör designers av större och mer dynamiska webbplatser söka inspiration från deras publik .
En utmärkt indikator på vilka färger som är attraktiva för din publik är deras dagliga kläder. Ta reda på vad dina besökare har på sig, och du vet vilka färger som gör dem bekväma. Om din webbplats handlar om, säg liga sport, ta reda på vad människor bär på spel, snarare än deras dag jobb.
Om du har turen att få bilder från din målgrupp, se dem en massa; du vill ha ett genomsnitt av publiken. Men om bilder inte är tillgängliga kan du handla.
Kläddesigners som kan hålla sig i affärer har utmärkt färgkänsla för alla humör och livsstil. Det behöver inte vara 5th Avenue haute couture. En Google-sökning på "campingbutiker", "baby kläder", "skidor och badbyxor" och "vardagsliv" kommer att avslöja många bra färgkombinationer.
Människor bär kläder enligt deras smak. Om du använder färger som de gillar, kommer de att känna sig mer bekväma på din webbplats.
Använd texturer
Små variationer i färgton, mättnad eller värde skapar texturer .
Monokromatiska strukturer (dvs texturer med bara en nyans) och mönster ger en subtil dimension till de flesta webbplatser utan att kollidera.
Enkel texturbakgrunder, i synnerhet, är lätta att bygga:
- Ta ett foto på en innervägg, eller något som är bar men känns grovt.
- Öppna den i Photoshop.
- Duplicera bakgrundslagret och kalla det "textur 1."
- Fyll bakgrundsskiktet med färger från ditt färgschema.
- Sätt "Texture 1" -lagrets blandningsläge till "" Soft Light "och dess opacitet till 30%.
- Prova det på din webbplats. Om det inte ser rätt ut, spela med lagrets opacitet.
Skiktets namn är avsiktligt. Du kan spela runt med mer än ett foto, men undvik att ge lagerna namn som "väggtextur" eller "pappersstruktur". Du vill fokusera på effekten på din webbplats, inte varifrån den kom ifrån.
Skapa ett bra system
Ett bra färgschema har vissa egenskaper. Tänk på det som en ram eller en uppsättning riktlinjer för att hålla en design konsekvent. Ordningen bör
- Lista två till fem nyanser som fungerar bra tillsammans,
- Beskriv hur långt en design kan variera från de nyanserna,
- Redogöra för nyanser av varje nyans,
- Arbeta bra mot svart och vitt.
Här är ett exempel:
Designern började genom att välja mestadels varma nyanser som kände sig rätt. Det fanns ingen logik, bara det vaga målet "höst" och hennes intuition.
I Photoshop gav två lager nyanser av svartvitt. Varje lagrets blandningsläge ställdes in på "Mjukt ljus". Rent svart var för mörkt för den högsta färgen, så det svarta lagrets opacitet justerades.
För att förena färgerna skapades ett nytt lager och fylldes med rent rött. Dess blandningsläge ställdes in på "Färg" och dess opacitet sänktes till ca 40%. (Obs! Lagret är mycket viktigt. Färgerna kommer att ändras om "färgtonen" lagret är inställt under de svartvita skikten.)
Detta gav designern 15 färger att välja mellan. Hon plockade fyra som hade en rad toner och nyanser. Här ställs färgerna mot vit.
Varianter är viktiga, så designern experimenterade. Vad skulle färgerna se ut mot svart? Vad händer om vi skuggar dem lite?
Vad händer om vi ändrat dem helt och hållet? Användning av bild → Justeringar → Färgtonning / Mättnad på "nyans" -lagret skapar en tydlig höstfärg, men färgerna koordineras fortfarande. Kanske kan den paletten användas för påsk.
Slutresultatet är ett färgschema: en referens som ger olika (men inte alltför olika) nyanser och en rad nyanser som fungerar bra tillsammans. Hämta provfilen.
Använd ramverket
Kommer imorgonens grafik, bilder och ikoner att fungera med dagens färgschema? Vilka bilder behöver en webbplats om sex dagar, sex veckor eller sex månader? Det är svårt att säga, men innehåll är en del av ditt färgschema .
Du kan lösa detta problem genom att antingen göra dina bilder följ färgschemat eller göra färgschemat följa dina bilder.
Att förstärka ditt färgschema, även med foton, är ett utmärkt sätt att uppnå ett enhetligt utseende på alla sidor .
Den enklaste lösningen är att hitta bilder som passar ditt schema. Kom ihåg att ett färgschema tillåter wiggle room: så länge en bilds stora nyanser passar, ska bilden fungera. Många stock foto webbplatser låter dig söka efter färg (vilket betyder färgton: vanligtvis primaries som röd, grön och blå).
Om en bild inte passar ditt färgschema, ge det en nyans:
- Öppna bilden i Photoshop.
- Skapa ett nytt lager. Ställ in blandningsläget till "Färg".
- Fyll det lagret med en av färgerna från paletten, helst den som passar bäst i bilden.
- Ange färgskiktets opacitet till 50%.
- Spela med opacitet tills du får en bra balans mellan bildens ursprungliga färg och din webbplatss färgpalett.
- Denna teknik fungerar för foton, illustrationer och ikoner, allting pixelbaserat. (Om du inte äger bilden, var noga med att få tillstånd innan du ändrar den. Du kan förbättra sitt utseende på din webbplats, men du tar fortfarande friheter med någon annans konst.)
Ser Professional
Inga uppsättningar av färger ser ut som "professionella" i sig själv. Snarare måste du följa en process för att nå en samordnad, planerad känsla.
Oavsett vad webbplatsen handlar om, kommer publiken att veta att det tar sig på allvar.
tips
- När du tror att du har ett bra färgschema, prova det i minst en vecka. Utvärdering av färg kräver intuition som bygger över tiden. Ge dig själv tid att fullt ut absorbera ordningens personlighet.
- När du tror att du har ett bra färgschema, låt det inte gå inaktuellt. Dina besökares smak, som dina, förändras över tiden. Gör en anteckning för att granska färgerna efter fyra månader. Då frågar, är de fortfarande lämpliga? Om inte, vad har ändrats? Vilka faktorer påverkar din anpassning?
- Använd starka färger sparsamt. Ett stänk av något iriserande kommer att dra besökare där, men om de ser det överallt, kommer de att vandra oändligt.
- Vissa tror att färgscheman har ett smalt sortiment. Tillåt lite utrymme för att ge dina mönster extra djup.
- Undvik rena primaries som röd, grön, blå och gul. Ge dem en snodd för riktig karaktär: röd, men lite violett, blå med en touch av grön, "varm" gul med en orange nyans.
- Se till att dina färger fungerar när de bleknade. Om du väljer rött, var medveten om att ljusrött kan vara feminint och mörkt rött kan se ut som rost eller blod. Gula körningar från blekt solljus till mörkt brunt. Mörkblå är mystisk och ljusblå är lugn eller elektrisk om du översätter den.
- Mac-användare, ställ in skärmen. Gå till "Systeminställningar" och klicka på "Universal Access." Ställ in din skärm till "Använd gråskala". Det här är också användbart när du är på humör för filmnummer.
- Oavsett hur aktiv du vill att din webbplats ska känna, använd en neutral bakgrund. Svart, vit och grå fungerar bra med nästan alla nyanser.
- Om du vill ha liten text (t.ex. 14 poäng eller mindre) för att matcha ett stort färgfält, gör texten några få nyanser mörkare än normalt. Detta kommer att kompensera ljusräknarna inuti tecknen.
- Använd fler nyanser med färre nyanser.
- Vad som ser bra ut är intuitivt. Men intuition är en strid mellan ditt ego, din publiks plågsamhet och myndigheten för de människor som finansierar projektet.
- Använd dämpad bakgrund för att göra innehållet skarpt ut:
Skriven uteslutande för WDD av Ben Gremillion . Han är en frilans webbdesigner som har lärt sig att en deadlines inflexibilitet är omvänd proportionell mot antalet funktioner som begärs i sista minuten.
Hur skapar du framgångsrika färgscheman? Vad fungerar och vad fungerar inte för dig?